{"v":0,"components":{"playground-block-editor":{"id":"playground-block-editor","name":"BlockEditor","path":"./stories/playground/index.story.jsx","stories":[{"id":"playground-block-editor--default","name":"Default","snippet":"const _default = () => {\n\treturn ;\n};"},{"id":"playground-block-editor--box","name":"Box","snippet":"const Box = () => {\n\treturn ;\n};"},{"id":"playground-block-editor--undo-redo","name":"Undo Redo","snippet":"const UndoRedo = () => {\n\treturn ;\n};"},{"id":"playground-block-editor--zoom-out","name":"Zoom Out","snippet":"const ZoomOut = ( props ) => {\n\treturn ;\n};"}],"import":"import { EditorBox, EditorFullPage, EditorWithUndoRedo, EditorZoomOut } from \"@wordpress/storybook\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n 7 | import EditorZoomOut from './zoom-out';\n 8 |\n> 9 | export default {\n | ^\n 10 | \ttitle: 'Playground/Block Editor',\n 11 | \tparameters: {\n 12 | \t\tsourceLink: 'storybook/stories/playground',\n\n./stories/playground/index.story.jsx:\n/**\n * Internal dependencies\n */\nimport EditorFullPage from './fullpage';\nimport EditorBox from './box';\nimport EditorWithUndoRedo from './with-undo-redo';\nimport EditorZoomOut from './zoom-out';\n\nexport default {\n\ttitle: 'Playground/Block Editor',\n\tparameters: {\n\t\tsourceLink: 'storybook/stories/playground',\n\t},\n};\n\nexport const _default = () => {\n\treturn ;\n};\n\n_default.parameters = {\n\tsourceLink: 'storybook/stories/playground/fullpage/index.jsx',\n};\n\nexport const Box = () => {\n\treturn ;\n};\n\nBox.parameters = {\n\tsourceLink: 'storybook/stories/playground/box/index.jsx',\n};\n\nexport const UndoRedo = () => {\n\treturn ;\n};\n\nUndoRedo.parameters = {\n\tsourceLink: 'storybook/stories/playground/with-undo-redo/index.jsx',\n};\n\nexport const ZoomOut = ( props ) => {\n\treturn ;\n};\n\nZoomOut.parameters = {\n\tsourceLink: 'storybook/stories/playground/zoom-out/index.jsx',\n};\nZoomOut.argTypes = {\n\tzoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } },\n};\n"}},"blockeditor-alignmenttoolbar":{"id":"blockeditor-alignmenttoolbar","name":"AlignmentToolbar","path":"../packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.jsx","stories":[{"id":"blockeditor-alignmenttoolbar--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { AlignmentToolbar } from \"@wordpress/block-editor\";","jsDocTags":{},"description":"The `AlignmentToolbar` component renders a dropdown menu that displays alignment options for the selected block in `Toolbar`.","reactDocgen":{"description":"","methods":[],"displayName":"AlignmentToolbar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/alignment-control/index.js","actualName":"AlignmentToolbar","exportName":"AlignmentToolbar"}},"blockeditor-alignmentcontrol":{"id":"blockeditor-alignmentcontrol","name":"AlignmentControl","path":"../packages/block-editor/src/components/alignment-control/stories/index.story.jsx","stories":[{"id":"blockeditor-alignmentcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { AlignmentControl } from \"@wordpress/block-editor\";","jsDocTags":{},"description":"The `AlignmentControl` component renders a dropdown menu that displays alignment options for the selected block. This component is mostly used for blocks that display text, such as Heading, Paragraph, Post Author, Post Comments, Verse, Quote, Post Title, etc... And the available alignment options are `left`, `center` or `right` alignment. If you want to use the alignment control in a toolbar, you should use the `AlignmentToolbar` component instead.","reactDocgen":{"description":"","methods":[],"displayName":"AlignmentControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/alignment-control/index.js","actualName":"AlignmentControl","exportName":"AlignmentControl"}},"blockeditor-blockalignmentmatrixcontrol":{"id":"blockeditor-blockalignmentmatrixcontrol","name":"BlockAlignmentMatrixControl","path":"../packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.jsx","stories":[{"id":"blockeditor-blockalignmentmatrixcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } } />\n );\n};"}],"import":"import { BlockAlignmentMatrixControl } from \"@wordpress/block-editor\";","jsDocTags":{"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md "],"example":[" ```jsx function Example() { return ( setAttributes( { contentPosition: nextPosition } ) } /> ); } ```"],"param":["{Object} props Component props.","{string} props.label Label for the control. Defaults to 'Change matrix alignment'.","{Function} props.onChange Function to execute upon change of matrix state.","{string} props.value Content alignment location. One of: 'center', 'center center', 'center left', 'center right', 'top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right'.","{boolean} props.isDisabled Whether the control should be disabled."],"return":["{Element} The BlockAlignmentMatrixControl component."]},"description":"The alignment matrix control allows users to quickly adjust inner block alignment.","reactDocgen":{"description":"The alignment matrix control allows users to quickly adjust inner block alignment.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md\n\n@example\n```jsx\nfunction Example() {\n return (\n \n \n setAttributes( { contentPosition: nextPosition } )\n }\n />\n \n );\n}\n```\n\n@param {Object} props Component props.\n@param {string} props.label Label for the control. Defaults to 'Change matrix alignment'.\n@param {Function} props.onChange Function to execute upon change of matrix state.\n@param {string} props.value Content alignment location. One of: 'center', 'center center',\n 'center left', 'center right', 'top center', 'top left',\n 'top right', 'bottom center', 'bottom left', 'bottom right'.\n@param {boolean} props.isDisabled Whether the control should be disabled.\n@return {Element} The BlockAlignmentMatrixControl component.","methods":[],"displayName":"BlockAlignmentMatrixControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/block-alignment-matrix-control/index.js","actualName":"BlockAlignmentMatrixControl","exportName":"default"}},"blockeditor-blockdraggable":{"id":"blockeditor-blockdraggable","name":"BlockDraggable","path":"../packages/block-editor/src/components/block-draggable/stories/index.story.jsx","stories":[{"id":"blockeditor-blockdraggable--default","name":"Default","snippet":"const _default = () => {\n\t// Create a wrapper box for the absolutely-positioned child component.\n\tconst wrapperStyle = { margin: '24px 0', position: 'relative' };\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};"}],"import":"import { BlockDraggableChip } from \"@wordpress/block-editor\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n 4 | import BlockDraggableChip from '../draggable-chip';\n 5 |\n> 6 | export default { title: 'BlockEditor/BlockDraggable' };\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 7 |\n 8 | export const _default = () => {\n 9 | \t// Create a wrapper box for the absolutely-positioned child component.\n\n../packages/block-editor/src/components/block-draggable/stories/index.story.jsx:\n/**\n * Internal dependencies\n */\nimport BlockDraggableChip from '../draggable-chip';\n\nexport default { title: 'BlockEditor/BlockDraggable' };\n\nexport const _default = () => {\n\t// Create a wrapper box for the absolutely-positioned child component.\n\tconst wrapperStyle = { margin: '24px 0', position: 'relative' };\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n"}},"blockeditor-headingleveldropdown":{"id":"blockeditor-headingleveldropdown","name":"HeadingLevelDropdown","path":"../packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.jsx","stories":[{"id":"blockeditor-headingleveldropdown--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( args.value );\n\n return (\n {\n setValue( ...changeArgs );\n onChange( ...changeArgs );\n } } />\n );\n};"}],"import":"import { HeadingLevelDropdown } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{WPHeadingLevelDropdownProps} props Component props."],"return":["{ComponentType} The toolbar."]},"description":"Dropdown for selecting a heading level (1 through 6) or paragraph (0).","reactDocgen":{"description":"Dropdown for selecting a heading level (1 through 6) or paragraph (0).\n\n@param {WPHeadingLevelDropdownProps} props Component props.\n\n@return {ComponentType} The toolbar.","methods":[],"displayName":"HeadingLevelDropdown","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/block-heading-level-dropdown/index.js","actualName":"HeadingLevelDropdown","exportName":"default","props":{"options":{"defaultValue":{"value":"[ 1, 2, 3, 4, 5, 6 ]","computed":false},"required":false}}}},"blockeditor-blockmover":{"id":"blockeditor-blockmover","name":"BlockMover","path":"../packages/block-editor/src/components/block-mover/stories/index.story.jsx","stories":[{"id":"blockeditor-blockmover--default","name":"Default","snippet":"const Default = () => ;"},{"id":"blockeditor-blockmover--horizontal","name":"Horizontal","snippet":"const Horizontal = () => ;","description":"This story shows the block mover with horizontal orientation. It is necessary to render the blocks to update the block settings in the state."},{"id":"blockeditor-blockmover--hide-drag-handle","name":"Hide Drag Handle","snippet":"const HideDragHandle = () => ;","description":"You can hide the drag handle by `hideDragHandle` attribute."}],"import":"import { BlockMover, ExperimentalBlockEditorProvider } from \"@wordpress/block-editor\";\nimport { Toolbar } from \"@wordpress/components\";","jsDocTags":{},"description":"BlockMover component allows moving blocks inside the editor using up and down buttons.","reactDocgen":{"description":"","methods":[],"displayName":"BlockMover","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/block-mover/index.js","actualName":"BlockMover","exportName":"default"}},"blockeditor-blockpatternslist":{"id":"blockeditor-blockpatternslist","name":"BlockPatternsList","path":"../packages/block-editor/src/components/block-patterns-list/stories/index.story.jsx","stories":[{"id":"blockeditor-blockpatternslist--default","name":"Default","snippet":"const Default = function Template( props ) {\n return (\n \n \n \n );\n};"}],"import":"import { BlockPatternsList, ExperimentalBlockEditorProvider } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/block-patterns-list/index.js","actualName":"","exportName":"default","props":{"label":{"defaultValue":{"value":"__( 'Block patterns' )","computed":true},"required":false}}}},"blockeditor-blocktitle":{"id":"blockeditor-blocktitle","name":"BlockTitle","path":"../packages/block-editor/src/components/block-title/stories/index.story.jsx","stories":[{"id":"blockeditor-blocktitle--default","name":"Default","snippet":"const Default = () => ;"}],"import":"import { BlockTitle, ExperimentalBlockEditorProvider } from \"@wordpress/block-editor\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/block-title/index.js\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n/**\n * Internal dependencies\n */\n\nimport useBlockDisplayTitle from './use-block-display-title';\n\n/**\n * Renders the block's configured title as a string, or empty if the title\n * cannot be determined.\n *\n * @example\n *\n * ```jsx\n * \n * ```\n *\n * @param {Object} props\n * @param {string} props.clientId Client ID of block.\n * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.\n * @param {string|undefined} props.context The context to pass to `getBlockLabel`.\n *\n * @return {React.JSX.Element} Block title.\n */\nexport default function BlockTitle( { clientId, maximumLength, context } ) {\n\treturn useBlockDisplayTitle( { clientId, maximumLength, context } );\n}\n"}},"blockeditor-borderradiuscontrol":{"id":"blockeditor-borderradiuscontrol","name":"BorderRadiusControl","path":"../packages/block-editor/src/components/border-radius-control/stories/index.story.jsx","stories":[{"id":"blockeditor-borderradiuscontrol--default","name":"Default","snippet":"const Default = () => {\n const [ values, setValues ] = useState( args.values );\n\n return (\n {\n setValues( ...changeArgs );\n onChange( ...changeArgs );\n } } />\n );\n};"}],"import":"import { BorderRadiusControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{Function} props.onChange Callback to handle onChange.","{Object} props.values Border radius values.","{Object} props.presets Border radius presets."],"return":["{Element} Custom border radius control."]},"description":"Control to display border radius options.","reactDocgen":{"description":"Control to display border radius options.\n\n@param {Object} props Component props.\n@param {Function} props.onChange Callback to handle onChange.\n@param {Object} props.values Border radius values.\n@param {Object} props.presets Border radius presets.\n\n@return {Element} Custom border radius control.","methods":[],"displayName":"BorderRadiusControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/border-radius-control/index.js","actualName":"BorderRadiusControl","exportName":"default"}},"blockeditor-colorpalettecontrol":{"id":"blockeditor-colorpalettecontrol","name":"ColorPaletteControl","path":"../packages/block-editor/src/components/color-palette/stories/control.story.jsx","stories":[{"id":"blockeditor-colorpalettecontrol--default","name":"Default","snippet":"const Default = () => {\n const [ color, setColor ] = useState( args.value );\n\n return (\n
\n {\n setColor( newColor );\n onChange( newColor );\n } } />\n
\n );\n};"}],"import":"import { ColorPaletteControl } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ColorPaletteControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/color-palette/control.js","actualName":"ColorPaletteControl","exportName":"default"}},"blockeditor-dateformatpicker":{"id":"blockeditor-dateformatpicker","name":"DateFormatPicker","path":"../packages/block-editor/src/components/date-format-picker/stories/index.story.jsx","stories":[{"id":"blockeditor-dateformatpicker--default","name":"Default","snippet":"const Default = () => {\n const [ format, setFormat ] = useState();\n\n return (\n {\n onChange( ...changeArgs );\n setFormat( ...changeArgs );\n } }\n format={ format } />\n );\n};"}],"import":"import { DateFormatPicker } from \"@wordpress/block-editor\";","jsDocTags":{"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md "],"param":["{Object} props ","{string|null} props.format The selected date format. If `null`, _Default_ is selected.","{string} props.defaultFormat The date format that will be used if the user selects 'Default'.","{Function} props.onChange Called when a selection is made. If `null`, _Default_ is selected."]},"description":"The `DateFormatPicker` component renders controls that let the user choose a _date format_. That is, how they want their dates to be formatted.","reactDocgen":{"description":"The `DateFormatPicker` component renders controls that let the user choose a\n_date format_. That is, how they want their dates to be formatted.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n\n@param {Object} props\n@param {string|null} props.format The selected date format. If `null`, _Default_ is selected.\n@param {string} props.defaultFormat The date format that will be used if the user selects 'Default'.\n@param {Function} props.onChange Called when a selection is made. If `null`, _Default_ is selected.","methods":[],"displayName":"DateFormatPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/date-format-picker/index.js","actualName":"DateFormatPicker","exportName":"default"}},"blockeditor-dimensioncontrol":{"id":"blockeditor-dimensioncontrol","name":"DimensionControl","path":"../packages/block-editor/src/components/dimension-control/stories/index.story.jsx","stories":[{"id":"blockeditor-dimensioncontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-custom-label","name":"With Custom Label","snippet":"const WithCustomLabel = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-width-label","name":"With Width Label","snippet":"const WithWidthLabel = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-min-height-label","name":"With Min Height Label","snippet":"const WithMinHeightLabel = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-presets","name":"With Presets","snippet":"const WithPresets = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-initial-value","name":"With Initial Value","snippet":"const WithInitialValue = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-dimensioncontrol--with-preset-value","name":"With Preset Value","snippet":"const WithPresetValue = ( props ) => {\n\tconst [ value, setValue ] = useState( 'var:preset|dimension|medium' );\n\treturn (\n\t\t\n\t);\n};"}],"import":"import { DimensionControl } from \"@wordpress/block-editor\";","jsDocTags":{"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md "],"param":["{Object} props ","{?string} props.label A label for the control.","{( value: string ) => void} props.onChange Called when the dimension value changes.","{string} props.value The current dimension value.","{?Object} props.dimensionSizes Optional dimension size presets. Falls back to settings from the store."],"return":["{Component} The component to be rendered."]},"description":"DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.","reactDocgen":{"description":"DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md\n\n@param {Object} props\n@param {?string} props.label A label for the control.\n@param {( value: string ) => void } props.onChange Called when the dimension value changes.\n@param {string} props.value The current dimension value.\n@param {?Object} props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.\n\n@return {Component} The component to be rendered.","methods":[],"displayName":"DimensionControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/dimension-control/index.js","actualName":"DimensionControl","exportName":"default","props":{"label":{"defaultValue":{"value":"__( 'Dimension' )","computed":true},"required":false}}}},"blockeditor-dimensionstool-aspectratiotool":{"id":"blockeditor-dimensionstool-aspectratiotool","name":"AspectRatioTool","path":"../packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.jsx","stories":[{"id":"blockeditor-dimensionstool-aspectratiotool--default","name":"Default","snippet":"const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {\n\tconst [ value, setValue ] = useState( undefined );\n\tconst resetAll = () => {\n\t\tsetValue( undefined );\n\t\tonChangeProp( undefined );\n\t};\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tsetValue( nextValue );\n\t\t\t\t\t\tonChangeProp( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\n\t\t\n\t);\n};"}],"import":"import { AspectRatioTool } from \"@wordpress/block-editor\";\nimport { Panel, __experimentalToolsPanel as ToolsPanel } from \"@wordpress/components\";","jsDocTags":{"typedef":["{Object} AspectRatioToolProps "],"property":["{string} panelId ID of the panel this tool is associated with.","{string} value Current aspect ratio value.","{AspectRatioToolPropsOnChange} onChange Callback to update the aspect ratio value.","{SelectControlProps[]} options Aspect ratio options.","{string} defaultValue Default aspect ratio value.","{boolean} isShownByDefault Whether the tool is shown by default."]},"description":"","reactDocgen":{"description":"@typedef {Object} AspectRatioToolProps\n@property {string} [panelId] ID of the panel this tool is associated with.\n@property {string} [value] Current aspect ratio value.\n@property {AspectRatioToolPropsOnChange} [onChange] Callback to update the aspect ratio value.\n@property {SelectControlProps[]} [options] Aspect ratio options.\n@property {string} [defaultValue] Default aspect ratio value.\n@property {boolean} [isShownByDefault] Whether the tool is shown by default.","methods":[],"displayName":"AspectRatioTool","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js","actualName":"AspectRatioTool","exportName":"default","props":{"onChange":{"defaultValue":{"value":"() => {}","computed":false},"required":false},"defaultValue":{"defaultValue":{"value":"'auto'","computed":false},"required":false},"isShownByDefault":{"defaultValue":{"value":"true","computed":false},"required":false}}}},"blockeditor-dimensionstool-dimensionstool":{"id":"blockeditor-dimensionstool-dimensionstool","name":"DimensionsTool","path":"../packages/block-editor/src/components/dimensions-tool/stories/index.story.jsx","stories":[{"id":"blockeditor-dimensionstool-dimensionstool--default","name":"Default","snippet":"const Default = ( { panelId, onChange, ...props } ) => {\n\tconst [ value, setValue ] = useState( EMPTY_OBJECT );\n\tconst resetAll = () => {\n\t\tsetValue( EMPTY_OBJECT );\n\t\tonChange( EMPTY_OBJECT );\n\t};\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tsetValue( nextValue );\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\n\t\t\n\t);\n};"}],"import":"import { DimensionsTool } from \"@wordpress/block-editor\";\nimport { Panel, __experimentalToolsPanel as ToolsPanel } from \"@wordpress/components\";","jsDocTags":{"param":["{DimensionsControlsProps} props The component props."],"return":["{Element} The dimensions controls."]},"description":"Component that renders controls to edit the dimensions of an image or container.","reactDocgen":{"description":"Component that renders controls to edit the dimensions of an image or container.\n\n@param {DimensionsControlsProps} props The component props.\n\n@return {Element} The dimensions controls.","methods":[],"displayName":"DimensionsTool","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/dimensions-tool/index.js","actualName":"DimensionsTool","exportName":"default","props":{"value":{"defaultValue":{"value":"{}","computed":false},"required":false},"onChange":{"defaultValue":{"value":"() => {}","computed":false},"required":false},"defaultAspectRatio":{"defaultValue":{"value":"'auto'","computed":false},"required":false},"defaultScale":{"defaultValue":{"value":"'fill'","computed":false},"required":false},"tools":{"defaultValue":{"value":"[ 'aspectRatio', 'widthHeight', 'scale' ]","computed":false},"required":false}}}},"blockeditor-dimensionstool-scaletool":{"id":"blockeditor-dimensionstool-scaletool","name":"ScaleTool","path":"../packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.jsx","stories":[{"id":"blockeditor-dimensionstool-scaletool--default","name":"Default","snippet":"const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {\n\tconst [ value, setValue ] = useState( undefined );\n\tconst resetAll = () => {\n\t\tsetValue( undefined );\n\t\tonChangeProp( undefined );\n\t};\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tsetValue( nextValue );\n\t\t\t\t\t\tonChangeProp( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\n\t\t\n\t);\n};"}],"import":"import { Panel, __experimentalToolsPanel as ToolsPanel } from \"@wordpress/components\";\nimport { ScaleTool } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{ScaleToolProps} props "],"return":["{React.ReactElement} The scale tool."]},"description":"A tool to select the CSS object-fit property for the image.","reactDocgen":{"description":"A tool to select the CSS object-fit property for the image.\n\n@param {ScaleToolProps} props\n\n@return {React.ReactElement} The scale tool.","methods":[],"displayName":"ScaleTool","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/dimensions-tool/scale-tool.js","actualName":"ScaleTool","exportName":"default","props":{"options":{"defaultValue":{"value":"[\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n]","computed":false},"required":false},"defaultValue":{"defaultValue":{"value":"DEFAULT_SCALE_OPTIONS[ 0 ].value","computed":true},"required":false},"isShownByDefault":{"defaultValue":{"value":"true","computed":false},"required":false}}}},"blockeditor-dimensionstool-widthheighttool":{"id":"blockeditor-dimensionstool-widthheighttool","name":"WidthHeightTool","path":"../packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.jsx","stories":[{"id":"blockeditor-dimensionstool-widthheighttool--default","name":"Default","snippet":"const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {\n\tconst [ value, setValue ] = useState( EMPTY_OBJECT );\n\tconst resetAll = () => {\n\t\tsetValue( EMPTY_OBJECT );\n\t\tonChangeProp( EMPTY_OBJECT );\n\t};\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tsetValue( nextValue );\n\t\t\t\t\t\tonChangeProp( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\n\t\t\n\t);\n};"}],"import":"import { Panel, __experimentalToolsPanel as ToolsPanel } from \"@wordpress/components\";\nimport { WidthHeightTool } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{WidthHeightToolProps} props The component props."],"return":["{React.ReactElement} The width and height tool."]},"description":"Component that renders controls to edit the dimensions of an image or container.","reactDocgen":{"description":"Component that renders controls to edit the dimensions of an image or container.\n\n@param {WidthHeightToolProps} props The component props.\n\n@return {React.ReactElement} The width and height tool.","methods":[],"displayName":"WidthHeightTool","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/dimensions-tool/width-height-tool.js","actualName":"WidthHeightTool","exportName":"default","props":{"value":{"defaultValue":{"value":"{}","computed":false},"required":false},"onChange":{"defaultValue":{"value":"() => {}","computed":false},"required":false},"isShownByDefault":{"defaultValue":{"value":"true","computed":false},"required":false}}}},"blockeditor-fontfamilycontrol":{"id":"blockeditor-fontfamilycontrol","name":"FontFamilyControl","path":"../packages/block-editor/src/components/font-family/stories/index.story.jsx","stories":[{"id":"blockeditor-fontfamilycontrol--default","name":"Default","snippet":"const Default = function Template( props ) {\n const [ value, setValue ] = useState();\n return (\n \n );\n};"}],"import":"import { FontFamilyControl } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FontFamilyControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/font-family/index.js","actualName":"FontFamilyControl","exportName":"default","props":{"__next40pxDefaultSize":{"defaultValue":{"value":"false","computed":false},"required":false},"value":{"defaultValue":{"value":"''","computed":false},"required":false}}}},"blockeditor-heightcontrol":{"id":"blockeditor-heightcontrol","name":"HeightControl","path":"../packages/block-editor/src/components/height-control/stories/index.story.jsx","stories":[{"id":"blockeditor-heightcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn ;\n};"}],"import":"import { HeightControl } from \"@wordpress/block-editor\";","jsDocTags":{"deprecated":["Use DimensionControl instead."],"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md "],"param":["{Object} props ","{?string} props.label A label for the control.","{( value: string ) => void} props.onChange Called when the height changes.","{string} props.value The current height value."],"return":["{Component} The component to be rendered."]},"description":"HeightControl renders a linked unit control and range control for adjusting the height of a block.","reactDocgen":{"description":"HeightControl renders a linked unit control and range control for adjusting the height of a block.\n\n@deprecated Use DimensionControl instead.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md\n\n@param {Object} props\n@param {?string} props.label A label for the control.\n@param {( value: string ) => void } props.onChange Called when the height changes.\n@param {string} props.value The current height value.\n\n@return {Component} The component to be rendered.","methods":[],"displayName":"HeightControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/height-control/index.js","actualName":"HeightControl","exportName":"default","props":{"label":{"defaultValue":{"value":"__( 'Height' )","computed":true},"required":false}}}},"blockeditor-inserter":{"id":"blockeditor-inserter","name":"Inserter","path":"../packages/block-editor/src/components/inserter/stories/index.story.jsx","stories":[{"id":"blockeditor-inserter--library-without-patterns","name":"Library Without Patterns","snippet":"const LibraryWithoutPatterns = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};"},{"id":"blockeditor-inserter--library-with-patterns","name":"Library With Patterns","snippet":"const LibraryWithPatterns = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};"},{"id":"blockeditor-inserter--library-with-patterns-and-reusable-blocks","name":"Library With Patterns And Reusable Blocks","snippet":"const LibraryWithPatternsAndReusableBlocks = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};"},{"id":"blockeditor-inserter--full-inserter","name":"Full Inserter","snippet":"const FullInserter = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};"},{"id":"blockeditor-inserter--quick-inserter","name":"Quick Inserter","snippet":"const QuickInserter = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};"}],"import":"import { BlockLibrary, ExperimentalBlockEditorProvider, Inserter } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"onToggle","docblock":null,"modifiers":[],"params":[{"name":"isOpen","optional":false,"type":null}],"returns":null},{"name":"renderToggle","docblock":"Render callback to display Dropdown toggle element.\n\n@param {Object} options\n@param {Function} options.onToggle Callback to invoke when toggle is\n pressed.\n@param {boolean} options.isOpen Whether dropdown is currently open.\n\n@return {Element} Dropdown toggle element.","modifiers":[],"params":[{"name":"{ onToggle, isOpen }","optional":false}],"returns":{"description":"Dropdown toggle element.","type":{"name":"Element"}},"description":"Render callback to display Dropdown toggle element."},{"name":"renderContent","docblock":"Render callback to display Dropdown content element.\n\n@param {Object} options\n@param {Function} options.onClose Callback to invoke when dropdown is\n closed.\n\n@return {Element} Dropdown content element.","modifiers":[],"params":[{"name":"{ onClose }","optional":false}],"returns":{"description":"Dropdown content element.","type":{"name":"Element"}},"description":"Render callback to display Dropdown content element."}],"displayName":"Inserter","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/inserter/index.js","actualName":"Inserter"}},"blockeditor-letterspacingcontrol":{"id":"blockeditor-letterspacingcontrol","name":"LetterSpacingControl","path":"../packages/block-editor/src/components/letter-spacing-control/stories/index.story.jsx","stories":[{"id":"blockeditor-letterspacingcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n {\n onChange( newValue );\n setValue( newValue );\n } } />\n );\n};"}],"import":"import { LetterSpacingControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{boolean} props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.","{string} props.value Currently selected letter-spacing.","{Function} props.onChange Handles change in letter-spacing selection.","{string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value."],"return":["{Element} Letter-spacing control."]},"description":"Control for letter-spacing.","reactDocgen":{"description":"Control for letter-spacing.\n\n@param {Object} props Component props.\n@param {boolean} props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.\n@param {string} props.value Currently selected letter-spacing.\n@param {Function} props.onChange Handles change in letter-spacing selection.\n@param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.\n\n@return {Element} Letter-spacing control.","methods":[],"displayName":"LetterSpacingControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/letter-spacing-control/index.js","actualName":"LetterSpacingControl","exportName":"default","props":{"__next40pxDefaultSize":{"defaultValue":{"value":"false","computed":false},"required":false},"__unstableInputWidth":{"defaultValue":{"value":"'60px'","computed":false},"required":false}}}},"blockeditor-lineheightcontrol":{"id":"blockeditor-lineheightcontrol","name":"LineHeightControl","path":"../packages/block-editor/src/components/line-height-control/stories/index.story.jsx","stories":[{"id":"blockeditor-lineheightcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"},{"id":"blockeditor-lineheightcontrol--unconstrained-width","name":"Unconstrained Width","snippet":"const UnconstrainedWidth = ( props ) => {\n\tconst [ value, setValue ] = useState();\n\treturn (\n\t\t\n\t);\n};"}],"import":"import { LineHeightControl } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"LineHeightControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/line-height-control/index.js","actualName":"LineHeightControl","exportName":"default","props":{"__next40pxDefaultSize":{"defaultValue":{"value":"false","computed":false},"required":false},"__unstableInputWidth":{"defaultValue":{"value":"'60px'","computed":false},"required":false}}}},"blockeditor-plaintext":{"id":"blockeditor-plaintext","name":"PlainText","path":"../packages/block-editor/src/components/plain-text/stories/index.story.jsx","stories":[{"id":"blockeditor-plaintext--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { PlainText } from \"@wordpress/block-editor\";","jsDocTags":{"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md "],"example":[" ```jsx import { registerBlockType } from '@wordpress/blocks'; import { PlainText } from '@wordpress/block-editor'; registerBlockType( 'my-plugin/example-block', { // ... attributes: { content: { type: 'string', }, }, edit( { className, attributes, setAttributes } ) { return ( setAttributes( { content } ) } /> ); }, } ); ````"],"param":["{Object} props Component props.","{string} props.value String value of the textarea.","{Function} props.onChange Function called when the text value changes.","{Object} props.ref The component forwards the `ref` property to the `TextareaAutosize` component."],"return":["{Element} Plain text component"]},"description":"Render an auto-growing textarea allow users to fill any textual content.","reactDocgen":{"description":"Render an auto-growing textarea allow users to fill any textual content.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md\n\n@example\n```jsx\nimport { registerBlockType } from '@wordpress/blocks';\nimport { PlainText } from '@wordpress/block-editor';\n\nregisterBlockType( 'my-plugin/example-block', {\n // ...\n\n attributes: {\n content: {\n type: 'string',\n },\n },\n\n edit( { className, attributes, setAttributes } ) {\n return (\n <PlainText\n className={ className }\n value={ attributes.content }\n onChange={ ( content ) => setAttributes( { content } ) }\n />\n );\n },\n} );\n````\n\n@param {Object} props Component props.\n@param {string} props.value String value of the textarea.\n@param {Function} props.onChange Function called when the text value changes.\n@param {Object} [props.ref] The component forwards the `ref` property to the `TextareaAutosize` component.\n@return {Element} Plain text component","methods":[],"displayName":"PlainText","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/plain-text/index.js","actualName":"PlainText","exportName":"default"}},"blockeditor-resolutioncontrol":{"id":"blockeditor-resolutioncontrol","name":"ResolutionTool","path":"../packages/block-editor/src/components/resolution-tool/stories/index.story.jsx","stories":[{"id":"blockeditor-resolutioncontrol--default","name":"Default","snippet":"const Default = ( {\n\tlabel,\n\tpanelId,\n\tonChange: onChangeProp,\n\t...props\n} ) => {\n\tconst [ attributes, setAttributes ] = useReducer(\n\t\t( prevState, nextState ) => ( { ...prevState, ...nextState } ),\n\t\t{}\n\t);\n\tconst { resolution } = attributes;\n\tconst resetAll = ( resetFilters = [] ) => {\n\t\tlet newAttributes = {};\n\n\t\tresetFilters.forEach( ( resetFilter ) => {\n\t\t\tnewAttributes = {\n\t\t\t\t...newAttributes,\n\t\t\t\t...resetFilter( newAttributes ),\n\t\t\t};\n\t\t} );\n\n\t\tsetAttributes( newAttributes );\n\t\tonChangeProp( undefined );\n\t};\n\treturn (\n\t\t<Panel>\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ label }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tresetAll={ resetAll }\n\t\t\t>\n\t\t\t\t<ResolutionTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tsetAttributes( { resolution: newValue } );\n\t\t\t\t\t\tonChangeProp( newValue );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ resolution }\n\t\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\t\tresolution: undefined,\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</ToolsPanel>\n\t\t</Panel>\n\t);\n};"}],"import":"import { Panel, __experimentalToolsPanel as ToolsPanel } from \"@wordpress/components\";\nimport { ResolutionTool } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ResolutionTool","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/resolution-tool/index.js","actualName":"ResolutionTool","exportName":"default","props":{"options":{"defaultValue":{"value":"[\n\t{\n\t\tlabel: _x( 'Thumbnail', 'Image size option for resolution control' ),\n\t\tvalue: 'thumbnail',\n\t},\n\t{\n\t\tlabel: _x( 'Medium', 'Image size option for resolution control' ),\n\t\tvalue: 'medium',\n\t},\n\t{\n\t\tlabel: _x( 'Large', 'Image size option for resolution control' ),\n\t\tvalue: 'large',\n\t},\n\t{\n\t\tlabel: _x( 'Full Size', 'Image size option for resolution control' ),\n\t\tvalue: 'full',\n\t},\n]","computed":false},"required":false},"defaultValue":{"defaultValue":{"value":"DEFAULT_SIZE_OPTIONS[ 0 ].value","computed":true},"required":false},"isShownByDefault":{"defaultValue":{"value":"true","computed":false},"required":false}}}},"blockeditor-tabbedsidebar":{"id":"blockeditor-tabbedsidebar","name":"TabbedSidebar","path":"../packages/block-editor/src/components/tabbed-sidebar/stories/index.story.jsx","stories":[{"id":"blockeditor-tabbedsidebar--default","name":"Default","snippet":"const Default = () => {\n const [ selectedTab, setSelectedTab ] = useState();\n\n return (\n <TabbedSidebar\n tabs={DEMO_TABS}\n defaultTabId=\"tab1\"\n closeButtonLabel=\"Close Sidebar\"\n selectedTab={ selectedTab }\n onSelect={ ( ...changeArgs ) => {\n onSelect( ...changeArgs );\n setSelectedTab( ...changeArgs );\n } }\n onClose={ onClose } />\n );\n};"}],"import":"import { TabbedSidebar } from \"@wordpress/block-editor\";","jsDocTags":{"see":["https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/tabbed-sidebar/README.md "],"example":[" ```jsx function MyTabbedSidebar() { return ( <TabbedSidebar tabs={ [ { name: 'tab1', title: 'Settings', panel: <PanelContents />, } ] } onClose={ () => {} } onSelect={ () => {} } defaultTabId=\"tab1\" selectedTab=\"tab1\" closeButtonLabel=\"Close sidebar\" /> ); } ```"],"param":["{Object} props Component props.","{string} props.defaultTabId The ID of the tab to be selected by default when the component renders.","{Function} props.onClose Function called when the close button is clicked.","{Function} props.onSelect Function called when a tab is selected. Receives the selected tab's ID as an argument.","{string} props.selectedTab The ID of the currently selected tab.","{Array} props.tabs Array of tab objects. Each tab should have: name (string), title (string), panel (React.Node), and optionally panelRef (React.Ref).","{string} props.closeButtonLabel Accessibility label for the close button.","{Object} ref Forward ref to the tabs list element."],"return":["{Element} The tabbed sidebar component."]},"description":"A component that creates a tabbed sidebar with a close button.","reactDocgen":{"description":"A component that creates a tabbed sidebar with a close button.\n\n@see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/tabbed-sidebar/README.md\n\n@example\n```jsx\nfunction MyTabbedSidebar() {\n return (\n <TabbedSidebar\n tabs={ [\n {\n name: 'tab1',\n title: 'Settings',\n panel: <PanelContents />,\n }\n ] }\n onClose={ () => {} }\n onSelect={ () => {} }\n defaultTabId=\"tab1\"\n selectedTab=\"tab1\"\n closeButtonLabel=\"Close sidebar\"\n />\n );\n}\n```\n\n@param {Object} props Component props.\n@param {string} [props.defaultTabId] The ID of the tab to be selected by default when the component renders.\n@param {Function} props.onClose Function called when the close button is clicked.\n@param {Function} props.onSelect Function called when a tab is selected. Receives the selected tab's ID as an argument.\n@param {string} props.selectedTab The ID of the currently selected tab.\n@param {Array} props.tabs Array of tab objects. Each tab should have: name (string), title (string),\n panel (React.Node), and optionally panelRef (React.Ref).\n@param {string} props.closeButtonLabel Accessibility label for the close button.\n@param {Object} ref Forward ref to the tabs list element.\n@return {Element} The tabbed sidebar component.","methods":[],"definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/tabbed-sidebar/index.js","actualName":"","exportName":"default"}},"blockeditor-textalignmentcontrol":{"id":"blockeditor-textalignmentcontrol","name":"TextAlignmentControl","path":"../packages/block-editor/src/components/text-alignment-control/stories/index.story.jsx","stories":[{"id":"blockeditor-textalignmentcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n <TextAlignmentControl\n onChange={ ( ...changeArgs ) => {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { TextAlignmentControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{string} props.className Class name to add to the control.","{string} props.value Currently selected text alignment.","{Function} props.onChange Handles change in text alignment selection.","{string[]} props.options Array of text alignment options to display."],"return":["{Element} Text alignment control."]},"description":"Control to facilitate text alignment selections.","reactDocgen":{"description":"Control to facilitate text alignment selections.\n\n@param {Object} props Component props.\n@param {string} props.className Class name to add to the control.\n@param {string} props.value Currently selected text alignment.\n@param {Function} props.onChange Handles change in text alignment selection.\n@param {string[]} props.options Array of text alignment options to display.\n\n@return {Element} Text alignment control.","methods":[],"displayName":"TextAlignmentControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/text-alignment-control/index.js","actualName":"TextAlignmentControl","exportName":"default","props":{"options":{"defaultValue":{"value":"[ 'left', 'center', 'right' ]","computed":false},"required":false}}}},"blockeditor-textdecorationcontrol":{"id":"blockeditor-textdecorationcontrol","name":"TextDecorationControl","path":"../packages/block-editor/src/components/text-decoration-control/stories/index.story.jsx","stories":[{"id":"blockeditor-textdecorationcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n <TextDecorationControl\n onChange={ ( ...changeArgs ) => {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { TextDecorationControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{string} props.value Currently selected text decoration.","{Function} props.onChange Handles change in text decoration selection.","{string} props.className Additional class name to apply."],"return":["{Element} Text decoration control."]},"description":"Control to facilitate text decoration selections.","reactDocgen":{"description":"Control to facilitate text decoration selections.\n\n@param {Object} props Component props.\n@param {string} props.value Currently selected text decoration.\n@param {Function} props.onChange Handles change in text decoration selection.\n@param {string} props.className Additional class name to apply.\n\n@return {Element} Text decoration control.","methods":[],"displayName":"TextDecorationControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/text-decoration-control/index.js","actualName":"TextDecorationControl","exportName":"default"}},"blockeditor-texttransformcontrol":{"id":"blockeditor-texttransformcontrol","name":"TextTransformControl","path":"../packages/block-editor/src/components/text-transform-control/stories/index.story.jsx","stories":[{"id":"blockeditor-texttransformcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n <TextTransformControl\n onChange={ ( ...changeArgs ) => {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { TextTransformControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{string} props.className Class name to add to the control.","{string} props.value Currently selected text transform.","{Function} props.onChange Handles change in text transform selection."],"return":["{Element} Text transform control."]},"description":"Control to facilitate text transform selections.","reactDocgen":{"description":"Control to facilitate text transform selections.\n\n@param {Object} props Component props.\n@param {string} props.className Class name to add to the control.\n@param {string} props.value Currently selected text transform.\n@param {Function} props.onChange Handles change in text transform selection.\n\n@return {Element} Text transform control.","methods":[],"displayName":"TextTransformControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/text-transform-control/index.js","actualName":"TextTransformControl","exportName":"default"}},"blockeditor-unitcontrol":{"id":"blockeditor-unitcontrol","name":"UnitControl","path":"../packages/block-editor/src/components/unit-control/stories/index.story.jsx","stories":[{"id":"blockeditor-unitcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n <UnitControl\n label=\"Label\"\n value={ value }\n onChange={ ( ...changeArgs ) => {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } } />\n );\n};"}],"import":"import { UnitControl } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnitControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/unit-control/index.js","actualName":"UnitControl","exportName":"default"}},"blockeditor-urlpopover":{"id":"blockeditor-urlpopover","name":"URLPopover","path":"../packages/block-editor/src/components/url-popover/stories/index.story.jsx","stories":[{"id":"blockeditor-urlpopover--default","name":"Default","snippet":"const _default = () => {\n\treturn <TestURLPopover />;\n};"}],"import":"import { Button, ToggleControl } from \"@wordpress/components\";\nimport { URLPopover } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"LinkEditor","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tautocompleteRef,\n\tclassName,\n\tonChangeInputValue,\n\tvalue,\n\t...props\n}","optional":false,"type":null}],"returns":null},{"name":"LinkViewer","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tclassName,\n\tlinkClassName,\n\tonEditLinkClick,\n\turl,\n\turlLabel,\n\t...props\n}","optional":false,"type":null}],"returns":null}],"displayName":"URLPopover","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/url-popover/index.js","actualName":"URLPopover","exportName":"default","props":{"focusOnMount":{"defaultValue":{"value":"'firstElement'","computed":false},"required":false}}}},"blockeditor-warning":{"id":"blockeditor-warning","name":"Warning","path":"../packages/block-editor/src/components/warning/stories/index.story.jsx","stories":[{"id":"blockeditor-warning--default","name":"Default","snippet":"const Default = () => <Warning>{__( 'This block ran into an issue.' )}</Warning>;"},{"id":"blockeditor-warning--with-actions","name":"With Actions","snippet":"const WithActions = () => <Warning\n actions={[\n <Button key=\"fix-issue\" __next40pxDefaultSize variant=\"primary\">\n { __( 'Fix issue' ) }\n </Button>,\n ]} />;"},{"id":"blockeditor-warning--with-secondary-actions","name":"With Secondary Actions","snippet":"const WithSecondaryActions = () => <Warning\n secondaryActions={[\n { title: __( 'Get help' ) },\n { title: __( 'Remove block' ) },\n ]} />;"}],"import":"import { Button } from \"@wordpress/components\";\nimport { Warning } from \"@wordpress/block-editor\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Warning","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/warning/index.js","actualName":"Warning","exportName":"default"}},"blockeditor-writingmodecontrol":{"id":"blockeditor-writingmodecontrol","name":"WritingModeControl","path":"../packages/block-editor/src/components/writing-mode-control/stories/index.story.jsx","stories":[{"id":"blockeditor-writingmodecontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState();\n\n return (\n <WritingModeControl\n onChange={ ( ...changeArgs ) => {\n onChange( ...changeArgs );\n setValue( ...changeArgs );\n } }\n value={ value } />\n );\n};"}],"import":"import { WritingModeControl } from \"@wordpress/block-editor\";","jsDocTags":{"param":["{Object} props Component props.","{string} props.className Class name to add to the control.","{string} props.value Currently selected writing mode.","{Function} props.onChange Handles change in the writing mode selection."],"return":["{Element} Writing Mode control."]},"description":"Control to facilitate writing mode selections.","reactDocgen":{"description":"Control to facilitate writing mode selections.\n\n@param {Object} props Component props.\n@param {string} props.className Class name to add to the control.\n@param {string} props.value Currently selected writing mode.\n@param {Function} props.onChange Handles change in the writing mode selection.\n\n@return {Element} Writing Mode control.","methods":[],"displayName":"WritingModeControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/writing-mode-control/index.js","actualName":"WritingModeControl","exportName":"default"}},"components-menu":{"id":"components-menu","name":"Menu","path":"../packages/components/src/menu/stories/index.story.tsx","stories":[{"id":"components-menu--default","name":"Default","snippet":"const Default = () => <Menu onOpenChange={fn()}>(<>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>Label</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>Label</Menu.ItemLabel>\n <Menu.ItemHelpText>Help text</Menu.ItemHelpText>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>Label</Menu.ItemLabel>\n <Menu.ItemHelpText>\n The menu item help text is automatically truncated\n when there are more than two lines of text\n </Menu.ItemHelpText>\n </Menu.Item>\n <Menu.Item hideOnClick={ false }>\n <Menu.ItemLabel>Label</Menu.ItemLabel>\n <Menu.ItemHelpText>\n This item doesn&apos;t close the menu on click\n </Menu.ItemHelpText>\n </Menu.Item>\n <Menu.Item disabled>Disabled item</Menu.Item>\n <Menu.Separator />\n <Menu.Group>\n <Menu.GroupLabel>Group label</Menu.GroupLabel>\n <Menu.Item\n prefix={ <Icon icon={ customLink } size={ 24 } /> }\n >\n <Menu.ItemLabel>With prefix</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item suffix=\"⌘S\">With suffix</Menu.Item>\n <Menu.Item\n disabled\n prefix={\n <Icon icon={ formatCapitalize } size={ 24 } />\n }\n suffix=\"⌥⌘T\"\n >\n <Menu.ItemLabel>\n Disabled with prefix and suffix\n </Menu.ItemLabel>\n <Menu.ItemHelpText>And help text</Menu.ItemHelpText>\n </Menu.Item>\n </Menu.Group>\n </Menu.Popover>\n </>)</Menu>;"},{"id":"components-menu--with-submenu","name":"With Submenu","snippet":"const WithSubmenu = () => <Menu onOpenChange={fn()}>(<>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item>Level 1 item</Menu.Item>\n <Menu>\n <Menu.SubmenuTriggerItem suffix=\"Suffix\">\n <Menu.ItemLabel>\n Submenu trigger item with a long label\n </Menu.ItemLabel>\n </Menu.SubmenuTriggerItem>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>Level 2 item</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>Level 2 item</Menu.ItemLabel>\n </Menu.Item>\n <Menu>\n <Menu.SubmenuTriggerItem>\n <Menu.ItemLabel>\n Submenu trigger\n </Menu.ItemLabel>\n </Menu.SubmenuTriggerItem>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>\n Level 3 item\n </Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>\n Level 3 item\n </Menu.ItemLabel>\n </Menu.Item>\n </Menu.Popover>\n </Menu>\n </Menu.Popover>\n </Menu>\n </Menu.Popover>\n </>)</Menu>;"},{"id":"components-menu--with-checkboxes","name":"With Checkboxes","snippet":"const WithCheckboxes = function WithCheckboxes( props: Props ) {\n const [ isAChecked, setAChecked ] = useState( false );\n const [ isBChecked, setBChecked ] = useState( true );\n const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] =\n useState< string[] >( [ 'b' ] );\n\n const onMultipleCheckboxesCheckedChange: React.ComponentProps<\n typeof Menu.CheckboxItem\n >[ 'onChange' ] = ( e ) => {\n setMultipleCheckboxesValue( ( prevValues ) => {\n if ( prevValues.includes( e.target.value ) ) {\n return prevValues.filter(\n ( val ) => val !== e.target.value\n );\n }\n return [ ...prevValues, e.target.value ];\n } );\n };\n\n return (\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Group>\n <Menu.GroupLabel>\n Single selection, uncontrolled\n </Menu.GroupLabel>\n <Menu.CheckboxItem\n name=\"checkbox-individual-uncontrolled-a\"\n value=\"a\"\n suffix=\"⌥⌘T\"\n >\n <Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n <Menu.CheckboxItem\n name=\"checkbox-individual-uncontrolled-b\"\n value=\"b\"\n defaultChecked\n >\n <Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n </Menu.Group>\n <Menu.Separator />\n <Menu.Group>\n <Menu.GroupLabel>\n Single selection, controlled\n </Menu.GroupLabel>\n <Menu.CheckboxItem\n name=\"checkbox-individual-controlled-a\"\n value=\"a\"\n checked={ isAChecked }\n onChange={ ( e ) => {\n setAChecked( e.target.checked );\n } }\n >\n <Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n <Menu.CheckboxItem\n name=\"checkbox-individual-controlled-b\"\n value=\"b\"\n checked={ isBChecked }\n onChange={ ( e ) =>\n setBChecked( e.target.checked )\n }\n >\n <Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n </Menu.Group>\n <Menu.Separator />\n <Menu.Group>\n <Menu.GroupLabel>\n Multiple selection, uncontrolled\n </Menu.GroupLabel>\n <Menu.CheckboxItem\n name=\"checkbox-multiple-uncontrolled\"\n value=\"a\"\n >\n <Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n <Menu.CheckboxItem\n name=\"checkbox-multiple-uncontrolled\"\n value=\"b\"\n defaultChecked\n >\n <Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n </Menu.Group>\n <Menu.Separator />\n <Menu.Group>\n <Menu.GroupLabel>\n Multiple selection, controlled\n </Menu.GroupLabel>\n <Menu.CheckboxItem\n name=\"checkbox-multiple-controlled\"\n value=\"a\"\n checked={ multipleCheckboxesValue.includes( 'a' ) }\n onChange={ onMultipleCheckboxesCheckedChange }\n >\n <Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n <Menu.CheckboxItem\n name=\"checkbox-multiple-controlled\"\n value=\"b\"\n checked={ multipleCheckboxesValue.includes( 'b' ) }\n onChange={ onMultipleCheckboxesCheckedChange }\n >\n <Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.CheckboxItem>\n </Menu.Group>\n </Menu.Popover>\n </Menu>\n );\n};"},{"id":"components-menu--with-radios","name":"With Radios","snippet":"const WithRadios = function WithRadios( props: Props ) {\n const [ radioValue, setRadioValue ] = useState( 'two' );\n const onRadioChange: React.ComponentProps<\n typeof Menu.RadioItem\n >[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );\n\n return (\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Group>\n <Menu.GroupLabel>Uncontrolled</Menu.GroupLabel>\n <Menu.RadioItem name=\"radio-uncontrolled\" value=\"one\">\n <Menu.ItemLabel>Radio item 1</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.RadioItem>\n <Menu.RadioItem\n name=\"radio-uncontrolled\"\n value=\"two\"\n defaultChecked\n >\n <Menu.ItemLabel>Radio item 2</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.RadioItem>\n </Menu.Group>\n <Menu.Separator />\n <Menu.Group>\n <Menu.GroupLabel>Controlled</Menu.GroupLabel>\n <Menu.RadioItem\n name=\"radio-controlled\"\n value=\"one\"\n checked={ radioValue === 'one' }\n onChange={ onRadioChange }\n >\n <Menu.ItemLabel>Radio item 1</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially unchecked\n </Menu.ItemHelpText>\n </Menu.RadioItem>\n <Menu.RadioItem\n name=\"radio-controlled\"\n value=\"two\"\n checked={ radioValue === 'two' }\n onChange={ onRadioChange }\n >\n <Menu.ItemLabel>Radio item 2</Menu.ItemLabel>\n <Menu.ItemHelpText>\n Initially checked\n </Menu.ItemHelpText>\n </Menu.RadioItem>\n </Menu.Group>\n </Menu.Popover>\n </Menu>\n );\n};"},{"id":"components-menu--with-modals","name":"With Modals","snippet":"const WithModals = function WithModals( props: Props ) {\n const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );\n const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );\n\n const cx = useCx();\n const modalOverlayClassName = cx( modalOnTopOfMenuPopover );\n\n return (\n <>\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item\n onClick={ () => setOuterModalOpen( true ) }\n hideOnClick={ false }\n >\n <Menu.ItemLabel>Open outer modal</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item\n onClick={ () => setInnerModalOpen( true ) }\n hideOnClick={ false }\n >\n <Menu.ItemLabel>Open inner modal</Menu.ItemLabel>\n </Menu.Item>\n { isInnerModalOpen && (\n <Modal\n onRequestClose={ () =>\n setInnerModalOpen( false )\n }\n overlayClassName={ modalOverlayClassName }\n >\n Modal&apos;s contents\n <button\n onClick={ () => setInnerModalOpen( false ) }\n >\n Close\n </button>\n </Modal>\n ) }\n </Menu.Popover>\n </Menu>\n { isOuterModalOpen && (\n <Modal\n onRequestClose={ () => setOuterModalOpen( false ) }\n overlayClassName={ modalOverlayClassName }\n >\n Modal&apos;s contents\n <button onClick={ () => setOuterModalOpen( false ) }>\n Close\n </button>\n </Modal>\n ) }\n </>\n );\n};"},{"id":"components-menu--with-slot-fill","name":"With Slot Fill","snippet":"const WithSlotFill = ( props: Props ) => {\n return (\n <SlotFillProvider>\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>Item</Menu.ItemLabel>\n </Menu.Item>\n <Slot />\n </Menu.Popover>\n </Menu>\n\n <Fill>\n <Menu.Item>\n <Menu.ItemLabel>Item from fill</Menu.ItemLabel>\n </Menu.Item>\n <Menu>\n <Menu.SubmenuTriggerItem>\n <Menu.ItemLabel>Submenu from fill</Menu.ItemLabel>\n </Menu.SubmenuTriggerItem>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>\n Submenu item from fill\n </Menu.ItemLabel>\n </Menu.Item>\n </Menu.Popover>\n </Menu>\n </Fill>\n </SlotFillProvider>\n );\n};"},{"id":"components-menu--toolbar-variant","name":"Toolbar Variant","snippet":"const ToolbarVariant = ( props: Props ) => (\n // TODO: add toolbar\n (<ContextSystemProvider value={ toolbarVariantContextValue }>\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button __next40pxDefaultSize variant=\"secondary\" />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>Level 1 item</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>Level 1 item</Menu.ItemLabel>\n </Menu.Item>\n <Menu.Separator />\n <Menu>\n <Menu.SubmenuTriggerItem>\n <Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>\n </Menu.SubmenuTriggerItem>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>Level 2 item</Menu.ItemLabel>\n </Menu.Item>\n </Menu.Popover>\n </Menu>\n </Menu.Popover>\n </Menu>\n </ContextSystemProvider>)\n);"},{"id":"components-menu--inside-modal","name":"Inside Modal","snippet":"const InsideModal = function InsideModal( props: Props ) {\n const [ isModalOpen, setModalOpen ] = useState( false );\n return (\n <>\n <Button\n onClick={ () => setModalOpen( true ) }\n __next40pxDefaultSize\n variant=\"secondary\"\n >\n Open modal\n </Button>\n { isModalOpen && (\n <Modal\n onRequestClose={ () => setModalOpen( false ) }\n title=\"Menu inside modal\"\n >\n <Menu { ...props }>\n <Menu.TriggerButton\n render={\n <Button\n __next40pxDefaultSize\n variant=\"secondary\"\n />\n }\n >\n Open menu\n </Menu.TriggerButton>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>\n Level 1 item\n </Menu.ItemLabel>\n </Menu.Item>\n <Menu.Item>\n <Menu.ItemLabel>\n Level 1 item\n </Menu.ItemLabel>\n </Menu.Item>\n <Menu.Separator />\n <Menu>\n <Menu.SubmenuTriggerItem>\n <Menu.ItemLabel>\n Submenu trigger\n </Menu.ItemLabel>\n </Menu.SubmenuTriggerItem>\n <Menu.Popover>\n <Menu.Item>\n <Menu.ItemLabel>\n Level 2 item\n </Menu.ItemLabel>\n </Menu.Item>\n </Menu.Popover>\n </Menu>\n </Menu.Popover>\n </Menu>\n <Button\n __next40pxDefaultSize\n onClick={ () => setModalOpen( false ) }\n >\n Close modal\n </Button>\n </Modal>\n ) }\n </>\n );\n};"}],"import":"import {\n Button,\n ContextSystemProvider,\n Icon,\n Menu,\n Modal,\n Provider as SlotFillProvider,\n} from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedMenu","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/menu/index.tsx","actualName":"UnconnectedMenu","props":{"children":{"required":false,"tsType":{"name":"Ariakit.MenuProviderProps['children']","raw":"Ariakit.MenuProviderProps[ 'children' ]"},"description":"The elements, which should include one instance of the `Menu.TriggerButton`\ncomponent and one instance of the `Menu.Popover` component."},"defaultOpen":{"required":false,"tsType":{"name":"Ariakit.MenuProviderProps['defaultOpen']","raw":"Ariakit.MenuProviderProps[ 'defaultOpen' ]"},"description":"Whether the menu popover and its contents should be visible by default.\n\nNote: this prop will be overridden by the `open` prop if it is\nprovided (meaning the component will be used in \"controlled\" mode).\n\n@default false"},"open":{"required":false,"tsType":{"name":"Ariakit.MenuProviderProps['open']","raw":"Ariakit.MenuProviderProps[ 'open' ]"},"description":"Whether the menu popover and its contents should be visible.\nShould be used in conjunction with `onOpenChange` in order to control\nthe open state of the menu popover.\n\nNote: this prop will set the component in \"controlled\" mode, and it will\noverride the `defaultOpen` prop."},"onOpenChange":{"required":false,"tsType":{"name":"Ariakit.MenuProviderProps['setOpen']","raw":"Ariakit.MenuProviderProps[ 'setOpen' ]"},"description":"A callback that gets called when the `open` state changes."},"placement":{"required":false,"tsType":{"name":"Ariakit.MenuProviderProps['placement']","raw":"Ariakit.MenuProviderProps[ 'placement' ]"},"description":"The placement of the menu popover.\n\n@default 'bottom-start' for root-level menus, 'right-start' for submenus"}}},"docs":{"components-menu--best-practices":{"id":"components-menu--best-practices","name":"Best Practices","path":"../packages/components/src/menu/stories/best-practices.mdx","title":"Components/Actions/Menu","content":"import { Meta } from '@storybook/addon-docs/blocks';\n\nimport * as MenuStories from './index.story';\n\n<Meta of={ MenuStories } name=\"Best Practices\" />\n\n# Menu\n\n## Usage\n\n### When to use a `Menu`\n\nUse a `Menu` when you want users to:\n\n- Choose an action or change a setting from a list, AND\n- Only see the available choices contextually.\n\n`Menu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `<select>` element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.\n\nIf you need to display all the available options at all times, consider using a Toolbar instead. Use a `Menu` to display a list of actions after the user interacts with a button.\n\n**Do**\nUse a `Menu` to display a list of actions after the user interacts with an icon.\n\n**Don’t** use a `Menu` for important actions that should always be visible. Use a `Toolbar` instead.\n\n**Don’t**\nDon’t use a `Menu` for frequently used actions. Use a `Toolbar` instead.\n\n### Behavior\n\nGenerally, the parent button should indicate that interacting with it will show a `Menu`.\n\nThe parent button should retain the same visual styling regardless of whether the `Menu` is displayed or not.\n\n### Placement\n\nThe `Menu` should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full `Menu`, it can be displayed instead above the parent button.\n"}}},"components-button":{"id":"components-button","name":"Button","path":"../packages/components/src/button/stories/index.story.tsx","stories":[{"id":"components-button--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};"},{"id":"components-button--primary","name":"Primary","snippet":"const Primary = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};","description":"Primary buttons stand out with bold color fills, making them distinct from the background. Since they naturally draw attention, each layout should contain only one primary button to guide users toward the most important action."},{"id":"components-button--secondary","name":"Secondary","snippet":"const Secondary = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};","description":"Secondary buttons complement primary buttons. Use them for standard actions that may appear alongside a primary action."},{"id":"components-button--tertiary","name":"Tertiary","snippet":"const Tertiary = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};","description":"Tertiary buttons have minimal emphasis. Use them sparingly to subtly highlight an action."},{"id":"components-button--link","name":"Link","snippet":"const Link = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};","description":"Link buttons have low emphasis and blend into the page, making them suitable for supplementary actions, especially those involving navigation away from the current view."},{"id":"components-button--is-destructive","name":"Is Destructive","snippet":"const IsDestructive = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};","description":"Use this variant for irreversible actions. Apply sparingly and only for actions with significant impact."},{"id":"components-button--icon","name":"Icon","snippet":"const Icon = ( props ) => {\n\treturn <Button __next40pxDefaultSize { ...props }></Button>;\n};"},{"id":"components-button--grouped-icons","name":"Grouped Icons","snippet":"function GroupedIcons() {\n\treturn (\n\t\t<GroupContainer>\n\t\t\t<Button __next40pxDefaultSize icon={ formatBold } label=\"Bold\" />\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\ticon={ formatItalic }\n\t\t\t\tlabel=\"Italic\"\n\t\t\t/>\n\t\t\t<Button __next40pxDefaultSize icon={ link } label=\"Link\" />\n\t\t</GroupContainer>\n\t);\n}"}],"import":"import { Button } from \"@wordpress/components\";","jsDocTags":{},"description":"Lets users take actions and make choices with a single click or tap. ```jsx import { Button } from '@wordpress/components'; const Mybutton = () => ( <Button variant=\"primary\" onClick={ handleClick } > Click here </Button> ); ```","reactDocgen":{"description":"Lets users take actions and make choices with a single click or tap.\n\n```jsx\nimport { Button } from '@wordpress/components';\nconst Mybutton = () => (\n <Button\n variant=\"primary\"\n onClick={ handleClick }\n >\n Click here\n </Button>\n);\n```","methods":[],"displayName":"Button","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/button/index.tsx","actualName":"Button","exportName":"Button","props":{"__experimentalIsFocusable":{"required":false,"tsType":{"name":"boolean"},"description":"Whether to keep the button focusable when disabled.\n\n@default false\n@deprecated Use the `accessibleWhenDisabled` prop instead.\n@ignore"},"isDefault":{"required":false,"tsType":{"name":"boolean"},"description":"Gives the button a default style.\n\n@deprecated Use the `'secondary'` value on the `variant` prop instead.\n@ignore"},"isLink":{"required":false,"tsType":{"name":"boolean"},"description":"Gives the button a link style.\n\n@deprecated Use the `'link'` value on the `variant` prop instead.\n@ignore"},"isPrimary":{"required":false,"tsType":{"name":"boolean"},"description":"Gives the button a primary style.\n\n@deprecated Use the `'primary'` value on the `variant` prop instead.\n@ignore"},"isSecondary":{"required":false,"tsType":{"name":"boolean"},"description":"Gives the button a default style.\n\n@deprecated Use the `'secondary'` value on the `variant` prop instead.\n@ignore"},"isTertiary":{"required":false,"tsType":{"name":"boolean"},"description":"Gives the button a text-based style.\n\n@deprecated Use the `'tertiary'` value on the `variant` prop instead.\n@ignore"},"isSmall":{"required":false,"tsType":{"name":"boolean"},"description":"Decreases the size of the button.\n\n@deprecated Use the `'small'` value on the `size` prop instead.\n@ignore"},"describedBy":{"required":false,"tsType":{"name":"string"},"description":"A visually hidden accessible description for the button.\n\n@deprecated Use the `description` prop instead.\n@ignore"}}}},"components-dropdownmenu":{"id":"components-dropdownmenu","name":"DropdownMenu","path":"../packages/components/src/dropdown-menu/stories/index.story.tsx","stories":[{"id":"components-dropdownmenu--default","name":"Default","snippet":"const Default = () => <DropdownMenu\n onToggle={fn()}\n label=\"Select a direction.\"\n icon={menu}\n controls={[\n {\n title: 'First Menu Item Label',\n icon: arrowUp,\n // eslint-disable-next-line no-console\n onClick: () => console.log( 'up!' ),\n },\n {\n title: 'Second Menu Item Label',\n icon: arrowDown,\n // eslint-disable-next-line no-console\n onClick: () => console.log( 'down!' ),\n },\n ]} />;"},{"id":"components-dropdownmenu--with-children","name":"With Children","snippet":"const WithChildren = () => <DropdownMenu onToggle={fn()} label=\"Select a direction.\" icon={more}>{( { onClose } ) => (\n <>\n <MenuItem icon={ arrowUp } onClick={ onClose }>\n Standalone Item\n </MenuItem>\n <MenuGroup>\n <MenuItem icon={ arrowUp } onClick={ onClose }>\n Move Up\n </MenuItem>\n <MenuItem icon={ arrowDown } onClick={ onClose }>\n Move Down\n </MenuItem>\n </MenuGroup>\n <MenuGroup>\n <MenuItem icon={ trash } onClick={ onClose }>\n Remove\n </MenuItem>\n </MenuGroup>\n </>\n )}</DropdownMenu>;"}],"import":"import { DropdownMenu, MenuGroup, MenuItem } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedDropdownMenu","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/dropdown-menu/index.tsx","actualName":"UnconnectedDropdownMenu","props":{"icon":{"required":false,"tsType":{"name":"union","raw":"IconProps[ 'icon' ] | null","elements":[{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]"},{"name":"null"}]},"description":"The icon to be shown in the collapsed menu button.\n\n@default \"menu\""},"label":{"required":true,"tsType":{"name":"string"},"description":"A human-readable label to present as accessibility text on the focused\ncollapsed menu button."},"className":{"required":false,"tsType":{"name":"string"},"description":"A class name to apply to the dropdown menu's toggle element wrapper."},"popoverProps":{"required":false,"tsType":{"name":"Omit","raw":"DropdownProps[ 'popoverProps' ]"},"description":"Properties of `popoverProps` object will be passed as props to the nested\n`Popover` component.\nUse this object to modify props available for the `Popover` component that\nare not already exposed in the `DropdownMenu` component, e.g.: the\ndirection in which the popover should open relative to its parent node\nset with `position` prop."},"toggleProps":{"required":false,"tsType":{"name":"intersection","raw":"Partial<\n\tOmit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'label' | 'text'\n\t>\n> & {\n\tas?: React.ElementType | keyof React.JSX.IntrinsicElements;\n\t'data-toolbar-item'?: boolean;\n}","elements":[{"name":"Partial","elements":[{"name":"Omit","elements":[{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"intersection","raw":"BaseButtonProps & _ButtonProps","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Whether to keep the button focusable when disabled.\n\t *\n\t * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\n\t * can cause accessibility issues, by hiding their presence from screen reader users,\n\t * or by preventing focus from returning to a trigger element.\n\t *\n\t * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\n\t * in the WAI-ARIA Authoring Practices Guide.\n\t *\n\t * @default false\n\t */\n\taccessibleWhenDisabled?: boolean;\n\t/**\n\t * The button's children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A visually hidden accessible description for the button.\n\t */\n\tdescription?: string;\n\t/**\n\t * If provided, renders an Icon component inside the button.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * If provided with `icon`, sets the position of icon relative to the `text`.\n\t *\n\t * @default 'left'\n\t */\n\ticonPosition?: 'left' | 'right';\n\t/**\n\t * If provided with `icon`, sets the icon size.\n\t * Please refer to the Icon component for more details regarding\n\t * the default value of its `size` prop.\n\t */\n\ticonSize?: IconProps[ 'size' ];\n\t/**\n\t * Indicates activity while a action is being performed.\n\t */\n\tisBusy?: boolean;\n\t/**\n\t * Renders a red text-based button style to indicate destructive behavior.\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Renders a pressed button style.\n\t */\n\tisPressed?: boolean;\n\t/**\n\t * Sets the `aria-label` of the component, if none is provided.\n\t * Sets the Tooltip content if `showTooltip` is provided.\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\n\t * If an object is provided, it should contain `display` and `ariaLabel` keys.\n\t */\n\tshortcut?: string | { display: string; ariaLabel: string };\n\t/**\n\t * If provided, renders a Tooltip component for the button.\n\t */\n\tshowTooltip?: boolean;\n\t/**\n\t * The size of the button.\n\t *\n\t * - `'default'`: For normal text-label buttons, unless it is a toggle button.\n\t * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n\t * - `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\t *\n\t * If the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact' | 'small';\n\t/**\n\t * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.\n\t */\n\ttext?: string;\n\t/**\n\t * If provided with `showTooltip`, sets the position of the tooltip.\n\t * Please refer to the Tooltip component for more details regarding the defaults.\n\t */\n\ttooltipPosition?: PopoverProps[ 'position' ];\n\t/**\n\t * Specifies the button's style.\n\t *\n\t * The accepted values are:\n\t *\n\t * 1. `'primary'` (the primary button styles)\n\t * 2. `'secondary'` (the default button styles)\n\t * 3. `'tertiary'` (the text-based button styles)\n\t * 4. `'link'` (the link button styles)\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}","signature":{"properties":[{"key":"__next40pxDefaultSize","value":{"name":"boolean","required":false},"description":"Start opting into the larger default height that will become the\ndefault size in a future version.\n\n@default false"},{"key":"accessibleWhenDisabled","value":{"name":"boolean","required":false},"description":"Whether to keep the button focusable when disabled.\n\nIn most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\ncan cause accessibility issues, by hiding their presence from screen reader users,\nor by preventing focus from returning to a trigger element.\n\nLearn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\nin the WAI-ARIA Authoring Practices Guide.\n\n@default false"},{"key":"children","value":{"name":"ReactNode","required":false},"description":"The button's children."},{"key":"description","value":{"name":"string","required":false},"description":"A visually hidden accessible description for the button."},{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"If provided, renders an Icon component inside the button."},{"key":"iconPosition","value":{"name":"union","raw":"'left' | 'right'","elements":[{"name":"literal","value":"'left'"},{"name":"literal","value":"'right'"}],"required":false},"description":"If provided with `icon`, sets the position of icon relative to the `text`.\n\n@default 'left'"},{"key":"iconSize","value":{"name":"intersection['size']","raw":"IconProps[ 'size' ]","required":false},"description":"If provided with `icon`, sets the icon size.\nPlease refer to the Icon component for more details regarding\nthe default value of its `size` prop."},{"key":"isBusy","value":{"name":"boolean","required":false},"description":"Indicates activity while a action is being performed."},{"key":"isDestructive","value":{"name":"boolean","required":false},"description":"Renders a red text-based button style to indicate destructive behavior."},{"key":"isPressed","value":{"name":"boolean","required":false},"description":"Renders a pressed button style."},{"key":"label","value":{"name":"string","required":false},"description":"Sets the `aria-label` of the component, if none is provided.\nSets the Tooltip content if `showTooltip` is provided."},{"key":"shortcut","value":{"name":"union","raw":"string | { display: string; ariaLabel: string }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ display: string; ariaLabel: string }","signature":{"properties":[{"key":"display","value":{"name":"string","required":true}},{"key":"ariaLabel","value":{"name":"string","required":true}}]}}],"required":false},"description":"If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\nIf an object is provided, it should contain `display` and `ariaLabel` keys."},{"key":"showTooltip","value":{"name":"boolean","required":false},"description":"If provided, renders a Tooltip component for the button."},{"key":"size","value":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}],"required":false},"description":"The size of the button.\n\n- `'default'`: For normal text-label buttons, unless it is a toggle button.\n- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n- `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\nIf the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\n@default 'default'"},{"key":"text","value":{"name":"string","required":false},"description":"If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them."},{"key":"tooltipPosition","value":{"name":"union","raw":"PopoverProps[ 'position' ]","required":false},"description":"If provided with `showTooltip`, sets the position of the tooltip.\nPlease refer to the Tooltip component for more details regarding the defaults."},{"key":"variant","value":{"name":"union","raw":"'primary' | 'secondary' | 'tertiary' | 'link'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'secondary'"},{"name":"literal","value":"'tertiary'"},{"name":"literal","value":"'link'"}],"required":false},"description":"Specifies the button's style.\n\nThe accepted values are:\n\n1. `'primary'` (the primary button styles)\n2. `'secondary'` (the default button styles)\n3. `'tertiary'` (the text-based button styles)\n4. `'link'` (the link button styles)"}]}},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether the button is disabled. If `true`, this will force a `button` element\n\t * to be rendered, even when an `href` is given.\n\t *\n\t * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.\n\t */\n\tdisabled?: boolean;\n}","signature":{"properties":[{"key":"disabled","value":{"name":"boolean","required":false},"description":"Whether the button is disabled. If `true`, this will force a `button` element\nto be rendered, even when an `href` is given.\n\nIn most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`."}]}}]},{"name":"unknown"},{"name":"unknown"}]},{"name":"union","raw":"'label' | 'text'","elements":[{"name":"literal","value":"'label'"},{"name":"literal","value":"'text'"}]}],"raw":"Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'label' | 'text'\n>"}],"raw":"Partial<\n\tOmit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'label' | 'text'\n\t>\n>"},{"name":"signature","type":"object","raw":"{\n\tas?: React.ElementType | keyof React.JSX.IntrinsicElements;\n\t'data-toolbar-item'?: boolean;\n}","signature":{"properties":[{"key":"as","value":{"name":"union","raw":"React.ElementType | keyof React.JSX.IntrinsicElements","elements":[{"name":"ReactElementType","raw":"React.ElementType"},{"name":"React.JSX.IntrinsicElements"}],"required":false}},{"key":"data-toolbar-item","value":{"name":"boolean","required":false}}]}}]},"description":"Properties of `toggleProps` object will be passed as props to the nested\n`Button` component in the `renderToggle` implementation of the `Dropdown`\ncomponent used internally.\nUse this object to modify props available for the `Button` component that\nare not already exposed in the `DropdownMenu` component, e.g.: the tooltip\ntext displayed on hover set with `tooltip` prop."},"menuProps":{"required":false,"tsType":{"name":"Omit","elements":[{"name":"Partial","elements":[{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"intersection","raw":"BaseProps & {\n\t/**\n\t * The orientation of the menu.\n\t *\n\t * @default 'vertical'\n\t */\n\torientation?: 'vertical' | 'horizontal' | 'both';\n}","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The component children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.\n\t *\n\t * @default true\n\t */\n\tcycle?: boolean;\n\t/**\n\t * A callback invoked on the keydown event.\n\t */\n\tonKeyDown?: ( event: KeyboardEvent ) => void;\n\t/**\n\t * A callback invoked when the menu navigates to one of its children passing the index and child as an argument\n\t */\n\tonNavigate?: ( index: number, focusable: HTMLElement ) => void;\n}","signature":{"properties":[{"key":"children","value":{"name":"ReactNode","required":false},"description":"The component children."},{"key":"cycle","value":{"name":"boolean","required":false},"description":"A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.\n\n@default true"},{"key":"onKeyDown","value":{"name":"signature","type":"function","raw":"( event: KeyboardEvent ) => void","signature":{"arguments":[{"type":{"name":"KeyboardEvent"},"name":"event"}],"return":{"name":"void"}},"required":false},"description":"A callback invoked on the keydown event."},{"key":"onNavigate","value":{"name":"signature","type":"function","raw":"( index: number, focusable: HTMLElement ) => void","signature":{"arguments":[{"type":{"name":"number"},"name":"index"},{"type":{"name":"HTMLElement"},"name":"focusable"}],"return":{"name":"void"}},"required":false},"description":"A callback invoked when the menu navigates to one of its children passing the index and child as an argument"}]}},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The orientation of the menu.\n\t *\n\t * @default 'vertical'\n\t */\n\torientation?: 'vertical' | 'horizontal' | 'both';\n}","signature":{"properties":[{"key":"orientation","value":{"name":"union","raw":"'vertical' | 'horizontal' | 'both'","elements":[{"name":"literal","value":"'vertical'"},{"name":"literal","value":"'horizontal'"},{"name":"literal","value":"'both'"}],"required":false},"description":"The orientation of the menu.\n\n@default 'vertical'"}]}}]},{"name":"unknown"},{"name":"unknown"}]}],"raw":"Partial< NavigableMenuProps >"},{"name":"literal","value":"'children'"}],"raw":"Omit< Partial< NavigableMenuProps >, 'children' >"},"description":"Properties of `menuProps` object will be passed as props to the nested\n`NavigableMenu` component in the `renderContent` implementation of the\n`Dropdown` component used internally.\nUse this object to modify props available for the `NavigableMenu`\ncomponent that are not already exposed in the `DropdownMenu` component,\ne.g.: the orientation of the menu set with `orientation` prop."},"disableOpenOnArrowDown":{"required":false,"tsType":{"name":"boolean"},"description":"In some contexts, the arrow down key used to open the dropdown menu might\nneed to be disabled—for example when that key is used to perform another\naction.\n\n@default false"},"text":{"required":false,"tsType":{"name":"string"},"description":"Text to display on the nested `Button` component in the `renderToggle`\nimplementation of the `Dropdown` component used internally."},"noIcons":{"required":false,"tsType":{"name":"boolean"},"description":"Whether or not `no-icons` should be added to the menu's `className`."},"children":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( callbackProps: DropdownCallbackProps ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n}","signature":{"properties":[{"key":"isOpen","value":{"name":"boolean","required":true}},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}}]}},"name":"callbackProps"}],"return":{"name":"ReactNode"}}},"description":"A [function render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render)\nwhich should return an element or elements valid for use in a DropdownMenu:\n`MenuItem`, `MenuItemsChoice`, or `MenuGroup`. Its first argument is a\nprops object including the same values as given to a `Dropdown`'s\n`renderContent` (`isOpen`, `onToggle`, `onClose`).\n\nA valid DropdownMenu must specify a `controls` or `children` prop, or both."},"controls":{"required":false,"tsType":{"name":"union","raw":"DropdownOption[] | DropdownOption[][]","elements":[{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The icon to be shown for the option.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * A human-readable title to display for the option.\n\t */\n\ttitle: string;\n\t/**\n\t * Whether or not the option is disabled.\n\t *\n\t * @default false\n\t */\n\tisDisabled?: boolean;\n\t/**\n\t * A callback function to invoke when the option is selected.\n\t */\n\tonClick?: ( event?: React.MouseEvent ) => void;\n\t/**\n\t * Whether or not the control is currently active.\n\t */\n\tisActive?: boolean;\n\t/**\n\t * Text to use for the internal `Button` component's tooltip.\n\t */\n\tlabel?: string;\n\t/**\n\t * The role to apply to the option's HTML element\n\t */\n\trole?: HTMLAttributes< HTMLElement >[ 'role' ];\n}","signature":{"properties":[{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"The icon to be shown for the option."},{"key":"title","value":{"name":"string","required":true},"description":"A human-readable title to display for the option."},{"key":"isDisabled","value":{"name":"boolean","required":false},"description":"Whether or not the option is disabled.\n\n@default false"},{"key":"onClick","value":{"name":"signature","type":"function","raw":"( event?: React.MouseEvent ) => void","signature":{"arguments":[{"type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"},"name":"event"}],"return":{"name":"void"}},"required":false},"description":"A callback function to invoke when the option is selected."},{"key":"isActive","value":{"name":"boolean","required":false},"description":"Whether or not the control is currently active."},{"key":"label","value":{"name":"string","required":false},"description":"Text to use for the internal `Button` component's tooltip."},{"key":"role","value":{"name":"HTMLAttributes['role']","raw":"HTMLAttributes< HTMLElement >[ 'role' ]","required":false},"description":"The role to apply to the option's HTML element"}]}}],"raw":"DropdownOption[]"},{"name":"Array","elements":[{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The icon to be shown for the option.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * A human-readable title to display for the option.\n\t */\n\ttitle: string;\n\t/**\n\t * Whether or not the option is disabled.\n\t *\n\t * @default false\n\t */\n\tisDisabled?: boolean;\n\t/**\n\t * A callback function to invoke when the option is selected.\n\t */\n\tonClick?: ( event?: React.MouseEvent ) => void;\n\t/**\n\t * Whether or not the control is currently active.\n\t */\n\tisActive?: boolean;\n\t/**\n\t * Text to use for the internal `Button` component's tooltip.\n\t */\n\tlabel?: string;\n\t/**\n\t * The role to apply to the option's HTML element\n\t */\n\trole?: HTMLAttributes< HTMLElement >[ 'role' ];\n}","signature":{"properties":[{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"The icon to be shown for the option."},{"key":"title","value":{"name":"string","required":true},"description":"A human-readable title to display for the option."},{"key":"isDisabled","value":{"name":"boolean","required":false},"description":"Whether or not the option is disabled.\n\n@default false"},{"key":"onClick","value":{"name":"signature","type":"function","raw":"( event?: React.MouseEvent ) => void","signature":{"arguments":[{"type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"},"name":"event"}],"return":{"name":"void"}},"required":false},"description":"A callback function to invoke when the option is selected."},{"key":"isActive","value":{"name":"boolean","required":false},"description":"Whether or not the control is currently active."},{"key":"label","value":{"name":"string","required":false},"description":"Text to use for the internal `Button` component's tooltip."},{"key":"role","value":{"name":"HTMLAttributes['role']","raw":"HTMLAttributes< HTMLElement >[ 'role' ]","required":false},"description":"The role to apply to the option's HTML element"}]}}],"raw":"DropdownOption[]"}],"raw":"DropdownOption[][]"}]},"description":"An array or nested array of objects describing the options to be shown in\nthe expanded menu. Each object should include an `icon` Dashicon slug\nstring, a human-readable `title` string, `isDisabled` boolean flag, and\nan `onClick` function callback to invoke when the option is selected.\n\nA valid DropdownMenu must specify a `controls` or `children` prop, or both."},"open":{"required":false,"tsType":{"name":"boolean"},"description":"The controlled open state of the dropdown menu.\nMust be used in conjunction with `onToggle`."},"defaultOpen":{"required":false,"tsType":{"name":"boolean"},"description":"The open state of the dropdown menu when initially rendered.\nUse when you do not need to control its open state. It will be overridden\nby the `open` prop if it is specified on the component's first render."},"onToggle":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( willOpen: boolean ) => void","signature":{"arguments":[{"type":{"name":"boolean"},"name":"willOpen"}],"return":{"name":"void"}}},"description":"A callback invoked when the state of the dropdown menu changes\nfrom open to closed and vice versa."}}}},"components-menugroup":{"id":"components-menugroup","name":"MenuGroup","path":"../packages/components/src/menu-group/stories/index.story.tsx","stories":[{"id":"components-menugroup--default","name":"Default","snippet":"const Default = () => {\n return (\n <MenuGroup>\n <MenuItem>Menu Item 1</MenuItem>\n <MenuItem>Menu Item 2</MenuItem>\n </MenuGroup>\n );\n};"},{"id":"components-menugroup--with-separator","name":"With Separator","snippet":"const WithSeparator = () => {\n const [ mode, setMode ] = useState( 'visual' );\n const choices = [\n\t\t{\n\t\t\tvalue: 'visual',\n\t\t\tlabel: 'Visual editor',\n\t\t},\n\t\t{\n\t\t\tvalue: 'text',\n\t\t\tlabel: 'Code editor',\n\t\t},\n\t];\n\n return (\n <>\n <MenuGroup label=\"View\">\n <MenuItem>Top Toolbar</MenuItem>\n <MenuItem>Spotlight Mode</MenuItem>\n <MenuItem>Distraction Free</MenuItem>\n </MenuGroup>\n <MenuGroup hideSeparator={false} label=\"Editor\">\n <MenuItemsChoice\n choices={ choices }\n value={ mode }\n onSelect={ ( newMode: string ) => setMode( newMode ) }\n onHover={ () => {} } />\n </MenuGroup>\n </>\n );\n};","description":"When other menu items exist above or below a MenuGroup, the group should have a divider line between it and the adjacent item."}],"import":"import { MenuGroup, MenuItem, MenuItemsChoice } from \"@wordpress/components\";","jsDocTags":{},"description":"`MenuGroup` wraps a series of related `MenuItem` components into a common section. ```jsx import { MenuGroup, MenuItem } from '@wordpress/components'; const MyMenuGroup = () => ( <MenuGroup label=\"Settings\"> <MenuItem>Setting 1</MenuItem> <MenuItem>Setting 2</MenuItem> </MenuGroup> ); ```","reactDocgen":{"description":"`MenuGroup` wraps a series of related `MenuItem` components into a common\nsection.\n\n```jsx\nimport { MenuGroup, MenuItem } from '@wordpress/components';\n\nconst MyMenuGroup = () => (\n <MenuGroup label=\"Settings\">\n <MenuItem>Setting 1</MenuItem>\n <MenuItem>Setting 2</MenuItem>\n </MenuGroup>\n);\n```","methods":[],"displayName":"MenuGroup","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/menu-group/index.tsx","actualName":"MenuGroup","exportName":"MenuGroup","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"A CSS `class` to give to the container element."},"hideSeparator":{"required":false,"tsType":{"name":"boolean"},"description":"Hide the top border on the container."},"label":{"required":false,"tsType":{"name":"string"},"description":"Text to be displayed as the menu group header."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The children elements."}}}},"components-menuitem":{"id":"components-menuitem","name":"MenuItem","path":"../packages/components/src/menu-item/stories/index.story.tsx","stories":[{"id":"components-menuitem--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn (\n\t\t<MenuGroup>\n\t\t\t<MenuItem { ...props }>Menu Item 1</MenuItem>\n\t\t</MenuGroup>\n\t);\n};"},{"id":"components-menuitem--is-selected","name":"Is Selected","snippet":"const IsSelected = ( props ) => {\n\treturn (\n\t\t<MenuGroup>\n\t\t\t<MenuItem { ...props }>Menu Item 1</MenuItem>\n\t\t</MenuGroup>\n\t);\n};","description":"When the `role` prop is either `\"menuitemcheckbox\"` or `\"menuitemradio\"`, the `isSelected` prop should be used so screen readers can tell which item is currently selected."},{"id":"components-menuitem--with-icon","name":"With Icon","snippet":"const WithIcon = ( props ) => {\n\treturn (\n\t\t<MenuGroup>\n\t\t\t<MenuItem { ...props }>Menu Item 1</MenuItem>\n\t\t</MenuGroup>\n\t);\n};"},{"id":"components-menuitem--with-info","name":"With Info","snippet":"const WithInfo = ( props ) => {\n\treturn (\n\t\t<MenuGroup>\n\t\t\t<MenuItem { ...props }>Menu Item 1</MenuItem>\n\t\t</MenuGroup>\n\t);\n};"},{"id":"components-menuitem--with-suffix","name":"With Suffix","snippet":"const WithSuffix = ( props ) => {\n\treturn (\n\t\t<MenuGroup>\n\t\t\t<MenuItem { ...props }>Menu Item 1</MenuItem>\n\t\t</MenuGroup>\n\t);\n};"}],"import":"import { MenuGroup, MenuItem, Shortcut } from \"@wordpress/components\";","jsDocTags":{},"description":"MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component. ```jsx import { MenuItem } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyMenuItem = () => { const [ isActive, setIsActive ] = useState( true ); return ( <MenuItem icon={ isActive ? 'yes' : 'no' } isSelected={ isActive } role=\"menuitemcheckbox\" onClick={ () => setIsActive( ( state ) => ! state ) } > Toggle </MenuItem> ); }; ```","reactDocgen":{"description":"MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n\n```jsx\nimport { MenuItem } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyMenuItem = () => {\n\tconst [ isActive, setIsActive ] = useState( true );\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive ? 'yes' : 'no' }\n\t\t\tisSelected={ isActive }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n\t\t>\n\t\t\tToggle\n\t\t</MenuItem>\n\t);\n};\n```","methods":[],"displayName":"MenuItem","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/menu-item/index.tsx","actualName":"MenuItem","exportName":"MenuItem"}},"components-menuitemschoice":{"id":"components-menuitemschoice","name":"MenuItemsChoice","path":"../packages/components/src/menu-items-choice/stories/index.story.tsx","stories":[{"id":"components-menuitemschoice--default","name":"Default","snippet":"const Default = ( {\n\tonHover,\n\tonSelect,\n\tchoices,\n} ) => {\n\tconst [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );\n\n\treturn (\n\t\t<MenuGroup label=\"Editor\">\n\t\t\t<MenuItemsChoice\n\t\t\t\tchoices={ choices }\n\t\t\t\tvalue={ choice }\n\t\t\t\tonSelect={ ( ...selectArgs ) => {\n\t\t\t\t\tonSelect( ...selectArgs );\n\t\t\t\t\tsetChoice( ...selectArgs );\n\t\t\t\t} }\n\t\t\t\tonHover={ onHover }\n\t\t\t/>\n\t\t</MenuGroup>\n\t);\n};"}],"import":"import { MenuGroup, MenuItemsChoice } from \"@wordpress/components\";","jsDocTags":{},"description":"`MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices. ```jsx import { MenuGroup, MenuItemsChoice } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyMenuItemsChoice = () => { const [ mode, setMode ] = useState( 'visual' ); const choices = [ { value: 'visual', label: 'Visual editor', }, { value: 'text', label: 'Code editor', }, ]; return ( <MenuGroup label=\"Editor\"> <MenuItemsChoice choices={ choices } value={ mode } onSelect={ ( newMode ) => setMode( newMode ) } /> </MenuGroup> ); }; ```","reactDocgen":{"description":"`MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.\n\n\n```jsx\nimport { MenuGroup, MenuItemsChoice } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyMenuItemsChoice = () => {\n\tconst [ mode, setMode ] = useState( 'visual' );\n\tconst choices = [\n\t\t{\n\t\t\tvalue: 'visual',\n\t\t\tlabel: 'Visual editor',\n\t\t},\n\t\t{\n\t\t\tvalue: 'text',\n\t\t\tlabel: 'Code editor',\n\t\t},\n\t];\n\n\treturn (\n\t\t<MenuGroup label=\"Editor\">\n\t\t\t<MenuItemsChoice\n\t\t\t\tchoices={ choices }\n\t\t\t\tvalue={ mode }\n\t\t\t\tonSelect={ ( newMode ) => setMode( newMode ) }\n\t\t\t/>\n\t\t</MenuGroup>\n\t);\n};\n```","methods":[],"displayName":"MenuItemsChoice","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/menu-items-choice/index.tsx","actualName":"MenuItemsChoice","exportName":"default","props":{"choices":{"required":false,"tsType":{"name":"unknown"},"description":"Array of choices.\n\n@default []","defaultValue":{"value":"[]","computed":false}},"value":{"required":true,"tsType":{"name":"string"},"description":"Value of currently selected choice (should match a `value` property\nfrom a choice in `choices`)."},"onSelect":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"value"}],"return":{"name":"void"}}},"description":"Callback function to be called with the selected choice when user\nselects a new choice."},"onHover":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( value: string | null ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"string | null","elements":[{"name":"string"},{"name":"null"}]},"name":"value"}],"return":{"name":"void"}}},"description":"Callback function to be called with a choice when user\nhovers over a new choice (will be empty on mouse leave).\n\n@default noop","defaultValue":{"value":"() => {}","computed":false}}}}},"components-badge":{"id":"components-badge","name":"Badge","path":"../packages/components/src/badge/stories/index.story.tsx","stories":[{"id":"components-badge--default","name":"Default","snippet":"const Default = () => <Badge>Code is Poetry</Badge>;"},{"id":"components-badge--info","name":"Info","snippet":"const Info = () => <Badge intent=\"info\" />;"},{"id":"components-badge--success","name":"Success","snippet":"const Success = () => <Badge intent=\"success\" />;"},{"id":"components-badge--warning","name":"Warning","snippet":"const Warning = () => <Badge intent=\"warning\" />;"},{"id":"components-badge--error","name":"Error","snippet":"const Error = () => <Badge intent=\"error\" />;"}],"import":"import { Badge } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/badge/index.tsx","actualName":"Badge","exportName":"default","props":{"intent":{"defaultValue":{"value":"'default'","computed":false},"required":false}}}},"components-card":{"id":"components-card","name":"Card","path":"../packages/components/src/card/stories/index.story.tsx","stories":[{"id":"components-card--default","name":"Default","snippet":"const Default = () => <Card>(<>\n <CardHeader>\n <Heading>CardHeader</Heading>\n </CardHeader>\n <CardBody>\n <Text>CardBody</Text>\n </CardBody>\n <CardBody>\n <Text>CardBody (before CardDivider)</Text>\n </CardBody>\n <CardDivider />\n <CardBody>\n <Text>CardBody (after CardDivider)</Text>\n </CardBody>\n <CardMedia>\n <img\n alt=\"Card Media\"\n src=\"https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80\"\n />\n </CardMedia>\n <CardFooter>\n <Text>CardFooter</Text>\n <Button __next40pxDefaultSize variant=\"secondary\">\n Action Button\n </Button>\n </CardFooter>\n </>)</Card>;"},{"id":"components-card--full-bleed-content","name":"Full Bleed Content","snippet":"const FullBleedContent = () => <Card>(<CardMedia>\n <div style={ { padding: 16, background: 'beige' } }>\n Some full bleed content\n </div>\n </CardMedia>)</Card>;","description":"`CardMedia` provides a container for full-bleed content within a `Card`, such as images, video, or even just a background color. The corners will be rounded if necessary."},{"id":"components-card--padding-variations","name":"Padding Variations","snippet":"const PaddingVariations = () => (\n <div\n style={ { display: 'flex', flexDirection: 'column', gap: '32px' } }\n >\n { /* 1. Default Padding */ }\n <div>\n <Card>\n <CardHeader>\n <Text>Header with default padding</Text>\n </CardHeader>\n <CardBody>\n <Text>Body with default padding (medium)</Text>\n </CardBody>\n </Card>\n </div>\n\n <div>\n <Card>\n <CardHeader\n size={ {\n blockStart: 'large',\n blockEnd: 'small',\n inlineStart: 'xSmall',\n inlineEnd: 'large',\n } }\n >\n <Text>\n Header with logical padding (large blockStart, small\n blockEnd, xSmall inlineStart, large inlineEnd)\n </Text>\n </CardHeader>\n <CardBody\n size={ {\n blockStart: 'medium',\n blockEnd: 'xSmall',\n inlineStart: 'large',\n inlineEnd: 'xSmall',\n } }\n >\n <Text>\n Body with logical padding (medium blockStart, xSmall\n blockEnd, large inlineStart, xSmall inlineEnd)\n </Text>\n </CardBody>\n </Card>\n </div>\n </div>\n);","description":"The Card component supports three approaches to padding: 1. Default padding (medium) - no size prop needed 2. Token-based padding - using size tokens: xSmall, small, medium, large 3. Logical padding - customize each direction using logical properties Each component (Card, CardHeader, CardBody) can have its own padding configuration."}],"import":"import {\n Button,\n Card,\n CardBody,\n CardDivider,\n CardFooter,\n CardHeader,\n CardMedia,\n Heading,\n Text,\n} from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedCard","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/card/card/component.tsx","actualName":"UnconnectedCard"}},"components-navigablemenu":{"id":"components-navigablemenu","name":"NavigableMenu","path":"../packages/components/src/navigable-container/stories/navigable-menu.story.tsx","stories":[{"id":"components-navigablemenu--default","name":"Default","snippet":"const Default = () => {\n return (\n <>\n <button>Before navigable menu</button>\n <NavigableMenu\n onKeyDown={fn()}\n onNavigate={fn()}\n style={ {\n\t\t\t\t\tmargin: '32px 0',\n\t\t\t\t\tpadding: '16px',\n\t\t\t\t\tborder: '1px solid black',\n\t\t\t\t} }>\n <div role=\"menuitem\">Item 1 (non-tabbable, non-focusable)</div>\n <button role=\"menuitem\">Item 2 (tabbable, focusable)</button>\n <button role=\"menuitem\" disabled>Item 3 (disabled, therefore non-tabbable and not-focusable)\n </button>\n <span role=\"menuitem\" tabIndex={ -1 }>Item 4 (non-tabbable, non-focusable)\n </span>\n <div role=\"menuitem\" tabIndex={ 0 }>Item 5 (tabbable, focusable)\n </div>\n </NavigableMenu>\n <button>After navigable menu</button>\n </>\n );\n};"}],"import":"import { NavigableMenu } from \"@wordpress/components\";","jsDocTags":{},"description":"A container for a navigable menu. ```jsx import { NavigableMenu, Button, } from '@wordpress/components'; function onNavigate( index, target ) { console.log( `Navigates to ${ index }`, target ); } const MyNavigableContainer = () => ( <div> <span>Navigable Menu:</span> <NavigableMenu onNavigate={ onNavigate } orientation=\"horizontal\"> <Button variant=\"secondary\">Item 1</Button> <Button variant=\"secondary\">Item 2</Button> <Button variant=\"secondary\">Item 3</Button> </NavigableMenu> </div> ); ```","reactDocgen":{"description":"A container for a navigable menu.\n\n ```jsx\n import {\n NavigableMenu,\n Button,\n } from '@wordpress/components';\n\n function onNavigate( index, target ) {\n console.log( `Navigates to ${ index }`, target );\n }\n\n const MyNavigableContainer = () => (\n <div>\n <span>Navigable Menu:</span>\n <NavigableMenu onNavigate={ onNavigate } orientation=\"horizontal\">\n <Button variant=\"secondary\">Item 1</Button>\n <Button variant=\"secondary\">Item 2</Button>\n <Button variant=\"secondary\">Item 3</Button>\n </NavigableMenu>\n </div>\n );\n ```","methods":[],"displayName":"NavigableMenu","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/navigable-container/menu.tsx","actualName":"NavigableMenu","exportName":"NavigableMenu","props":{"role":{"defaultValue":{"value":"'menu'","computed":false},"required":false},"orientation":{"defaultValue":{"value":"'vertical'","computed":false},"required":false}}}},"components-tabbablecontainer":{"id":"components-tabbablecontainer","name":"TabbableContainer","path":"../packages/components/src/navigable-container/stories/tabbable-container.story.tsx","stories":[{"id":"components-tabbablecontainer--default","name":"Default","snippet":"const Default = () => {\n return (\n <>\n <button>Before tabbable container</button>\n <TabbableContainer\n onKeyDown={fn()}\n onNavigate={fn()}\n style={ {\n\t\t\t\t\tmargin: '32px 0',\n\t\t\t\t\tpadding: '16px',\n\t\t\t\t\tborder: '1px solid black',\n\t\t\t\t} }>\n <button>Item 1</button>\n <button>Item 2</button>\n <button disabled>Item 3 (disabled)</button>\n <button tabIndex={ -1 }>Item 4 (non-tabbable)</button>\n <button tabIndex={ 0 }>Item 5</button>\n <button>Item 6</button>\n </TabbableContainer>\n <button>After tabbable container</button>\n </>\n );\n};"}],"import":"import { TabbableContainer } from \"@wordpress/components\";","jsDocTags":{},"description":"A container for tabbable elements. ```jsx import { TabbableContainer, Button, } from '@wordpress/components'; function onNavigate( index, target ) { console.log( `Navigates to ${ index }`, target ); } const MyTabbableContainer = () => ( <div> <span>Tabbable Container:</span> <TabbableContainer onNavigate={ onNavigate }> <Button variant=\"secondary\" tabIndex=\"0\"> Section 1 </Button> <Button variant=\"secondary\" tabIndex=\"0\"> Section 2 </Button> <Button variant=\"secondary\" tabIndex=\"0\"> Section 3 </Button> <Button variant=\"secondary\" tabIndex=\"0\"> Section 4 </Button> </TabbableContainer> </div> ); ```","reactDocgen":{"description":"A container for tabbable elements.\n\n ```jsx\n import {\n TabbableContainer,\n Button,\n } from '@wordpress/components';\n\n function onNavigate( index, target ) {\n console.log( `Navigates to ${ index }`, target );\n }\n\n const MyTabbableContainer = () => (\n <div>\n <span>Tabbable Container:</span>\n <TabbableContainer onNavigate={ onNavigate }>\n <Button variant=\"secondary\" tabIndex=\"0\">\n Section 1\n </Button>\n <Button variant=\"secondary\" tabIndex=\"0\">\n Section 2\n </Button>\n <Button variant=\"secondary\" tabIndex=\"0\">\n Section 3\n </Button>\n <Button variant=\"secondary\" tabIndex=\"0\">\n Section 4\n </Button>\n </TabbableContainer>\n </div>\n );\n ```","methods":[],"displayName":"TabbableContainer","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/navigable-container/tabbable.tsx","actualName":"TabbableContainer","exportName":"TabbableContainer"}},"components-panel":{"id":"components-panel","name":"Panel","path":"../packages/components/src/panel/stories/index.story.tsx","stories":[{"id":"components-panel--default","name":"Default","snippet":"const Default = ( props ) => <Panel { ...props } />;"},{"id":"components-panel--panel-row","name":"Panel Row","snippet":"const _PanelRow = ( props ) => <Panel { ...props } />;","description":"`PanelRow` is a generic container for rows within a `PanelBody`. It is a flex container with a top margin for spacing."},{"id":"components-panel--disabled-section","name":"Disabled Section","snippet":"const DisabledSection = ( props ) => <Panel { ...props } />;"},{"id":"components-panel--with-icon","name":"With Icon","snippet":"const WithIcon = ( props ) => <Panel { ...props } />;"}],"import":"import { InputControl, Panel, PanelBody, PanelRow } from \"@wordpress/components\";","jsDocTags":{},"description":"`Panel` expands and collapses multiple sections of content. ```jsx import { Panel, PanelBody, PanelRow } from '@wordpress/components'; import { more } from '@wordpress/icons'; const MyPanel = () => ( <Panel header=\"My Panel\"> <PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }> <PanelRow>My Panel Inputs and Labels</PanelRow> </PanelBody> </Panel> ); ```","reactDocgen":{"description":"`Panel` expands and collapses multiple sections of content.\n\n```jsx\nimport { Panel, PanelBody, PanelRow } from '@wordpress/components';\nimport { more } from '@wordpress/icons';\n\nconst MyPanel = () => (\n\t<Panel header=\"My Panel\">\n\t\t<PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }>\n\t\t\t<PanelRow>My Panel Inputs and Labels</PanelRow>\n\t\t</PanelBody>\n\t</Panel>\n);\n```","methods":[],"displayName":"Panel","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/panel/index.tsx","actualName":"Panel","exportName":"Panel","props":{"header":{"required":false,"tsType":{"name":"string","raw":"PanelHeaderProps[ 'label' ]"},"description":"The text that will be rendered as the title of the panel.\nText will be rendered inside an `<h2>` tag."},"className":{"required":false,"tsType":{"name":"string"},"description":"The CSS class to apply to the wrapper element."},"children":{"required":true,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The content to display within the panel."}}}},"components-tabpanel":{"id":"components-tabpanel","name":"TabPanel","path":"../packages/components/src/tab-panel/stories/index.story.tsx","stories":[{"id":"components-tabpanel--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <TabPanel { ...props } />;\n};"},{"id":"components-tabpanel--disabled-tab","name":"Disabled Tab","snippet":"const DisabledTab = ( props ) => {\n\treturn <TabPanel { ...props } />;\n};"},{"id":"components-tabpanel--with-tab-icons-and-tooltips","name":"With Tab Icons And Tooltips","snippet":"const WithTabIconsAndTooltips = ( props ) => {\n\treturn <TabPanel { ...props } />;\n};"},{"id":"components-tabpanel--manual-activation","name":"Manual Activation","snippet":"const ManualActivation = ( props ) => {\n\treturn <TabPanel { ...props } />;\n};"}],"import":"import { TabPanel } from \"@wordpress/components\";","jsDocTags":{},"description":"TabPanel is an ARIA-compliant tabpanel. TabPanels organize content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen. ```jsx import { TabPanel } from '@wordpress/components'; const onSelect = ( tabName ) => { console.log( 'Selecting tab', tabName ); }; const MyTabPanel = () => ( <TabPanel className=\"my-tab-panel\" activeClass=\"active-tab\" onSelect={ onSelect } tabs={ [ { name: 'tab1', title: 'Tab 1', className: 'tab-one', }, { name: 'tab2', title: 'Tab 2', className: 'tab-two', }, ] } > { ( tab ) => <p>{ tab.title }</p> } </TabPanel> ); ```","reactDocgen":{"description":"TabPanel is an ARIA-compliant tabpanel.\n\nTabPanels organize content across different screens, data sets, and interactions.\nIt has two sections: a list of tabs, and the view to show when tabs are chosen.\n\n```jsx\nimport { TabPanel } from '@wordpress/components';\n\nconst onSelect = ( tabName ) => {\n console.log( 'Selecting tab', tabName );\n};\n\nconst MyTabPanel = () => (\n <TabPanel\n className=\"my-tab-panel\"\n activeClass=\"active-tab\"\n onSelect={ onSelect }\n tabs={ [\n {\n name: 'tab1',\n title: 'Tab 1',\n className: 'tab-one',\n },\n {\n name: 'tab2',\n title: 'Tab 2',\n className: 'tab-two',\n },\n ] }\n >\n { ( tab ) => <p>{ tab.title }</p> }\n </TabPanel>\n);\n```","methods":[],"displayName":"TabPanel","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tab-panel/index.tsx","actualName":"TabPanel","exportName":"TabPanel","props":{"selectOnMove":{"defaultValue":{"value":"true","computed":false},"required":false},"orientation":{"defaultValue":{"value":"'horizontal'","computed":false},"required":false},"activeClass":{"defaultValue":{"value":"'is-active'","computed":false},"required":false}}}},"components-tabs":{"id":"components-tabs","name":"Tabs","path":"../packages/components/src/tabs/stories/index.story.tsx","stories":[{"id":"components-tabs--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn (\n\t\t<Tabs { ...props }>\n\t\t\t<Tabs.TabList>\n\t\t\t\t<Tabs.Tab tabId=\"tab1\">Tab 1</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t</Tabs.TabList>\n\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab3\" focusable={ false }>\n\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t\t<p>\n\t\t\t\t\tThis tabpanel has its <code>focusable</code> prop set to\n\t\t\t\t\t<code> false</code>, so it won&apos;t get a tab stop.\n\t\t\t\t\t<br />\n\t\t\t\t\tInstead, the [Tab] key will move focus to the first\n\t\t\t\t\tfocusable element within the panel.\n\t\t\t\t</p>\n\t\t\t\t<Button __next40pxDefaultSize variant=\"primary\">\n\t\t\t\t\tI&apos;m a button!\n\t\t\t\t</Button>\n\t\t\t</Tabs.TabPanel>\n\t\t</Tabs>\n\t);\n};"},{"id":"components-tabs--size-and-overflow-playground","name":"Size And Overflow Playground","snippet":"const SizeAndOverflowPlayground = ( props ) => {\n\tconst [ fullWidth, setFullWidth ] = useState( false );\n\treturn (\n\t\t<div>\n\t\t\t<div style={ { maxWidth: '40rem', marginBottom: '1rem' } }>\n\t\t\t\t<p>\n\t\t\t\t\tThis story helps understand how the TabList component\n\t\t\t\t\tbehaves under different conditions. The container below\n\t\t\t\t\t(with the dotted red border) can be horizontally resized,\n\t\t\t\t\tand it has a bit of padding to be out of the way of the\n\t\t\t\t\tTabList.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe button will toggle between full width (adding{ ' ' }\n\t\t\t\t\t<code>width: 100%</code>) and the default width.\n\t\t\t\t</p>\n\t\t\t\t<p>Try the following:</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Small container</strong> that causes tabs to\n\t\t\t\t\t\toverflow with scroll.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Large container</strong> that exceeds the normal\n\t\t\t\t\t\twidth of the tabs.\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>\n\t\t\t\t\t\t\t\t\tWith <code>width: 100%</code>\n\t\t\t\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t\t\t\tset on the TabList (tabs fill up the space).\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>\n\t\t\t\t\t\t\t\t\tWithout <code>width: 100%</code>\n\t\t\t\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t\t\t\t(defaults to <code>auto</code>) set on the\n\t\t\t\t\t\t\t\tTabList (tabs take up space proportional to\n\t\t\t\t\t\t\t\ttheir content).\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tstyle={ { marginBottom: '1rem' } }\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ () => setFullWidth( ! fullWidth ) }\n\t\t\t>\n\t\t\t\t{ fullWidth\n\t\t\t\t\t? 'Remove width: 100% from TabList'\n\t\t\t\t\t: 'Set width: 100% in TabList' }\n\t\t\t</Button>\n\t\t\t<Tabs { ...props }>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '20rem',\n\t\t\t\t\t\tborder: '2px dotted red',\n\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\tresize: 'horizontal',\n\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\t\twidth: fullWidth ? '100%' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Tabs.Tab tabId=\"tab1\">\n\t\t\t\t\t\t\tLabel with multiple words\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t<Tabs.Tab tabId=\"tab2\">Short</Tabs.Tab>\n\t\t\t\t\t\t<Tabs.Tab tabId=\"tab3\">\n\t\t\t\t\t\t\tHippopotomonstrosesquippedaliophobia\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t<Tabs.Tab tabId=\"tab4\">Tab 4</Tabs.Tab>\n\t\t\t\t\t\t<Tabs.Tab tabId=\"tab5\">Tab 5</Tabs.Tab>\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t</div>\n\t\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t\t\t<p>(Label with multiple words)</p>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t\t\t<p>(Short)</p>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t\t\t<p>(Hippopotomonstrosesquippedaliophobia)</p>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"tab4\">\n\t\t\t\t\t<p>Selected tab: Tab 4</p>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"tab5\">\n\t\t\t\t\t<p>Selected tab: Tab 5</p>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</div>\n\t);\n};"},{"id":"components-tabs--vertical","name":"Vertical","snippet":"const Vertical = ( props ) => {\n\treturn (\n\t\t<Tabs orientation=\"vertical\" { ...props }>\n\t\t\t<Tabs.TabList style={ { maxWidth: '10rem' } }>\n\t\t\t\t<Tabs.Tab tabId=\"tab1\">Tab 1</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t</Tabs.TabList>\n\t\t</Tabs>\n\t);\n};"},{"id":"components-tabs--disabled-tab","name":"Disabled Tab","snippet":"const DisabledTab = ( props ) => {\n\treturn (\n\t\t<Tabs { ...props }>\n\t\t\t<Tabs.TabList>\n\t\t\t\t<Tabs.Tab tabId=\"tab1\" disabled>\n\t\t\t\t\tTab 1\n\t\t\t\t</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t</Tabs.TabList>\n\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t</Tabs.TabPanel>\n\t\t</Tabs>\n\t);\n};"},{"id":"components-tabs--with-tab-icons-and-tooltips","name":"With Tab Icons And Tooltips","snippet":"const WithTabIconsAndTooltips = ( props ) => {\n\treturn (\n\t\t<Tabs { ...props }>\n\t\t\t<Tabs.TabList>\n\t\t\t\t{ [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'tab1',\n\t\t\t\t\t\tlabel: 'Tab one',\n\t\t\t\t\t\ticon: wordpress,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'tab2',\n\t\t\t\t\t\tlabel: 'Tab two',\n\t\t\t\t\t\ticon: link,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'tab3',\n\t\t\t\t\t\tlabel: 'Tab three',\n\t\t\t\t\t\ticon: more,\n\t\t\t\t\t},\n\t\t\t\t].map( ( { id, label, icon } ) => (\n\t\t\t\t\t<Tooltip text={ label } key={ id }>\n\t\t\t\t\t\t<Tabs.Tab tabId={ id } aria-label={ label }>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) ) }\n\t\t\t</Tabs.TabList>\n\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t</Tabs.TabPanel>\n\t\t</Tabs>\n\t);\n};"},{"id":"components-tabs--manual-activation","name":"Manual Activation","snippet":"const ManualActivation = ( props ) => {\n\treturn (\n\t\t<Tabs { ...props }>\n\t\t\t<Tabs.TabList>\n\t\t\t\t<Tabs.Tab tabId=\"tab1\">Tab 1</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t</Tabs.TabList>\n\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t</Tabs.TabPanel>\n\t\t\t<Tabs.TabPanel tabId=\"tab3\" focusable={ false }>\n\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t\t<p>\n\t\t\t\t\tThis tabpanel has its <code>focusable</code> prop set to\n\t\t\t\t\t<code> false</code>, so it won&apos;t get a tab stop.\n\t\t\t\t\t<br />\n\t\t\t\t\tInstead, the [Tab] key will move focus to the first\n\t\t\t\t\tfocusable element within the panel.\n\t\t\t\t</p>\n\t\t\t\t<Button __next40pxDefaultSize variant=\"primary\">\n\t\t\t\t\tI&apos;m a button!\n\t\t\t\t</Button>\n\t\t\t</Tabs.TabPanel>\n\t\t</Tabs>\n\t);\n};"},{"id":"components-tabs--using-slot-fill","name":"Using SlotFill","snippet":"const UsingSlotFill = ( props ) => {\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<Tabs { ...props }>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"tab1\">Tab 1</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Fill name=\"tabs-are-fun\">\n\t\t\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t</Fill>\n\t\t\t</Tabs>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tborder: '2px solid #999',\n\t\t\t\t\twidth: '300px',\n\t\t\t\t\tmargin: '20px auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<p>other stuff</p>\n\t\t\t\t<p>other stuff</p>\n\t\t\t\t<p>this is fun!</p>\n\t\t\t\t<p>other stuff</p>\n\t\t\t\t<Slot bubblesVirtually as=\"div\" name=\"tabs-are-fun\" />\n\t\t\t</div>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-tabs--insert-custom-elements","name":"Insert Custom Elements","snippet":"const InsertCustomElements = ( props ) => {\n\tconst [ isOpen, setIsOpen ] = useState( true );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '400px',\n\t\t\t\t\t\theight: '100vh',\n\t\t\t\t\t\tborderRight: '1px solid #333',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Tabs { ...props }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderBottom: '1px solid #333',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"tab1\">Tab 1</Tabs.Tab>\n\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"tab2\">Tab 2</Tabs.Tab>\n\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"tab3\">Tab 3</Tabs.Tab>\n\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmarginLeft: 'auto',\n\t\t\t\t\t\t\t\t\talignSelf: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonClick={ () => setIsOpen( false ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tClose Tabs\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t\t\t\t\t<p>Selected tab: Tab 1</p>\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t\t\t\t\t<p>Selected tab: Tab 2</p>\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t\t\t\t\t<p>Selected tab: Tab 3</p>\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t</Tabs>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\t>\n\t\t\t\t\tOpen Tabs\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</>\n\t);\n};"}],"import":"import { Button, Fill, Icon, Slot, Provider as SlotFillProvider, Tabs, Tooltip } from \"@wordpress/components\";","jsDocTags":{},"description":"Tabs is a collection of React components that combine to render an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Tabs organizes content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when a tab is chosen. `Tabs` itself is a wrapper component and context provider. It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.","reactDocgen":{"description":"Tabs is a collection of React components that combine to render\nan [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n\nTabs organizes content across different screens, data sets, and interactions.\nIt has two sections: a list of tabs, and the view to show when a tab is chosen.\n\n`Tabs` itself is a wrapper component and context provider.\nIt is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.","methods":[],"displayName":"Tabs","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tabs/index.tsx","actualName":"Tabs","exportName":"Tabs","props":{"children":{"required":true,"tsType":{"name":"Ariakit.TabProviderProps['children']","raw":"Ariakit.TabProviderProps[ 'children' ]"},"description":"The children elements, which should include one instance of the\n`Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`\ncomponents as there are `Tabs.Tab` components."},"selectOnMove":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['selectOnMove']","raw":"Ariakit.TabProviderProps[ 'selectOnMove' ]"},"description":"Determines if the tab should be selected when it receives focus. If set to\n`false`, the tab will only be selected upon clicking, not when using arrow\nkeys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)\nfor more info.\n\n@default true","defaultValue":{"value":"true","computed":false}},"selectedTabId":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['selectedId']","raw":"Ariakit.TabProviderProps[ 'selectedId' ]"},"description":"The id of the tab whose panel is currently visible.\n\nIf left `undefined`, it will be automatically set to the first enabled\ntab, and the component assumes it is being used in \"uncontrolled\" mode.\n\nConsequently, any value different than `undefined` will set the component\nin \"controlled\" mode. When in \"controlled\" mode, the `null` value will\nresult in no tabs being selected, and the tablist becoming tabbable."},"defaultTabId":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['defaultSelectedId']","raw":"Ariakit.TabProviderProps[ 'defaultSelectedId' ]"},"description":"The id of the tab whose panel is currently visible.\n\nIf left `undefined`, it will be automatically set to the first enabled\ntab. If set to `null`, no tab will be selected, and the tablist will be\ntabbable.\n\nNote: this prop will be overridden by the `selectedTabId` prop if it is\nprovided (meaning the component will be used in \"controlled\" mode)."},"onSelect":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['setSelectedId']","raw":"Ariakit.TabProviderProps[ 'setSelectedId' ]"},"description":"The function called when the `selectedTabId` changes."},"activeTabId":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['activeId']","raw":"Ariakit.TabProviderProps[ 'activeId' ]"},"description":"The current active tab `id`. The active tab is the tab element within the\ntablist widget that has DOM focus.\n\n- `null` represents the tablist (ie. the base composite element). Users\n will be able to navigate out of it using arrow keys.\n- If `activeTabId` is initially set to `null`, the base composite element\n itself will have focus and users will be able to navigate to it using\n arrow keys."},"defaultActiveTabId":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['defaultActiveId']","raw":"Ariakit.TabProviderProps[ 'defaultActiveId' ]"},"description":"The tab id that should be active by default when the composite widget is\nrendered. If `null`, the tablist element itself will have focus\nand users will be able to navigate to it using arrow keys. If `undefined`,\nthe first enabled item will be focused.\n\nNote: this prop will be overridden by the `activeTabId` prop if it is\nprovided."},"onActiveTabIdChange":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['setActiveId']","raw":"Ariakit.TabProviderProps[ 'setActiveId' ]"},"description":"A callback that gets called when the `activeTabId` state changes."},"orientation":{"required":false,"tsType":{"name":"Ariakit.TabProviderProps['orientation']","raw":"Ariakit.TabProviderProps[ 'orientation' ]"},"description":"Defines the orientation of the tablist and determines which arrow keys\ncan be used to move focus:\n\n- `both`: all arrow keys work.\n- `horizontal`: only left and right arrow keys work.\n- `vertical`: only up and down arrow keys work.\n\n@default \"horizontal\"","defaultValue":{"value":"'horizontal'","computed":false}}}},"docs":{"components-tabs--best-practices":{"id":"components-tabs--best-practices","name":"Best Practices","path":"../packages/components/src/tabs/stories/best-practices.mdx","title":"Components/Containers/Tabs","content":"import { Meta } from '@storybook/addon-docs/blocks';\n\nimport * as TabsStories from './index.story';\n\n<Meta of={ TabsStories } name=\"Best Practices\" />\n\n# Tabs\n\n## Usage\n\n### Uncontrolled Mode\n\nTabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultTabId` prop can be used to set the initially selected tab. If this prop is not set, the first tab will be selected by default. In addition, in most cases where the currently active tab becomes disabled or otherwise unavailable, uncontrolled mode will automatically fall back to selecting the first available tab.\n\n```jsx\nimport { Tabs } from '@wordpress/components';\n\nconst onSelect = ( tabName ) => {\n\tconsole.log( 'Selecting tab', tabName );\n};\n\nconst MyUncontrolledTabs = () => (\n\t<Tabs onSelect={ onSelect } defaultTabId=\"tab2\">\n\t\t<Tabs.TabList>\n\t\t\t<Tabs.Tab tabId=\"tab1\" title=\"Tab 1\">\n\t\t\t\tTab 1\n\t\t\t</Tabs.Tab>\n\t\t\t<Tabs.Tab tabId=\"tab2\" title=\"Tab 2\">\n\t\t\t\tTab 2\n\t\t\t</Tabs.Tab>\n\t\t\t<Tabs.Tab tabId=\"tab3\" title=\"Tab 3\">\n\t\t\t\tTab 3\n\t\t\t</Tabs.Tab>\n\t\t</Tabs.TabList>\n\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t<p>Selected tab: Tab 1</p>\n\t\t</Tabs.TabPanel>\n\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t<p>Selected tab: Tab 2</p>\n\t\t</Tabs.TabPanel>\n\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t<p>Selected tab: Tab 3</p>\n\t\t</Tabs.TabPanel>\n\t</Tabs>\n);\n```\n\n### Controlled Mode\n\nTabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `defaultTabId` prop will be ignored if it is provided. If the `selectedTabId` is `null`, no tab is selected. In this mode, if the currently selected tab becomes disabled or otherwise unavailable, the component will _not_ fall back to another available tab, leaving the controlling component in charge of implementing the desired logic.\n\n```tsx\nimport { Tabs } from '@wordpress/components';\n\nconst [ selectedTabId, setSelectedTabId ] = useState<\n\tstring | undefined | null\n>();\n\nconst onSelect = ( tabName ) => {\n\tconsole.log( 'Selecting tab', tabName );\n};\n\nconst MyControlledTabs = () => (\n\t<Tabs\n\t\tselectedTabId={ selectedTabId }\n\t\tonSelect={ ( selectedId ) => {\n\t\t\tsetSelectedTabId( selectedId );\n\t\t\tonSelect( selectedId );\n\t\t} }\n\t>\n\t\t<Tabs.TabList>\n\t\t\t<Tabs.Tab tabId=\"tab1\" title=\"Tab 1\">\n\t\t\t\tTab 1\n\t\t\t</Tabs.Tab>\n\t\t\t<Tabs.Tab tabId=\"tab2\" title=\"Tab 2\">\n\t\t\t\tTab 2\n\t\t\t</Tabs.Tab>\n\t\t\t<Tabs.Tab tabId=\"tab3\" title=\"Tab 3\">\n\t\t\t\tTab 3\n\t\t\t</Tabs.Tab>\n\t\t</Tabs.TabList>\n\t\t<Tabs.TabPanel tabId=\"tab1\">\n\t\t\t<p>Selected tab: Tab 1</p>\n\t\t</Tabs.TabPanel>\n\t\t<Tabs.TabPanel tabId=\"tab2\">\n\t\t\t<p>Selected tab: Tab 2</p>\n\t\t</Tabs.TabPanel>\n\t\t<Tabs.TabPanel tabId=\"tab3\">\n\t\t\t<p>Selected tab: Tab 3</p>\n\t\t</Tabs.TabPanel>\n\t</Tabs>\n);\n```\n\n### Using `Tabs` with links\n\nThe semantics implemented by the `Tabs` component don't align well with the semantics needed by a list of links. Furthermore, end users usually expect every link to be tabbable, while `Tabs.Tablist` is a [composite](https://w3c.github.io/aria/#composite) widget acting as a single tab stop.\n\nFor these reasons, even if the `Tabs` component is fully extensible, we don't recommend using `Tabs` with links, and we don't currently provide any related Storybook example.\n"}}},"components-notice":{"id":"components-notice","name":"Notice","path":"../packages/components/src/notice/stories/index.story.tsx","stories":[{"id":"components-notice--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <Notice { ...props } />;\n};"},{"id":"components-notice--with-custom-spoken-message","name":"With Custom Spoken Message","snippet":"const WithCustomSpokenMessage = ( props ) => {\n\treturn <Notice { ...props } />;\n};"},{"id":"components-notice--with-jsx-children","name":"With JSX Children","snippet":"const WithJSXChildren = ( props ) => {\n\treturn <Notice { ...props } />;\n};"},{"id":"components-notice--with-actions","name":"With Actions","snippet":"const WithActions = ( props ) => {\n\treturn <Notice { ...props } />;\n};"},{"id":"components-notice--notice-list-subcomponent","name":"NoticeList Subcomponent","snippet":"const NoticeListSubcomponent = () => {\n\tconst exampleNotices: NoticeListProps[ 'notices' ] = [\n\t\t{\n\t\t\tid: 'second-notice',\n\t\t\tcontent: 'second notice content',\n\t\t},\n\t\t{\n\t\t\tid: 'first-notice',\n\t\t\tcontent: 'first notice content',\n\t\t\tactions: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Click me!',\n\t\t\t\t\tonClick: () => {},\n\t\t\t\t\tvariant: 'primary',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Or click me instead!',\n\t\t\t\t\tonClick: () => {},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Or visit a link for more info',\n\t\t\t\t\turl: 'https://wordpress.org',\n\t\t\t\t\tvariant: 'link',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst [ notices, setNotices ] = useState( exampleNotices );\n\n\tconst removeNotice = (\n\t\tid: NoticeListProps[ 'notices' ][ number ][ 'id' ]\n\t) => {\n\t\tsetNotices( notices.filter( ( notice ) => notice.id !== id ) );\n\t};\n\n\tconst resetNotices = () => {\n\t\tsetNotices( exampleNotices );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<NoticeList notices={ notices } onRemove={ removeNotice } />\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ resetNotices }\n\t\t\t>\n\t\t\t\tReset Notices\n\t\t\t</Button>\n\t\t</>\n\t);\n};"},{"id":"components-notice--with-disabled-action","name":"With Disabled Action","snippet":"const WithDisabledAction = ( props ) => {\n\treturn <Notice { ...props } />;\n};","description":"Action buttons can be disabled."}],"import":"import { Button, Notice, NoticeList } from \"@wordpress/components\";","jsDocTags":{},"description":"`Notice` is a component used to communicate feedback to the user. ```jsx import { Notice } from `@wordpress/components`; const MyNotice = () => ( <Notice status=\"error\">An unknown error occurred.</Notice> ); ```","reactDocgen":{"description":"`Notice` is a component used to communicate feedback to the user.\n\n```jsx\nimport { Notice } from `@wordpress/components`;\n\nconst MyNotice = () => (\n <Notice status=\"error\">An unknown error occurred.</Notice>\n);\n```","methods":[],"displayName":"Notice","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/notice/index.tsx","actualName":"Notice","exportName":"default","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"A CSS `class` to give to the wrapper element."},"children":{"required":true,"tsType":{"name":"ReactNode"},"description":"The displayed message of a notice. Also used as the spoken message for\nassistive technology, unless `spokenMessage` is provided as an alternative message."},"spokenMessage":{"required":false,"tsType":{"name":"ReactNode"},"description":"Used to provide a custom spoken message in place of the `children` default.\n\n@default `children`","defaultValue":{"value":"children","computed":false}},"status":{"required":false,"tsType":{"name":"union","raw":"'warning' | 'success' | 'error' | 'info'","elements":[{"name":"literal","value":"'warning'"},{"name":"literal","value":"'success'"},{"name":"literal","value":"'error'"},{"name":"literal","value":"'info'"}]},"description":"Determines the color of the notice: `warning` (yellow),\n`success` (green), `error` (red), or `'info'`.\nBy default `'info'` will be blue, but if there is a parent Theme component\nwith an accent color prop, the notice will take on that color instead.\n\n@default 'info'","defaultValue":{"value":"'info'","computed":false}},"onRemove":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":"Function called when dismissing the notice\n\n@default noop","defaultValue":{"value":"() => {}","computed":false}},"politeness":{"required":false,"tsType":{"name":"union","raw":"'polite' | 'assertive'","elements":[{"name":"literal","value":"'polite'"},{"name":"literal","value":"'assertive'"}]},"description":"A politeness level for the notice's spoken message. Should be provided as\none of the valid options for an `aria-live` attribute value.\n\nA value of `'assertive'` is to be used for important, and usually\ntime-sensitive, information. It will interrupt anything else the screen\nreader is announcing in that moment.\nA value of `'polite'` is to be used for advisory information. It should\nnot interrupt what the screen reader is announcing in that moment\n(the \"speech queue\") or interrupt the current task.\n\nNote that this value should be considered a suggestion; assistive\ntechnologies may override it based on internal heuristics.\n\n@see https://www.w3.org/TR/wai-aria-1.1/#aria-live\n\n@default 'assertive' for 'error' status, 'polite' for all other statuses","defaultValue":{"value":"getDefaultPoliteness( status )","computed":true}},"isDismissible":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the notice should be dismissible or not\n\n@default true","defaultValue":{"value":"true","computed":false}},"onDismiss":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":"A deprecated alternative to `onRemove`. This prop is kept for\ncompatibility reasons but should be avoided.\n\n@default noop","defaultValue":{"value":"() => {}","computed":false}},"actions":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The label for the action button.\n\t */\n\tlabel: string;\n\t/**\n\t * A CSS class to add to the action button.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to remove default styling from the action button.\n\t */\n\tnoDefaultClasses?: boolean;\n\t/**\n\t * The variant of the action button.\n\t */\n\tvariant?: 'primary' | 'secondary' | 'link';\n\t/**\n\t * Whether the action button is disabled.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * The onClick handler for the action button.\n\t */\n\tonClick?: MouseEventHandler< HTMLAnchorElement | HTMLButtonElement >;\n\t/**\n\t * The URL for the action button. If provided, the action will render as an anchor tag.\n\t */\n\turl?: string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true},"description":"The label for the action button."},{"key":"className","value":{"name":"string","required":false},"description":"A CSS class to add to the action button."},{"key":"noDefaultClasses","value":{"name":"boolean","required":false},"description":"Whether to remove default styling from the action button."},{"key":"variant","value":{"name":"union","raw":"'primary' | 'secondary' | 'link'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'secondary'"},{"name":"literal","value":"'link'"}],"required":false},"description":"The variant of the action button."},{"key":"disabled","value":{"name":"boolean","required":false},"description":"Whether the action button is disabled."},{"key":"onClick","value":{"name":"MouseEventHandler","elements":[{"name":"union","raw":"HTMLAnchorElement | HTMLButtonElement","elements":[{"name":"HTMLAnchorElement"},{"name":"HTMLButtonElement"}]}],"raw":"MouseEventHandler< HTMLAnchorElement | HTMLButtonElement >","required":false},"description":"The onClick handler for the action button."},{"key":"url","value":{"name":"string","required":false},"description":"The URL for the action button. If provided, the action will render as an anchor tag."}]}}],"raw":"Array< NoticeAction >"},"description":"An array of action objects. Each member object should contain:\n\n- `label`: `string` containing the text of the button/link\n- `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify\n what the action does.\n- `className`: `string` (optional) to add custom classes to the button styles.\n- `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all\n default styling.\n- `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a\n primary button action for a notice by passing a value of `primary`.\n\nThe default appearance of an action button is inferred based on whether\n`url` or `onClick` are provided, rendering the button as a link if\nappropriate. If both props are provided, `url` takes precedence, and the\naction button will render as an anchor tag.\n\n@default []","defaultValue":{"value":"[]","computed":false}},"__unstableHTML":{"required":false,"tsType":{"name":"boolean"},"description":"Determines whether or not the message should be parsed as custom HTML\ninstead of a string."}}}},"components-progressbar":{"id":"components-progressbar","name":"ProgressBar","path":"../packages/components/src/progress-bar/stories/index.story.tsx","stories":[{"id":"components-progressbar--default","name":"Default","snippet":"const Default = () => {\n return <ProgressBar />;\n};"},{"id":"components-progressbar--with-custom-width","name":"With Custom Width","snippet":"const WithCustomWidth = () => {\n return <ProgressBar className=\"custom-progress-bar\" />;\n};","description":"A progress bar with a custom width. You can override the default `width` by passing a custom CSS class via the `className` prop. This example shows a progress bar with an overridden `width` of `100%` which makes it fit all available horizontal space of the parent element. The CSS class looks like this: ```css .custom-progress-bar { width: 100%; } ```"}],"import":"import { ProgressBar } from \"@wordpress/components\";","jsDocTags":{},"description":"A simple horizontal progress bar component. Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified. ```jsx import { ProgressBar } from '@wordpress/components'; const MyLoadingComponent = () => { return <ProgressBar />; }; ```","reactDocgen":{"description":"A simple horizontal progress bar component.\n\nSupports two modes: determinate and indeterminate. A progress bar is determinate\nwhen a specific progress value has been specified (from 0 to 100), and indeterminate\nwhen a value hasn't been specified.\n\n```jsx\nimport { ProgressBar } from '@wordpress/components';\n\nconst MyLoadingComponent = () => {\n\treturn <ProgressBar />;\n};\n```","methods":[],"displayName":"ProgressBar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/progress-bar/index.tsx","actualName":"ProgressBar","exportName":"ProgressBar"}},"components-snackbar":{"id":"components-snackbar","name":"Snackbar","path":"../packages/components/src/snackbar/stories/index.story.tsx","stories":[{"id":"components-snackbar--default","name":"Default","snippet":"const Default = ( {\n\tchildren,\n\t...props\n} ) => {\n\treturn <Snackbar { ...props }>{ children }</Snackbar>;\n};"},{"id":"components-snackbar--with-actions","name":"With Actions","snippet":"const WithActions = ( {\n\tchildren,\n\t...props\n} ) => {\n\treturn <Snackbar { ...props }>{ children }</Snackbar>;\n};"},{"id":"components-snackbar--with-icon","name":"With Icon","snippet":"const WithIcon = ( {\n\tchildren,\n\t...props\n} ) => {\n\treturn <Snackbar { ...props }>{ children }</Snackbar>;\n};"},{"id":"components-snackbar--with-explicit-dismiss","name":"With Explicit Dismiss","snippet":"const WithExplicitDismiss = ( {\n\tchildren,\n\t...props\n} ) => {\n\treturn <Snackbar { ...props }>{ children }</Snackbar>;\n};"},{"id":"components-snackbar--with-action-and-explicit-dismiss","name":"With Action And Explicit Dismiss","snippet":"const WithActionAndExplicitDismiss = ( {\n\tchildren,\n\t...props\n} ) => {\n\treturn <Snackbar { ...props }>{ children }</Snackbar>;\n};"}],"import":"import { Icon, Snackbar } from \"@wordpress/components\";","jsDocTags":{},"description":"A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post. But these options should also be available elsewhere in the UI. ```jsx const MySnackbarNotice = () => ( <Snackbar>Post published successfully.</Snackbar> ); ```","reactDocgen":{"description":"A Snackbar displays a succinct message that is cleared out after a small delay.\n\nIt can also offer the user options, like viewing a published post.\nBut these options should also be available elsewhere in the UI.\n\n```jsx\nconst MySnackbarNotice = () => (\n <Snackbar>Post published successfully.</Snackbar>\n);\n```","methods":[],"displayName":"Snackbar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/snackbar/index.tsx","actualName":"Snackbar","exportName":"Snackbar","props":{"spokenMessage":{"defaultValue":{"value":"children","computed":false},"required":false},"politeness":{"defaultValue":{"value":"'polite'","computed":false},"required":false},"actions":{"defaultValue":{"value":"[]","computed":false},"required":false},"icon":{"defaultValue":{"value":"null","computed":false},"required":false},"explicitDismiss":{"defaultValue":{"value":"false","computed":false},"required":false}}}},"components-snackbarlist":{"id":"components-snackbarlist","name":"SnackbarList","path":"../packages/components/src/snackbar/stories/list.story.tsx","stories":[{"id":"components-snackbarlist--default","name":"Default","snippet":"const Default = ( {\n\tchildren,\n\tnotices: noticesProp,\n\t...props\n} ) => {\n\tconst [ notices, setNotices ] = useState( noticesProp );\n\n\tconst onRemove = ( id: string ) => {\n\t\tconst matchIndex = notices.findIndex( ( n ) => n.id === id );\n\t\tif ( matchIndex > -1 ) {\n\t\t\tsetNotices( [\n\t\t\t\t...notices.slice( 0, matchIndex ),\n\t\t\t\t...notices.slice( matchIndex + 1 ),\n\t\t\t] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<SnackbarList { ...props } notices={ notices } onRemove={ onRemove }>\n\t\t\t{ children }\n\t\t</SnackbarList>\n\t);\n};"}],"import":"import { SnackbarList } from \"@wordpress/components\";","jsDocTags":{},"description":"Renders a list of notices. ```jsx const MySnackbarListNotice = () => ( <SnackbarList notices={ notices } onRemove={ removeNotice } /> ); ```","reactDocgen":{"description":"Renders a list of notices.\n\n```jsx\nconst MySnackbarListNotice = () => (\n <SnackbarList\n notices={ notices }\n onRemove={ removeNotice }\n />\n);\n```","methods":[],"displayName":"SnackbarList","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/snackbar/list.tsx","actualName":"SnackbarList","exportName":"SnackbarList"}},"components-spinner":{"id":"components-spinner","name":"Spinner","path":"../packages/components/src/spinner/stories/index.story.tsx","stories":[{"id":"components-spinner--default","name":"Default","snippet":"const Default = () => {\n return <Spinner />;\n};"},{"id":"components-spinner--custom-size","name":"Custom Size","snippet":"const CustomSize = () => {\n return <Spinner style={{ width: space( 20 ), height: space( 20 ) }} />;\n};"}],"import":"import { Spinner } from \"@wordpress/components\";","jsDocTags":{},"description":"`Spinner` is a component used to notify users that their action is being processed. ```jsx import { Spinner } from '@wordpress/components'; function Example() { return <Spinner />; } ```","reactDocgen":{"description":"`Spinner` is a component used to notify users that their action is being processed.\n\n```jsx\nimport { Spinner } from '@wordpress/components';\n\nfunction Example() {\n\treturn <Spinner />;\n}\n```","methods":[],"displayName":"Spinner","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/spinner/index.tsx","actualName":"Spinner","exportName":"Spinner"}},"components-tip":{"id":"components-tip","name":"Tip","path":"../packages/components/src/tip/stories/index.story.tsx","stories":[{"id":"components-tip--default","name":"Default","snippet":"const Default = () => {\n return <Tip>An example tip</Tip>;\n};"}],"import":"import { Tip } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tip","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tip/index.tsx","actualName":"Tip","exportName":"Tip","props":{"children":{"required":true,"tsType":{"name":"ReactNode"},"description":"Children to render in the tip."}}}},"components-hstack":{"id":"components-hstack","name":"HStack","path":"../packages/components/src/h-stack/stories/index.story.tsx","stories":[{"id":"components-hstack--default","name":"Default","snippet":"const Default = () => <HStack spacing=\"3\" style={ { background: '#eee', minHeight: '3rem' } }>\n { [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (\n <View key={ text } style={ { background: '#b9f9ff' } }>\n { text }\n </View>\n ) ) }\n</HStack>;"}],"import":"import { HStack, View } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedHStack","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/h-stack/component.tsx","actualName":"UnconnectedHStack"}},"components-responsivewrapper":{"id":"components-responsivewrapper","name":"ResponsiveWrapper","path":"../packages/components/src/responsive-wrapper/stories/index.story.tsx","stories":[{"id":"components-responsivewrapper--default","name":"Default","snippet":"const Default = () => <ResponsiveWrapper naturalWidth={2000} naturalHeight={680}><img\n src=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n alt=\"WordPress\" /></ResponsiveWrapper>;"},{"id":"components-responsivewrapper--with-svg","name":"With SVG","snippet":"const WithSVG = () => <ResponsiveWrapper><svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 280 640\"\n preserveAspectRatio=\"xMinYMin meet\"\n width=\"280px\"\n height=\"640px\">\n <rect x=\"0\" y=\"0\" width=\"280\" height=\"640\" style={ { fill: 'blue' } } />\n <g>\n <circle style={ { fill: 'red' } } cx=\"140\" cy=\"160\" r=\"60\" />\n <circle style={ { fill: 'yellow' } } cx=\"140\" cy=\"320\" r=\"60\" />\n <circle style={ { fill: '#40CC40' } } cx=\"140\" cy=\"480\" r=\"60\" />\n </g>\n </svg></ResponsiveWrapper>;","description":"When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make sure that it has the `viewbox` and the `preserveAspectRatio` set. When dealing with SVGs, it may not be possible to derive its `naturalWidth` and `naturalHeight` and therefore passing them as propertied to `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill its container, unless the `height` and `width` attributes are specified."}],"import":"import { ResponsiveWrapper } from \"@wordpress/components\";","jsDocTags":{},"description":"A wrapper component that maintains its aspect ratio when resized. ```jsx import { ResponsiveWrapper } from '@wordpress/components'; const MyResponsiveWrapper = () => ( <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }> <img src=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\" alt=\"WordPress\" /> </ResponsiveWrapper> ); ```","reactDocgen":{"description":"A wrapper component that maintains its aspect ratio when resized.\n\n```jsx\nimport { ResponsiveWrapper } from '@wordpress/components';\n\nconst MyResponsiveWrapper = () => (\n\t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n\t\t<img\n\t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n\t\t\talt=\"WordPress\"\n\t\t/>\n\t</ResponsiveWrapper>\n);\n```","methods":[],"displayName":"ResponsiveWrapper","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/responsive-wrapper/index.tsx","actualName":"ResponsiveWrapper","exportName":"default","props":{"naturalWidth":{"required":false,"tsType":{"name":"number"},"description":"The intrinsic width of the element to wrap. Will be used to determine the aspect ratio."},"naturalHeight":{"required":false,"tsType":{"name":"number"},"description":"The intrinsic height of the element to wrap. Will be used to determine the aspect ratio."},"children":{"required":true,"tsType":{"name":"ReactReactElement","raw":"React.ReactElement"},"description":"The element to wrap."},"isInline":{"required":false,"tsType":{"name":"boolean"},"description":"If true, the wrapper will be `span` instead of `div`.\n\n@default false","defaultValue":{"value":"false","computed":false}}}}},"components-vstack":{"id":"components-vstack","name":"VStack","path":"../packages/components/src/v-stack/stories/index.story.tsx","stories":[{"id":"components-vstack--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn (\n\t\t<VStack\n\t\t\t{ ...props }\n\t\t\tstyle={ { background: '#eee', minHeight: '200px' } }\n\t\t>\n\t\t\t{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (\n\t\t\t\t<View key={ text } style={ { background: '#b9f9ff' } }>\n\t\t\t\t\t{ text }\n\t\t\t\t</View>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n};"}],"import":"import { View, VStack } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedVStack","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/v-stack/component.tsx","actualName":"UnconnectedVStack"}},"components-externallink":{"id":"components-externallink","name":"ExternalLink","path":"../packages/components/src/external-link/stories/index.story.tsx","stories":[{"id":"components-externallink--default","name":"Default","snippet":"const Default = () => {\n return <ExternalLink href=\"https://wordpress.org\">WordPress</ExternalLink>;\n};"}],"import":"import { ExternalLink } from \"@wordpress/components\";","jsDocTags":{},"description":"Link to an external resource. ```jsx import { ExternalLink } from '@wordpress/components'; const MyExternalLink = () => ( <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink> ); ```","reactDocgen":{"description":"Link to an external resource.\n\n```jsx\nimport { ExternalLink } from '@wordpress/components';\n\nconst MyExternalLink = () => (\n <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n);\n```","methods":[],"displayName":"ExternalLink","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/external-link/index.tsx","actualName":"ExternalLink","exportName":"ExternalLink"}},"components-navigator":{"id":"components-navigator","name":"Navigator","path":"../packages/components/src/navigator/stories/index.story.tsx","stories":[{"id":"components-navigator--default","name":"Default","snippet":"const Default = () => <Navigator initialPath=\"/\">(<>\n <Navigator.Screen path=\"/\">\n <h2>This is the home screen.</h2>\n\n <VStack alignment=\"left\">\n <Navigator.Button variant=\"primary\" path=\"/child\">\n Go to child screen.\n </Navigator.Button>\n\n <Navigator.Button variant=\"primary\" path=\"/product/1\">\n Go to dynamic path screen with id 1.\n </Navigator.Button>\n\n <Navigator.Button variant=\"primary\" path=\"/product/2\">\n Go to dynamic path screen with id 2.\n </Navigator.Button>\n </VStack>\n </Navigator.Screen>\n <Navigator.Screen path=\"/child\">\n <h2>This is the child screen.</h2>\n <HStack spacing={ 2 } alignment=\"left\">\n <Navigator.BackButton variant=\"secondary\">\n Go back\n </Navigator.BackButton>\n\n <Navigator.Button\n variant=\"primary\"\n path=\"/child/grandchild\"\n >\n Go to grand child screen.\n </Navigator.Button>\n </HStack>\n </Navigator.Screen>\n <Navigator.Screen path=\"/child/grandchild\">\n <h2>This is the grand child screen.</h2>\n <Navigator.BackButton variant=\"secondary\">\n Go back\n </Navigator.BackButton>\n </Navigator.Screen>\n <Navigator.Screen path=\"/product/:id\">\n <DynamicScreen />\n </Navigator.Screen>\n </>)</Navigator>;"},{"id":"components-navigator--with-nested-initial-path","name":"With Nested Initial Path","snippet":"const WithNestedInitialPath = () => <Navigator initialPath=\"/child/grandchild\" />;"},{"id":"components-navigator--skip-focus","name":"Skip Focus","snippet":"const SkipFocus = () => <Navigator initialPath=\"/\">(<>\n <div\n style={ {\n height: 150,\n outline: '1px solid black',\n outlineOffset: '-1px',\n marginBlockEnd: '1rem',\n display: 'contents',\n } }\n >\n <Navigator.Screen path=\"/\">\n <h2>Home screen</h2>\n <Navigator.Button variant=\"primary\" path=\"/child\">\n Go to child screen.\n </Navigator.Button>\n </Navigator.Screen>\n\n <Navigator.Screen path=\"/child\">\n <h2>Child screen</h2>\n <Navigator.BackButton variant=\"secondary\">\n Go back to home screen\n </Navigator.BackButton>\n </Navigator.Screen>\n </div>\n <NavigatorButtonWithSkipFocus path=\"/child\">\n Go to child screen, but keep focus on this button\n </NavigatorButtonWithSkipFocus>\n </>)</Navigator>;"}],"import":"import { Button, HStack, Navigator, VStack } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedNavigator","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/navigator/navigator/component.tsx","actualName":"UnconnectedNavigator"}},"components-treegrid":{"id":"components-treegrid","name":"TreeGrid","path":"../packages/components/src/tree-grid/stories/index.story.tsx","stories":[{"id":"components-treegrid--default","name":"Default","snippet":"const Default = () => <TreeGrid onExpandRow={fn()} onCollapseRow={fn()} onFocusRow={fn()}><Rows items={ groceries } /></TreeGrid>;"}],"import":"import { Button, InputControl, TreeGrid, TreeGridCell, TreeGridRow } from \"@wordpress/components\";\nimport { Fragment } from \"@wordpress/element\";","jsDocTags":{"see":["{@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} "]},"description":"`TreeGrid` is used to create a tree hierarchy. It is not a visually styled component, but instead helps with adding keyboard navigation and roving tab index behaviors to tree grid structures. A tree grid is a hierarchical 2 dimensional UI component, for example it could be used to implement a file system browser. A tree grid allows the user to navigate using arrow keys. Up/down to navigate vertically across rows, and left/right to navigate horizontally between focusables in a row. The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid. ```jsx function TreeMenu() { return ( <TreeGrid> <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }> <TreeGridCell> { ( props ) => ( <Button onClick={ onSelect } { ...props }>Select</Button> ) } </TreeGridCell> <TreeGridCell> { ( props ) => ( <Button onClick={ onMove } { ...props }>Move</Button> ) } </TreeGridCell> </TreeGridRow> <TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }> <TreeGridCell> { ( props ) => ( <Button onClick={ onSelect } { ...props }>Select</Button> ) } </TreeGridCell> <TreeGridCell> { ( props ) => ( <Button onClick={ onMove } { ...props }>Move</Button> ) } </TreeGridCell> </TreeGridRow> <TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }> <TreeGridCell> { ( props ) => ( <Button onClick={ onSelect } { ...props }>Select</Button> ) } </TreeGridCell> <TreeGridCell> { ( props ) => ( <Button onClick={ onMove } { ...props }>Move</Button> ) } </TreeGridCell> </TreeGridRow> </TreeGrid> ); } ```","reactDocgen":{"description":"`TreeGrid` is used to create a tree hierarchy.\nIt is not a visually styled component, but instead helps with adding\nkeyboard navigation and roving tab index behaviors to tree grid structures.\n\nA tree grid is a hierarchical 2 dimensional UI component, for example it could be\nused to implement a file system browser.\n\nA tree grid allows the user to navigate using arrow keys.\nUp/down to navigate vertically across rows, and left/right to navigate horizontally\nbetween focusables in a row.\n\nThe `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used\nwith `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.\n\n```jsx\nfunction TreeMenu() {\n\treturn (\n\t\t<TreeGrid>\n\t\t\t<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t</TreeGridRow>\n\t\t\t<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t</TreeGridRow>\n\t\t\t<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onSelect } { ...props }>Select</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t\t<TreeGridCell>\n\t\t\t\t\t{ ( props ) => (\n\t\t\t\t\t\t<Button onClick={ onMove } { ...props }>Move</Button>\n\t\t\t\t\t) }\n\t\t\t\t</TreeGridCell>\n\t\t\t</TreeGridRow>\n\t\t</TreeGrid>\n\t);\n}\n```\n\n@see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}","methods":[],"displayName":"TreeGrid","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tree-grid/index.tsx","actualName":"TreeGrid","exportName":"TreeGrid","props":{"onExpandRow":{"defaultValue":{"value":"() => {}","computed":false},"required":false},"onCollapseRow":{"defaultValue":{"value":"() => {}","computed":false},"required":false},"onFocusRow":{"defaultValue":{"value":"() => {}","computed":false},"required":false}}}},"components-confirmdialog":{"id":"components-confirmdialog","name":"ConfirmDialog","path":"../packages/components/src/confirm-dialog/stories/index.story.tsx","stories":[{"id":"components-confirmdialog--default","name":"Default","snippet":"const Default = () => {\n const [ isOpen, setIsOpen ] = useState( false );\n\n const handleConfirm: typeof onConfirm = ( confirmArgs ) => {\n\t\tonConfirm( confirmArgs );\n\t\tsetIsOpen( false );\n\t};\n\n const handleCancel: typeof onCancel = ( cancelArgs ) => {\n\t\tonCancel?.( cancelArgs );\n\t\tsetIsOpen( false );\n\t};\n\n return (\n <>\n <Button\n __next40pxDefaultSize\n variant=\"primary\"\n onClick={ () => setIsOpen( true ) }>Open ConfirmDialog\n </Button>\n <ConfirmDialog isOpen={ isOpen } onConfirm={ handleConfirm } onCancel={ handleCancel }>\n Would you like to privately publish the post now?\n </ConfirmDialog>\n </>\n );\n};"},{"id":"components-confirmdialog--with-custom-button-labels","name":"With Custom Button Labels","snippet":"const WithCustomButtonLabels = () => {\n const [ isOpen, setIsOpen ] = useState( false );\n\n const handleConfirm: typeof onConfirm = ( confirmArgs ) => {\n\t\tonConfirm( confirmArgs );\n\t\tsetIsOpen( false );\n\t};\n\n const handleCancel: typeof onCancel = ( cancelArgs ) => {\n\t\tonCancel?.( cancelArgs );\n\t\tsetIsOpen( false );\n\t};\n\n return (\n <>\n <Button\n __next40pxDefaultSize\n variant=\"primary\"\n onClick={ () => setIsOpen( true ) }>Open ConfirmDialog\n </Button>\n <ConfirmDialog\n cancelButtonText=\"No thanks\"\n confirmButtonText=\"Yes please!\"\n isOpen={ isOpen }\n onConfirm={ handleConfirm }\n onCancel={ handleCancel }>\n { args.children }\n </ConfirmDialog>\n </>\n );\n};"}],"import":"import { Button, ConfirmDialog } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedConfirmDialog","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/confirm-dialog/component.tsx","actualName":"UnconnectedConfirmDialog"}},"components-dropdown":{"id":"components-dropdown","name":"Dropdown","path":"../packages/components/src/dropdown/stories/index.story.tsx","stories":[{"id":"components-dropdown--default","name":"Default","snippet":"const Default = () => <Dropdown\n onClose={fn()}\n onToggle={fn()}\n renderToggle={( { isOpen, onToggle } ) => (\n <Button\n __next40pxDefaultSize\n onClick={ onToggle }\n aria-expanded={ isOpen }\n variant=\"primary\"\n >\n Open dropdown\n </Button>\n )}\n renderContent={() => <div>This is the dropdown content.</div>} />;"},{"id":"components-dropdown--with-more-padding","name":"With More Padding","snippet":"const WithMorePadding = () => <Dropdown\n onClose={fn()}\n onToggle={fn()}\n renderContent={() => (\n <DropdownContentWrapper paddingSize=\"medium\">\n { /* eslint-disable react/no-unescaped-entities */ }\n Content wrapped with <code>paddingSize=\"medium\"</code>.\n { /* eslint-enable react/no-unescaped-entities */ }\n </DropdownContentWrapper>\n )} />;","description":"To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>` convenience wrapper. A `paddingSize` of `\"medium\"` is suitable for relatively larger dropdowns (default is `\"small\"`)."},{"id":"components-dropdown--with-no-padding","name":"With No Padding","snippet":"const WithNoPadding = () => <Dropdown\n onClose={fn()}\n onToggle={fn()}\n renderContent={() => (\n <DropdownContentWrapper paddingSize=\"none\">\n { /* eslint-disable react/no-unescaped-entities */ }\n Content wrapped with <code>paddingSize=\"none\"</code>.\n { /* eslint-enable react/no-unescaped-entities */ }\n </DropdownContentWrapper>\n )} />;","description":"The `<DropdownContentWrapper>` convenience wrapper can also be used to remove padding entirely, with a `paddingSize` of `\"none\"`. This can also serve as a clean foundation to add arbitrary paddings, for example when child components already have padding on their own."},{"id":"components-dropdown--with-menu-items","name":"With Menu Items","snippet":"const WithMenuItems = () => <Dropdown\n onClose={fn()}\n onToggle={fn()}\n renderContent={() => (\n <>\n <MenuItem>Standalone Item</MenuItem>\n <MenuGroup label=\"Group 1\">\n <MenuItem>Item 1</MenuItem>\n <MenuItem>Item 2</MenuItem>\n </MenuGroup>\n <MenuGroup label=\"Group 2\">\n <MenuItem>Item 1</MenuItem>\n <MenuItem>Item 2</MenuItem>\n </MenuGroup>\n </>\n )} />;"}],"import":"import { Button, Dropdown, DropdownContentWrapper, MenuGroup, MenuItem } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedDropdown","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/dropdown/index.tsx","actualName":"UnconnectedDropdown","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"The className of the global container."},"contentClassName":{"required":false,"tsType":{"name":"string"},"description":"If you want to target the dropdown menu for styling purposes,\nyou need to provide a contentClassName because it's not being rendered\nas a child of the container node."},"expandOnMobile":{"required":false,"tsType":{"name":"boolean"},"description":"Opt-in prop to show popovers fullscreen on mobile.\n\n@default false"},"focusOnMount":{"required":false,"tsType":{"name":"useFocusOnMount.Mode"},"description":"Determines focus behavior when the dialog mounts.\n\n- `\"firstElement\"` focuses the first tabbable element within.\n- `\"firstInputElement\"` focuses the first value control within.\n- `true` focuses the element itself.\n- `false` does nothing and _should not be used unless an accessible\n substitute behavior is implemented_.\n\n@default 'firstElement'"},"headerTitle":{"required":false,"tsType":{"name":"string"},"description":"Set this to customize the text that is shown in the dropdown's header\nwhen it is fullscreen on mobile."},"onClose":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":"A callback invoked when the popover should be closed."},"onToggle":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( willOpen: boolean ) => void","signature":{"arguments":[{"type":{"name":"boolean"},"name":"willOpen"}],"return":{"name":"void"}}},"description":"A callback invoked when the state of the dropdown changes\nfrom open to closed and vice versa."},"popoverProps":{"required":false,"tsType":{"name":"Omit","elements":[{"name":"ComponentPropsWithoutRef","elements":[{"name":"Popover"}],"raw":"ComponentPropsWithoutRef< typeof Popover >"},{"name":"literal","value":"'children'"}],"raw":"Omit<\n\tComponentPropsWithoutRef< typeof Popover >,\n\t'children'\n>"},"description":"Properties of popoverProps object will be passed as props\nto the Popover component.\nUse this object to access properties/features\nof the Popover component that are not already exposed\nin the Dropdown component,\ne.g.: the ability to have the popover without an arrow."},"renderContent":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( props: CallbackProps ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n}","signature":{"properties":[{"key":"isOpen","value":{"name":"boolean","required":true}},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}}]}},"name":"props"}],"return":{"name":"ReactNode"}}},"description":"A callback invoked to render the content of the dropdown menu.\nIts first argument is the same as the renderToggle prop."},"renderToggle":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( props: CallbackProps ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n}","signature":{"properties":[{"key":"isOpen","value":{"name":"boolean","required":true}},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}}]}},"name":"props"}],"return":{"name":"ReactNode"}}},"description":"A callback invoked to render the Dropdown Toggle Button.\n\nThe first argument of the callback is an object\ncontaining the following properties:\n\n- isOpen: whether the dropdown menu is opened or not\n- onToggle: A function switching the dropdown menu's state\nfrom open to closed and vice versa\n- onClose: A function that closes the menu if invoked"},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":"The style of the global container."},"position":{"required":false,"tsType":{"name":"union","raw":"PopoverProps[ 'position' ]"},"description":"Legacy way to specify the popover's position with respect to its anchor.\nFor details about the possible values, see the `Popover` component's docs.\n_Note: this prop is deprecated. Use the `popoverProps.placement` prop\ninstead._\n\n@deprecated"},"open":{"required":false,"tsType":{"name":"boolean"},"description":"The controlled open state of the dropdown.\nMust be used in conjunction with `onToggle`."},"defaultOpen":{"required":false,"tsType":{"name":"boolean"},"description":"The open state of the dropdown when initially rendered.\nUse when you do not need to control its open state. It will be overridden\nby the `open` prop if it is specified on the component's first render."}}}},"components-modal":{"id":"components-modal","name":"Modal","path":"../packages/components/src/modal/stories/index.story.tsx","stories":[{"id":"components-modal--default","name":"Default","snippet":"const Default = ( { onRequestClose, ...args } ) => {\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst openModal = () => setOpen( true );\n\tconst closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {\n\t\tsetOpen( false );\n\t\tonRequestClose( event );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tonClick={ openModal }\n\t\t\t>\n\t\t\t\tOpen Modal\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal onRequestClose={ closeModal } { ...args }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit,\n\t\t\t\t\t\tsed do eiusmod tempor incididunt ut labore et magna\n\t\t\t\t\t\taliqua. Ut enim ad minim veniam, quis nostrud\n\t\t\t\t\t\texercitation ullamco laboris nisi ut aliquip ex ea ea\n\t\t\t\t\t\tcommodo consequat. Duis aute irure dolor in\n\t\t\t\t\t\treprehenderit in voluptate velit esse cillum dolore eu\n\t\t\t\t\t\tfugiat nulla pariatur. Excepteur sint occaecat cupidatat\n\t\t\t\t\t\tnon proident, sunt in culpa qui officia deserunt mollit\n\t\t\t\t\t\tanim id est laborum.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tstyle={ { marginBottom: '20px' } }\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ closeModal }\n\t\t\t\t\t>\n\t\t\t\t\t\tClose Modal\n\t\t\t\t\t</Button>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};"},{"id":"components-modal--withsize-small","name":"With size: small","snippet":"const WithsizeSmall = ( { onRequestClose, ...args } ) => {\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst openModal = () => setOpen( true );\n\tconst closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {\n\t\tsetOpen( false );\n\t\tonRequestClose( event );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tonClick={ openModal }\n\t\t\t>\n\t\t\t\tOpen Modal\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal onRequestClose={ closeModal } { ...args }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit,\n\t\t\t\t\t\tsed do eiusmod tempor incididunt ut labore et magna\n\t\t\t\t\t\taliqua. Ut enim ad minim veniam, quis nostrud\n\t\t\t\t\t\texercitation ullamco laboris nisi ut aliquip ex ea ea\n\t\t\t\t\t\tcommodo consequat. Duis aute irure dolor in\n\t\t\t\t\t\treprehenderit in voluptate velit esse cillum dolore eu\n\t\t\t\t\t\tfugiat nulla pariatur. Excepteur sint occaecat cupidatat\n\t\t\t\t\t\tnon proident, sunt in culpa qui officia deserunt mollit\n\t\t\t\t\t\tanim id est laborum.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tstyle={ { marginBottom: '20px' } }\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ closeModal }\n\t\t\t\t\t>\n\t\t\t\t\t\tClose Modal\n\t\t\t\t\t</Button>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};"},{"id":"components-modal--with-header-actions","name":"With Header Actions","snippet":"const WithHeaderActions = ( { onRequestClose, ...args } ) => {\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst openModal = () => setOpen( true );\n\tconst closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {\n\t\tsetOpen( false );\n\t\tonRequestClose( event );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tonClick={ openModal }\n\t\t\t>\n\t\t\t\tOpen Modal\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal onRequestClose={ closeModal } { ...args }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit,\n\t\t\t\t\t\tsed do eiusmod tempor incididunt ut labore et magna\n\t\t\t\t\t\taliqua. Ut enim ad minim veniam, quis nostrud\n\t\t\t\t\t\texercitation ullamco laboris nisi ut aliquip ex ea ea\n\t\t\t\t\t\tcommodo consequat. Duis aute irure dolor in\n\t\t\t\t\t\treprehenderit in voluptate velit esse cillum dolore eu\n\t\t\t\t\t\tfugiat nulla pariatur. Excepteur sint occaecat cupidatat\n\t\t\t\t\t\tnon proident, sunt in culpa qui officia deserunt mollit\n\t\t\t\t\t\tanim id est laborum.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tstyle={ { marginBottom: '20px' } }\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ closeModal }\n\t\t\t\t\t>\n\t\t\t\t\t\tClose Modal\n\t\t\t\t\t</Button>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};","description":"The `headerActions` prop can be used to add auxiliary actions to the header, for example a fullscreen mode toggle."}],"import":"import { Button, InputControl, Modal } from \"@wordpress/components\";","jsDocTags":{},"description":"Modals give users information and choices related to a task they’re trying to accomplish. They can contain critical information, require decisions, or involve multiple tasks. ```jsx import { Button, Modal } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyModal = () => { const [ isOpen, setOpen ] = useState( false ); const openModal = () => setOpen( true ); const closeModal = () => setOpen( false ); return ( <> <Button variant=\"secondary\" onClick={ openModal }> Open Modal </Button> { isOpen && ( <Modal title=\"This is my modal\" onRequestClose={ closeModal }> <Button variant=\"secondary\" onClick={ closeModal }> My custom close button </Button> </Modal> ) } </> ); }; ```","reactDocgen":{"description":"Modals give users information and choices related to a task they’re trying to\naccomplish. They can contain critical information, require decisions, or\ninvolve multiple tasks.\n\n```jsx\nimport { Button, Modal } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyModal = () => {\n const [ isOpen, setOpen ] = useState( false );\n const openModal = () => setOpen( true );\n const closeModal = () => setOpen( false );\n\n return (\n <>\n <Button variant=\"secondary\" onClick={ openModal }>\n Open Modal\n </Button>\n { isOpen && (\n <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n <Button variant=\"secondary\" onClick={ closeModal }>\n My custom close button\n </Button>\n </Modal>\n ) }\n </>\n );\n};\n```","methods":[],"displayName":"Modal","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/modal/index.tsx","actualName":"Modal","exportName":"Modal","props":{"aria":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * If this property is added, it will be added to the modal content\n\t * `div` as `aria-describedby`.\n\t */\n\tdescribedby?: string;\n\t/**\n\t * If this property is added, it will be added to the modal content\n\t * `div` as `aria-labelledby`. Use this when you are rendering the title\n\t * yourself within the modal's content area instead of using the `title`\n\t * prop. This ensures the title is usable by assistive technology.\n\t *\n\t * Titles are required for accessibility reasons, see `contentLabel` and\n\t * `title` for other ways to provide a title.\n\t */\n\tlabelledby?: string;\n}","signature":{"properties":[{"key":"describedby","value":{"name":"string","required":false},"description":"If this property is added, it will be added to the modal content\n`div` as `aria-describedby`."},{"key":"labelledby","value":{"name":"string","required":false},"description":"If this property is added, it will be added to the modal content\n`div` as `aria-labelledby`. Use this when you are rendering the title\nyourself within the modal's content area instead of using the `title`\nprop. This ensures the title is usable by assistive technology.\n\nTitles are required for accessibility reasons, see `contentLabel` and\n`title` for other ways to provide a title."}]}},"description":""},"bodyOpenClassName":{"required":false,"tsType":{"name":"string"},"description":"Class name added to the body element when the modal is open.\n\n@default 'modal-open'"},"children":{"required":true,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The children elements."},"className":{"required":false,"tsType":{"name":"string"},"description":"If this property is added, it will an additional class name to the modal\ncontent `div`."},"closeButtonLabel":{"required":false,"tsType":{"name":"string"},"description":"Label on the close button.\n\n@default `__( 'Close' )`"},"contentLabel":{"required":false,"tsType":{"name":"string"},"description":"If this property is added, it will be added to the modal content `div` as\n`aria-label`.\n\nTitles are required for accessibility reasons, see `aria.labelledby` and\n`title` for other ways to provide a title."},"focusOnMount":{"required":false,"tsType":{"name":"union","raw":"useFocusOnMount.Mode | 'firstContentElement'","elements":[{"name":"useFocusOnMount.Mode"},{"name":"literal","value":"'firstContentElement'"}]},"description":"Determines focus behavior when the modal opens.\n\n- `\"firstElement\"` focuses the first tabbable element within.\n- `\"firstInputElement\"` focuses the first value control within.\n- `\"firstContentElement\"` focuses the first tabbable element within the modal’s content element.\n- `true` focuses the element itself.\n- `false` does nothing and _should not be used unless an accessible\n substitute behavior is implemented_.\n\n@default true"},"headerActions":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"Elements that are injected into the modal header to the left of the close button (if rendered).\nHidden if `__experimentalHideHeader` is `true`.\n\n@default null"},"icon":{"required":false,"tsType":{"name":"React.JSX.Element"},"description":"If this property is added, an icon will be added before the title."},"isDismissible":{"required":false,"tsType":{"name":"boolean"},"description":"If this property is set to false, the modal will not display a close icon\nand cannot be dismissed.\n\n@default true"},"isFullScreen":{"required":false,"tsType":{"name":"boolean"},"description":"This property when set to `true` will render a full screen modal.\n\n@default false"},"size":{"required":false,"tsType":{"name":"union","raw":"'small' | 'medium' | 'large' | 'fill'","elements":[{"name":"literal","value":"'small'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'large'"},{"name":"literal","value":"'fill'"}]},"description":"If this property is added it will cause the modal to render at a preset\nwidth, or expand to fill the screen. This prop will be ignored if\n`isFullScreen` is set to `true`.\n\nNote: `Modal`'s width can also be controlled by adjusting the width of the\nmodal's contents, or via CSS using the `style` prop."},"onKeyDown":{"required":false,"tsType":{"name":"ReactKeyboardEventHandler","raw":"React.KeyboardEventHandler< HTMLDivElement >","elements":[{"name":"HTMLDivElement"}]},"description":"Handle the key down on the modal frame `div`."},"onRequestClose":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(\n\tevent?: React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent","elements":[{"name":"ReactKeyboardEvent","raw":"React.KeyboardEvent< HTMLDivElement >","elements":[{"name":"HTMLDivElement"}]},{"name":"ReactSyntheticEvent","raw":"React.SyntheticEvent"}]},"name":"event"}],"return":{"name":"void"}}},"description":"This function is called to indicate that the modal should be closed."},"overlayClassName":{"required":false,"tsType":{"name":"string"},"description":"If this property is added, it will an additional class name to the modal\noverlay `div`."},"role":{"required":false,"tsType":{"name":"ReactAriaRole","raw":"React.AriaRole"},"description":"If this property is added, it will override the default role of the\nmodal.\n\n@default 'dialog'"},"shouldCloseOnClickOutside":{"required":false,"tsType":{"name":"boolean"},"description":"If this property is added, it will determine whether the modal requests\nto close when a mouse click occurs outside of the modal content.\n\n@default true"},"shouldCloseOnEsc":{"required":false,"tsType":{"name":"boolean"},"description":"If this property is added, it will determine whether the modal requests\nto close when the escape key is pressed.\n\n@default true"},"style":{"required":false,"tsType":{"name":"ReactCSSProperties","raw":"React.CSSProperties"},"description":"If this property is added, it will be added to the modal frame `div`."},"title":{"required":false,"tsType":{"name":"string"},"description":"This property is used as the modal header's title.\n\nTitles are required for accessibility reasons, see `aria.labelledby` and\n`contentLabel` for other ways to provide a title."},"__experimentalHideHeader":{"required":false,"tsType":{"name":"boolean"},"description":"When set to `true`, the Modal's header (including the icon, title and\nclose button) will not be rendered.\n\n_Warning_: This property is still experimental. “Experimental” means this\nis an early implementation subject to drastic and breaking changes.\n\n@default false"}}}},"components-popover":{"id":"components-popover","name":"Popover","path":"../packages/components/src/popover/stories/index.story.tsx","stories":[{"id":"components-popover--default","name":"Default","snippet":"const Default = () => <Popover>(<div style={ { width: '280px', whiteSpace: 'normal' } }>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n </div>)</Popover>;"},{"id":"components-popover--unstyled","name":"Unstyled","snippet":"const Unstyled = () => <Popover variant=\"unstyled\" />;"},{"id":"components-popover--all-placements","name":"All Placements","snippet":"const AllPlacements = ( { children, ...args } ) => (\n <div\n style={ {\n minWidth: '600px',\n marginLeft: 'auto',\n marginRight: 'auto',\n } }\n >\n <h2>\n Resize / scroll the viewport to test the behavior of the\n popovers when they reach the viewport boundaries.\n </h2>\n <div>\n { AVAILABLE_PLACEMENTS.map( ( p ) => (\n <PopoverWithAnchor\n key={ p }\n placement={ p }\n { ...args }\n resize={ p === 'overlay' ? true : args.resize }\n >\n { children }\n <div>\n <small>(placement: { p })</small>\n </div>\n </PopoverWithAnchor>\n ) ) }\n </div>\n </div>\n);"},{"id":"components-popover--dynamic-height","name":"Dynamic Height","snippet":"const DynamicHeight = () => <Popover>(<div\n style={ {\n height: 'var(--dynamic-height)',\n background: '#eee',\n padding: '20px',\n } }\n >Content with dynamic height\n </div>)</Popover>;"},{"id":"components-popover--with-slot-outside-iframe","name":"With Slot Outside Iframe","snippet":"const WithSlotOutsideIframe = () => <PopoverInsideIframeRenderedInExternalSlot />;"},{"id":"components-popover--with-close-handlers","name":"With Close Handlers","snippet":"const WithCloseHandlers = function WithCloseHandlersStory( args ) {\n const [ isVisible, setIsVisible ] = useState( false );\n const buttonRef = useRef< HTMLButtonElement >( null );\n\n const toggleVisible = ( event: React.MouseEvent ) => {\n if ( buttonRef.current && event.target !== buttonRef.current ) {\n return;\n }\n setIsVisible( ( prev ) => ! prev );\n };\n\n const handleClose = () => {\n args.onClose?.();\n setIsVisible( false );\n };\n\n const handleFocusOutside = ( e: React.SyntheticEvent ) => {\n args.onFocusOutside?.( e );\n setIsVisible( false );\n };\n\n useEffect( () => {\n buttonRef.current?.scrollIntoView( {\n block: 'center',\n inline: 'center',\n } );\n }, [] );\n\n return (\n <div\n style={ {\n width: '300vw',\n height: '300vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n } }\n >\n <Button\n __next40pxDefaultSize\n variant=\"secondary\"\n onClick={ toggleVisible }\n ref={ buttonRef }\n >\n Toggle Popover\n { isVisible && (\n <Popover\n { ...args }\n onClose={ handleClose }\n onFocusOutside={ handleFocusOutside }\n >\n { args.children }\n </Popover>\n ) }\n </Button>\n </div>\n );\n};"}],"import":"import { Button, Popover, PopoverInsideIframeRenderedInExternalSlot } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"PopoverSlot","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/popover/index.tsx","actualName":"PopoverSlot","exportName":"PopoverSlot","props":{"name":{"required":false,"tsType":{"name":"string"},"description":"The name of the Slot in which the popover should be rendered. It should\nbe also passed to the corresponding `PopoverSlot` component.\n\n@default 'Popover'","defaultValue":{"value":"'Popover'","computed":false}}}}},"components-tooltip":{"id":"components-tooltip","name":"Tooltip","path":"../packages/components/src/tooltip/stories/index.story.tsx","stories":[{"id":"components-tooltip--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<Tooltip { ...props } />\n);"},{"id":"components-tooltip--keyboard-shortcut","name":"Keyboard Shortcut","snippet":"const KeyboardShortcut = ( props ) => (\n\t<Tooltip { ...props } />\n);"},{"id":"components-tooltip--nested","name":"Nested","snippet":"const Nested = ( props ) => (\n\t<Tooltip { ...props } />\n);","description":"In case one or more `Tooltip` components are rendered inside another `Tooltip` component, only the tooltip associated to the outermost `Tooltip` component will be rendered in the browser and shown to the user appropriately. The rest of the nested `Tooltip` components will simply no-op and pass-through their anchor."}],"import":"import { Button, Tooltip } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tooltip","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tooltip/index.tsx","actualName":"Tooltip","exportName":"Tooltip","props":{"children":{"required":true,"tsType":{"name":"ReactReactElement","raw":"React.ReactElement"},"description":"The anchor for the tooltip.\n\n**Note**: Accepts only one child element."},"className":{"required":false,"tsType":{"name":"string"},"description":"Custom class name for the tooltip."},"hideOnClick":{"required":false,"tsType":{"name":"boolean"},"description":"Option to hide the tooltip when the anchor is clicked.\n\n@default true"},"delay":{"required":false,"tsType":{"name":"number"},"description":"The amount of time in milliseconds to wait before showing the tooltip.\n\n@default 700"},"placement":{"required":false,"tsType":{"name":"Placement"},"description":"Where the tooltip should be positioned relative to its parent.\n\n@default top"},"position":{"required":false,"tsType":{"name":"union","raw":"PopoverProps[ 'position' ]"},"description":"_Note: this prop is deprecated. Please use the `placement` prop instead._\n\nLegacy way of specifying the tooltip's position relative to its parent.\n\nSpecify y- and x-axis as a space-separated string. Supports `\"top\"`,\n`\"bottom\"` y axis, and `\"left\"`, `\"center\"`, `\"right\"` x axis.\n\n@deprecated\n@default top"},"shortcut":{"required":false,"tsType":{"name":"union","raw":"ShortcutProps[ 'shortcut' ]"},"description":"An option for adding accessible keyboard shortcuts.\n\nIf shortcut is a string, it is expecting the display text. If shortcut is an\nobject, it will accept the properties of `display` (string) and `ariaLabel`\n(string)."},"text":{"required":false,"tsType":{"name":"string"},"description":"The text shown in the tooltip when anchor element is focused or hovered."}}}},"components-basecontrol":{"id":"components-basecontrol","name":"BaseControl","path":"../packages/components/src/base-control/stories/index.story.tsx","stories":[{"id":"components-basecontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst { baseControlProps, controlProps } = useBaseControlProps( props );\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps }>\n\t\t\t<textarea style={ { display: 'block' } } { ...controlProps } />\n\t\t</BaseControl>\n\t);\n};"},{"id":"components-basecontrol--with-help-text","name":"With Help Text","snippet":"const WithHelpText = ( props ) => {\n\tconst { baseControlProps, controlProps } = useBaseControlProps( props );\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps }>\n\t\t\t<textarea style={ { display: 'block' } } { ...controlProps } />\n\t\t</BaseControl>\n\t);\n};"},{"id":"components-basecontrol--with-visual-label","name":"With Visual Label","snippet":"const WithVisualLabel = ( props ) => {\n\tBaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';\n\n\treturn (\n\t\t<BaseControl { ...props }>\n\t\t\t<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>\n\t\t\t<div>\n\t\t\t\t<Button __next40pxDefaultSize variant=\"secondary\">\n\t\t\t\t\tSelect an author\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n};","description":"`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would otherwise use if the `label` prop was passed."}],"import":"import { BaseControl, Button } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"VisualLabel","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/base-control/index.tsx","actualName":"VisualLabel","exportName":"VisualLabel"}},"components-selection-input-time-date-datecalendar":{"id":"components-selection-input-time-date-datecalendar","name":"DateCalendar","path":"../packages/components/src/calendar/stories/date-calendar.story.tsx","stories":[{"id":"components-selection-input-time-date-datecalendar--default","name":"Default","snippet":"const Default = () => <DateCalendar onMonthChange={fn()} onSelect={fn()} />;"},{"id":"components-selection-input-time-date-datecalendar--disabled-dates","name":"Disabled Dates","snippet":"const DisabledDates = () => <DateCalendar\n onMonthChange={fn()}\n onSelect={fn()}\n disabled={[\n // Disable tomorrow (single date)\n new Date( new Date().setDate( new Date().getDate() + 1 ) ),\n // Disable all dates after Feb 1st of next year\n { after: new Date( new Date().getFullYear() + 1, 1, 1 ) },\n // Disable all dates before Dec 1st of last year\n { before: new Date( new Date().getFullYear() - 1, 11, 1 ) },\n // Disable all dates between 12th and 14th of August of this year\n {\n after: new Date( new Date().getFullYear(), 7, 11 ),\n before: new Date( new Date().getFullYear(), 7, 15 ),\n },\n // Disable all dates between 21st and 26th of October of this year\n {\n from: new Date( new Date().getFullYear(), 9, 21 ),\n to: new Date( new Date().getFullYear(), 9, 26 ),\n },\n // Disable all Wednesdays\n { dayOfWeek: 3 },\n // Disable all prime day numbers\n function isPrimeDate( date: Date ) {\n return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(\n date.getDate()\n );\n },\n ]} />;"},{"id":"components-selection-input-time-date-datecalendar--with-selected-date-and-month","name":"With Selected Date And Month","snippet":"const WithSelectedDateAndMonth = () => <DateCalendar\n onMonthChange={fn()}\n onSelect={fn()}\n defaultSelected={firstDayOfNextMonth}\n defaultMonth={firstDayOfNextMonth} />;"},{"id":"components-selection-input-time-date-datecalendar--with-outside-days","name":"With Outside Days","snippet":"const WithOutsideDays = () => <DateCalendar onMonthChange={fn()} onSelect={fn()} showOutsideDays fixedWeeks />;","description":"Shows days from adjacent months in the grid. Outside days use a lighter style and are still interactive. Use `fixedWeeks` to keep the grid height constant."},{"id":"components-selection-input-time-date-datecalendar--with-time-zone","name":"With Time Zone","snippet":"const WithTimeZone = () => {\n const [ selected, setSelected ] = useState< TZDate | null >( null );\n\n useEffect( () => {\n setSelected(\n // Select one week from today every time the time zone changes.\n new TZDate(\n new Date().setDate( new Date().getDate() + 7 ),\n args.timeZone\n )\n );\n }, [ args.timeZone ] );\n\n return (\n <>\n <DateCalendar\n onMonthChange={fn()}\n timeZone=\"Pacific/Auckland\"\n selected={ selected }\n onSelect={ ( selectedDate, ...rest ) => {\n setSelected(\n selectedDate\n ? new TZDate( selectedDate, args.timeZone )\n : null\n );\n args.onSelect?.( selectedDate, ...rest );\n } }\n disabled={ [\n {\n // Disable any date before today\n before: new TZDate( new Date(), args.timeZone ),\n },\n ] } />\n <p>Calendar set to { args.timeZone ?? 'current' }timezone,\n disabling selection for all dates before today, and starting\n with a default date of 1 week from today.\n </p>\n </>\n );\n};","description":"When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object."}],"import":"import { DateCalendar } from \"@wordpress/components\";","jsDocTags":{},"description":"`DateCalendar` is a React component that provides a customizable calendar interface for **single date** selection. The component is built with accessibility in mind and follows ARIA best practices for calendar widgets. It provides keyboard navigation, screen reader support, and customizable labels for internationalization.","reactDocgen":{"description":"`DateCalendar` is a React component that provides a customizable calendar\ninterface for **single date** selection.\n\nThe component is built with accessibility in mind and follows ARIA best\npractices for calendar widgets. It provides keyboard navigation, screen reader\nsupport, and customizable labels for internationalization.","methods":[],"displayName":"DateCalendar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/calendar/date-calendar/index.tsx","actualName":"DateCalendar","exportName":"DateCalendar","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the selection is required.\nWhen `true`, there always needs to be a date selected.\n@default false"},"defaultMonth":{"required":false,"tsType":{"name":"Date"},"description":"The initial month to show in the calendar view (uncontrolled).\n@default The current month"},"month":{"required":false,"tsType":{"name":"Date"},"description":"The month displayed in the calendar view (controlled). Use together with\n`onMonthChange` to change the month programmatically."},"numberOfMonths":{"required":false,"tsType":{"name":"number"},"description":"The number of months displayed at once.\n@default 1","defaultValue":{"value":"1","computed":false}},"showOutsideDays":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, days from adjacent months are shown in the grid and receive\nthe `outside` modifier and the class.\n@default false"},"fixedWeeks":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, the calendar always shows a fixed number of weeks (e.g. 6)\nso the grid height does not change between months.\n@default false"},"startMonth":{"required":false,"tsType":{"name":"Date"},"description":"The earliest month to start the month navigation."},"endMonth":{"required":false,"tsType":{"name":"Date"},"description":"The latest month to end the month navigation."},"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":"Focus the first selected day (if set) or today's date (if not disabled).\n\nUse this prop when you need to focus the calendar after a user action\n(e.g. opening the dialog with the calendar)."},"disabled":{"required":false,"tsType":{"name":"union","raw":"Matcher | Matcher[] | undefined","elements":[{"name":"union","raw":"| boolean\n| ( ( date: Date ) => boolean )\n| Date\n| Date[]\n| DateRange\n| DateBefore\n| DateAfter\n| DateInterval\n| DayOfWeek","elements":[{"name":"boolean"},{"name":"unknown"},{"name":"Date"},{"name":"Array","elements":[{"name":"Date"}],"raw":"Date[]"},{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tafter: Date;\n}","signature":{"properties":[{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n\tafter: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}},{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdayOfWeek: number | number[];\n}","signature":{"properties":[{"key":"dayOfWeek","value":{"name":"union","raw":"number | number[]","elements":[{"name":"number"},{"name":"Array","elements":[{"name":"number"}],"raw":"number[]"}],"required":true}}]}}]},{"name":"Array","elements":[{"name":"union","raw":"| boolean\n| ( ( date: Date ) => boolean )\n| Date\n| Date[]\n| DateRange\n| DateBefore\n| DateAfter\n| DateInterval\n| DayOfWeek","elements":[{"name":"boolean"},{"name":"unknown"},{"name":"Date"},{"name":"Array","elements":[{"name":"Date"}],"raw":"Date[]"},{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tafter: Date;\n}","signature":{"properties":[{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n\tafter: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}},{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdayOfWeek: number | number[];\n}","signature":{"properties":[{"key":"dayOfWeek","value":{"name":"union","raw":"number | number[]","elements":[{"name":"number"},{"name":"Array","elements":[{"name":"number"}],"raw":"number[]"}],"required":true}}]}}]}],"raw":"Matcher[]"},{"name":"undefined"}]},"description":"Specify which days are disabled. Using `true` will disable all dates."},"disableNavigation":{"required":false,"tsType":{"name":"boolean"},"description":"Disable the navigation buttons."},"labels":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The label for the navigation toolbar.\n\t * @default \"\"\n\t */\n\tlabelNav?: () => string;\n\t/**\n\t * The label for the month grid.\n\t * @default \"LLLL y\" (e.g. \"November 2022\")\n\t */\n\tlabelGrid?: ( date: Date ) => string;\n\t/**\n\t * The label for the gridcell, when the calendar is not interactive.\n\t * @default The formatted date.\n\t */\n\tlabelGridcell?: ( date: Date, modifiers?: Modifiers ) => string;\n\t/**\n\t * The label for the \"next month\" button.\n\t * @default \"Go to the Next Month\"\n\t */\n\tlabelNext?: ( month: Date | undefined ) => string;\n\t/**\n\t * The label for the \"previous month\" button.\n\t * @default \"Go to the Previous Month\"\n\t */\n\tlabelPrevious?: ( month: Date | undefined ) => string;\n\t/**\n\t * The label for the day button.\n\t * @default The formatted date.\n\t */\n\tlabelDayButton?: ( date: Date, modifiers?: Modifiers ) => string;\n\t/**\n\t * The label for the weekday.\n\t * @default ( date: Date ) => \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\"\n\t */\n\tlabelWeekday?: ( date: Date ) => string;\n}","signature":{"properties":[{"key":"labelNav","value":{"name":"signature","type":"function","raw":"() => string","signature":{"arguments":[],"return":{"name":"string"}},"required":false},"description":"The label for the navigation toolbar.\n@default \"\""},{"key":"labelGrid","value":{"name":"signature","type":"function","raw":"( date: Date ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"}],"return":{"name":"string"}},"required":false},"description":"The label for the month grid.\n@default \"LLLL y\" (e.g. \"November 2022\")"},{"key":"labelGridcell","value":{"name":"signature","type":"function","raw":"( date: Date, modifiers?: Modifiers ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"}],"return":{"name":"string"}},"required":false},"description":"The label for the gridcell, when the calendar is not interactive.\n@default The formatted date."},{"key":"labelNext","value":{"name":"signature","type":"function","raw":"( month: Date | undefined ) => string","signature":{"arguments":[{"type":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}]},"name":"month"}],"return":{"name":"string"}},"required":false},"description":"The label for the \"next month\" button.\n@default \"Go to the Next Month\""},{"key":"labelPrevious","value":{"name":"signature","type":"function","raw":"( month: Date | undefined ) => string","signature":{"arguments":[{"type":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}]},"name":"month"}],"return":{"name":"string"}},"required":false},"description":"The label for the \"previous month\" button.\n@default \"Go to the Previous Month\""},{"key":"labelDayButton","value":{"name":"signature","type":"function","raw":"( date: Date, modifiers?: Modifiers ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"}],"return":{"name":"string"}},"required":false},"description":"The label for the day button.\n@default The formatted date."},{"key":"labelWeekday","value":{"name":"signature","type":"function","raw":"( date: Date ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"}],"return":{"name":"string"}},"required":false},"description":"The label for the weekday.\n@default ( date: Date ) => \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\""}]}},"description":"Use custom labels, useful for translating the component.\n\nFor a correct localized experience, consumers should make sure the locale\nused for the translated labels and `locale` prop are consistent."},"locale":{"required":false,"tsType":{"name":"Locale"},"description":"The locale object used to localize dates. Pass a locale from\n`@date-fns/locale` to localize the calendar.\n\nFor a correct localized experience, consumers should make sure the locale\nused for the translated labels and `locale` prop are consistent.\n@see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales\n@default The `enUS` locale from `@date-fns/locale`","defaultValue":{"value":"enUS","computed":true}},"weekStartsOn":{"required":false,"tsType":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"},{"name":"undefined"}]},"description":"The index of the first day of the week (0 - Sunday). Overrides the locale's\none.\n@default Based on the `locale` prop"},"onMonthChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( month: Date ) => void","signature":{"arguments":[{"type":{"name":"Date"},"name":"month"}],"return":{"name":"void"}}},"description":"Event fired when the user navigates between months."},"timeZone":{"required":false,"tsType":{"name":"string"},"description":"The time zone (IANA or UTC offset) to use in the calendar.\n\nSee\n[Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\nfor the possible values.\n\nWhen working with time zones, use the `TZDate` object exported by this\npackage instead of the native `Date` object.\n@example\n import { DateCalendar, TZDate } from \"@wordpress/components\";\n\n export function WithTimeZone() {\n const timeZone = \"America/New_York\";\n const [ selected, setSelected ] = useState< Date | undefined >(\n new TZDate( 2024, 12, 10, timeZone ) // Use `TZDate` instead of `Date`\n );\n return (\n <DateCalendar\n timeZone={ timeZone }\n selected={ selected }\n onSelect={ setSelected }\n />\n );\n}"},"role":{"required":false,"tsType":{"name":"union","raw":"'application' | 'dialog' | undefined","elements":[{"name":"literal","value":"'application'"},{"name":"literal","value":"'dialog'"},{"name":"undefined"}]},"description":"The role attribute to add to the container element.\n@default 'application'"},"selected":{"required":false,"tsType":{"name":"union","raw":"Date | undefined | null","elements":[{"name":"Date"},{"name":"undefined"},{"name":"null"}]},"description":"The selected date."},"onSelect":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(\n\tselected: T,\n\ttriggerDate: Date,\n\tmodifiers: Modifiers,\n\te: React.MouseEvent | React.KeyboardEvent\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}]},"name":"selected"},{"type":{"name":"Date"},"name":"triggerDate"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"},{"type":{"name":"union","raw":"React.MouseEvent | React.KeyboardEvent","elements":[{"name":"ReactMouseEvent","raw":"React.MouseEvent"},{"name":"ReactKeyboardEvent","raw":"React.KeyboardEvent"}]},"name":"e"}],"return":{"name":"void"}}},"description":"Event handler when a day is selected."},"defaultSelected":{"required":false,"tsType":{"name":"Date"},"description":"The default selected date (for uncontrolled usage)."}},"composes":["Omit"]}},"components-selection-input-time-date-daterangecalendar":{"id":"components-selection-input-time-date-daterangecalendar","name":"DateRangeCalendar","path":"../packages/components/src/calendar/stories/date-range-calendar.story.tsx","stories":[{"id":"components-selection-input-time-date-daterangecalendar--default","name":"Default","snippet":"const Default = () => <DateRangeCalendar onMonthChange={fn()} onSelect={fn()} />;"},{"id":"components-selection-input-time-date-daterangecalendar--disabled-dates","name":"Disabled Dates","snippet":"const DisabledDates = () => <DateRangeCalendar\n onMonthChange={fn()}\n onSelect={fn()}\n disabled={[\n // Disable tomorrow (single date)\n new Date( new Date().setDate( new Date().getDate() + 1 ) ),\n // Disable all dates after Feb 1st of next year\n { after: new Date( new Date().getFullYear() + 1, 1, 1 ) },\n // Disable all dates before Dec 1st of last year\n { before: new Date( new Date().getFullYear() - 1, 11, 1 ) },\n // Disable all dates between 12th and 14th of August of this year\n {\n after: new Date( new Date().getFullYear(), 7, 11 ),\n before: new Date( new Date().getFullYear(), 7, 15 ),\n },\n // Disable all dates between 21st and 26th of October of this year\n {\n from: new Date( new Date().getFullYear(), 9, 21 ),\n to: new Date( new Date().getFullYear(), 9, 26 ),\n },\n // Disable all Wednesdays\n { dayOfWeek: 3 },\n // Disable all prime day numbers\n function isPrimeDate( date: Date ) {\n return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(\n date.getDate()\n );\n },\n ]} />;"},{"id":"components-selection-input-time-date-daterangecalendar--with-selected-range-and-month","name":"With Selected Range And Month","snippet":"const WithSelectedRangeAndMonth = () => <DateRangeCalendar\n onMonthChange={fn()}\n onSelect={fn()}\n defaultSelected={{\n from: firstDayOfNextMonth,\n to: fourthDayOfNextMonth,\n }}\n defaultMonth={firstDayOfNextMonth} />;"},{"id":"components-selection-input-time-date-daterangecalendar--with-outside-days","name":"With Outside Days","snippet":"const WithOutsideDays = () => <DateRangeCalendar onMonthChange={fn()} onSelect={fn()} showOutsideDays fixedWeeks />;","description":"Shows days from adjacent months in the grid. Outside days use a lighter style and are still interactive. Use `fixedWeeks` to keep the grid height constant."},{"id":"components-selection-input-time-date-daterangecalendar--with-time-zone","name":"With Time Zone","snippet":"const WithTimeZone = () => {\n const [ range, setRange ] = useState< typeof args.selected | null >(\n null\n );\n\n useEffect( () => {\n setRange(\n // Select from one week from today to two weeks from today\n // every time the timezone changes.\n {\n from: new TZDate(\n new Date().setDate( new Date().getDate() + 7 ),\n args.timeZone\n ),\n to: new TZDate(\n new Date().setDate( new Date().getDate() + 14 ),\n args.timeZone\n ),\n }\n );\n }, [ args.timeZone ] );\n\n return (\n <>\n <DateRangeCalendar\n onMonthChange={fn()}\n timeZone=\"Pacific/Auckland\"\n selected={ range }\n onSelect={ ( selectedDate, ...rest ) => {\n setRange(\n // Set controlled state to null if there's no selection\n ! selectedDate ||\n ( selectedDate.from === undefined &&\n selectedDate.to === undefined )\n ? null\n : selectedDate\n );\n args.onSelect?.( selectedDate, ...rest );\n } }\n disabled={ [\n {\n // Disable any date before today\n before: new TZDate( new Date(), args.timeZone ),\n },\n ] } />\n <p>Calendar set to { args.timeZone ?? 'current' }timezone,\n disabling selection for all dates before today, and starting\n with a default date range of 1 week from today to 2 weeks\n from today.\n </p>\n </>\n );\n};","description":"When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object."}],"import":"import { DateRangeCalendar } from \"@wordpress/components\";","jsDocTags":{},"description":"`DateRangeCalendar` is a React component that provides a customizable calendar interface for **date range** selection. The component is built with accessibility in mind and follows ARIA best practices for calendar widgets. It provides keyboard navigation, screen reader support, and customizable labels for internationalization.","reactDocgen":{"description":"`DateRangeCalendar` is a React component that provides a customizable calendar\ninterface for **date range** selection.\n\nThe component is built with accessibility in mind and follows ARIA best\npractices for calendar widgets. It provides keyboard navigation, screen reader\nsupport, and customizable labels for internationalization.","methods":[],"displayName":"DateRangeCalendar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/calendar/date-range-calendar/index.tsx","actualName":"DateRangeCalendar","exportName":"DateRangeCalendar","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the selection is required.\nWhen `true`, there always needs to be a date selected.\n@default false"},"defaultMonth":{"required":false,"tsType":{"name":"Date"},"description":"The initial month to show in the calendar view (uncontrolled).\n@default The current month"},"month":{"required":false,"tsType":{"name":"Date"},"description":"The month displayed in the calendar view (controlled). Use together with\n`onMonthChange` to change the month programmatically."},"numberOfMonths":{"required":false,"tsType":{"name":"number"},"description":"The number of months displayed at once.\n@default 1","defaultValue":{"value":"1","computed":false}},"showOutsideDays":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, days from adjacent months are shown in the grid and receive\nthe `outside` modifier and the class.\n@default false"},"fixedWeeks":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, the calendar always shows a fixed number of weeks (e.g. 6)\nso the grid height does not change between months.\n@default false"},"startMonth":{"required":false,"tsType":{"name":"Date"},"description":"The earliest month to start the month navigation."},"endMonth":{"required":false,"tsType":{"name":"Date"},"description":"The latest month to end the month navigation."},"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":"Focus the first selected day (if set) or today's date (if not disabled).\n\nUse this prop when you need to focus the calendar after a user action\n(e.g. opening the dialog with the calendar)."},"disabled":{"required":false,"tsType":{"name":"union","raw":"Matcher | Matcher[] | undefined","elements":[{"name":"union","raw":"| boolean\n| ( ( date: Date ) => boolean )\n| Date\n| Date[]\n| DateRange\n| DateBefore\n| DateAfter\n| DateInterval\n| DayOfWeek","elements":[{"name":"boolean"},{"name":"unknown"},{"name":"Date"},{"name":"Array","elements":[{"name":"Date"}],"raw":"Date[]"},{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tafter: Date;\n}","signature":{"properties":[{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n\tafter: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}},{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdayOfWeek: number | number[];\n}","signature":{"properties":[{"key":"dayOfWeek","value":{"name":"union","raw":"number | number[]","elements":[{"name":"number"},{"name":"Array","elements":[{"name":"number"}],"raw":"number[]"}],"required":true}}]}}]},{"name":"Array","elements":[{"name":"union","raw":"| boolean\n| ( ( date: Date ) => boolean )\n| Date\n| Date[]\n| DateRange\n| DateBefore\n| DateAfter\n| DateInterval\n| DayOfWeek","elements":[{"name":"boolean"},{"name":"unknown"},{"name":"Date"},{"name":"Array","elements":[{"name":"Date"}],"raw":"Date[]"},{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tafter: Date;\n}","signature":{"properties":[{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tbefore: Date;\n\tafter: Date;\n}","signature":{"properties":[{"key":"before","value":{"name":"Date","required":true}},{"key":"after","value":{"name":"Date","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdayOfWeek: number | number[];\n}","signature":{"properties":[{"key":"dayOfWeek","value":{"name":"union","raw":"number | number[]","elements":[{"name":"number"},{"name":"Array","elements":[{"name":"number"}],"raw":"number[]"}],"required":true}}]}}]}],"raw":"Matcher[]"},{"name":"undefined"}]},"description":"Specify which days are disabled. Using `true` will disable all dates."},"disableNavigation":{"required":false,"tsType":{"name":"boolean"},"description":"Disable the navigation buttons."},"labels":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The label for the navigation toolbar.\n\t * @default \"\"\n\t */\n\tlabelNav?: () => string;\n\t/**\n\t * The label for the month grid.\n\t * @default \"LLLL y\" (e.g. \"November 2022\")\n\t */\n\tlabelGrid?: ( date: Date ) => string;\n\t/**\n\t * The label for the gridcell, when the calendar is not interactive.\n\t * @default The formatted date.\n\t */\n\tlabelGridcell?: ( date: Date, modifiers?: Modifiers ) => string;\n\t/**\n\t * The label for the \"next month\" button.\n\t * @default \"Go to the Next Month\"\n\t */\n\tlabelNext?: ( month: Date | undefined ) => string;\n\t/**\n\t * The label for the \"previous month\" button.\n\t * @default \"Go to the Previous Month\"\n\t */\n\tlabelPrevious?: ( month: Date | undefined ) => string;\n\t/**\n\t * The label for the day button.\n\t * @default The formatted date.\n\t */\n\tlabelDayButton?: ( date: Date, modifiers?: Modifiers ) => string;\n\t/**\n\t * The label for the weekday.\n\t * @default ( date: Date ) => \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\"\n\t */\n\tlabelWeekday?: ( date: Date ) => string;\n}","signature":{"properties":[{"key":"labelNav","value":{"name":"signature","type":"function","raw":"() => string","signature":{"arguments":[],"return":{"name":"string"}},"required":false},"description":"The label for the navigation toolbar.\n@default \"\""},{"key":"labelGrid","value":{"name":"signature","type":"function","raw":"( date: Date ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"}],"return":{"name":"string"}},"required":false},"description":"The label for the month grid.\n@default \"LLLL y\" (e.g. \"November 2022\")"},{"key":"labelGridcell","value":{"name":"signature","type":"function","raw":"( date: Date, modifiers?: Modifiers ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"}],"return":{"name":"string"}},"required":false},"description":"The label for the gridcell, when the calendar is not interactive.\n@default The formatted date."},{"key":"labelNext","value":{"name":"signature","type":"function","raw":"( month: Date | undefined ) => string","signature":{"arguments":[{"type":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}]},"name":"month"}],"return":{"name":"string"}},"required":false},"description":"The label for the \"next month\" button.\n@default \"Go to the Next Month\""},{"key":"labelPrevious","value":{"name":"signature","type":"function","raw":"( month: Date | undefined ) => string","signature":{"arguments":[{"type":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}]},"name":"month"}],"return":{"name":"string"}},"required":false},"description":"The label for the \"previous month\" button.\n@default \"Go to the Previous Month\""},{"key":"labelDayButton","value":{"name":"signature","type":"function","raw":"( date: Date, modifiers?: Modifiers ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"}],"return":{"name":"string"}},"required":false},"description":"The label for the day button.\n@default The formatted date."},{"key":"labelWeekday","value":{"name":"signature","type":"function","raw":"( date: Date ) => string","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"}],"return":{"name":"string"}},"required":false},"description":"The label for the weekday.\n@default ( date: Date ) => \"Monday\" | \"Tuesday\" | \"Wednesday\" | \"Thursday\" | \"Friday\" | \"Saturday\" | \"Sunday\""}]}},"description":"Use custom labels, useful for translating the component.\n\nFor a correct localized experience, consumers should make sure the locale\nused for the translated labels and `locale` prop are consistent."},"locale":{"required":false,"tsType":{"name":"Locale"},"description":"The locale object used to localize dates. Pass a locale from\n`@date-fns/locale` to localize the calendar.\n\nFor a correct localized experience, consumers should make sure the locale\nused for the translated labels and `locale` prop are consistent.\n@see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales\n@default The `enUS` locale from `@date-fns/locale`","defaultValue":{"value":"enUS","computed":true}},"weekStartsOn":{"required":false,"tsType":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"},{"name":"undefined"}]},"description":"The index of the first day of the week (0 - Sunday). Overrides the locale's\none.\n@default Based on the `locale` prop"},"onMonthChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( month: Date ) => void","signature":{"arguments":[{"type":{"name":"Date"},"name":"month"}],"return":{"name":"void"}}},"description":"Event fired when the user navigates between months."},"timeZone":{"required":false,"tsType":{"name":"string"},"description":"The time zone (IANA or UTC offset) to use in the calendar.\n\nSee\n[Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\nfor the possible values.\n\nWhen working with time zones, use the `TZDate` object exported by this\npackage instead of the native `Date` object.\n@example\n import { DateCalendar, TZDate } from \"@wordpress/components\";\n\n export function WithTimeZone() {\n const timeZone = \"America/New_York\";\n const [ selected, setSelected ] = useState< Date | undefined >(\n new TZDate( 2024, 12, 10, timeZone ) // Use `TZDate` instead of `Date`\n );\n return (\n <DateCalendar\n timeZone={ timeZone }\n selected={ selected }\n onSelect={ setSelected }\n />\n );\n}"},"role":{"required":false,"tsType":{"name":"union","raw":"'application' | 'dialog' | undefined","elements":[{"name":"literal","value":"'application'"},{"name":"literal","value":"'dialog'"},{"name":"undefined"}]},"description":"The role attribute to add to the container element.\n@default 'application'"},"excludeDisabled":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, the range will reset when including a disabled day."},"min":{"required":false,"tsType":{"name":"number"},"description":"The minimum number of nights to include in the range."},"max":{"required":false,"tsType":{"name":"number"},"description":"The maximum number of nights to include in the range."},"selected":{"required":false,"tsType":{"name":"union","raw":"DateRange | undefined | null","elements":[{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"undefined"},{"name":"null"}]},"description":"The selected range."},"onSelect":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(\n\tselected: T,\n\ttriggerDate: Date,\n\tmodifiers: Modifiers,\n\te: React.MouseEvent | React.KeyboardEvent\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"DateRange | undefined","elements":[{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},{"name":"undefined"}]},"name":"selected"},{"type":{"name":"Date"},"name":"triggerDate"},{"type":{"name":"Record","elements":[{"name":"string"},{"name":"boolean"}],"raw":"Record< string, boolean >"},"name":"modifiers"},{"type":{"name":"union","raw":"React.MouseEvent | React.KeyboardEvent","elements":[{"name":"ReactMouseEvent","raw":"React.MouseEvent"},{"name":"ReactKeyboardEvent","raw":"React.KeyboardEvent"}]},"name":"e"}],"return":{"name":"void"}}},"description":"Event handler when the selection changes."},"defaultSelected":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\tfrom: Date | undefined;\n\tto?: Date | undefined;\n}","signature":{"properties":[{"key":"from","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":true}},{"key":"to","value":{"name":"union","raw":"Date | undefined","elements":[{"name":"Date"},{"name":"undefined"}],"required":false}}]}},"description":"The default selected range (for uncontrolled usage)."}},"composes":["Omit"]}},"components-checkboxcontrol":{"id":"components-checkboxcontrol","name":"CheckboxControl","path":"../packages/components/src/checkbox-control/stories/index.story.tsx","stories":[{"id":"components-checkboxcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ isChecked, setChecked ] = useState( true );\n\n return (\n <CheckboxControl\n label=\"Is author\"\n help=\"Is the user an author or not?\"\n checked={ isChecked }\n onChange={ ( v ) => {\n\t\t\t\tsetChecked( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"},{"id":"components-checkboxcontrol--indeterminate","name":"Indeterminate","snippet":"const Indeterminate = () => {\n const [ fruits, setFruits ] = useState( { apple: false, orange: false } );\n\n const isAllChecked = Object.values( fruits ).every( Boolean );\n const isIndeterminate =\n\t\tObject.values( fruits ).some( Boolean ) && ! isAllChecked;\n\n return (\n <VStack>\n <CheckboxControl\n label=\"Select all\"\n checked={ isAllChecked }\n indeterminate={ isIndeterminate }\n onChange={ ( v ) => {\n\t\t\t\t\tsetFruits( {\n\t\t\t\t\t\tapple: v,\n\t\t\t\t\t\torange: v,\n\t\t\t\t\t} );\n\t\t\t\t\tonChange( v );\n\t\t\t\t} } />\n <CheckboxControl\n label=\"Apple\"\n checked={ fruits.apple }\n onChange={ ( apple ) =>\n\t\t\t\t\tsetFruits( ( prevState ) => ( {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\tapple,\n\t\t\t\t\t} ) )\n\t\t\t\t} />\n <CheckboxControl\n label=\"Orange\"\n checked={ fruits.orange }\n onChange={ ( orange ) =>\n\t\t\t\t\tsetFruits( ( prevState ) => ( {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\torange,\n\t\t\t\t\t} ) )\n\t\t\t\t} />\n </VStack>\n );\n};"},{"id":"components-checkboxcontrol--with-custom-label","name":"With Custom Label","snippet":"const WithCustomLabel = () => {\n const [ isChecked, setChecked ] = useState( true );\n\n return (\n <HStack justify=\"flex-start\" alignment=\"top\" spacing={ 0 }>\n <CheckboxControl\n checked={ isChecked }\n onChange={ ( v ) => {\n\t\t\t\t\tsetChecked( v );\n\t\t\t\t\tonChange( v );\n\t\t\t\t} }\n // Disable reason: For simplicity of the code snippet.\n // eslint-disable-next-line no-restricted-syntax\n id=\"my-checkbox-with-custom-label\"\n aria-describedby=\"my-custom-description\" />\n <VStack>\n <label htmlFor=\"my-checkbox-with-custom-label\">My custom label\n </label>\n { /* eslint-disable-next-line no-restricted-syntax */ }\n <div id=\"my-custom-description\" style={ { fontSize: 13 } }>A custom description.\n </div>\n </VStack>\n </HStack>\n );\n};","description":"For more complex designs, a custom `<label>` element can be associated with the checkbox by leaving the `label` prop undefined and using the `id` and `htmlFor` props instead. Because the label element also functions as a click target for the checkbox, [do not place interactive elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content) such as links or buttons inside the `<label>` node. Similarly, a custom description can be added by omitting the `help` prop and using the `aria-describedby` prop instead."}],"import":"import { CheckboxControl, HStack, VStack } from \"@wordpress/components\";","jsDocTags":{},"description":"Checkboxes allow the user to select one or more items from a set. ```jsx import { CheckboxControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyCheckboxControl = () => { const [ isChecked, setChecked ] = useState( true ); return ( <CheckboxControl label=\"Is author\" help=\"Is the user a author or not?\" checked={ isChecked } onChange={ setChecked } /> ); }; ```","reactDocgen":{"description":"Checkboxes allow the user to select one or more items from a set.\n\n```jsx\nimport { CheckboxControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyCheckboxControl = () => {\n const [ isChecked, setChecked ] = useState( true );\n return (\n <CheckboxControl\n label=\"Is author\"\n help=\"Is the user a author or not?\"\n checked={ isChecked }\n onChange={ setChecked }\n />\n );\n};\n```","methods":[],"displayName":"CheckboxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/checkbox-control/index.tsx","actualName":"CheckboxControl","exportName":"CheckboxControl"}},"components-circularoptionpicker":{"id":"components-circularoptionpicker","name":"CircularOptionPicker","path":"../packages/components/src/circular-option-picker/stories/index.story.tsx","stories":[{"id":"components-circularoptionpicker--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<CircularOptionPicker { ...props } />\n);"},{"id":"components-circularoptionpicker--as-buttons","name":"As Buttons","snippet":"const AsButtons = ( props ) => (\n\t<CircularOptionPicker { ...props } />\n);"},{"id":"components-circularoptionpicker--with-looping-disabled","name":"With Looping Disabled","snippet":"const WithLoopingDisabled = ( props ) => (\n\t<CircularOptionPicker { ...props } />\n);"},{"id":"components-circularoptionpicker--with-button-action","name":"With ButtonAction","snippet":"const WithButtonAction = ( props ) => (\n\t<CircularOptionPicker { ...props } />\n);"},{"id":"components-circularoptionpicker--with-dropdown-link-action","name":"With DropdownLinkAction","snippet":"const WithDropdownLinkAction = ( props ) => (\n\t<CircularOptionPicker { ...props } />\n);"}],"import":"import { CircularOptionPicker } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"Option","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps","optional":false,"type":{"name":"intersection","raw":"Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n}","elements":[{"name":"Omit","elements":[{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"intersection","raw":"BaseButtonProps & _ButtonProps","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Whether to keep the button focusable when disabled.\n\t *\n\t * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\n\t * can cause accessibility issues, by hiding their presence from screen reader users,\n\t * or by preventing focus from returning to a trigger element.\n\t *\n\t * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\n\t * in the WAI-ARIA Authoring Practices Guide.\n\t *\n\t * @default false\n\t */\n\taccessibleWhenDisabled?: boolean;\n\t/**\n\t * The button's children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A visually hidden accessible description for the button.\n\t */\n\tdescription?: string;\n\t/**\n\t * If provided, renders an Icon component inside the button.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * If provided with `icon`, sets the position of icon relative to the `text`.\n\t *\n\t * @default 'left'\n\t */\n\ticonPosition?: 'left' | 'right';\n\t/**\n\t * If provided with `icon`, sets the icon size.\n\t * Please refer to the Icon component for more details regarding\n\t * the default value of its `size` prop.\n\t */\n\ticonSize?: IconProps[ 'size' ];\n\t/**\n\t * Indicates activity while a action is being performed.\n\t */\n\tisBusy?: boolean;\n\t/**\n\t * Renders a red text-based button style to indicate destructive behavior.\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Renders a pressed button style.\n\t */\n\tisPressed?: boolean;\n\t/**\n\t * Sets the `aria-label` of the component, if none is provided.\n\t * Sets the Tooltip content if `showTooltip` is provided.\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\n\t * If an object is provided, it should contain `display` and `ariaLabel` keys.\n\t */\n\tshortcut?: string | { display: string; ariaLabel: string };\n\t/**\n\t * If provided, renders a Tooltip component for the button.\n\t */\n\tshowTooltip?: boolean;\n\t/**\n\t * The size of the button.\n\t *\n\t * - `'default'`: For normal text-label buttons, unless it is a toggle button.\n\t * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n\t * - `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\t *\n\t * If the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact' | 'small';\n\t/**\n\t * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.\n\t */\n\ttext?: string;\n\t/**\n\t * If provided with `showTooltip`, sets the position of the tooltip.\n\t * Please refer to the Tooltip component for more details regarding the defaults.\n\t */\n\ttooltipPosition?: PopoverProps[ 'position' ];\n\t/**\n\t * Specifies the button's style.\n\t *\n\t * The accepted values are:\n\t *\n\t * 1. `'primary'` (the primary button styles)\n\t * 2. `'secondary'` (the default button styles)\n\t * 3. `'tertiary'` (the text-based button styles)\n\t * 4. `'link'` (the link button styles)\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}","signature":{"properties":[{"key":"__next40pxDefaultSize","value":{"name":"boolean","required":false},"description":"Start opting into the larger default height that will become the\ndefault size in a future version.\n\n@default false"},{"key":"accessibleWhenDisabled","value":{"name":"boolean","required":false},"description":"Whether to keep the button focusable when disabled.\n\nIn most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\ncan cause accessibility issues, by hiding their presence from screen reader users,\nor by preventing focus from returning to a trigger element.\n\nLearn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\nin the WAI-ARIA Authoring Practices Guide.\n\n@default false"},{"key":"children","value":{"name":"ReactNode","required":false},"description":"The button's children."},{"key":"description","value":{"name":"string","required":false},"description":"A visually hidden accessible description for the button."},{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"If provided, renders an Icon component inside the button."},{"key":"iconPosition","value":{"name":"union","raw":"'left' | 'right'","elements":[{"name":"literal","value":"'left'"},{"name":"literal","value":"'right'"}],"required":false},"description":"If provided with `icon`, sets the position of icon relative to the `text`.\n\n@default 'left'"},{"key":"iconSize","value":{"name":"intersection['size']","raw":"IconProps[ 'size' ]","required":false},"description":"If provided with `icon`, sets the icon size.\nPlease refer to the Icon component for more details regarding\nthe default value of its `size` prop."},{"key":"isBusy","value":{"name":"boolean","required":false},"description":"Indicates activity while a action is being performed."},{"key":"isDestructive","value":{"name":"boolean","required":false},"description":"Renders a red text-based button style to indicate destructive behavior."},{"key":"isPressed","value":{"name":"boolean","required":false},"description":"Renders a pressed button style."},{"key":"label","value":{"name":"string","required":false},"description":"Sets the `aria-label` of the component, if none is provided.\nSets the Tooltip content if `showTooltip` is provided."},{"key":"shortcut","value":{"name":"union","raw":"string | { display: string; ariaLabel: string }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ display: string; ariaLabel: string }","signature":{"properties":[{"key":"display","value":{"name":"string","required":true}},{"key":"ariaLabel","value":{"name":"string","required":true}}]}}],"required":false},"description":"If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\nIf an object is provided, it should contain `display` and `ariaLabel` keys."},{"key":"showTooltip","value":{"name":"boolean","required":false},"description":"If provided, renders a Tooltip component for the button."},{"key":"size","value":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}],"required":false},"description":"The size of the button.\n\n- `'default'`: For normal text-label buttons, unless it is a toggle button.\n- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n- `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\nIf the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\n@default 'default'"},{"key":"text","value":{"name":"string","required":false},"description":"If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them."},{"key":"tooltipPosition","value":{"name":"union","raw":"PopoverProps[ 'position' ]","required":false},"description":"If provided with `showTooltip`, sets the position of the tooltip.\nPlease refer to the Tooltip component for more details regarding the defaults."},{"key":"variant","value":{"name":"union","raw":"'primary' | 'secondary' | 'tertiary' | 'link'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'secondary'"},{"name":"literal","value":"'tertiary'"},{"name":"literal","value":"'link'"}],"required":false},"description":"Specifies the button's style.\n\nThe accepted values are:\n\n1. `'primary'` (the primary button styles)\n2. `'secondary'` (the default button styles)\n3. `'tertiary'` (the text-based button styles)\n4. `'link'` (the link button styles)"}]}},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether the button is disabled. If `true`, this will force a `button` element\n\t * to be rendered, even when an `href` is given.\n\t *\n\t * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.\n\t */\n\tdisabled?: boolean;\n}","signature":{"properties":[{"key":"disabled","value":{"name":"boolean","required":false},"description":"Whether the button is disabled. If `true`, this will force a `button` element\nto be rendered, even when an `href` is given.\n\nIn most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`."}]}}]},{"name":"unknown"},{"name":"unknown"}]},{"name":"union","raw":"'isPressed' | 'className'","elements":[{"name":"literal","value":"'isPressed'"},{"name":"literal","value":"'className'"}]}],"raw":"Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n>"},{"name":"signature","type":"object","raw":"{\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n}","signature":{"properties":[{"key":"className","value":{"name":"string","required":false}},{"key":"tooltipText","value":{"name":"string","required":false}},{"key":"isSelected","value":{"name":"boolean","required":false}},{"key":"selectedIconProps","value":{"name":"Omit","elements":[{"name":"ReactComponentProps","raw":"React.ComponentProps< typeof Icon >","elements":[{"name":"Icon"}]},{"name":"union","raw":"'icon' | 'size'","elements":[{"name":"literal","value":"'icon'"},{"name":"literal","value":"'size'"}]}],"raw":"Omit<\n\tReact.ComponentProps< typeof Icon >,\n\t'icon' | 'size'\n>","required":false}}]}}],"alias":"OptionProps"}}],"returns":null},{"name":"OptionGroup","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps","optional":false,"type":{"name":"signature","type":"object","raw":"{\n\tclassName?: string;\n\toptions: ReactNode;\n}","signature":{"properties":[{"key":"className","value":{"name":"string","required":false}},{"key":"options","value":{"name":"ReactNode","required":true}}]},"alias":"OptionGroupProps"}}],"returns":null},{"name":"ButtonAction","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false >","optional":false,"type":{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"intersection","raw":"BaseButtonProps & _ButtonProps","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Whether to keep the button focusable when disabled.\n\t *\n\t * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\n\t * can cause accessibility issues, by hiding their presence from screen reader users,\n\t * or by preventing focus from returning to a trigger element.\n\t *\n\t * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\n\t * in the WAI-ARIA Authoring Practices Guide.\n\t *\n\t * @default false\n\t */\n\taccessibleWhenDisabled?: boolean;\n\t/**\n\t * The button's children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A visually hidden accessible description for the button.\n\t */\n\tdescription?: string;\n\t/**\n\t * If provided, renders an Icon component inside the button.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * If provided with `icon`, sets the position of icon relative to the `text`.\n\t *\n\t * @default 'left'\n\t */\n\ticonPosition?: 'left' | 'right';\n\t/**\n\t * If provided with `icon`, sets the icon size.\n\t * Please refer to the Icon component for more details regarding\n\t * the default value of its `size` prop.\n\t */\n\ticonSize?: IconProps[ 'size' ];\n\t/**\n\t * Indicates activity while a action is being performed.\n\t */\n\tisBusy?: boolean;\n\t/**\n\t * Renders a red text-based button style to indicate destructive behavior.\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Renders a pressed button style.\n\t */\n\tisPressed?: boolean;\n\t/**\n\t * Sets the `aria-label` of the component, if none is provided.\n\t * Sets the Tooltip content if `showTooltip` is provided.\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\n\t * If an object is provided, it should contain `display` and `ariaLabel` keys.\n\t */\n\tshortcut?: string | { display: string; ariaLabel: string };\n\t/**\n\t * If provided, renders a Tooltip component for the button.\n\t */\n\tshowTooltip?: boolean;\n\t/**\n\t * The size of the button.\n\t *\n\t * - `'default'`: For normal text-label buttons, unless it is a toggle button.\n\t * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n\t * - `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\t *\n\t * If the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact' | 'small';\n\t/**\n\t * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.\n\t */\n\ttext?: string;\n\t/**\n\t * If provided with `showTooltip`, sets the position of the tooltip.\n\t * Please refer to the Tooltip component for more details regarding the defaults.\n\t */\n\ttooltipPosition?: PopoverProps[ 'position' ];\n\t/**\n\t * Specifies the button's style.\n\t *\n\t * The accepted values are:\n\t *\n\t * 1. `'primary'` (the primary button styles)\n\t * 2. `'secondary'` (the default button styles)\n\t * 3. `'tertiary'` (the text-based button styles)\n\t * 4. `'link'` (the link button styles)\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}","signature":{"properties":[{"key":"__next40pxDefaultSize","value":{"name":"boolean","required":false},"description":"Start opting into the larger default height that will become the\ndefault size in a future version.\n\n@default false"},{"key":"accessibleWhenDisabled","value":{"name":"boolean","required":false},"description":"Whether to keep the button focusable when disabled.\n\nIn most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\ncan cause accessibility issues, by hiding their presence from screen reader users,\nor by preventing focus from returning to a trigger element.\n\nLearn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\nin the WAI-ARIA Authoring Practices Guide.\n\n@default false"},{"key":"children","value":{"name":"ReactNode","required":false},"description":"The button's children."},{"key":"description","value":{"name":"string","required":false},"description":"A visually hidden accessible description for the button."},{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"If provided, renders an Icon component inside the button."},{"key":"iconPosition","value":{"name":"union","raw":"'left' | 'right'","elements":[{"name":"literal","value":"'left'"},{"name":"literal","value":"'right'"}],"required":false},"description":"If provided with `icon`, sets the position of icon relative to the `text`.\n\n@default 'left'"},{"key":"iconSize","value":{"name":"intersection['size']","raw":"IconProps[ 'size' ]","required":false},"description":"If provided with `icon`, sets the icon size.\nPlease refer to the Icon component for more details regarding\nthe default value of its `size` prop."},{"key":"isBusy","value":{"name":"boolean","required":false},"description":"Indicates activity while a action is being performed."},{"key":"isDestructive","value":{"name":"boolean","required":false},"description":"Renders a red text-based button style to indicate destructive behavior."},{"key":"isPressed","value":{"name":"boolean","required":false},"description":"Renders a pressed button style."},{"key":"label","value":{"name":"string","required":false},"description":"Sets the `aria-label` of the component, if none is provided.\nSets the Tooltip content if `showTooltip` is provided."},{"key":"shortcut","value":{"name":"union","raw":"string | { display: string; ariaLabel: string }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ display: string; ariaLabel: string }","signature":{"properties":[{"key":"display","value":{"name":"string","required":true}},{"key":"ariaLabel","value":{"name":"string","required":true}}]}}],"required":false},"description":"If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\nIf an object is provided, it should contain `display` and `ariaLabel` keys."},{"key":"showTooltip","value":{"name":"boolean","required":false},"description":"If provided, renders a Tooltip component for the button."},{"key":"size","value":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}],"required":false},"description":"The size of the button.\n\n- `'default'`: For normal text-label buttons, unless it is a toggle button.\n- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n- `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\nIf the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\n@default 'default'"},{"key":"text","value":{"name":"string","required":false},"description":"If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them."},{"key":"tooltipPosition","value":{"name":"union","raw":"PopoverProps[ 'position' ]","required":false},"description":"If provided with `showTooltip`, sets the position of the tooltip.\nPlease refer to the Tooltip component for more details regarding the defaults."},{"key":"variant","value":{"name":"union","raw":"'primary' | 'secondary' | 'tertiary' | 'link'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'secondary'"},{"name":"literal","value":"'tertiary'"},{"name":"literal","value":"'link'"}],"required":false},"description":"Specifies the button's style.\n\nThe accepted values are:\n\n1. `'primary'` (the primary button styles)\n2. `'secondary'` (the default button styles)\n3. `'tertiary'` (the text-based button styles)\n4. `'link'` (the link button styles)"}]}},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether the button is disabled. If `true`, this will force a `button` element\n\t * to be rendered, even when an `href` is given.\n\t *\n\t * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.\n\t */\n\tdisabled?: boolean;\n}","signature":{"properties":[{"key":"disabled","value":{"name":"boolean","required":false},"description":"Whether the button is disabled. If `true`, this will force a `button` element\nto be rendered, even when an `href` is given.\n\nIn most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`."}]}}]},{"name":"unknown"},{"name":"unknown"}],"alias":"WordPressComponentProps"}}],"returns":null},{"name":"DropdownLinkAction","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps","optional":false,"type":{"name":"signature","type":"object","raw":"{\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n}","signature":{"properties":[{"key":"buttonProps","value":{"name":"Omit","elements":[{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"intersection","raw":"BaseButtonProps & _ButtonProps","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n\t/**\n\t * Whether to keep the button focusable when disabled.\n\t *\n\t * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\n\t * can cause accessibility issues, by hiding their presence from screen reader users,\n\t * or by preventing focus from returning to a trigger element.\n\t *\n\t * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\n\t * in the WAI-ARIA Authoring Practices Guide.\n\t *\n\t * @default false\n\t */\n\taccessibleWhenDisabled?: boolean;\n\t/**\n\t * The button's children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A visually hidden accessible description for the button.\n\t */\n\tdescription?: string;\n\t/**\n\t * If provided, renders an Icon component inside the button.\n\t */\n\ticon?: IconProps[ 'icon' ];\n\t/**\n\t * If provided with `icon`, sets the position of icon relative to the `text`.\n\t *\n\t * @default 'left'\n\t */\n\ticonPosition?: 'left' | 'right';\n\t/**\n\t * If provided with `icon`, sets the icon size.\n\t * Please refer to the Icon component for more details regarding\n\t * the default value of its `size` prop.\n\t */\n\ticonSize?: IconProps[ 'size' ];\n\t/**\n\t * Indicates activity while a action is being performed.\n\t */\n\tisBusy?: boolean;\n\t/**\n\t * Renders a red text-based button style to indicate destructive behavior.\n\t */\n\tisDestructive?: boolean;\n\t/**\n\t * Renders a pressed button style.\n\t */\n\tisPressed?: boolean;\n\t/**\n\t * Sets the `aria-label` of the component, if none is provided.\n\t * Sets the Tooltip content if `showTooltip` is provided.\n\t */\n\tlabel?: string;\n\t/**\n\t * If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\n\t * If an object is provided, it should contain `display` and `ariaLabel` keys.\n\t */\n\tshortcut?: string | { display: string; ariaLabel: string };\n\t/**\n\t * If provided, renders a Tooltip component for the button.\n\t */\n\tshowTooltip?: boolean;\n\t/**\n\t * The size of the button.\n\t *\n\t * - `'default'`: For normal text-label buttons, unless it is a toggle button.\n\t * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n\t * - `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\t *\n\t * If the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact' | 'small';\n\t/**\n\t * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.\n\t */\n\ttext?: string;\n\t/**\n\t * If provided with `showTooltip`, sets the position of the tooltip.\n\t * Please refer to the Tooltip component for more details regarding the defaults.\n\t */\n\ttooltipPosition?: PopoverProps[ 'position' ];\n\t/**\n\t * Specifies the button's style.\n\t *\n\t * The accepted values are:\n\t *\n\t * 1. `'primary'` (the primary button styles)\n\t * 2. `'secondary'` (the default button styles)\n\t * 3. `'tertiary'` (the text-based button styles)\n\t * 4. `'link'` (the link button styles)\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'link';\n}","signature":{"properties":[{"key":"__next40pxDefaultSize","value":{"name":"boolean","required":false},"description":"Start opting into the larger default height that will become the\ndefault size in a future version.\n\n@default false"},{"key":"accessibleWhenDisabled","value":{"name":"boolean","required":false},"description":"Whether to keep the button focusable when disabled.\n\nIn most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability\ncan cause accessibility issues, by hiding their presence from screen reader users,\nor by preventing focus from returning to a trigger element.\n\nLearn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)\nin the WAI-ARIA Authoring Practices Guide.\n\n@default false"},{"key":"children","value":{"name":"ReactNode","required":false},"description":"The button's children."},{"key":"description","value":{"name":"string","required":false},"description":"A visually hidden accessible description for the button."},{"key":"icon","value":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]","required":false},"description":"If provided, renders an Icon component inside the button."},{"key":"iconPosition","value":{"name":"union","raw":"'left' | 'right'","elements":[{"name":"literal","value":"'left'"},{"name":"literal","value":"'right'"}],"required":false},"description":"If provided with `icon`, sets the position of icon relative to the `text`.\n\n@default 'left'"},{"key":"iconSize","value":{"name":"intersection['size']","raw":"IconProps[ 'size' ]","required":false},"description":"If provided with `icon`, sets the icon size.\nPlease refer to the Icon component for more details regarding\nthe default value of its `size` prop."},{"key":"isBusy","value":{"name":"boolean","required":false},"description":"Indicates activity while a action is being performed."},{"key":"isDestructive","value":{"name":"boolean","required":false},"description":"Renders a red text-based button style to indicate destructive behavior."},{"key":"isPressed","value":{"name":"boolean","required":false},"description":"Renders a pressed button style."},{"key":"label","value":{"name":"string","required":false},"description":"Sets the `aria-label` of the component, if none is provided.\nSets the Tooltip content if `showTooltip` is provided."},{"key":"shortcut","value":{"name":"union","raw":"string | { display: string; ariaLabel: string }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ display: string; ariaLabel: string }","signature":{"properties":[{"key":"display","value":{"name":"string","required":true}},{"key":"ariaLabel","value":{"name":"string","required":true}}]}}],"required":false},"description":"If provided with `showTooltip`, appends the Shortcut label to the tooltip content.\nIf an object is provided, it should contain `display` and `ariaLabel` keys."},{"key":"showTooltip","value":{"name":"boolean","required":false},"description":"If provided, renders a Tooltip component for the button."},{"key":"size","value":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}],"required":false},"description":"The size of the button.\n\n- `'default'`: For normal text-label buttons, unless it is a toggle button.\n- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n- `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\nIf the deprecated `isSmall` prop is also defined, this prop will take precedence.\n\n@default 'default'"},{"key":"text","value":{"name":"string","required":false},"description":"If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them."},{"key":"tooltipPosition","value":{"name":"union","raw":"PopoverProps[ 'position' ]","required":false},"description":"If provided with `showTooltip`, sets the position of the tooltip.\nPlease refer to the Tooltip component for more details regarding the defaults."},{"key":"variant","value":{"name":"union","raw":"'primary' | 'secondary' | 'tertiary' | 'link'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'secondary'"},{"name":"literal","value":"'tertiary'"},{"name":"literal","value":"'link'"}],"required":false},"description":"Specifies the button's style.\n\nThe accepted values are:\n\n1. `'primary'` (the primary button styles)\n2. `'secondary'` (the default button styles)\n3. `'tertiary'` (the text-based button styles)\n4. `'link'` (the link button styles)"}]}},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether the button is disabled. If `true`, this will force a `button` element\n\t * to be rendered, even when an `href` is given.\n\t *\n\t * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.\n\t */\n\tdisabled?: boolean;\n}","signature":{"properties":[{"key":"disabled","value":{"name":"boolean","required":false},"description":"Whether the button is disabled. If `true`, this will force a `button` element\nto be rendered, even when an `href` is given.\n\nIn most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`."}]}}]},{"name":"unknown"},{"name":"unknown"}]},{"name":"literal","value":"'children'"}],"raw":"Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'children'\n>","required":false}},{"key":"linkText","value":{"name":"string","required":true}},{"key":"dropdownProps","value":{"name":"Omit","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The className of the global container.\n\t */\n\tclassName?: string;\n\t/**\n\t * If you want to target the dropdown menu for styling purposes,\n\t * you need to provide a contentClassName because it's not being rendered\n\t * as a child of the container node.\n\t */\n\tcontentClassName?: string;\n\t/**\n\t * Opt-in prop to show popovers fullscreen on mobile.\n\t *\n\t * @default false\n\t */\n\texpandOnMobile?: boolean;\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t * substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Set this to customize the text that is shown in the dropdown's header\n\t * when it is fullscreen on mobile.\n\t */\n\theaderTitle?: string;\n\t/**\n\t * A callback invoked when the popover should be closed.\n\t */\n\tonClose?: () => void;\n\t/**\n\t * A callback invoked when the state of the dropdown changes\n\t * from open to closed and vice versa.\n\t */\n\tonToggle?: ( willOpen: boolean ) => void;\n\t/**\n\t * Properties of popoverProps object will be passed as props\n\t * to the Popover component.\n\t * Use this object to access properties/features\n\t * of the Popover component that are not already exposed\n\t * in the Dropdown component,\n\t * e.g.: the ability to have the popover without an arrow.\n\t */\n\tpopoverProps?: Omit<\n\t\tComponentPropsWithoutRef< typeof Popover >,\n\t\t'children'\n\t>;\n\t/**\n\t * A callback invoked to render the content of the dropdown menu.\n\t * Its first argument is the same as the renderToggle prop.\n\t */\n\trenderContent: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * A callback invoked to render the Dropdown Toggle Button.\n\t *\n\t * The first argument of the callback is an object\n\t * containing the following properties:\n\t *\n\t * - isOpen: whether the dropdown menu is opened or not\n\t * - onToggle: A function switching the dropdown menu's state\n\t * from open to closed and vice versa\n\t * - onClose: A function that closes the menu if invoked\n\t */\n\trenderToggle: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * The style of the global container.\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * Legacy way to specify the popover's position with respect to its anchor.\n\t * For details about the possible values, see the `Popover` component's docs.\n\t * _Note: this prop is deprecated. Use the `popoverProps.placement` prop\n\t * instead._\n\t *\n\t * @deprecated\n\t */\n\tposition?: PopoverProps[ 'position' ];\n\t/**\n\t * The controlled open state of the dropdown.\n\t * Must be used in conjunction with `onToggle`.\n\t */\n\topen?: boolean;\n\t/**\n\t * The open state of the dropdown when initially rendered.\n\t * Use when you do not need to control its open state. It will be overridden\n\t * by the `open` prop if it is specified on the component's first render.\n\t */\n\tdefaultOpen?: boolean;\n}","signature":{"properties":[{"key":"className","value":{"name":"string","required":false},"description":"The className of the global container."},{"key":"contentClassName","value":{"name":"string","required":false},"description":"If you want to target the dropdown menu for styling purposes,\nyou need to provide a contentClassName because it's not being rendered\nas a child of the container node."},{"key":"expandOnMobile","value":{"name":"boolean","required":false},"description":"Opt-in prop to show popovers fullscreen on mobile.\n\n@default false"},{"key":"focusOnMount","value":{"name":"useFocusOnMount.Mode","required":false},"description":"Determines focus behavior when the dialog mounts.\n\n- `\"firstElement\"` focuses the first tabbable element within.\n- `\"firstInputElement\"` focuses the first value control within.\n- `true` focuses the element itself.\n- `false` does nothing and _should not be used unless an accessible\n substitute behavior is implemented_.\n\n@default 'firstElement'"},{"key":"headerTitle","value":{"name":"string","required":false},"description":"Set this to customize the text that is shown in the dropdown's header\nwhen it is fullscreen on mobile."},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":false},"description":"A callback invoked when the popover should be closed."},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"( willOpen: boolean ) => void","signature":{"arguments":[{"type":{"name":"boolean"},"name":"willOpen"}],"return":{"name":"void"}},"required":false},"description":"A callback invoked when the state of the dropdown changes\nfrom open to closed and vice versa."},{"key":"popoverProps","value":{"name":"Omit","elements":[{"name":"ComponentPropsWithoutRef","elements":[{"name":"Popover"}],"raw":"ComponentPropsWithoutRef< typeof Popover >"},{"name":"literal","value":"'children'"}],"raw":"Omit<\n\tComponentPropsWithoutRef< typeof Popover >,\n\t'children'\n>","required":false},"description":"Properties of popoverProps object will be passed as props\nto the Popover component.\nUse this object to access properties/features\nof the Popover component that are not already exposed\nin the Dropdown component,\ne.g.: the ability to have the popover without an arrow."},{"key":"renderContent","value":{"name":"signature","type":"function","raw":"( props: CallbackProps ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n}","signature":{"properties":[{"key":"isOpen","value":{"name":"boolean","required":true}},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}}]}},"name":"props"}],"return":{"name":"ReactNode"}},"required":true},"description":"A callback invoked to render the content of the dropdown menu.\nIts first argument is the same as the renderToggle prop."},{"key":"renderToggle","value":{"name":"signature","type":"function","raw":"( props: CallbackProps ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n}","signature":{"properties":[{"key":"isOpen","value":{"name":"boolean","required":true}},{"key":"onToggle","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}},{"key":"onClose","value":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}},"required":true}}]}},"name":"props"}],"return":{"name":"ReactNode"}},"required":true},"description":"A callback invoked to render the Dropdown Toggle Button.\n\nThe first argument of the callback is an object\ncontaining the following properties:\n\n- isOpen: whether the dropdown menu is opened or not\n- onToggle: A function switching the dropdown menu's state\nfrom open to closed and vice versa\n- onClose: A function that closes the menu if invoked"},{"key":"style","value":{"name":"CSSProperties","required":false},"description":"The style of the global container."},{"key":"position","value":{"name":"union","raw":"PopoverProps[ 'position' ]","required":false},"description":"Legacy way to specify the popover's position with respect to its anchor.\nFor details about the possible values, see the `Popover` component's docs.\n_Note: this prop is deprecated. Use the `popoverProps.placement` prop\ninstead._\n\n@deprecated"},{"key":"open","value":{"name":"boolean","required":false},"description":"The controlled open state of the dropdown.\nMust be used in conjunction with `onToggle`."},{"key":"defaultOpen","value":{"name":"boolean","required":false},"description":"The open state of the dropdown when initially rendered.\nUse when you do not need to control its open state. It will be overridden\nby the `open` prop if it is specified on the component's first render."}]}},{"name":"union","raw":"'className' | 'renderToggle'","elements":[{"name":"literal","value":"'className'"},{"name":"literal","value":"'renderToggle'"}]}],"raw":"Omit< DropdownProps, 'className' | 'renderToggle' >","required":true}},{"key":"className","value":{"name":"string","required":false}}]},"alias":"DropdownLinkActionProps"}}],"returns":null}],"displayName":"CircularOptionPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/circular-option-picker/circular-option-picker.tsx","actualName":"CircularOptionPicker","exportName":"default"}},"components-colorindicator":{"id":"components-colorindicator","name":"ColorIndicator","path":"../packages/components/src/color-indicator/stories/index.story.tsx","stories":[{"id":"components-colorindicator--default","name":"Default","snippet":"const Default = () => <ColorIndicator colorValue=\"#0073aa\" />;"}],"import":"import { ColorIndicator } from \"@wordpress/components\";","jsDocTags":{},"description":"ColorIndicator is a React component that renders a specific color in a circle. It's often used to summarize a collection of used colors in a child component. ```jsx import { ColorIndicator } from '@wordpress/components'; const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />; ```","reactDocgen":{"description":"ColorIndicator is a React component that renders a specific color in a\ncircle. It's often used to summarize a collection of used colors in a child\ncomponent.\n\n```jsx\nimport { ColorIndicator } from '@wordpress/components';\n\nconst MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n```","methods":[],"displayName":"ColorIndicator","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/color-indicator/index.tsx","actualName":"ColorIndicator","exportName":"ColorIndicator"}},"components-colorpalette":{"id":"components-colorpalette","name":"ColorPalette","path":"../packages/components/src/color-palette/stories/index.story.tsx","stories":[{"id":"components-colorpalette--default","name":"Default","snippet":"const Default = () => {\n const [ color, setColor ] = useState< string | undefined >( value );\n\n return (\n <ColorPalette\n colors={[\n { name: 'Red', color: '#f00' },\n { name: 'White', color: '#fff' },\n { name: 'Blue', color: '#00f' },\n ]}\n value={ color }\n onChange={ ( newColor ) => {\n\t\t\t\tsetColor( newColor );\n\t\t\t\tonChange?.( newColor );\n\t\t\t} } />\n );\n};"},{"id":"components-colorpalette--initial-value","name":"Initial Value","snippet":"const InitialValue = () => {\n const [ color, setColor ] = useState< string | undefined >( value );\n\n return (\n <ColorPalette\n colors={[\n { name: 'Red', color: '#f00' },\n { name: 'White', color: '#fff' },\n { name: 'Blue', color: '#00f' },\n ]}\n value={ color }\n onChange={ ( newColor ) => {\n\t\t\t\tsetColor( newColor );\n\t\t\t\tonChange?.( newColor );\n\t\t\t} } />\n );\n};"},{"id":"components-colorpalette--multiple-origins","name":"Multiple Origins","snippet":"const MultipleOrigins = () => {\n const [ color, setColor ] = useState< string | undefined >( value );\n\n return (\n <ColorPalette\n colors={[\n {\n name: 'Primary colors',\n colors: [\n { name: 'Red', color: '#f00' },\n { name: 'Yellow', color: '#ff0' },\n { name: 'Blue', color: '#00f' },\n ],\n },\n {\n name: 'Secondary colors',\n colors: [\n { name: 'Orange', color: '#f60' },\n { name: 'Green', color: '#0f0' },\n { name: 'Purple', color: '#60f' },\n ],\n },\n ]}\n value={ color }\n onChange={ ( newColor ) => {\n\t\t\t\tsetColor( newColor );\n\t\t\t\tonChange?.( newColor );\n\t\t\t} } />\n );\n};"},{"id":"components-colorpalette--css-variables","name":"CSS Variables","snippet":"const CSSVariables = () => <div\n style={ {\n '--red': '#f00',\n '--yellow': '#ff0',\n '--blue': '#00f',\n } }>\n <Template\n colors={[\n\t\t\t{ name: 'Red', color: 'var(--red)' },\n\t\t\t{ name: 'Yellow', color: 'var(--yellow)' },\n\t\t\t{ name: 'Blue', color: 'var(--blue)' },\n\t\t]} />\n</div>;"}],"import":"import { ColorPalette } from \"@wordpress/components\";","jsDocTags":{},"description":"Allows the user to pick a color from a list of pre-defined color entries. ```jsx import { ColorPalette } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyColorPalette = () => { const [ color, setColor ] = useState ( '#f00' ) const colors = [ { name: 'red', color: '#f00' }, { name: 'white', color: '#fff' }, { name: 'blue', color: '#00f' }, ]; return ( <ColorPalette colors={ colors } value={ color } onChange={ ( color ) => setColor( color ) } /> ); } ); ```","reactDocgen":{"description":"Allows the user to pick a color from a list of pre-defined color entries.\n\n```jsx\nimport { ColorPalette } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyColorPalette = () => {\n const [ color, setColor ] = useState ( '#f00' )\n const colors = [\n { name: 'red', color: '#f00' },\n { name: 'white', color: '#fff' },\n { name: 'blue', color: '#00f' },\n ];\n return (\n <ColorPalette\n colors={ colors }\n value={ color }\n onChange={ ( color ) => setColor( color ) }\n />\n );\n} );\n```","methods":[],"displayName":"ColorPalette","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/color-palette/index.tsx","actualName":"ColorPalette","exportName":"ColorPalette"}},"components-colorpicker":{"id":"components-colorpicker","name":"ColorPicker","path":"../packages/components/src/color-picker/stories/index.story.tsx","stories":[{"id":"components-colorpicker--default","name":"Default","snippet":"const Default = () => <ColorPicker onChange={fn()} />;"}],"import":"import { ColorPicker } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedColorPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/color-picker/component.tsx","actualName":"UnconnectedColorPicker"}},"components-comboboxcontrol":{"id":"components-comboboxcontrol","name":"ComboboxControl","path":"../packages/components/src/combobox-control/stories/index.story.tsx","stories":[{"id":"components-comboboxcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n\t\tuseState< ComboboxControlProps[ 'value' ] >( null );\n\n return (\n <>\n <ComboboxControl\n __next40pxDefaultSize\n onFilterValueChange={fn()}\n label=\"Country\"\n options={countryOptions}\n help=\"Help text to describe the control.\"\n value={ value }\n onChange={ ( ...changeArgs ) => {\n\t\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t\t} } />\n </>\n );\n};"},{"id":"components-comboboxcontrol--with-custom-render-item","name":"With Custom Render Item","snippet":"const WithCustomRenderItem = () => {\n const [ value, setValue ] =\n\t\tuseState< ComboboxControlProps[ 'value' ] >( null );\n\n return (\n <>\n <ComboboxControl\n __next40pxDefaultSize\n onFilterValueChange={fn()}\n label=\"Author\"\n options={[\n {\n value: 'parsley',\n label: 'Parsley Montana',\n age: 48,\n country: 'Germany',\n },\n {\n value: 'cabbage',\n label: 'Cabbage New York',\n age: 44,\n country: 'France',\n },\n {\n value: 'jake',\n label: 'Jake Weary',\n age: 41,\n country: 'United Kingdom',\n },\n ]}\n __experimentalRenderItem={( { item } ) => {\n const { label, age, country } = item;\n return (\n <div>\n <div style={ { marginBottom: '0.2rem' } }>{ label }</div>\n <small>\n Age: { age }, Country: { country }\n </small>\n </div>\n );\n }}\n value={ value }\n onChange={ ( ...changeArgs ) => {\n\t\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t\t} } />\n </>\n );\n};","description":"The rendered output of each suggestion can be customized by passing a render function to the `__experimentalRenderItem` prop. (This is still an experimental feature and is subject to change.)"},{"id":"components-comboboxcontrol--with-disabled-options","name":"With Disabled Options","snippet":"const WithDisabledOptions = () => {\n const [ value, setValue ] =\n\t\tuseState< ComboboxControlProps[ 'value' ] >( null );\n\n return (\n <>\n <ComboboxControl\n __next40pxDefaultSize\n onFilterValueChange={fn()}\n options={optionsWithDisabledOptions}\n value={ value }\n onChange={ ( ...changeArgs ) => {\n\t\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t\t} } />\n </>\n );\n};","description":"You can disable options in the list by setting the `disabled` property to true for individual items in the option object."},{"id":"components-comboboxcontrol--not-expand-on-focus","name":"Not Expand On Focus","snippet":"const NotExpandOnFocus = () => {\n const [ value, setValue ] =\n\t\tuseState< ComboboxControlProps[ 'value' ] >( null );\n\n return (\n <>\n <ComboboxControl\n __next40pxDefaultSize\n onFilterValueChange={fn()}\n options={countryOptions}\n expandOnFocus={false}\n value={ value }\n onChange={ ( ...changeArgs ) => {\n\t\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t\t} } />\n </>\n );\n};","description":"By default, the combobox expands when focused. You can disable this behavior by setting the `expandOnFocus` prop to `false`. This is useful when you want to show the suggestions only when the user interacts with the input."}],"import":"import { ComboboxControl } from \"@wordpress/components\";","jsDocTags":{},"description":"`ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of being able to search for options using a search input. ```jsx import { ComboboxControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const options = [ { value: 'small', label: 'Small', }, { value: 'normal', label: 'Normal', disabled: true, }, { value: 'large', label: 'Large', disabled: false, }, ]; function MyComboboxControl() { const [ fontSize, setFontSize ] = useState(); const [ filteredOptions, setFilteredOptions ] = useState( options ); return ( <ComboboxControl __next40pxDefaultSize label=\"Font Size\" value={ fontSize } onChange={ setFontSize } options={ filteredOptions } onFilterValueChange={ ( inputValue ) => setFilteredOptions( options.filter( ( option ) => option.label .toLowerCase() .startsWith( inputValue.toLowerCase() ) ) ) } /> ); } ```","reactDocgen":{"description":"`ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\nbeing able to search for options using a search input.\n\n```jsx\nimport { ComboboxControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst options = [\n\t{\n\t\tvalue: 'small',\n\t\tlabel: 'Small',\n\t},\n\t{\n\t\tvalue: 'normal',\n\t\tlabel: 'Normal',\n\t\tdisabled: true,\n\t},\n\t{\n\t\tvalue: 'large',\n\t\tlabel: 'Large',\n\t\tdisabled: false,\n\t},\n];\n\nfunction MyComboboxControl() {\n\tconst [ fontSize, setFontSize ] = useState();\n\tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n\treturn (\n\t\t<ComboboxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel=\"Font Size\"\n\t\t\tvalue={ fontSize }\n\t\t\tonChange={ setFontSize }\n\t\t\toptions={ filteredOptions }\n\t\t\tonFilterValueChange={ ( inputValue ) =>\n\t\t\t\tsetFilteredOptions(\n\t\t\t\t\toptions.filter( ( option ) =>\n\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n```","methods":[],"displayName":"ComboboxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/combobox-control/index.tsx","actualName":"ComboboxControl","exportName":"default","props":{"__experimentalRenderItem":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( args: {\n\titem: ComboboxControlOption;\n} ) => React.ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: ComboboxControlOption;\n}","signature":{"properties":[{"key":"item","value":{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\tvalue: string;\n\tdisabled?: boolean;\n\t[ key: string ]: any;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"value","value":{"name":"string","required":true}},{"key":"disabled","value":{"name":"boolean","required":false}},{"key":{"name":"string"},"value":{"name":"any","required":true}}]},"required":true}}]}},"name":"args"}],"return":{"name":"ReactReactNode","raw":"React.ReactNode"}}},"description":"Custom renderer invoked for each option in the suggestion list.\nThe render prop receives as its argument an object containing, under the `item` key,\nthe single option's data (directly from the array of data passed to the `options` prop)."},"__next36pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Deprecated. Use `__next40pxDefaultSize` instead.\n\n@default false\n@deprecated\n@ignore"},"__next40pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the larger default height that will become the default size in a future version.\n\n@default false"},"allowReset":{"required":false,"tsType":{"name":"boolean"},"description":"Show a reset button to clear the input.\n\n@default true"},"expandOnFocus":{"required":false,"tsType":{"name":"boolean"},"description":"Automatically expand the dropdown when the control is focused.\nIf the control is clicked, the dropdown will expand regardless of this prop.\n\n@default true"},"messages":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The message to announce to screen readers when a suggestion is selected.\n\t *\n\t * @default `__( 'Item selected.' )`\n\t */\n\tselected: string;\n}","signature":{"properties":[{"key":"selected","value":{"name":"string","required":true},"description":"The message to announce to screen readers when a suggestion is selected.\n\n@default `__( 'Item selected.' )`"}]}},"description":"Customizable UI messages."},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( value: ComboboxControlProps[ 'value' ] ) => void","signature":{"arguments":[{"type":{"name":"intersection['value']","raw":"ComboboxControlProps[ 'value' ]"},"name":"value"}],"return":{"name":"void"}}},"description":"Function called with the selected value changes."},"onFilterValueChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( value: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"value"}],"return":{"name":"void"}}},"description":"Function called when the control's search input value changes. The argument contains the next input value.\n\n@default noop"},"options":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\tvalue: string;\n\tdisabled?: boolean;\n\t[ key: string ]: any;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"value","value":{"name":"string","required":true}},{"key":"disabled","value":{"name":"boolean","required":false}},{"key":{"name":"string"},"value":{"name":"any","required":true}}]}}],"raw":"ComboboxControlOption[]"},"description":"The options that can be chosen from."},"value":{"required":false,"tsType":{"name":"union","raw":"string | null","elements":[{"name":"string"},{"name":"null"}]},"description":"The current value of the control."},"placeholder":{"required":false,"tsType":{"name":"string"},"description":"If passed, the combobox input will show a placeholder string if no values are present."},"isLoading":{"required":false,"tsType":{"name":"boolean"},"description":"Show a spinner (and hide the suggestions dropdown) while data\nabout the matching suggestions (ie the `options` prop) is loading\n\n@default false"}}}},"components-customgradientpicker":{"id":"components-customgradientpicker","name":"CustomGradientPicker","path":"../packages/components/src/custom-gradient-picker/stories/index.story.tsx","stories":[{"id":"components-customgradientpicker--default","name":"Default","snippet":"const Default = ( { onChange, ...props } ) => {\n\tconst [ gradient, setGradient ] = useState< string >();\n\treturn (\n\t\t<CustomGradientPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ gradient }\n\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\tsetGradient( newGradient );\n\t\t\t\tonChange( newGradient );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { CustomGradientPicker } from \"@wordpress/components\";","jsDocTags":{},"description":"CustomGradientPicker is a React component that renders a UI for specifying linear or radial gradients. Radial gradients are displayed in the picker as a slice of the gradient from the center to the outside. ```jsx import { CustomGradientPicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyCustomGradientPicker = () => { const [ gradient, setGradient ] = useState(); return ( <CustomGradientPicker value={ gradient } onChange={ setGradient } /> ); }; ```","reactDocgen":{"description":"CustomGradientPicker is a React component that renders a UI for specifying\nlinear or radial gradients. Radial gradients are displayed in the picker as\na slice of the gradient from the center to the outside.\n\n```jsx\nimport { CustomGradientPicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyCustomGradientPicker = () => {\n const [ gradient, setGradient ] = useState();\n\n return (\n <CustomGradientPicker\n\t\tvalue={ gradient }\n\t\tonChange={ setGradient }\n />\n );\n};\n```","methods":[],"displayName":"CustomGradientPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-gradient-picker/index.tsx","actualName":"CustomGradientPicker","exportName":"CustomGradientPicker","props":{"__nextHasNoMargin":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting in to the new margin-free styles that will become the default\nin a future version, currently scheduled to be WordPress 6.4. (The prop\ncan be safely removed once this happens.)\n\n@default false\n@deprecated Default behavior since WP 6.5. Prop can be safely removed.\n@ignore"},"value":{"required":false,"tsType":{"name":"union","raw":"string | null","elements":[{"name":"string"},{"name":"null"}]},"description":"The current value of the gradient. Pass a css gradient string (See default value for example).\nOptionally pass in a `null` value to specify no gradient is currently selected.\n\n@default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'"},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( currentGradient: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"currentGradient"}],"return":{"name":"void"}}},"description":"The function called when a new gradient has been defined. It is passed to\nthe `currentGradient` as an argument."},"enableAlpha":{"required":false,"tsType":{"name":"boolean"},"description":"Whether to enable alpha transparency options in the picker.\n\n@default true","defaultValue":{"value":"true","computed":false}},"__experimentalIsRenderedInSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Whether this is rendered in the sidebar.\n\n@default false","defaultValue":{"value":"false","computed":false}}}}},"components-customselectcontrol-v2":{"id":"components-customselectcontrol-v2","name":"CustomSelectControlV2","path":"../packages/components/src/custom-select-control-v2/stories/index.story.tsx","stories":[{"id":"components-customselectcontrol-v2--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ value, setValue ] = useState< string | readonly string[] >();\n\treturn (\n\t\t<CustomSelectControlV2\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValue( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"},{"id":"components-customselectcontrol-v2--multiple-selection","name":"Multiple Selection","snippet":"const MultipleSelection = ( props ) => {\n\tconst [ value, setValue ] = useState< string | readonly string[] >();\n\treturn (\n\t\t<CustomSelectControlV2\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValue( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};","description":"Multiple selection can be enabled by using an array for the `value` and `defaultValue` props. The argument type of the `onChange` function will also change accordingly."},{"id":"components-customselectcontrol-v2--custom-selected-value","name":"Custom Selected Value","snippet":"const CustomSelectedValue = ( props ) => {\n\tconst [ value, setValue ] = useState< string | readonly string[] >();\n\treturn (\n\t\t<CustomSelectControlV2\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValue( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};","description":"The `renderSelectedValue` prop can be used to customize how the selected value is rendered in the dropdown trigger."}],"import":"import { CustomSelectControlV2 } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"Item","docblock":null,"modifiers":["static"],"params":[{"name":"{\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false >","optional":false,"type":{"name":"intersection","raw":"P &\n( T extends React.ElementType\n\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t Omit<\n\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t'as' | keyof P | 'children'\n\t >\n\t: {} ) &\n( IsPolymorphic extends true\n\t? {\n\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\tas?: T | keyof React.JSX.IntrinsicElements;\n\t }\n\t: {} )","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * If true, the item will be disabled.\n\t *\n\t * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}","signature":{"properties":[{"key":"value","value":{"name":"string","required":true},"description":"The value of the select item. This will be used as the children if\nchildren are left `undefined`."},{"key":"children","value":{"name":"ReactReactNode","raw":"React.ReactNode","required":false},"description":"The children to display for each select item. The `value` will be\nused if left `undefined`."},{"key":"disabled","value":{"name":"boolean","required":false},"description":"If true, the item will be disabled.\n\nYou will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n@default false"}]}},{"name":"unknown"},{"name":"unknown"}],"alias":"WordPressComponentProps"}}],"returns":null}],"displayName":"CustomSelectControlV2","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/index.tsx","actualName":"CustomSelectControlV2","exportName":"default"}},"components-customselectcontrol":{"id":"components-customselectcontrol","name":"CustomSelectControl","path":"../packages/components/src/custom-select-control/stories/index.story.tsx","stories":[{"id":"components-customselectcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ value, setValue ] = useState( props.options[ 0 ] );\n\n\tconst onChange: React.ComponentProps<\n\t\ttypeof CustomSelectControl\n\t>[ 'onChange' ] = ( changeObject ) => {\n\t\tsetValue( changeObject.selectedItem );\n\t\tprops.onChange?.( changeObject );\n\t};\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"},{"id":"components-customselectcontrol--with-long-labels","name":"With Long Labels","snippet":"const WithLongLabels = ( props ) => {\n\tconst [ value, setValue ] = useState( props.options[ 0 ] );\n\n\tconst onChange: React.ComponentProps<\n\t\ttypeof CustomSelectControl\n\t>[ 'onChange' ] = ( changeObject ) => {\n\t\tsetValue( changeObject.selectedItem );\n\t\tprops.onChange?.( changeObject );\n\t};\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"},{"id":"components-customselectcontrol--with-hints","name":"With Hints","snippet":"const WithHints = ( props ) => {\n\tconst [ value, setValue ] = useState( props.options[ 0 ] );\n\n\tconst onChange: React.ComponentProps<\n\t\ttypeof CustomSelectControl\n\t>[ 'onChange' ] = ( changeObject ) => {\n\t\tsetValue( changeObject.selectedItem );\n\t\tprops.onChange?.( changeObject );\n\t};\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"}],"import":"import { CustomSelectControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"CustomSelectControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control/index.tsx","actualName":"CustomSelectControl","exportName":"default","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"Optional classname for the component."},"hideLabelFromVision":{"required":false,"tsType":{"name":"boolean"},"description":"Hide the label visually, while keeping available to assistive technology."},"describedBy":{"required":false,"tsType":{"name":"string"},"description":"Description for the select trigger button used by assistive technology.\nIf no value is passed, the text \"Currently selected: selectedItem.name\"\nwill be used fully translated."},"label":{"required":true,"tsType":{"name":"string"},"description":"Label for the control."},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: T;\n}","signature":{"properties":[{"key":"highlightedIndex","value":{"name":"number","required":false}},{"key":"inputValue","value":{"name":"string","required":false}},{"key":"isOpen","value":{"name":"boolean","required":false}},{"key":"type","value":{"name":"string","required":false}},{"key":"selectedItem","value":{"name":"NoInfer","elements":[{"name":"T"}],"raw":"NoInfer< T >","required":true}}]}},"name":"newValue"}],"return":{"name":"void"}}},"description":"Function called with the control's internal state changes. The `selectedItem`\nproperty contains the next selected item."},"onBlur":{"required":false,"tsType":{"name":"FocusEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"FocusEventHandler< HTMLButtonElement >"},"description":"A handler for `blur` events on the trigger button.\n\n@ignore"},"onFocus":{"required":false,"tsType":{"name":"FocusEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"FocusEventHandler< HTMLButtonElement >"},"description":"A handler for `focus` events on the trigger button.\n\n@ignore"},"onMouseOut":{"required":false,"tsType":{"name":"MouseEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"MouseEventHandler< HTMLButtonElement >"},"description":"A handler for `mouseout` events on the trigger button.\n\n@ignore"},"onMouseOver":{"required":false,"tsType":{"name":"MouseEventHandler","elements":[{"name":"HTMLButtonElement"}],"raw":"MouseEventHandler< HTMLButtonElement >"},"description":"A handler for `mouseover` events on the trigger button.\n\n@ignore"},"options":{"required":true,"tsType":{"name":"ReadonlyArray","elements":[{"name":"T"}],"raw":"ReadonlyArray< T >"},"description":"The list of options that can be chosen from."},"size":{"required":false,"tsType":{"name":"union","raw":"'default' | 'small' | '__unstable-large'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'small'"},{"name":"literal","value":"'__unstable-large'"}]},"description":"The size of the control.\n\n@default 'default'"},"value":{"required":false,"tsType":{"name":"NoInfer","elements":[{"name":"T"}],"raw":"NoInfer< T >"},"description":"Can be used to externally control the value of the control."},"__experimentalShowSelectedHint":{"required":false,"tsType":{"name":"boolean"},"description":"Use the `showSelectedHint` property instead.\n@deprecated\n@ignore"},"showSelectedHint":{"required":false,"tsType":{"name":"boolean"},"description":"Show the hint of the selected item in the trigger button.\n\n@default false"},"__nextUnconstrainedWidth":{"required":false,"tsType":{"name":"boolean"},"description":"Opt-in prop for an unconstrained width style which became the default in\nWordPress 6.5. The prop is no longer needed and can be safely removed.\n\n@deprecated\n@ignore"},"__next40pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the larger default height that will become the default size in a future version.\n\n@default false"},"__shouldNotWarnDeprecated36pxSize":{"required":false,"tsType":{"name":"boolean"},"description":"Do not throw a warning for the deprecated 36px default size.\nFor internal components of other components that already throw the warning.\n\n@ignore"}}}},"components-datetimepicker":{"id":"components-datetimepicker","name":"DateTimePicker","path":"../packages/components/src/date-time/stories/date-time.story.tsx","stories":[{"id":"components-datetimepicker--default","name":"Default","snippet":"const Default = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DateTimePicker\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"},{"id":"components-datetimepicker--with-events","name":"With Events","snippet":"const WithEvents = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DateTimePicker\n events={[\n { date: daysFromNow( 2 ) },\n { date: daysFromNow( 4 ) },\n { date: daysFromNow( 6 ) },\n { date: daysFromNow( 8 ) },\n ]}\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"},{"id":"components-datetimepicker--with-invalid-dates","name":"With Invalid Dates","snippet":"const WithInvalidDates = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DateTimePicker\n isInvalidDate={isWeekend}\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"}],"import":"import { DateTimePicker } from \"@wordpress/components\";","jsDocTags":{},"description":"DateTimePicker is a React component that renders a calendar and clock for date and time selection. The calendar and clock components can be accessed individually using the `DatePicker` and `TimePicker` components respectively. ```jsx import { DateTimePicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDateTimePicker = () => { const [ date, setDate ] = useState( new Date() ); return ( <DateTimePicker currentDate={ date } onChange={ ( newDate ) => setDate( newDate ) } is12Hour /> ); }; ```","reactDocgen":{"description":"DateTimePicker is a React component that renders a calendar and clock for\ndate and time selection. The calendar and clock components can be accessed\nindividually using the `DatePicker` and `TimePicker` components respectively.\n\n```jsx\nimport { DateTimePicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyDateTimePicker = () => {\n const [ date, setDate ] = useState( new Date() );\n\n return (\n <DateTimePicker\n currentDate={ date }\n onChange={ ( newDate ) => setDate( newDate ) }\n is12Hour\n />\n );\n};\n```","methods":[],"displayName":"DateTimePicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/date-time/date-time/index.tsx","actualName":"DateTimePicker","exportName":"DateTimePicker","props":{"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( date: string | null ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"string | null","elements":[{"name":"string"},{"name":"null"}]},"name":"date"}],"return":{"name":"void"}}},"description":"The function called when a new date or time has been selected. It is\npassed the date and time as an argument."},"onMonthPreviewed":{"defaultValue":{"value":"() => {}","computed":false},"required":false}}}},"components-datepicker":{"id":"components-datepicker","name":"DatePicker","path":"../packages/components/src/date-time/stories/date.story.tsx","stories":[{"id":"components-datepicker--default","name":"Default","snippet":"const Default = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DatePicker\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"},{"id":"components-datepicker--with-events","name":"With Events","snippet":"const WithEvents = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DatePicker\n events={[\n { date: daysFromNow( 2 ) },\n { date: daysFromNow( 4 ) },\n { date: daysFromNow( 6 ) },\n { date: daysFromNow( 8 ) },\n ]}\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"},{"id":"components-datepicker--with-invalid-dates","name":"With Invalid Dates","snippet":"const WithInvalidDates = () => {\n const [ date, setDate ] = useState( currentDate );\n useEffect( () => {\n\t\tsetDate( currentDate );\n\t}, [ currentDate ] );\n\n return (\n <DatePicker\n isInvalidDate={isWeekend}\n currentDate={ date }\n onChange={ ( newDate ) => {\n\t\t\t\tsetDate( newDate );\n\t\t\t\tonChange?.( newDate );\n\t\t\t} } />\n );\n};"}],"import":"import { DatePicker } from \"@wordpress/components\";","jsDocTags":{},"description":"DatePicker is a React component that renders a calendar for date selection. ```jsx import { DatePicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDatePicker = () => { const [ date, setDate ] = useState( new Date() ); return ( <DatePicker currentDate={ date } onChange={ ( newDate ) => setDate( newDate ) } /> ); }; ```","reactDocgen":{"description":"DatePicker is a React component that renders a calendar for date selection.\n\n```jsx\nimport { DatePicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyDatePicker = () => {\n const [ date, setDate ] = useState( new Date() );\n\n return (\n <DatePicker\n currentDate={ date }\n onChange={ ( newDate ) => setDate( newDate ) }\n />\n );\n};\n```","methods":[],"displayName":"DatePicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/date-time/date/index.tsx","actualName":"DatePicker","exportName":"DatePicker","props":{"currentDate":{"required":false,"tsType":{"name":"union","raw":"Date | string | number | null","elements":[{"name":"Date"},{"name":"string"},{"name":"number"},{"name":"null"}]},"description":"The current date and time at initialization. Optionally pass in a `null`\nvalue to specify no date is currently selected."},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( date: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"date"}],"return":{"name":"void"}}},"description":"The function called when a new date has been selected. It is passed the\ndate as an argument."},"isInvalidDate":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( date: Date ) => boolean","signature":{"arguments":[{"type":{"name":"Date"},"name":"date"}],"return":{"name":"boolean"}}},"description":"A callback function which receives a Date object representing a day as an\nargument, and should return a Boolean to signify if the day is valid or\nnot."},"onMonthPreviewed":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( date: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"date"}],"return":{"name":"void"}}},"description":"A callback invoked when selecting the previous/next month in the date\npicker. The callback receives the new month date in the ISO format as an\nargument."},"events":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The date of the event.\n\t */\n\tdate: Date;\n}","signature":{"properties":[{"key":"date","value":{"name":"Date","required":true},"description":"The date of the event."}]}}],"raw":"DatePickerEvent[]"},"description":"List of events to show in the date picker. Each event will appear as a\ndot on the day of the event.","defaultValue":{"value":"[]","computed":false}},"startOfWeek":{"required":false,"tsType":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}]},"description":"The day that the week should start on. 0 for Sunday, 1 for Monday, etc.\n\n@default 0","defaultValue":{"value":"0","computed":false}}}}},"components-timepicker":{"id":"components-timepicker","name":"TimePicker","path":"../packages/components/src/date-time/stories/time.story.tsx","stories":[{"id":"components-timepicker--default","name":"Default","snippet":"const Default = () => {\n const [ time, setTime ] = useState( currentTime );\n useEffect( () => {\n\t\tsetTime( currentTime );\n\t}, [ currentTime ] );\n\n return (\n <TimePicker\n currentTime={ time }\n onChange={ ( newTime ) => {\n\t\t\t\tsetTime( newTime );\n\t\t\t\tonChange?.( newTime );\n\t\t\t} } />\n );\n};"},{"id":"components-timepicker--time-input","name":"Time Input","snippet":"const TimeInput = () => {\n return <TimePicker.TimeInput label=\"Time\" />;\n};","description":"The time input can be used in isolation as `<TimePicker.TimeInput />`. In this case, the `value` will be passed as an object in 24-hour format (`{ hours: number, minutes: number }`)."}],"import":"import { TimePicker } from \"@wordpress/components\";","jsDocTags":{},"description":"TimePicker is a React component that renders a clock for time selection. ```jsx import { TimePicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyTimePicker = () => { const [ time, setTime ] = useState( new Date() ); return ( <TimePicker currentTime={ date } onChange={ ( newTime ) => setTime( newTime ) } is12Hour /> ); }; ```","reactDocgen":{"description":"TimePicker is a React component that renders a clock for time selection.\n\n```jsx\nimport { TimePicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyTimePicker = () => {\n const [ time, setTime ] = useState( new Date() );\n\n return (\n <TimePicker\n currentTime={ date }\n onChange={ ( newTime ) => setTime( newTime ) }\n is12Hour\n />\n );\n};\n```","methods":[{"name":"TimeInput","docblock":"A component to input a time.\n\nValues are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n\n```jsx\nimport { TimePicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyTimeInput = () => {\n\tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n\n\treturn (\n\t\t<TimePicker.TimeInput\n\t\t\tvalue={ time }\n\t\t\tonChange={ setTime }\n\t\t\tlabel=\"Time\"\n\t\t/>\n\t);\n};\n```","modifiers":["static"],"params":[{"name":"{\n\tvalue: valueProp,\n\tdefaultValue,\n\tis12Hour,\n\tlabel,\n\tminutesProps,\n\tonChange,\n}: TimeInputProps","optional":false,"type":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\n\t * displayed\n\t */\n\tis12Hour?: boolean;\n\n\t/**\n\t * The time input object with hours and minutes values.\n\t *\n\t * - hours: number (24-hour format)\n\t * - minutes: number\n\t */\n\tvalue?: TimeInputValue;\n\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the current time will be used.\n\t */\n\tdefaultValue?: TimeInputValue;\n\n\t/**\n\t * The props to pass down to the minutes input.\n\t */\n\tminutesProps?: React.ComponentProps< typeof MinutesInput >;\n\n\t/**\n\t * The label for the time input.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The function is called when a new time has been selected.\n\t * Passing hours and minutes as an object properties.\n\t */\n\tonChange?: ( time: TimeInputValue ) => void;\n}","signature":{"properties":[{"key":"is12Hour","value":{"name":"boolean","required":false},"description":"Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\ndisplayed"},{"key":"value","value":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The hours value in 24-hour format.\n\t */\n\thours: number;\n\n\t/**\n\t * The minutes value.\n\t */\n\tminutes: number;\n}","signature":{"properties":[{"key":"hours","value":{"name":"number","required":true},"description":"The hours value in 24-hour format."},{"key":"minutes","value":{"name":"number","required":true},"description":"The minutes value."}]},"required":false},"description":"The time input object with hours and minutes values.\n\n- hours: number (24-hour format)\n- minutes: number"},{"key":"defaultValue","value":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The hours value in 24-hour format.\n\t */\n\thours: number;\n\n\t/**\n\t * The minutes value.\n\t */\n\tminutes: number;\n}","signature":{"properties":[{"key":"hours","value":{"name":"number","required":true},"description":"The hours value in 24-hour format."},{"key":"minutes","value":{"name":"number","required":true},"description":"The minutes value."}]},"required":false},"description":"An optional default value for the control when used in uncontrolled mode.\nIf left `undefined`, the current time will be used."},{"key":"minutesProps","value":{"name":"ReactComponentProps","raw":"React.ComponentProps< typeof MinutesInput >","elements":[{"name":"MinutesInput"}],"required":false},"description":"The props to pass down to the minutes input."},{"key":"label","value":{"name":"string","required":false},"description":"The label for the time input."},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( time: TimeInputValue ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The hours value in 24-hour format.\n\t */\n\thours: number;\n\n\t/**\n\t * The minutes value.\n\t */\n\tminutes: number;\n}","signature":{"properties":[{"key":"hours","value":{"name":"number","required":true},"description":"The hours value in 24-hour format."},{"key":"minutes","value":{"name":"number","required":true},"description":"The minutes value."}]},"required":false},"name":"time"}],"return":{"name":"void"}},"required":false},"description":"The function is called when a new time has been selected.\nPassing hours and minutes as an object properties."}]},"alias":"TimeInputProps"}}],"returns":null,"description":"A component to input a time.\n\nValues are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n\n```jsx\nimport { TimePicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyTimeInput = () => {\n\tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n\n\treturn (\n\t\t<TimePicker.TimeInput\n\t\t\tvalue={ time }\n\t\t\tonChange={ setTime }\n\t\t\tlabel=\"Time\"\n\t\t/>\n\t);\n};\n```"}],"displayName":"TimePicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/date-time/time/index.tsx","actualName":"TimePicker","exportName":"TimePicker","props":{"currentTime":{"required":false,"tsType":{"name":"union","raw":"Date | string | number | null","elements":[{"name":"Date"},{"name":"string"},{"name":"number"},{"name":"null"}]},"description":"The initial current time the time picker should render."},"is12Hour":{"required":false,"tsType":{"name":"boolean"},"description":"Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\ndisplayed and the time format is assumed to be `MM-DD-YYYY` (as opposed\nto the default format `DD-MM-YYYY`)."},"dateOrder":{"required":false,"tsType":{"name":"union","raw":"'dmy' | 'mdy' | 'ymd'","elements":[{"name":"literal","value":"'dmy'"},{"name":"literal","value":"'mdy'"},{"name":"literal","value":"'ymd'"}]},"description":"The order of day, month, and year. This prop overrides the time format\ndetermined by `is12Hour` prop.\n\n@default 'dmy'"},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( time: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"time"}],"return":{"name":"void"}}},"description":"The function called when a new time has been selected. It is passed the\ntime as an argument."},"hideLabelFromVision":{"required":false,"tsType":{"name":"boolean"},"description":"If true, the label will only be visible to screen readers.\n\n@default false","defaultValue":{"value":"false","computed":false}}}}},"components-dropzone":{"id":"components-dropzone","name":"DropZone","path":"../packages/components/src/drop-zone/stories/index.story.tsx","stories":[{"id":"components-dropzone--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tbackground: 'lightgray',\n\t\t\t\tpadding: 32,\n\t\t\t\tposition: 'relative',\n\t\t\t} }\n\t\t>\n\t\t\tDrop something here\n\t\t\t<DropZone { ...props } />\n\t\t</div>\n\t);\n};"}],"import":"import { DropZone } from \"@wordpress/components\";","jsDocTags":{},"description":"`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. ```jsx import { DropZone } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDropZone = () => { const [ hasDropped, setHasDropped ] = useState( false ); return ( <div> { hasDropped ? 'Dropped!' : 'Drop something here' } <DropZone onFilesDrop={ () => setHasDropped( true ) } onHTMLDrop={ () => setHasDropped( true ) } onDrop={ () => setHasDropped( true ) } /> </div> ); } ```","reactDocgen":{"description":"`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n\n```jsx\nimport { DropZone } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyDropZone = () => {\n const [ hasDropped, setHasDropped ] = useState( false );\n\n return (\n <div>\n { hasDropped ? 'Dropped!' : 'Drop something here' }\n <DropZone\n onFilesDrop={ () => setHasDropped( true ) }\n onHTMLDrop={ () => setHasDropped( true ) }\n onDrop={ () => setHasDropped( true ) }\n />\n </div>\n );\n}\n```","methods":[],"displayName":"DropZoneComponent","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/drop-zone/index.tsx","actualName":"DropZoneComponent","exportName":"DropZoneComponent","props":{"icon":{"defaultValue":{"value":"jsx(SVG, { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 24 24\", children: /* @__PURE__ */ jsx(Path, { d: \"M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z\" }) })","computed":true},"required":false},"isEligible":{"defaultValue":{"value":"() => true","computed":false},"required":false}}}},"components-formfileupload":{"id":"components-formfileupload","name":"FormFileUpload","path":"../packages/components/src/form-file-upload/stories/index.story.tsx","stories":[{"id":"components-formfileupload--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <FormFileUpload __next40pxDefaultSize { ...props } />;\n};"},{"id":"components-formfileupload--restrict-file-types","name":"Restrict File Types","snippet":"const RestrictFileTypes = ( props ) => {\n\treturn <FormFileUpload __next40pxDefaultSize { ...props } />;\n};"},{"id":"components-formfileupload--allow-multiple-files","name":"Allow Multiple Files","snippet":"const AllowMultipleFiles = ( props ) => {\n\treturn <FormFileUpload __next40pxDefaultSize { ...props } />;\n};"},{"id":"components-formfileupload--with-icon","name":"With Icon","snippet":"const WithIcon = ( props ) => {\n\treturn <FormFileUpload __next40pxDefaultSize { ...props } />;\n};"},{"id":"components-formfileupload--with-custom-render","name":"With Custom Render","snippet":"const WithCustomRender = ( props ) => {\n\treturn <FormFileUpload __next40pxDefaultSize { ...props } />;\n};","description":"Render a custom trigger button by passing a render function to the `render` prop. ```jsx ( { openFileDialog } ) => <button onClick={ openFileDialog }>Custom Upload Button</button> ```"}],"import":"import { FormFileUpload } from \"@wordpress/components\";","jsDocTags":{},"description":"FormFileUpload allows users to select files from their local device. ```jsx import { FormFileUpload } from '@wordpress/components'; const MyFormFileUpload = () => ( <FormFileUpload __next40pxDefaultSize accept=\"image/*\" onChange={ ( event ) => console.log( event.currentTarget.files ) } > Upload </FormFileUpload> ); ```","reactDocgen":{"description":"FormFileUpload allows users to select files from their local device.\n\n```jsx\nimport { FormFileUpload } from '@wordpress/components';\n\nconst MyFormFileUpload = () => (\n <FormFileUpload\n __next40pxDefaultSize\n accept=\"image/*\"\n onChange={ ( event ) => console.log( event.currentTarget.files ) }\n >\n Upload\n </FormFileUpload>\n);\n```","methods":[],"displayName":"FormFileUpload","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/form-file-upload/index.tsx","actualName":"FormFileUpload","exportName":"FormFileUpload","props":{"multiple":{"defaultValue":{"value":"false","computed":false},"required":false}}}},"components-formtokenfield":{"id":"components-formtokenfield","name":"FormTokenField","path":"../packages/components/src/form-token-field/stories/index.story.tsx","stories":[{"id":"components-formtokenfield--default","name":"Default","snippet":"const Default = () => {\n const [ selectedContinents, setSelectedContinents ] = useState<\n\t\tComponentProps< typeof FormTokenField >[ 'value' ]\n\t>( [] );\n\n return (\n <FormTokenField\n __next40pxDefaultSize\n label=\"Type a continent\"\n suggestions={continents}\n value={ selectedContinents }\n onChange={ ( tokens ) => setSelectedContinents( tokens ) } />\n );\n};"},{"id":"components-formtokenfield--async","name":"Async","snippet":"const Async = () => {\n const [ selectedContinents, setSelectedContinents ] = useState<\n\t\tComponentProps< typeof FormTokenField >[ 'value' ]\n\t>( [] );\n const [ availableContinents, setAvailableContinents ] = useState<\n\t\tstring[]\n\t>( [] );\n\n const searchContinents = ( input: string ) => {\n\t\tconst timeout = setTimeout( () => {\n\t\t\tconst available = ( suggestions || [] ).filter( ( continent ) =>\n\t\t\t\tcontinent.toLowerCase().includes( input.toLowerCase() )\n\t\t\t);\n\t\t\tsetAvailableContinents( available );\n\t\t}, 1000 );\n\n\t\treturn () => clearTimeout( timeout );\n\t};\n\n return (\n <FormTokenField\n __next40pxDefaultSize\n label=\"Type a continent\"\n value={ selectedContinents }\n suggestions={ availableContinents }\n onChange={ ( tokens ) => setSelectedContinents( tokens ) }\n onInputChange={ searchContinents } />\n );\n};"},{"id":"components-formtokenfield--dropdown-selector","name":"Dropdown Selector","snippet":"const DropdownSelector = () => {\n const [ selectedContinents, setSelectedContinents ] = useState<\n\t\tComponentProps< typeof FormTokenField >[ 'value' ]\n\t>( [] );\n\n return (\n <FormTokenField\n __next40pxDefaultSize\n __experimentalExpandOnFocus\n __experimentalAutoSelectFirstMatch\n value={ selectedContinents }\n onChange={ ( tokens ) => setSelectedContinents( tokens ) } />\n );\n};"},{"id":"components-formtokenfield--with-custom-rendered-items","name":"With Custom Rendered Items","snippet":"const WithCustomRenderedItems = () => {\n const [ selectedContinents, setSelectedContinents ] = useState<\n\t\tComponentProps< typeof FormTokenField >[ 'value' ]\n\t>( [] );\n\n return (\n <FormTokenField\n __next40pxDefaultSize\n displayTransform={( token ) => `📍 ${ token }`}\n __experimentalRenderItem={( { item } ) => (\n <div>{ `${ item } — a nice place to visit` }</div>\n )}\n __experimentalExpandOnFocus\n value={ selectedContinents }\n onChange={ ( tokens ) => setSelectedContinents( tokens ) } />\n );\n};","description":"The rendered content of each token can be customized by passing a render function to the `displayTransform` prop. Similarly, each suggestion can be customized by passing a render function to the `__experimentalRenderItem` prop. (This is still an experimental feature and is subject to change.)"},{"id":"components-formtokenfield--validate-new-tokens","name":"Validate New Tokens","snippet":"const ValidateNewTokens = () => {\n const [ selectedContinents, setSelectedContinents ] = useState<\n\t\tComponentProps< typeof FormTokenField >[ 'value' ]\n\t>( [] );\n\n return (\n <FormTokenField\n __next40pxDefaultSize\n __experimentalValidateInput={( input: string ) =>\n continents.includes( input )}\n __experimentalExpandOnFocus\n value={ selectedContinents }\n onChange={ ( tokens ) => setSelectedContinents( tokens ) } />\n );\n};","description":"Only values for which the `__experimentalValidateInput` function returns `true` will be tokenized. (This is still an experimental feature and is subject to change.) In this example, the user can only add tokens that are already in the list."}],"import":"import { FormTokenField } from \"@wordpress/components\";","jsDocTags":{},"description":"A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome, or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens. Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key. The `value` property is handled in a manner similar to controlled form components. See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.","reactDocgen":{"description":"A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\nor the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n\nUp to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\nTokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n\nThe `value` property is handled in a manner similar to controlled form components.\nSee [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.","methods":[],"displayName":"FormTokenField","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/form-token-field/index.tsx","actualName":"FormTokenField","exportName":"FormTokenField","props":{"label":{"required":false,"tsType":{"name":"string"},"description":""},"suggestions":{"required":false,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":"An array of strings to present to the user as suggested tokens."},"maxSuggestions":{"required":false,"tsType":{"name":"number"},"description":"The maximum number of suggestions to display at a time.\n\n@default 100"},"value":{"required":false,"tsType":{"name":"Array","elements":[{"name":"unknown"}],"raw":"( string | TokenItem )[]"},"description":"An array of strings or objects to display as tokens in the field.\nIf objects are present in the array, they **must** have a property of `value`."},"displayTransform":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( token: string ) => string","signature":{"arguments":[{"type":{"name":"string"},"name":"token"}],"return":{"name":"string"}}},"description":"Function to call to transform tokens for display.\n(In the editor, this is needed to decode HTML entities embedded in tags\n- otherwise entities like `&` in tag names are double-encoded like `&amp;`,\nonce by the REST API and once by React)."},"saveTransform":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( token: string ) => string","signature":{"arguments":[{"type":{"name":"string"},"name":"token"}],"return":{"name":"string"}}},"description":"Function to call to transform tokens for saving. The default is to trim the token value.\nThis function is also applied when matching suggestions against the current value\nso that matching works correctly with leading or trailing spaces. (In the editor,\nthis is needed to remove leading and trailing spaces from tag names, like wp-admin does.\nOtherwise the REST API won't save them.)\n\n@default ( token: string ) => token.trim()"},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( tokens: ( string | TokenItem )[] ) => void","signature":{"arguments":[{"type":{"name":"Array","elements":[{"name":"unknown"}],"raw":"( string | TokenItem )[]"},"name":"tokens"}],"return":{"name":"void"}}},"description":"Function to call when the tokens have changed. An array of new tokens is passed to the callback."},"onInputChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( input: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"input"}],"return":{"name":"void"}}},"description":"Function to call when the users types in the input field. It can be used to trigger autocomplete requests."},"onFocus":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( event: FocusEvent ) => void","signature":{"arguments":[{"type":{"name":"FocusEvent"},"name":"event"}],"return":{"name":"void"}}},"description":"Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics."},"isBorderless":{"required":false,"tsType":{"name":"boolean"},"description":"When true, renders tokens as without a background."},"maxLength":{"required":false,"tsType":{"name":"number"},"description":"If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`."},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"When true, tokens are not able to be added or removed."},"placeholder":{"required":false,"tsType":{"name":"string"},"description":"If passed, the `TokenField` input will show a placeholder string if no value tokens are present."},"tokenizeOnSpace":{"required":false,"tsType":{"name":"boolean"},"description":"If true, will add a token when `TokenField` is focused and `space` is pressed."},"messages":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The user added a new token.\n\t */\n\tadded: string;\n\t/**\n\t * The user removed an existing token.\n\t */\n\tremoved: string;\n\t/**\n\t * The user focused the button to remove the token.\n\t */\n\tremove: string;\n\t/**\n\t * The user tried to add a token that didn't pass the validation.\n\t */\n\t__experimentalInvalid: string;\n}","signature":{"properties":[{"key":"added","value":{"name":"string","required":true},"description":"The user added a new token."},{"key":"removed","value":{"name":"string","required":true},"description":"The user removed an existing token."},{"key":"remove","value":{"name":"string","required":true},"description":"The user focused the button to remove the token."},{"key":"__experimentalInvalid","value":{"name":"string","required":true},"description":"The user tried to add a token that didn't pass the validation."}]}},"description":"Allows customizing the messages presented by screen readers in different occasions:\n\n- `added`: The user added a new token.\n- `removed`: The user removed an existing token.\n- `remove` : The user focused the button to remove the token.\n- `__experimentalInvalid`: The user tried to add a token that didn't pass the validation."},"__experimentalExpandOnFocus":{"required":false,"tsType":{"name":"boolean"},"description":"If true, the suggestions list will be always expanded when the input field has the focus."},"__experimentalValidateInput":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( token: string ) => boolean","signature":{"arguments":[{"type":{"name":"string"},"name":"token"}],"return":{"name":"boolean"}}},"description":"If passed, all introduced values will be validated before being added as tokens.\n\n@default () => true"},"__experimentalShowHowTo":{"required":false,"tsType":{"name":"boolean"},"description":"If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.\n\n@default true"},"__next36pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Deprecated. Use `__next40pxDefaultSize` instead.\n\n@default false\n@deprecated\n@ignore"},"__next40pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the larger default height that will become the\ndefault size in a future version.\n\n@default false"},"__experimentalAutoSelectFirstMatch":{"required":false,"tsType":{"name":"boolean"},"description":"If true, the select the first matching suggestion when the user presses\nthe Enter key (or space when tokenizeOnSpace is true).\n\n@default false"},"__experimentalRenderItem":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( args: { item: string } ) => ReactNode","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: string }","signature":{"properties":[{"key":"item","value":{"name":"string","required":true}}]}},"name":"args"}],"return":{"name":"ReactNode"}}},"description":"Custom renderer for suggestions."},"__nextHasNoMarginBottom":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the new margin-free styles that will become the default in a future version.\n\n@deprecated Default behavior since WP 7.0. Prop can be safely removed.\n@ignore\n\n@default false"},"tokenizeOnBlur":{"required":false,"tsType":{"name":"boolean"},"description":"If true, add any incompleteTokenValue as a new token when the field loses focus.\n\n@default false"}},"composes":["Pick"]}},"components-gradientpicker":{"id":"components-gradientpicker","name":"GradientPicker","path":"../packages/components/src/gradient-picker/stories/index.story.tsx","stories":[{"id":"components-gradientpicker--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof GradientPicker > ) => {\n\tconst [ gradient, setGradient ] =\n\t\tuseState< ( typeof props )[ 'value' ] >( null );\n\treturn (\n\t\t<GradientPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ gradient }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetGradient( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-gradientpicker--with-no-existing-gradients","name":"With No Existing Gradients","snippet":"const WithNoExistingGradients = ( {\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof GradientPicker > ) => {\n\tconst [ gradient, setGradient ] =\n\t\tuseState< ( typeof props )[ 'value' ] >( null );\n\treturn (\n\t\t<GradientPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ gradient }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetGradient( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-gradientpicker--multiple-origins","name":"Multiple Origins","snippet":"const MultipleOrigins = ( {\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof GradientPicker > ) => {\n\tconst [ gradient, setGradient ] =\n\t\tuseState< ( typeof props )[ 'value' ] >( null );\n\treturn (\n\t\t<GradientPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ gradient }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetGradient( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-gradientpicker--css-variables","name":"CSS Variables","snippet":"const CSSVariables = () => <div\n style={ {\n '--red': '#f00',\n '--yellow': '#ff0',\n '--blue': '#00f',\n } }>\n <Template\n onChange={fn()}\n gradients={[\n\t\t\t{\n\t\t\t\tname: 'Red to Yellow',\n\t\t\t\tgradient:\n\t\t\t\t\t'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',\n\t\t\t\tslug: 'red-to-yellow',\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Yellow to Blue',\n\t\t\t\tgradient:\n\t\t\t\t\t'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',\n\t\t\t\tslug: 'yellow-to-blue',\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Blue to Red',\n\t\t\t\tgradient:\n\t\t\t\t\t'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',\n\t\t\t\tslug: 'blue-to-red',\n\t\t\t},\n\t\t]} />\n</div>;"}],"import":"import { GradientPicker } from \"@wordpress/components\";","jsDocTags":{},"description":"GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There's either a _linear_ or a _radial_ type available. ```jsx import { useState } from 'react'; import { GradientPicker } from '@wordpress/components'; const MyGradientPicker = () => { const [ gradient, setGradient ] = useState( null ); return ( <GradientPicker value={ gradient } onChange={ ( currentGradient ) => setGradient( currentGradient ) } gradients={ [ { name: 'JShine', gradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)', slug: 'jshine', }, { name: 'Moonlit Asteroid', gradient: 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)', slug: 'moonlit-asteroid', }, { name: 'Rastafarie', gradient: 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)', slug: 'rastafari', }, ] } /> ); }; ```","reactDocgen":{"description":"GradientPicker is a React component that renders a color gradient picker to\ndefine a multi step gradient. There's either a _linear_ or a _radial_ type\navailable.\n\n```jsx\nimport { useState } from 'react';\nimport { GradientPicker } from '@wordpress/components';\n\nconst MyGradientPicker = () => {\n const [ gradient, setGradient ] = useState( null );\n\n return (\n <GradientPicker\n value={ gradient }\n onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n gradients={ [\n {\n name: 'JShine',\n gradient:\n 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n slug: 'jshine',\n },\n {\n name: 'Moonlit Asteroid',\n gradient:\n 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n slug: 'moonlit-asteroid',\n },\n {\n name: 'Rastafarie',\n gradient:\n 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n slug: 'rastafari',\n },\n ] }\n />\n );\n};\n```","methods":[],"displayName":"GradientPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/gradient-picker/index.tsx","actualName":"GradientPicker","exportName":"GradientPicker","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"The class name added to the wrapper."},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( currentGradient: string | undefined ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"name":"currentGradient"}],"return":{"name":"void"}}},"description":"The function called when a new gradient has been defined. It is passed to\nthe `currentGradient` as an argument."},"value":{"required":false,"tsType":{"name":"union","raw":"GradientObject[ 'gradient' ] | null","elements":[{"name":"string","raw":"GradientObject[ 'gradient' ]"},{"name":"null"}]},"description":"The current value of the gradient. Pass a css gradient string (See default value for example).\nOptionally pass in a `null` value to specify no gradient is currently selected.\n\n@default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'"},"clearable":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the palette should have a clearing button or not.\n\n@default true","defaultValue":{"value":"true","computed":false}},"headingLevel":{"required":false,"tsType":{"name":"union","raw":"| 1\n| 2\n| 3\n| 4\n| 5\n| 6\n| '1'\n| '2'\n| '3'\n| '4'\n| '5'\n| '6'","elements":[{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"},{"name":"literal","value":"'1'"},{"name":"literal","value":"'2'"},{"name":"literal","value":"'3'"},{"name":"literal","value":"'4'"},{"name":"literal","value":"'5'"},{"name":"literal","value":"'6'"}]},"description":"The heading level. Only applies in cases where gradients are provided\nfrom multiple origins (i.e. when the array passed as the `gradients` prop\ncontains two or more items).\n\n@default 2","defaultValue":{"value":"2","computed":false}},"asButtons":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control should present as a set of buttons,\neach with its own tab stop.\n\n@default false"},"loop":{"required":false,"tsType":{"name":"boolean"},"description":"Prevents keyboard interaction from wrapping around.\nOnly used when `asButtons` is not true.\n\n@default true"},"enableAlpha":{"required":false,"tsType":{"name":"boolean"},"description":"Whether to enable alpha transparency options in the picker.\n\n@default true","defaultValue":{"value":"true","computed":false}},"gradients":{"required":false,"tsType":{"name":"union","raw":"GradientObject[] | OriginObject[]","elements":[{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\tgradient: string;\n\tname: string;\n\tslug: string;\n}","signature":{"properties":[{"key":"gradient","value":{"name":"string","required":true}},{"key":"name","value":{"name":"string","required":true}},{"key":"slug","value":{"name":"string","required":true}}]}}],"raw":"GradientObject[]"},{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{ name: string; gradients: GradientObject[] }","signature":{"properties":[{"key":"name","value":{"name":"string","required":true}},{"key":"gradients","value":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\tgradient: string;\n\tname: string;\n\tslug: string;\n}","signature":{"properties":[{"key":"gradient","value":{"name":"string","required":true}},{"key":"name","value":{"name":"string","required":true}},{"key":"slug","value":{"name":"string","required":true}}]}}],"raw":"GradientObject[]","required":true}}]}}],"raw":"OriginObject[]"}]},"description":"An array of objects as predefined gradients displayed above the gradient\nselector. Alternatively, if there are multiple sets (or 'origins') of\ngradients, you can pass an array of objects each with a `name` and a\n`gradients` array which will in turn contain the predefined gradient objects.\n\n@default []","defaultValue":{"value":"[]","computed":false}},"__nextHasNoMargin":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting in to the new margin-free styles that will become the default\nin a future version, currently scheduled to be WordPress 6.4. (The prop\ncan be safely removed once this happens.)\n\n@default false\n@deprecated Default behavior since WP 6.5. Prop can be safely removed.\n@ignore"},"disableCustomGradients":{"required":false,"tsType":{"name":"boolean"},"description":"If true, the gradient picker will not be displayed and only defined\ngradients from `gradients` will be shown.\n\n@default false","defaultValue":{"value":"false","computed":false}},"__experimentalIsRenderedInSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Whether this is rendered in the sidebar.\n\n@default false"}}}},"components-inputcontrol":{"id":"components-inputcontrol","name":"InputControl","path":"../packages/components/src/input-control/stories/index.story.tsx","stories":[{"id":"components-inputcontrol--default","name":"Default","snippet":"const Default = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n label=\"Value\"\n placeholder=\"Placeholder\" />;"},{"id":"components-inputcontrol--with-help-text","name":"With Help Text","snippet":"const WithHelpText = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n help=\"Help text to describe the control.\" />;"},{"id":"components-inputcontrol--with-prefix","name":"With Prefix","snippet":"const WithPrefix = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>} />;","description":"A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border, with no padding. If you want to apply standard padding in accordance with the size variant, use the provided `<InputControlPrefixWrapper>` convenience wrapper."},{"id":"components-inputcontrol--with-suffix","name":"With Suffix","snippet":"const WithSuffix = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>} />;","description":"A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border, with no padding. If you want to apply standard padding in accordance with the size variant, use the provided `<InputControlSuffixWrapper>` convenience wrapper."},{"id":"components-inputcontrol--with-icon-or-control","name":"With Icon Or Control","snippet":"const WithIconOrControl = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n prefix={(<InputControlPrefixWrapper variant=\"icon\">\n <Icon icon={ link } />\n </InputControlPrefixWrapper>)}\n suffix={(<InputControlSuffixWrapper variant=\"control\">\n <Button icon={ closeSmall } size=\"small\" label=\"Clear\" />\n </InputControlSuffixWrapper>)} />;","description":"`<InputControlPrefixWrapper>` and `<InputControlSuffixWrapper>` have a `variant` prop that can be used to adjust the wrapper based on the prefix or suffix content. - `'default'`: Standard padding for text content. - `'icon'`: For icons. - `'control'`: For controls, like buttons or selects."},{"id":"components-inputcontrol--with-side-label","name":"With Side Label","snippet":"const WithSideLabel = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n labelPosition=\"side\" />;"},{"id":"components-inputcontrol--with-edge-label","name":"With Edge Label","snippet":"const WithEdgeLabel = () => <InputControl\n __next40pxDefaultSize\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n __unstableInputWidth=\"20em\"\n labelPosition=\"edge\" />;"},{"id":"components-inputcontrol--show-password","name":"Show Password","snippet":"const ShowPassword = () => {\n const [ visible, setVisible ] = useState( false );\n\n return (\n <InputControl\n __next40pxDefaultSize\n type={ visible ? 'text' : 'password' }\n suffix={\n\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ visible ? unseen : seen }\n\t\t\t\t\t\tonClick={ () => setVisible( ( value ) => ! value ) }\n\t\t\t\t\t\tlabel={ visible ? 'Hide password' : 'Show password' }\n\t\t\t\t\t/>\n\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t}\n onChange={fn()}\n onValidate={fn()}\n onKeyDown={fn()}\n label=\"Password\"\n placeholder={undefined} />\n );\n};"}],"import":"import { Button, InputControl, InputControlPrefixWrapper, InputControlSuffixWrapper } from \"@wordpress/components\";\nimport { Icon } from \"@wordpress/icons\";","jsDocTags":{},"description":"InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace `TextControl`. ```jsx import { __experimentalInputControl as InputControl } from '@wordpress/components'; import { useState } from 'react'; const Example = () => { const [ value, setValue ] = useState( '' ); return ( <InputControl __next40pxDefaultSize value={ value } onChange={ ( nextValue ) => setValue( nextValue ?? '' ) } /> ); }; ```","reactDocgen":{"description":"InputControl components let users enter and edit text. This is an experimental component\nintended to (in time) merge with or replace `TextControl`.\n\n```jsx\nimport { __experimentalInputControl as InputControl } from '@wordpress/components';\nimport { useState } from 'react';\n\nconst Example = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n \t<InputControl\n\t\t\t__next40pxDefaultSize\n \t\tvalue={ value }\n \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n \t/>\n );\n};\n```","methods":[],"displayName":"InputControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/input-control/index.tsx","actualName":"InputControl","exportName":"InputControl","props":{"__unstableStateReducer":{"required":false,"tsType":{"name":"InputFieldProps['stateReducer']","raw":"InputFieldProps[ 'stateReducer' ]"},"description":""}},"composes":["Omit","Pick"]}},"components-numbercontrol":{"id":"components-numbercontrol","name":"NumberControl","path":"../packages/components/src/number-control/stories/index.story.tsx","stories":[{"id":"components-numbercontrol--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] = useState< string | undefined >( '0' );\n\tconst [ isValidValue, setIsValidValue ] = useState( true );\n\n\treturn (\n\t\t<>\n\t\t\t<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ ( v, extra ) => {\n\t\t\t\t\tsetValue( v );\n\t\t\t\t\tsetIsValidValue(\n\t\t\t\t\t\t( extra.event.target as HTMLInputElement ).validity\n\t\t\t\t\t\t\t.valid\n\t\t\t\t\t);\n\t\t\t\t\tonChange?.( v, extra );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>\n\t\t</>\n\t);\n};"}],"import":"import { NumberControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"NumberControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/number-control/index.tsx","actualName":"NumberControl","exportName":"NumberControl"}},"components-radiocontrol":{"id":"components-radiocontrol","name":"RadioControl","path":"../packages/components/src/radio-control/stories/index.story.tsx","stories":[{"id":"components-radiocontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( options?.[ 0 ]?.value );\n\n return (\n <RadioControl\n label=\"Post visibility\"\n selected={ value }\n options={ options }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"},{"id":"components-radiocontrol--with-option-descriptions","name":"With Option Descriptions","snippet":"const WithOptionDescriptions = () => {\n const [ value, setValue ] = useState( options?.[ 0 ]?.value );\n\n return (\n <RadioControl\n selected={ value }\n options={ options }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"}],"import":"import { RadioControl } from \"@wordpress/components\";","jsDocTags":{},"description":"Render a user interface to select the user type using radio inputs. ```jsx import { RadioControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyRadioControl = () => { const [ option, setOption ] = useState( 'a' ); return ( <RadioControl label=\"User type\" help=\"The type of the current user\" selected={ option } options={ [ { label: 'Author', value: 'a' }, { label: 'Editor', value: 'e' }, ] } onChange={ ( value ) => setOption( value ) } /> ); }; ```","reactDocgen":{"description":"Render a user interface to select the user type using radio inputs.\n\n```jsx\nimport { RadioControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyRadioControl = () => {\n const [ option, setOption ] = useState( 'a' );\n\n return (\n <RadioControl\n label=\"User type\"\n help=\"The type of the current user\"\n selected={ option }\n options={ [\n { label: 'Author', value: 'a' },\n { label: 'Editor', value: 'e' },\n ] }\n onChange={ ( value ) => setOption( value ) }\n />\n );\n};\n```","methods":[],"displayName":"RadioControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/radio-control/index.tsx","actualName":"RadioControl","exportName":"RadioControl"}},"components-rangecontrol":{"id":"components-rangecontrol","name":"RangeControl","path":"../packages/components/src/range-control/stories/index.story.tsx","stories":[{"id":"components-rangecontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< number >();\n\n return (\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n help=\"Please select how transparent you would like this.\"\n initialPosition={50}\n label=\"Opacity\"\n max={100}\n min={0}\n value={ value }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v );\n\t\t\t} } />\n );\n};"},{"id":"components-rangecontrol--with-any-step","name":"With Any Step","snippet":"const WithAnyStep = () => {\n const [ value, setValue ] = useState< number >();\n\n return (\n <>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n label=\"Brightness\"\n step=\"any\"\n value={ value }\n onChange={ ( v ) => {\n\t\t\t\t\tsetValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} } />\n <hr style={ { marginTop: '5em' } } />\n <p>Current value: { value }</p>\n </>\n );\n};","description":"Setting the `step` prop to `\"any\"` will allow users to select non-integer values. This also overrides both `withInputField` and `showTooltip` props to `false`."},{"id":"components-rangecontrol--with-integer-step-and-marks","name":"With Integer Step And Marks","snippet":"const WithIntegerStepAndMarks = () => {\n const [ automaticValue, setAutomaticValue ] = useState< number >();\n const [ customValue, setCustomValue ] = useState< number >();\n\n return (\n <>\n <h2>{ label }</h2>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n max={10}\n min={0}\n step={1}\n label=\"Automatic marks\"\n marks\n onChange={ ( v ) => {\n\t\t\t\t\tsetAutomaticValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ automaticValue } />\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n marks={marksBase}\n max={10}\n min={0}\n step={1}\n label=\"Custom marks\"\n onChange={ ( v ) => {\n\t\t\t\t\tsetCustomValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ customValue } />\n </>\n );\n};","description":"Use `marks` to render a visual representation of `step` ticks. Marks may be automatically generated or custom mark indicators can be provided by an `Array`."},{"id":"components-rangecontrol--with-decimal-step-and-marks","name":"With Decimal Step And Marks","snippet":"const WithDecimalStepAndMarks = () => {\n const [ automaticValue, setAutomaticValue ] = useState< number >();\n const [ customValue, setCustomValue ] = useState< number >();\n\n return (\n <>\n <h2>{ label }</h2>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n max={10}\n min={0}\n step={0.1}\n label=\"Automatic marks\"\n marks\n onChange={ ( v ) => {\n\t\t\t\t\tsetAutomaticValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ automaticValue } />\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n marks={[\n ...marksBase,\n { value: 3.5, label: '3.5' },\n { value: 5.8, label: '5.8' },\n ]}\n max={10}\n min={0}\n step={0.1}\n label=\"Custom marks\"\n onChange={ ( v ) => {\n\t\t\t\t\tsetCustomValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ customValue } />\n </>\n );\n};","description":"Decimal values may be used for `marks` rendered as a visual representation of `step` ticks. Marks may be automatically generated or custom mark indicators can be provided by an `Array`."},{"id":"components-rangecontrol--with-negative-minimum-and-marks","name":"With Negative Minimum And Marks","snippet":"const WithNegativeMinimumAndMarks = () => {\n const [ automaticValue, setAutomaticValue ] = useState< number >();\n const [ customValue, setCustomValue ] = useState< number >();\n\n return (\n <>\n <h2>{ label }</h2>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n max={10}\n min={-10}\n step={1}\n label=\"Automatic marks\"\n marks\n onChange={ ( v ) => {\n\t\t\t\t\tsetAutomaticValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ automaticValue } />\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n marks={marksWithNegatives}\n max={10}\n min={-10}\n step={1}\n label=\"Custom marks\"\n onChange={ ( v ) => {\n\t\t\t\t\tsetCustomValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ customValue } />\n </>\n );\n};","description":"A negative `min` value can be used to constrain `RangeControl` values. Mark indicators can represent negative values as well. Marks may be automatically generated or custom mark indicators can be provided by an `Array`."},{"id":"components-rangecontrol--with-negative-range-and-marks","name":"With Negative Range And Marks","snippet":"const WithNegativeRangeAndMarks = () => {\n const [ automaticValue, setAutomaticValue ] = useState< number >();\n const [ customValue, setCustomValue ] = useState< number >();\n\n return (\n <>\n <h2>{ label }</h2>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n max={-1}\n min={-10}\n step={1}\n label=\"Automatic marks\"\n marks\n onChange={ ( v ) => {\n\t\t\t\t\tsetAutomaticValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ automaticValue } />\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n marks={marksWithNegatives}\n max={-1}\n min={-10}\n step={1}\n label=\"Custom marks\"\n onChange={ ( v ) => {\n\t\t\t\t\tsetCustomValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ customValue } />\n </>\n );\n};","description":"The entire range of valid values for a `RangeControl` may be negative. Mark indicators can represent negative values as well. Marks may be automatically generated or custom mark indicators can be provided by an `Array`."},{"id":"components-rangecontrol--with-any-step-and-marks","name":"With Any Step And Marks","snippet":"const WithAnyStepAndMarks = () => {\n const [ automaticValue, setAutomaticValue ] = useState< number >();\n const [ customValue, setCustomValue ] = useState< number >();\n\n return (\n <>\n <h2>{ label }</h2>\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n max={10}\n min={0}\n step=\"any\"\n label=\"Automatic marks\"\n marks\n onChange={ ( v ) => {\n\t\t\t\t\tsetAutomaticValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ automaticValue } />\n <RangeControl\n __next40pxDefaultSize\n onBlur={fn()}\n onFocus={fn()}\n onMouseLeave={fn()}\n onMouseMove={fn()}\n marks={marksBase}\n max={10}\n min={0}\n step=\"any\"\n label=\"Custom marks\"\n onChange={ ( v ) => {\n\t\t\t\t\tsetCustomValue( v );\n\t\t\t\t\tonChange?.( v );\n\t\t\t\t} }\n value={ customValue } />\n </>\n );\n};","description":"When a `RangeControl` has a `step` value of `any` a user may select non-integer values. This may still be used in conjunction with `marks` rendering a visual representation of `step` ticks."}],"import":"import { RangeControl } from \"@wordpress/components\";","jsDocTags":{},"description":"RangeControls are used to make selections from a range of incremental values. ```jsx import { RangeControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyRangeControl = () => { const [ value, setValue ] = useState(); return ( <RangeControl __next40pxDefaultSize help=\"Please select how transparent you would like this.\" initialPosition={ 50 } label=\"Opacity\" max={ 100 } min={ 0 } value={ value } onChange={ setValue } /> ); }; ```","reactDocgen":{"description":"RangeControls are used to make selections from a range of incremental values.\n\n```jsx\nimport { RangeControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyRangeControl = () => {\n const [ value, setValue ] = useState();\n return (\n <RangeControl\n __next40pxDefaultSize\n help=\"Please select how transparent you would like this.\"\n initialPosition={ 50 }\n label=\"Opacity\"\n max={ 100 }\n min={ 0 }\n value={ value }\n onChange={ setValue }\n />\n );\n};\n```","methods":[],"displayName":"RangeControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/range-control/index.tsx","actualName":"RangeControl","exportName":"RangeControl"}},"components-searchcontrol":{"id":"components-searchcontrol","name":"SearchControl","path":"../packages/components/src/search-control/stories/index.story.tsx","stories":[{"id":"components-searchcontrol--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] = useState< string >();\n\n\treturn (\n\t\t<SearchControl\n\t\t\t{ ...props }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { SearchControl } from \"@wordpress/components\";","jsDocTags":{},"description":"SearchControl components let users display a search control. ```jsx import { SearchControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; function MySearchControl( { className, setState } ) { const [ searchInput, setSearchInput ] = useState( '' ); return ( <SearchControl value={ searchInput } onChange={ setSearchInput } /> ); } ```","reactDocgen":{"description":"SearchControl components let users display a search control.\n\n```jsx\nimport { SearchControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nfunction MySearchControl( { className, setState } ) {\n const [ searchInput, setSearchInput ] = useState( '' );\n\n return (\n <SearchControl\n value={ searchInput }\n onChange={ setSearchInput }\n />\n );\n}\n```","methods":[],"displayName":"SearchControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/search-control/index.tsx","actualName":"SearchControl","exportName":"SearchControl","props":{"label":{"defaultValue":{"value":"__( 'Search' )","computed":true},"required":false},"placeholder":{"defaultValue":{"value":"__( 'Search' )","computed":true},"required":false},"hideLabelFromVision":{"defaultValue":{"value":"true","computed":false},"required":false},"size":{"defaultValue":{"value":"'default'","computed":false},"required":false}}}},"components-selectcontrol":{"id":"components-selectcontrol","name":"SelectControl","path":"../packages/components/src/select-control/stories/index.story.tsx","stories":[{"id":"components-selectcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ selection, setSelection ] = useState< string[] >();\n\n\tif ( props.multiple ) {\n\t\treturn (\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tmultiple\n\t\t\t\tvalue={ selection }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetSelection( value );\n\t\t\t\t\tprops.onChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tmultiple={ false }\n\t\t\tvalue={ selection?.[ 0 ] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tsetSelection( [ value ] );\n\t\t\t\tprops.onChange?.( value );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-selectcontrol--with-label-and-help-text","name":"With Label And Help Text","snippet":"const WithLabelAndHelpText = ( props ) => {\n\tconst [ selection, setSelection ] = useState< string[] >();\n\n\tif ( props.multiple ) {\n\t\treturn (\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tmultiple\n\t\t\t\tvalue={ selection }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetSelection( value );\n\t\t\t\t\tprops.onChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tmultiple={ false }\n\t\t\tvalue={ selection?.[ 0 ] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tsetSelection( [ value ] );\n\t\t\t\tprops.onChange?.( value );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-selectcontrol--with-custom-children","name":"With Custom Children","snippet":"const WithCustomChildren = ( props ) => {\n\tconst [ selection, setSelection ] = useState< string[] >();\n\n\tif ( props.multiple ) {\n\t\treturn (\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tmultiple\n\t\t\t\tvalue={ selection }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetSelection( value );\n\t\t\t\t\tprops.onChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tmultiple={ false }\n\t\t\tvalue={ selection?.[ 0 ] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tsetSelection( [ value ] );\n\t\t\t\tprops.onChange?.( value );\n\t\t\t} }\n\t\t/>\n\t);\n};","description":"As an alternative to the `options` prop, `optgroup`s and `options` can be passed in as `children` for more customizeability."},{"id":"components-selectcontrol--with-prefix","name":"With Prefix","snippet":"const WithPrefix = ( props ) => {\n\tconst [ selection, setSelection ] = useState< string[] >();\n\n\tif ( props.multiple ) {\n\t\treturn (\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tmultiple\n\t\t\t\tvalue={ selection }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetSelection( value );\n\t\t\t\t\tprops.onChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tmultiple={ false }\n\t\t\tvalue={ selection?.[ 0 ] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tsetSelection( [ value ] );\n\t\t\t\tprops.onChange?.( value );\n\t\t\t} }\n\t\t/>\n\t);\n};","description":"By default, the prefix is aligned with the edge of the input border, with no padding. If you want to apply standard padding in accordance with the size variant, wrap the element in the `<InputControlPrefixWrapper>` component."},{"id":"components-selectcontrol--minimal","name":"Minimal","snippet":"const Minimal = ( props ) => {\n\tconst [ selection, setSelection ] = useState< string[] >();\n\n\tif ( props.multiple ) {\n\t\treturn (\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...props }\n\t\t\t\tmultiple\n\t\t\t\tvalue={ selection }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetSelection( value );\n\t\t\t\t\tprops.onChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tmultiple={ false }\n\t\t\tvalue={ selection?.[ 0 ] }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tsetSelection( [ value ] );\n\t\t\t\tprops.onChange?.( value );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { InputControlPrefixWrapper, SelectControl } from \"@wordpress/components\";","jsDocTags":{},"description":"`SelectControl` allows users to select from a single or multiple option menu. It functions as a wrapper around the browser's native `<select>` element. ```jsx import { SelectControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MySelectControl = () => { const [ size, setSize ] = useState( '50%' ); return ( <SelectControl __next40pxDefaultSize label=\"Size\" value={ size } options={ [ { label: 'Big', value: '100%' }, { label: 'Medium', value: '50%' }, { label: 'Small', value: '25%' }, ] } onChange={ setSize } /> ); }; ```","reactDocgen":{"description":"`SelectControl` allows users to select from a single or multiple option menu.\nIt functions as a wrapper around the browser's native `<select>` element.\n\n```jsx\nimport { SelectControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MySelectControl = () => {\n const [ size, setSize ] = useState( '50%' );\n\n return (\n <SelectControl\n __next40pxDefaultSize\n label=\"Size\"\n value={ size }\n options={ [\n { label: 'Big', value: '100%' },\n { label: 'Medium', value: '50%' },\n { label: 'Small', value: '25%' },\n ] }\n onChange={ setSize }\n />\n );\n};\n```","methods":[],"displayName":"SelectControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/select-control/index.tsx","actualName":"SelectControl","exportName":"SelectControl"}},"components-textcontrol":{"id":"components-textcontrol","name":"TextControl","path":"../packages/components/src/text-control/stories/index.story.tsx","stories":[{"id":"components-textcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n <TextControl\n __next40pxDefaultSize\n placeholder=\"Placeholder\"\n value={ value }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"},{"id":"components-textcontrol--with-label-and-help-text","name":"With Label And Help Text","snippet":"const WithLabelAndHelpText = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n <TextControl\n __next40pxDefaultSize\n label=\"Label Text\"\n help=\"Help text to explain the input.\"\n value={ value }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"}],"import":"import { TextControl } from \"@wordpress/components\";","jsDocTags":{},"description":"TextControl components let users enter and edit text. ```jsx import { TextControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyTextControl = () => { const [ className, setClassName ] = useState( '' ); return ( <TextControl __next40pxDefaultSize label=\"Additional CSS Class\" value={ className } onChange={ ( value ) => setClassName( value ) } /> ); }; ```","reactDocgen":{"description":"TextControl components let users enter and edit text.\n\n```jsx\nimport { TextControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyTextControl = () => {\n const [ className, setClassName ] = useState( '' );\n\n return (\n <TextControl\n __next40pxDefaultSize\n label=\"Additional CSS Class\"\n value={ className }\n onChange={ ( value ) => setClassName( value ) }\n />\n );\n};\n```","methods":[],"displayName":"TextControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/text-control/index.tsx","actualName":"TextControl","exportName":"TextControl"}},"components-textareacontrol":{"id":"components-textareacontrol","name":"TextareaControl","path":"../packages/components/src/textarea-control/stories/index.story.tsx","stories":[{"id":"components-textareacontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n <TextareaControl\n label=\"Text\"\n help=\"Enter some text\"\n placeholder=\"Placeholder\"\n value={ value }\n onChange={ ( v ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange( v );\n\t\t\t} } />\n );\n};"}],"import":"import { TextareaControl } from \"@wordpress/components\";","jsDocTags":{},"description":"TextareaControls are TextControls that allow for multiple lines of text, and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. ```jsx import { TextareaControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyTextareaControl = () => { const [ text, setText ] = useState( '' ); return ( <TextareaControl label=\"Text\" help=\"Enter some text\" value={ text } onChange={ ( value ) => setText( value ) } /> ); }; ```","reactDocgen":{"description":"TextareaControls are TextControls that allow for multiple lines of text, and\nwrap overflow text onto a new line. They are a fixed height and scroll\nvertically when the cursor reaches the bottom of the field.\n\n```jsx\nimport { TextareaControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyTextareaControl = () => {\n const [ text, setText ] = useState( '' );\n\n return (\n <TextareaControl\n label=\"Text\"\n help=\"Enter some text\"\n value={ text }\n onChange={ ( value ) => setText( value ) }\n />\n );\n};\n```","methods":[],"displayName":"TextareaControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/textarea-control/index.tsx","actualName":"TextareaControl","exportName":"TextareaControl"}},"components-togglecontrol":{"id":"components-togglecontrol","name":"ToggleControl","path":"../packages/components/src/toggle-control/stories/index.story.tsx","stories":[{"id":"components-togglecontrol--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ checked, setChecked ] = useState( true );\n\treturn (\n\t\t<ToggleControl\n\t\t\t{ ...props }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetChecked( ...changeArgs );\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-togglecontrol--with-help-text","name":"With Help Text","snippet":"const WithHelpText = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ checked, setChecked ] = useState( true );\n\treturn (\n\t\t<ToggleControl\n\t\t\t{ ...props }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetChecked( ...changeArgs );\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { ToggleControl } from \"@wordpress/components\";","jsDocTags":{},"description":"ToggleControl is used to generate a toggle user interface. ```jsx import { ToggleControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyToggleControl = () => { const [ value, setValue ] = useState( false ); return ( <ToggleControl label=\"Fixed Background\" checked={ value } onChange={ () => setValue( ( state ) => ! state ) } /> ); }; ```","reactDocgen":{"description":"ToggleControl is used to generate a toggle user interface.\n\n```jsx\nimport { ToggleControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyToggleControl = () => {\n const [ value, setValue ] = useState( false );\n\n return (\n <ToggleControl\n label=\"Fixed Background\"\n checked={ value }\n onChange={ () => setValue( ( state ) => ! state ) }\n />\n );\n};\n```","methods":[],"displayName":"ToggleControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/toggle-control/index.tsx","actualName":"ToggleControl","exportName":"ToggleControl"}},"components-togglegroupcontrol":{"id":"components-togglegroupcontrol","name":"ToggleGroupControl","path":"../packages/components/src/toggle-group-control/stories/index.story.tsx","stories":[{"id":"components-togglegroupcontrol--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] =\n\t\tuseState< ToggleGroupControlProps[ 'value' ] >();\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"},{"id":"components-togglegroupcontrol--with-tooltip","name":"With Tooltip","snippet":"const WithTooltip = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] =\n\t\tuseState< ToggleGroupControlProps[ 'value' ] >();\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};","description":"A tooltip can be shown for each option by enabling the `showTooltip` prop. The `aria-label` will be used in the tooltip if provided. Otherwise, the `label` will be used."},{"id":"components-togglegroupcontrol--with-icons","name":"With Icons","snippet":"const WithIcons = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] =\n\t\tuseState< ToggleGroupControlProps[ 'value' ] >();\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};","description":"The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required on each option for accessibility, which will be shown in a tooltip."},{"id":"components-togglegroupcontrol--deselectable","name":"Deselectable","snippet":"const Deselectable = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] =\n\t\tuseState< ToggleGroupControlProps[ 'value' ] >();\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};","description":"When the `isDeselectable` prop is true, the option can be deselected by clicking on it again."}],"import":"import { ToggleGroupControl, ToggleGroupControlOption, ToggleGroupControlOptionIcon } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedToggleGroupControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/toggle-group-control/toggle-group-control/component.tsx","actualName":"UnconnectedToggleGroupControl"}},"components-treeselect":{"id":"components-treeselect","name":"TreeSelect","path":"../packages/components/src/tree-select/stories/index.story.tsx","stories":[{"id":"components-treeselect--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst [ selection, setSelection ] =\n\t\tuseState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tonChange={ setSelection }\n\t\t\tselectedId={ selection }\n\t\t/>\n\t);\n};"}],"import":"import { TreeSelect } from \"@wordpress/components\";","jsDocTags":{},"description":"Generates a hierarchical select input. ```jsx import { useState } from 'react'; import { TreeSelect } from '@wordpress/components'; const MyTreeSelect = () => { const [ page, setPage ] = useState( 'p21' ); return ( <TreeSelect __next40pxDefaultSize label=\"Parent page\" noOptionLabel=\"No parent page\" onChange={ ( newPage ) => setPage( newPage ) } selectedId={ page } tree={ [ { name: 'Page 1', id: 'p1', children: [ { name: 'Descend 1 of page 1', id: 'p11' }, { name: 'Descend 2 of page 1', id: 'p12' }, ], }, { name: 'Page 2', id: 'p2', children: [ { name: 'Descend 1 of page 2', id: 'p21', children: [ { name: 'Descend 1 of Descend 1 of page 2', id: 'p211', }, ], }, ], }, ] } /> ); } ```","reactDocgen":{"description":"Generates a hierarchical select input.\n\n```jsx\nimport { useState } from 'react';\nimport { TreeSelect } from '@wordpress/components';\n\nconst MyTreeSelect = () => {\n\tconst [ page, setPage ] = useState( 'p21' );\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel=\"Parent page\"\n\t\t\tnoOptionLabel=\"No parent page\"\n\t\t\tonChange={ ( newPage ) => setPage( newPage ) }\n\t\t\tselectedId={ page }\n\t\t\ttree={ [\n\t\t\t\t{\n\t\t\t\t\tname: 'Page 1',\n\t\t\t\t\tid: 'p1',\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{ name: 'Descend 1 of page 1', id: 'p11' },\n\t\t\t\t\t\t{ name: 'Descend 2 of page 1', id: 'p12' },\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'Page 2',\n\t\t\t\t\tid: 'p2',\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: 'Descend 1 of page 2',\n\t\t\t\t\t\t\tid: 'p21',\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'Descend 1 of Descend 1 of page 2',\n\t\t\t\t\t\t\t\t\tid: 'p211',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t] }\n\t\t/>\n\t);\n}\n```","methods":[],"displayName":"TreeSelect","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tree-select/index.tsx","actualName":"TreeSelect","exportName":"TreeSelect","props":{"noOptionLabel":{"required":false,"tsType":{"name":"string"},"description":"If this property is added, an option will be added with this label to represent empty selection."},"onChange":{"required":false,"tsType":{"name":"intersection['onChange']","raw":"SelectControlSingleSelectionProps[ 'onChange' ]"},"description":"A function that receives the value of the new option that is being selected as input."},"tree":{"required":false,"tsType":{"name":"Array","elements":[{"name":"Tree"}],"raw":"Tree[]"},"description":"An array containing the tree objects with the possible nodes the user can select."},"selectedId":{"required":false,"tsType":{"name":"intersection['value']","raw":"SelectControlSingleSelectionProps[ 'value' ]"},"description":"The id of the currently selected node."}},"composes":["Omit"]}},"components-unitcontrol":{"id":"components-unitcontrol","name":"UnitControl","path":"../packages/components/src/unit-control/stories/index.story.tsx","stories":[{"id":"components-unitcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< string | undefined >( '10px' );\n\n return (\n <UnitControl\n __next40pxDefaultSize\n onUnitChange={fn()}\n onFocus={fn()}\n onBlur={fn()}\n label=\"Label\"\n value={ value }\n onChange={ ( v, extra ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v, extra );\n\t\t\t} } />\n );\n};"},{"id":"components-unitcontrol--press-enter-to-change","name":"Press Enter To Change","snippet":"const PressEnterToChange = () => {\n const [ value, setValue ] = useState< string | undefined >( '10px' );\n\n return (\n <UnitControl\n __next40pxDefaultSize\n onUnitChange={fn()}\n onFocus={fn()}\n onBlur={fn()}\n isPressEnterToChange\n value={ value }\n onChange={ ( v, extra ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v, extra );\n\t\t\t} } />\n );\n};","description":"If the `isPressEnterToChange` prop is set to `true`, the `onChange` callback will not fire while a new value is typed in the input field (you can verify this behavior by inspecting the console's output)."},{"id":"components-unitcontrol--tweaking-the-number-input","name":"Tweaking The Number Input","snippet":"const TweakingTheNumberInput = () => {\n const [ value, setValue ] = useState< string | undefined >( '10px' );\n\n return (\n <UnitControl\n __next40pxDefaultSize\n onUnitChange={fn()}\n onFocus={fn()}\n onBlur={fn()}\n min={0}\n max={100}\n step=\"any\"\n label=\"Custom label\"\n value={ value }\n onChange={ ( v, extra ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v, extra );\n\t\t\t} } />\n );\n};","description":"Most of `NumberControl`'s props can be passed to `UnitControl`, and they will affect its numeric input field."},{"id":"components-unitcontrol--with-single-unit","name":"With Single Unit","snippet":"const WithSingleUnit = () => {\n const [ value, setValue ] = useState< string | undefined >( '10px' );\n\n return (\n <UnitControl\n __next40pxDefaultSize\n onUnitChange={fn()}\n onFocus={fn()}\n onBlur={fn()}\n units={CSS_UNITS.slice( 0, 1 )}\n value={ value }\n onChange={ ( v, extra ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v, extra );\n\t\t\t} } />\n );\n};","description":"When only one unit is available, the unit selection dropdown becomes static text."},{"id":"components-unitcontrol--with-custom-units","name":"With Custom Units","snippet":"const WithCustomUnits = () => {\n const [ value, setValue ] = useState< string | undefined >( '80km' );\n\n return (\n <UnitControl\n __next40pxDefaultSize\n onUnitChange={fn()}\n onFocus={fn()}\n onBlur={fn()}\n isResetValueOnUnitChange\n min={0}\n units={[\n {\n value: 'km',\n label: 'km',\n default: 1,\n },\n {\n value: 'mi',\n label: 'mi',\n default: 1,\n },\n {\n value: 'm',\n label: 'm',\n default: 1000,\n },\n {\n value: 'yd',\n label: 'yd',\n default: 1760,\n },\n ]}\n value={ value }\n onChange={ ( v, extra ) => {\n\t\t\t\tsetValue( v );\n\t\t\t\tonChange?.( v, extra );\n\t\t\t} } />\n );\n};","description":"It is possible to pass a custom list of units. Every time the unit changes, if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is reset to the new unit's default value."}],"import":"import { UnitControl } from \"@wordpress/components\";","jsDocTags":{},"description":"`UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`). ```jsx import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const Example = () => { const [ value, setValue ] = useState( '10px' ); return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />; }; ```","reactDocgen":{"description":"`UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n\n\n```jsx\nimport { __experimentalUnitControl as UnitControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst Example = () => {\n const [ value, setValue ] = useState( '10px' );\n\n return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;\n};\n```","methods":[],"displayName":"UnitControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/unit-control/index.tsx","actualName":"UnitControl","exportName":"UnitControl"}},"components-validated-form-controls-overview":{"id":"components-validated-form-controls-overview","name":"Overview","path":"../packages/components/src/validated-form-controls/components/stories/overview.story.tsx","stories":[{"id":"components-validated-form-controls-overview--with-multiple-controls","name":"With Multiple Controls","snippet":"const WithMultipleControls = function Template() {\n const [ text, setText ] = useState< string | undefined >( '' );\n const [ text2, setText2 ] = useState< string | undefined >( '' );\n\n return (\n <>\n <ValidatedInputControl\n label=\"Text\"\n required\n value={ text }\n help=\"The word 'error' will trigger an error.\"\n onChange={ setText }\n customValidity={\n text?.toLowerCase() === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n }\n />\n <ValidatedInputControl\n label=\"Text\"\n required\n value={ text2 }\n help=\"The word 'error' will trigger an error.\"\n onChange={ setText2 }\n customValidity={\n text2?.toLowerCase() === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n }\n />\n </>\n );\n};","description":"When there are multiple controls with errors, attempting to submit will move focus to the first control with an error."},{"id":"components-validated-form-controls-overview--with-help-text-replacement","name":"With Help Text Replacement","snippet":"const WithHelpTextReplacement = function Template() {\n const [ text, setText ] = useState< string | undefined >( '' );\n const isInvalid = text?.toLowerCase() === 'error';\n\n return (\n <>\n <style>\n { `\n .my-control:has(:invalid[data-validity-visible]) .my-control__help:not(.is-visible) {\n display: none;\n }\n ` }\n </style>\n <ValidatedInputControl\n className=\"my-control\"\n label=\"Text\"\n required\n value={ text }\n help={\n <span\n className={ clsx(\n 'my-control__help',\n ! isInvalid && 'is-visible'\n ) }\n >\n The word &quot;error&quot; is not allowed.\n </span>\n }\n onChange={ setText }\n customValidity={\n isInvalid\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n }\n />\n </>\n );\n};","description":"Help text can be configured to be hidden when a custom error is reported. Whether to opt for this approach will depend on context."},{"id":"components-validated-form-controls-overview--async-validation","name":"Async Validation","snippet":"const AsyncValidation = () => {\n const [ text, setText ] = useState( '' );\n const [ customValidity, setCustomValidity ] =\n useState<\n React.ComponentProps<\n typeof ValidatedInputControl\n >[ 'customValidity' ]\n >( undefined );\n\n const timeoutRef =\n useRef< ReturnType< typeof setTimeout > >( undefined );\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const debouncedValidate = useCallback(\n debounce( ( v ) => {\n if ( v === '' ) {\n return;\n }\n\n setCustomValidity( {\n type: 'validating',\n message: 'Validating...',\n } );\n\n timeoutRef.current = setTimeout( () => {\n if ( v?.toString().toLowerCase() === 'error' ) {\n setCustomValidity( {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n } );\n } else {\n setCustomValidity( {\n type: 'valid',\n message: 'Validated',\n } );\n }\n }, 1500 );\n }, 500 ),\n []\n );\n\n return (\n <ValidatedInputControl\n label=\"Text\"\n help=\"The word \\\"error\\\" will trigger an error asynchronously.\"\n required\n value={ text }\n onChange={ ( newValue ) => {\n setText( newValue ?? '' );\n setCustomValidity( undefined );\n clearTimeout( timeoutRef.current );\n debouncedValidate( newValue );\n } }\n customValidity={ customValidity } />\n );\n};","description":"To provide feedback from server-side validation, the `customValidity` prop can be used to show additional status indicators while waiting for the server response, and after the response is received. These indicators are intended for asynchronous validation calls that may take more than 1 second to complete. They may be unnecessary when responses are generally quick."},{"id":"components-validated-form-controls-overview--custom-errors-on-submit","name":"Custom Errors On Submit","snippet":"const CustomErrorsOnSubmit = () => {\n const [ text, setText ] = useState< string | undefined >( 'error' );\n\n return (\n <>\n <ValidatedInputControl\n label=\"Text\"\n required\n help=\"The word \\\"error\\\" will trigger an error.\"\n value={ text }\n onChange={ setText }\n customValidity={\n text === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n } />\n </>\n );\n};","description":"Custom validity errors are effective immediately, even when they are not yet visible to the user. For example, in this form where the initial value is already invalid, the error message will be shown to the user once the submit button is clicked, even if the input has never been interacted with."},{"id":"components-validated-form-controls-overview--showing-errors-at-arbitrary-times","name":"Showing Errors At Arbitrary Times","snippet":"const ShowingErrorsAtArbitraryTimes = () => {\n const [ text, setText ] = useState< string | undefined >( 'error' );\n const ref = useRef< HTMLInputElement >( null );\n\n return (\n <VStack spacing={ 4 } alignment=\"left\">\n <ValidatedInputControl\n ref={ ref }\n label=\"Text\"\n required\n help=\"The word \\\"error\\\" will trigger an error.\"\n value={ text }\n onChange={ setText }\n customValidity={\n text === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n } />\n <Button\n __next40pxDefaultSize\n variant=\"secondary\"\n onClick={ () => ref.current?.reportValidity() }>Report validity\n </Button>\n </VStack>\n );\n};","description":"While it is recommended to rely on the built-in behavior for showing errors by using a `form` element and `type=\"submit\"` button around validated fields, it is also possible to show errors at arbitrary times. This can be done by calling the [`reportValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) on a ref of the field itself, or the wrapping `form` element."},{"id":"components-validated-form-controls-overview--validate-in-modal","name":"Validate In Modal","snippet":"const ValidateInModal = function Template( { ...args } ) {\n const [ isOpen, setIsOpen ] = useState( false );\n const [ text, setText ] = useState< string | undefined >( '' );\n\n return (\n <>\n <Button\n variant=\"secondary\"\n __next40pxDefaultSize\n onClick={ () => setIsOpen( true ) }\n >\n Open in modal\n </Button>\n { isOpen && (\n <Modal\n title=\"Dialog title\"\n onRequestClose={ () => setIsOpen( false ) }\n shouldCloseOnClickOutside={ false }\n shouldCloseOnEsc={ false }\n isDismissible={ false }\n >\n <form\n onSubmit={ ( event ) => {\n event.preventDefault();\n setIsOpen( false );\n } }\n >\n <VStack spacing={ 2 }>\n <ValidatedInputControl\n { ...args }\n value={ text }\n onChange={ setText }\n customValidity={\n text === 'error'\n ? {\n type: 'invalid',\n message:\n 'The word \"error\" is not allowed.',\n }\n : undefined\n }\n />\n\n <HStack justify=\"flex-end\" spacing={ 2 }>\n <Button\n variant=\"tertiary\"\n __next40pxDefaultSize\n onClick={ () => setIsOpen( false ) }\n >\n Cancel\n </Button>\n <Button\n variant=\"primary\"\n __next40pxDefaultSize\n type=\"submit\"\n >\n Save\n </Button>\n </HStack>\n </VStack>\n </form>\n </Modal>\n ) }\n </>\n );\n};","description":"A `form` wrapper and `type=\"submit\"` button can be used to force validation when the user tries to commit their changes, while still allowing the modal to be closed by canceling. Optionally, the `shouldCloseOnClickOutside`, `isDismissible`, and `shouldCloseOnEsc` props on `Modal` can be disabled to force users to more explicitly signal whether they are trying to \"submit close\" or \"cancel close\" the dialog, as well as preventing data loss on accidental closures."},{"id":"components-validated-form-controls-overview--validate-on-popover-close","name":"Validate On Popover Close","snippet":"const ValidateOnPopoverClose = function Template( { ...args } ) {\n const [ isOpen, setIsOpen ] = useState( false );\n const formRef = useRef< HTMLFormElement >( null );\n const [ text, setText ] = useState< string | undefined >( '' );\n\n return (\n <Dropdown\n popoverProps={ { placement: 'bottom-start' } }\n open={ isOpen }\n onToggle={ ( willOpen ) => {\n if ( ! willOpen ) {\n const isValid = formRef.current?.reportValidity();\n setIsOpen( ! isValid );\n } else {\n setIsOpen( true );\n }\n } }\n renderContent={ () => (\n <form\n ref={ formRef }\n onSubmit={ ( event ) => {\n event.preventDefault();\n setIsOpen( false );\n } }\n >\n <ValidatedInputControl\n { ...args }\n value={ text }\n onChange={ setText }\n customValidity={\n text === 'error'\n ? {\n type: 'invalid',\n message:\n 'The word \"error\" is not allowed.',\n }\n : undefined\n }\n />\n </form>\n ) }\n renderToggle={ () => {\n return (\n <Button\n __next40pxDefaultSize\n variant=\"secondary\"\n onClick={ () => setIsOpen( ! isOpen ) }\n aria-expanded={ isOpen }\n >\n Open in popover\n </Button>\n );\n } }\n />\n );\n};","description":"[Form methods](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#instance_methods) like `reportValidity()` can be used to validate the fields when a popover is about to be closed, and prevent the closing of the popover when invalid."}],"import":"import { Button, Dropdown, HStack, Modal, ValidatedInputControl, VStack } from \"@wordpress/components\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n 24 | import { VStack } from '../../../v-stack';\n 25 |\n> 26 | const meta: Meta< typeof ControlWithError > = {\n | ^\n 27 | \ttitle: 'Components/Selection & Input/Validated Form Controls/Overview',\n 28 | \tid: 'components-validated-form-controls-overview',\n 29 | \tparameters: {\n\n../packages/components/src/validated-form-controls/components/stories/overview.mdx:\n/**\n * External dependencies\n */\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useState } from '@wordpress/element';\nimport { debounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ValidatedInputControl } from '..';\nimport { formDecorator } from './story-utils';\nimport type { ControlWithError } from '../../control-with-error';\nimport Dropdown from '../../../dropdown';\nimport { Button } from '../../../button';\nimport Modal from '../../../modal';\nimport { HStack } from '../../../h-stack';\nimport { VStack } from '../../../v-stack';\n\nconst meta: Meta< typeof ControlWithError > = {\n\ttitle: 'Components/Selection & Input/Validated Form Controls/Overview',\n\tid: 'components-validated-form-controls-overview',\n\tparameters: {\n\t\tcontrols: { disable: true },\n\t},\n};\nexport default meta;\n\ntype Story = StoryObj< typeof ControlWithError >;\n\n/**\n * When there are multiple controls with errors, attempting to submit will\n * move focus to the first control with an error.\n */\nexport const WithMultipleControls: Story = {\n\tdecorators: formDecorator,\n\trender: function Template() {\n\t\tconst [ text, setText ] = useState< string | undefined >( '' );\n\t\tconst [ text2, setText2 ] = useState< string | undefined >( '' );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tlabel=\"Text\"\n\t\t\t\t\trequired\n\t\t\t\t\tvalue={ text }\n\t\t\t\t\thelp=\"The word 'error' will trigger an error.\"\n\t\t\t\t\tonChange={ setText }\n\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\ttext?.toLowerCase() === 'error'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tlabel=\"Text\"\n\t\t\t\t\trequired\n\t\t\t\t\tvalue={ text2 }\n\t\t\t\t\thelp=\"The word 'error' will trigger an error.\"\n\t\t\t\t\tonChange={ setText2 }\n\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\ttext2?.toLowerCase() === 'error'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n\n/**\n * Help text can be configured to be hidden when a custom error is reported. Whether to opt for this approach\n * will depend on context.\n */\nexport const WithHelpTextReplacement: Story = {\n\tdecorators: formDecorator,\n\trender: function Template() {\n\t\tconst [ text, setText ] = useState< string | undefined >( '' );\n\t\tconst isInvalid = text?.toLowerCase() === 'error';\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<style>\n\t\t\t\t\t{ `\n\t\t\t\t.my-control:has(:invalid[data-validity-visible]) .my-control__help:not(.is-visible) {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t` }\n\t\t\t\t</style>\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tclassName=\"my-control\"\n\t\t\t\t\tlabel=\"Text\"\n\t\t\t\t\trequired\n\t\t\t\t\tvalue={ text }\n\t\t\t\t\thelp={\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'my-control__help',\n\t\t\t\t\t\t\t\t! isInvalid && 'is-visible'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tThe word &quot;error&quot; is not allowed.\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ setText }\n\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n\n/**\n * To provide feedback from server-side validation, the `customValidity` prop can be used\n * to show additional status indicators while waiting for the server response,\n * and after the response is received.\n *\n * These indicators are intended for asynchronous validation calls that may take more than 1 second to complete.\n * They may be unnecessary when responses are generally quick.\n */\nexport const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {\n\tdecorators: formDecorator,\n\trender: function Template( { ...args } ) {\n\t\tconst [ text, setText ] = useState( '' );\n\t\tconst [ customValidity, setCustomValidity ] =\n\t\t\tuseState<\n\t\t\t\tReact.ComponentProps<\n\t\t\t\t\ttypeof ValidatedInputControl\n\t\t\t\t>[ 'customValidity' ]\n\t\t\t>( undefined );\n\n\t\tconst timeoutRef =\n\t\t\tuseRef< ReturnType< typeof setTimeout > >( undefined );\n\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\tconst debouncedValidate = useCallback(\n\t\t\tdebounce( ( v ) => {\n\t\t\t\tif ( v === '' ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'validating',\n\t\t\t\t\tmessage: 'Validating...',\n\t\t\t\t} );\n\n\t\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\t\tif ( v?.toString().toLowerCase() === 'error' ) {\n\t\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetCustomValidity( {\n\t\t\t\t\t\t\ttype: 'valid',\n\t\t\t\t\t\t\tmessage: 'Validated',\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}, 1500 );\n\t\t\t}, 500 ),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<ValidatedInputControl\n\t\t\t\t{ ...args }\n\t\t\t\tvalue={ text }\n\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\tsetText( newValue ?? '' );\n\t\t\t\t\tsetCustomValidity( undefined );\n\t\t\t\t\tclearTimeout( timeoutRef.current );\n\t\t\t\t\tdebouncedValidate( newValue );\n\t\t\t\t} }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t/>\n\t\t);\n\t},\n\targs: {\n\t\tlabel: 'Text',\n\t\thelp: 'The word \"error\" will trigger an error asynchronously.',\n\t\trequired: true,\n\t},\n};\n\n// Not exported - Only for testing purposes.\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AsyncValidationWithTest: StoryObj< typeof ValidatedInputControl > = {\n\t...AsyncValidation,\n\tdecorators: formDecorator,\n\tplay: async ( { canvasElement } ) => {\n\t\tconst canvas = within( canvasElement );\n\t\tawait userEvent.click( canvas.getByRole( 'textbox' ) );\n\t\tawait userEvent.type( canvas.getByRole( 'textbox' ), 'valid text', {\n\t\t\tdelay: 10,\n\t\t} );\n\t\tawait userEvent.tab();\n\n\t\tawait waitFor(\n\t\t\t() => {\n\t\t\t\texpect( canvas.getByText( 'Validated' ) ).toBeVisible();\n\t\t\t},\n\t\t\t{ timeout: 2500 }\n\t\t);\n\n\t\tawait new Promise( ( resolve ) => setTimeout( resolve, 500 ) );\n\t\tawait userEvent.clear( canvas.getByRole( 'textbox' ) );\n\n\t\tawait waitFor(\n\t\t\t() => {\n\t\t\t\texpect(\n\t\t\t\t\tcanvas.getByText( 'Please fill out this field.' )\n\t\t\t\t).toBeVisible();\n\t\t\t},\n\t\t\t{ timeout: 2500 }\n\t\t);\n\n\t\t// Should not show validating state if there were no changes\n\t\t// after a valid/invalid state was already shown.\n\t\tawait new Promise( ( resolve ) => setTimeout( resolve, 1500 ) );\n\t\tawait expect(\n\t\t\tcanvas.queryByText( 'Validating...' )\n\t\t).not.toBeInTheDocument();\n\n\t\tawait userEvent.type( canvas.getByRole( 'textbox' ), 'e', {\n\t\t\tdelay: 10,\n\t\t} );\n\n\t\t// Should not show valid state if server has not yet responded.\n\t\tawait expect(\n\t\t\tcanvas.queryByText( 'Validated' )\n\t\t).not.toBeInTheDocument();\n\n\t\t// Should show validating state when transitioning from invalid to valid.\n\t\tawait waitFor(\n\t\t\t() => {\n\t\t\t\texpect( canvas.getByText( 'Validating...' ) ).toBeVisible();\n\t\t\t},\n\t\t\t{ timeout: 2500 }\n\t\t);\n\n\t\tawait waitFor(\n\t\t\t() => {\n\t\t\t\texpect( canvas.getByText( 'Validated' ) ).toBeVisible();\n\t\t\t},\n\t\t\t{ timeout: 2500 }\n\t\t);\n\n\t\tawait new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );\n\t\tawait userEvent.type( canvas.getByRole( 'textbox' ), 'rror', {\n\t\t\tdelay: 10,\n\t\t} );\n\n\t\tawait waitFor(\n\t\t\t() => {\n\t\t\t\texpect(\n\t\t\t\t\tcanvas.getByText( 'The word \"error\" is not allowed.' )\n\t\t\t\t).toBeVisible();\n\t\t\t},\n\t\t\t{ timeout: 2500 }\n\t\t);\n\t},\n};\n\n/**\n * Custom validity errors are effective immediately, even when they are not yet visible\n * to the user. For example, in this form where the initial value is already invalid,\n * the error message will be shown to the user once the submit button is clicked,\n * even if the input has never been interacted with.\n */\nexport const CustomErrorsOnSubmit: StoryObj< typeof ValidatedInputControl > = {\n\tdecorators: formDecorator,\n\targs: {\n\t\tlabel: 'Text',\n\t\trequired: true,\n\t\thelp: 'The word \"error\" will trigger an error.',\n\t},\n\trender: function Template( { ...args } ) {\n\t\tconst [ text, setText ] = useState< string | undefined >( 'error' );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\t{ ...args }\n\t\t\t\t\tvalue={ text }\n\t\t\t\t\tonChange={ setText }\n\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\ttext === 'error'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n\n/**\n * While it is recommended to rely on the built-in behavior for showing errors by\n * using a `form` element and `type=\"submit\"` button around validated fields,\n * it is also possible to show errors at arbitrary times.\n * This can be done by calling the [`reportValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity)\n * on a ref of the field itself, or the wrapping `form` element.\n */\nexport const ShowingErrorsAtArbitraryTimes: StoryObj<\n\ttypeof ValidatedInputControl\n> = {\n\targs: {\n\t\tlabel: 'Text',\n\t\trequired: true,\n\t\thelp: 'The word \"error\" will trigger an error.',\n\t},\n\tdecorators: [],\n\trender: function Template( { ...args } ) {\n\t\tconst [ text, setText ] = useState< string | undefined >( 'error' );\n\t\tconst ref = useRef< HTMLInputElement >( null );\n\n\t\treturn (\n\t\t\t<VStack spacing={ 4 } alignment=\"left\">\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...args }\n\t\t\t\t\tvalue={ text }\n\t\t\t\t\tonChange={ setText }\n\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\ttext === 'error'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\tmessage: 'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ () => ref.current?.reportValidity() }\n\t\t\t\t>\n\t\t\t\t\tReport validity\n\t\t\t\t</Button>\n\t\t\t</VStack>\n\t\t);\n\t},\n};\n\n/**\n * A `form` wrapper and `type=\"submit\"` button can be used to force validation when\n * the user tries to commit their changes, while still allowing the modal to be closed by canceling.\n * Optionally, the `shouldCloseOnClickOutside`, `isDismissible`, and `shouldCloseOnEsc` props\n * on `Modal` can be disabled to force users to more explicitly signal whether they are trying to\n * \"submit close\" or \"cancel close\" the dialog, as well as preventing data loss on accidental closures.\n */\nexport const ValidateInModal: StoryObj< typeof ValidatedInputControl > = {\n\trender: function Template( { ...args } ) {\n\t\tconst [ isOpen, setIsOpen ] = useState( false );\n\t\tconst [ text, setText ] = useState< string | undefined >( '' );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\t>\n\t\t\t\t\tOpen in modal\n\t\t\t\t</Button>\n\t\t\t\t{ isOpen && (\n\t\t\t\t\t<Modal\n\t\t\t\t\t\ttitle=\"Dialog title\"\n\t\t\t\t\t\tonRequestClose={ () => setIsOpen( false ) }\n\t\t\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\t\t\tshouldCloseOnEsc={ false }\n\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t\t\t<ValidatedInputControl\n\t\t\t\t\t\t\t\t\t{ ...args }\n\t\t\t\t\t\t\t\t\tvalue={ text }\n\t\t\t\t\t\t\t\t\tonChange={ setText }\n\t\t\t\t\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\t\t\t\t\ttext === 'error'\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<HStack justify=\"flex-end\" spacing={ 2 }>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tonClick={ () => setIsOpen( false ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tSave\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</Modal>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\targs: {\n\t\tlabel: 'Text',\n\t\trequired: true,\n\t\thelp: 'The word \"error\" will trigger an error.',\n\t},\n};\n\n/**\n * [Form methods](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#instance_methods) like\n * `reportValidity()` can be used to validate the fields when a popover is about to be closed,\n * and prevent the closing of the popover when invalid.\n */\nexport const ValidateOnPopoverClose: StoryObj< typeof ValidatedInputControl > =\n\t{\n\t\trender: function Template( { ...args } ) {\n\t\t\tconst [ isOpen, setIsOpen ] = useState( false );\n\t\t\tconst formRef = useRef< HTMLFormElement >( null );\n\t\t\tconst [ text, setText ] = useState< string | undefined >( '' );\n\n\t\t\treturn (\n\t\t\t\t<Dropdown\n\t\t\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\t\t\topen={ isOpen }\n\t\t\t\t\tonToggle={ ( willOpen ) => {\n\t\t\t\t\t\tif ( ! willOpen ) {\n\t\t\t\t\t\t\tconst isValid = formRef.current?.reportValidity();\n\t\t\t\t\t\t\tsetIsOpen( ! isValid );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsOpen( true );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tref={ formRef }\n\t\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ValidatedInputControl\n\t\t\t\t\t\t\t\t{ ...args }\n\t\t\t\t\t\t\t\tvalue={ text }\n\t\t\t\t\t\t\t\tonChange={ setText }\n\t\t\t\t\t\t\t\tcustomValidity={\n\t\t\t\t\t\t\t\t\ttext === 'error'\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\t\t\t\t\t\t\t\tmessage:\n\t\t\t\t\t\t\t\t\t\t\t\t\t'The word \"error\" is not allowed.',\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t) }\n\t\t\t\t\trenderToggle={ () => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tonClick={ () => setIsOpen( ! isOpen ) }\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tOpen in popover\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t},\n\t\targs: {\n\t\t\tlabel: 'Text',\n\t\t\thelp: 'The word \"error\" will trigger an error.',\n\t\t\trequired: true,\n\t\t\tstyle: {\n\t\t\t\twidth: '200px',\n\t\t\t},\n\t\t},\n\t};\n"},"docs":{"components-validated-form-controls-overview--docs":{"id":"components-validated-form-controls-overview--docs","name":"Docs","path":"../packages/components/src/validated-form-controls/components/stories/overview.mdx","title":"Components/Selection & Input/Validated Form Controls/Overview","content":"import { ArgTypes, Meta, Stories } from '@storybook/addon-docs/blocks';\nimport * as OverviewStories from './overview.story';\nimport { ValidatedInputControl } from '..';\n\n<Meta of={ OverviewStories } title=\"Components/Selection & Input/Validated Form Controls/Overview\" />\n\n# Validated Form Controls\n\nThis section contains form control components that extend [WordPress components](https://wordpress.github.io/gutenberg/) with additional validation capabilities.\n\n## Status: Beta\n\nWe are still gathering feedback and iterating. Please get in touch with `@WordPress/gutenberg-components` if you are interested in trying them out in the Gutenberg app.\n\n## Usage\n\nComponent APIs are the same as the underlying WordPress components, with the addition of some optional props:\n\n<ArgTypes of={ ValidatedInputControl } include={ [ 'required', 'markWhenOptional', 'customValidity' ] } />\n\n## Implementation\n\nThese components are designed to work with the native HTML5 [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation). Using this browser API as the \"source of truth\" for form element errors has these benefits:\n\n- Ability to use CSS selectors like `:invalid`, `:user-invalid`, `:required`, and `:optional`.\n- Ability to use simple HTML attribute-based constraints (e.g. `min`, `max`, `required`, `pattern`, `type`) together with fully custom validation logic (with the `setCustomValidity()` method).\n- Attribute-based constraints will already have localized, user-facing error messages built in.\n- When a user clicks the form submit button, the browser will automatically check the validity states of all enclosed form elements and block the submit when there are errors. It will also automatically scroll and focus to the first erroring element and show a prominent error popover.\n- While not _all_ aspects of the Constraint Validation API are well-supported in all screen readers yet, many aspects are, and will continue to improve. We can supplement any accessibility shortcomings with things like `aria-live` announcements of error messages.\n\n## Current limitations\n\n### No easy access to underlying validation APIs\n\n- The consumer does not have a simple way to show validation messages at an arbitrary point in time, unless the fields are wrapped in a `form` element. Currently, when to show validation messages to the user are handled by the component — any messages are first made visible on `blur` after the field is considered \"touched\", or if the user tries to submit the enclosing `form`. Messages can also be triggered to show at any time by calling the `reportValidity()` method on the wrapping `<form>` element.\n- The consumer does not have direct access to the [`validity` object](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the underlying element.\n\nWe don't foresee these being needed much, but it is technically possible by the consumer accessing the target element's validation APIs via `ref`. Better docs or ergonomics can be added when we have actual use cases.\n\n### Delegate elements\n\nThe implementations for `ToggleGroupControl`, `CustomSelectControl`, and `FormTokenField` use a \"delegate\" element for validation, due to upstream limitations that prevent us from using the actual underlying elements for constraint validation. A delegate element in this context is a visually hidden form element that we \"delegate\" the Constraint Validation API concerns to.\n\nThis is not ideal, but lets us maintain a consistent mechanism to scroll to the invalid field when attempting to submit, and block the form from submitting. It is hopefully fine as a stopgap, given the low amount of actual validation that will need happen on these two specific components.\n\n### Controlled mode only\n\nSome of the underlying WordPress components currently do not fully support uncontrolled mode. For now, we recommend sticking to controlled mode to avoid any issues.\n\n## Examples\n\n<Stories />\n"}}},"components-validatedcheckboxcontrol":{"id":"components-validatedcheckboxcontrol","name":"ValidatedCheckboxControl","path":"../packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx","stories":[{"id":"components-validatedcheckboxcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ checked, setChecked ] = useState( false );\n\n return (\n <ValidatedCheckboxControl\n required\n label=\"Checkbox\"\n help=\"This checkbox may neither be checked nor unchecked.\"\n checked={ checked }\n onChange={ ( newValue ) => {\n setChecked( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n checked\n ? {\n type: 'invalid',\n message: 'This checkbox may not be checked.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedCheckboxControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedCheckboxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/checkbox-control.tsx","actualName":"ValidatedCheckboxControl","exportName":"ValidatedCheckboxControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedcomboboxcontrol":{"id":"components-validatedcomboboxcontrol","name":"ValidatedComboboxControl","path":"../packages/components/src/validated-form-controls/components/stories/combobox-control.story.tsx","stories":[{"id":"components-validatedcomboboxcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps<\n typeof ValidatedComboboxControl\n >[ 'value' ]\n >();\n\n return (\n <ValidatedComboboxControl\n required\n label=\"Combobox\"\n help=\"Option A is not allowed.\"\n options={[\n { value: 'a', label: 'Option A (not allowed)' },\n { value: 'b', label: 'Option B' },\n ]}\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value === 'a'\n ? {\n type: 'invalid',\n message: 'Option A is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedComboboxControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedComboboxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/combobox-control.tsx","actualName":"ValidatedComboboxControl","exportName":"ValidatedComboboxControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedcustomselectcontrol":{"id":"components-validatedcustomselectcontrol","name":"ValidatedCustomSelectControl","path":"../packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx","stories":[{"id":"components-validatedcustomselectcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps<\n typeof ValidatedCustomSelectControl\n >[ 'value' ]\n >();\n\n return (\n <ValidatedCustomSelectControl\n required\n label=\"Custom Select\"\n options={[\n { key: '', name: 'Select an option' },\n { key: 'a', name: 'Option A (not allowed)' },\n { key: 'b', name: 'Option B' },\n ]}\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue.selectedItem );\n onChange?.( newValue );\n } }\n customValidity={\n value?.key === 'a'\n ? {\n type: 'invalid',\n message: 'Option A is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedCustomSelectControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedCustomSelectControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/custom-select-control.tsx","actualName":"ValidatedCustomSelectControl","exportName":"ValidatedCustomSelectControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedformtokenfield":{"id":"components-validatedformtokenfield","name":"ValidatedFormTokenField","path":"../packages/components/src/validated-form-controls/components/stories/form-token-field.story.tsx","stories":[{"id":"components-validatedformtokenfield--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );\n\n return (\n <ValidatedFormTokenField\n required\n label=\"Tags\"\n placeholder=\"Add tags...\"\n suggestions={[ 'Posts', 'Pages', 'Media', 'Error' ]}\n __experimentalExpandOnFocus\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value?.some( ( token ) => {\n const tokenValue =\n typeof token === 'string' ? token : token.value;\n return tokenValue.toLowerCase() === 'error';\n } )\n ? {\n type: 'invalid',\n message: 'The tag \"error\" is not allowed.',\n }\n : undefined\n } />\n );\n};","description":"This demonstrates how array validation would work with the ValidatedFormTokenField component."}],"import":"import { ValidatedFormTokenField } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedFormTokenField","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/form-token-field.tsx","actualName":"ValidatedFormTokenField","exportName":"ValidatedFormTokenField","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedinputcontrol":{"id":"components-validatedinputcontrol","name":"ValidatedInputControl","path":"../packages/components/src/validated-form-controls/components/stories/input-control.story.tsx","stories":[{"id":"components-validatedinputcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< string | undefined >( '' );\n\n return (\n <ValidatedInputControl\n required\n label=\"Input\"\n help=\"The word \\\"error\\\" will trigger an error.\"\n value={ value }\n onChange={ ( newValue, ...rest ) => {\n setValue( newValue );\n onChange?.( newValue, ...rest );\n } }\n customValidity={\n value?.toLowerCase() === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n } />\n );\n};"},{"id":"components-validatedinputcontrol--password","name":"Password","snippet":"const Password = () => {\n const [ value, setValue ] = useState< string | undefined >( '' );\n const [ visible, setVisible ] = useState( false );\n\n return (\n <ValidatedInputControl\n required\n label=\"Password\"\n help=\"Minimum 8 characters, include a number, capital letter, and symbol (!@£$%^&*#).\"\n minLength={8}\n type={ visible ? 'text' : 'password' }\n suffix={\n <InputControlSuffixWrapper variant=\"control\">\n <Button\n size=\"small\"\n icon={ visible ? unseen : seen }\n onClick={ () => setVisible( ( v ) => ! v ) }\n label={\n visible ? 'Hide password' : 'Show password'\n }\n />\n </InputControlSuffixWrapper>\n }\n value={ value }\n onChange={ ( newValue, ...rest ) => {\n setValue( newValue );\n onChange?.( newValue, ...rest );\n } }\n customValidity={ ( () => {\n if ( ! /\\d/.test( value ?? '' ) ) {\n return {\n type: 'invalid' as const,\n message:\n 'Password must include at least one number.',\n };\n }\n if ( ! /[A-Z]/.test( value ?? '' ) ) {\n return {\n type: 'invalid' as const,\n message:\n 'Password must include at least one capital letter.',\n };\n }\n if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {\n return {\n type: 'invalid' as const,\n message:\n 'Password must include at least one symbol.',\n };\n }\n return undefined;\n } )() } />\n );\n};","description":"This demonstrates how password validation would work with the standard implementation. We are planning to move to a custom implementation more tailored to the password use case."}],"import":"import { Button, InputControlSuffixWrapper, ValidatedInputControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedInputControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/input-control.tsx","actualName":"ValidatedInputControl","exportName":"ValidatedInputControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatednumbercontrol":{"id":"components-validatednumbercontrol","name":"ValidatedNumberControl","path":"../packages/components/src/validated-form-controls/components/stories/number-control.story.tsx","stories":[{"id":"components-validatednumbercontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps< typeof ValidatedNumberControl >[ 'value' ]\n >();\n\n return (\n <ValidatedNumberControl\n required\n label=\"Number\"\n help=\"Odd numbers are not allowed.\"\n value={ value }\n onChange={ ( newValue, extra ) => {\n setValue( newValue );\n onChange?.( newValue, extra );\n } }\n customValidity={\n value && parseInt( value.toString(), 10 ) % 2 !== 0\n ? {\n type: 'invalid',\n message: 'Choose an even number.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedNumberControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedNumberControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/number-control.tsx","actualName":"ValidatedNumberControl","exportName":"ValidatedNumberControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedradiocontrol":{"id":"components-validatedradiocontrol","name":"ValidatedRadioControl","path":"../packages/components/src/validated-form-controls/components/stories/radio-control.story.tsx","stories":[{"id":"components-validatedradiocontrol--default","name":"Default","snippet":"const Default = () => {\n const [ selected, setSelected ] =\n useState<\n React.ComponentProps<\n typeof ValidatedRadioControl\n >[ 'selected' ]\n >();\n\n return (\n <ValidatedRadioControl\n required\n label=\"Radio\"\n help=\"Option B is not allowed.\"\n options={[\n { label: 'Option A', value: 'a' },\n { label: 'Option B (not allowed)', value: 'b' },\n ]}\n selected={ selected }\n onChange={ ( newValue ) => {\n setSelected( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n selected === 'b'\n ? {\n type: 'invalid',\n message: 'Option B is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedRadioControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedRadioControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/radio-control.tsx","actualName":"ValidatedRadioControl","exportName":"ValidatedRadioControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedrangecontrol":{"id":"components-validatedrangecontrol","name":"ValidatedRangeControl","path":"../packages/components/src/validated-form-controls/components/stories/range-control.story.tsx","stories":[{"id":"components-validatedrangecontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps< typeof ValidatedRangeControl >[ 'value' ]\n >();\n\n return (\n <ValidatedRangeControl\n required\n label=\"Range\"\n help=\"Odd numbers are not allowed.\"\n min={0}\n max={20}\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value && value % 2 !== 0\n ? {\n type: 'invalid',\n message: 'Choose an even number.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedRangeControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedRangeControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/range-control.tsx","actualName":"ValidatedRangeControl","exportName":"ValidatedRangeControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedselectcontrol":{"id":"components-validatedselectcontrol","name":"ValidatedSelectControl","path":"../packages/components/src/validated-form-controls/components/stories/select-control.story.tsx","stories":[{"id":"components-validatedselectcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< string | undefined >( '' );\n\n return (\n <ValidatedSelectControl\n required\n label=\"Select\"\n help=\"Selecting option 1 will trigger an error.\"\n options={[\n { value: '', label: 'Select an option' },\n { value: '1', label: 'Option 1 (not allowed)' },\n { value: '2', label: 'Option 2' },\n ]}\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value === '1'\n ? {\n type: 'invalid',\n message: 'Option 1 is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedSelectControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedSelectControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/select-control.tsx","actualName":"ValidatedSelectControl","exportName":"ValidatedSelectControl","props":{"value":{"required":false,"tsType":{"name":"string"},"description":""},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"value"}],"return":{"name":"void"}}},"description":""},"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedtextcontrol":{"id":"components-validatedtextcontrol","name":"ValidatedTextControl","path":"../packages/components/src/validated-form-controls/components/stories/text-control.story.tsx","stories":[{"id":"components-validatedtextcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps< typeof ValidatedTextControl >[ 'value' ]\n >( '' );\n\n return (\n <ValidatedTextControl\n required\n label=\"Text\"\n help=\"The word 'error' will trigger an error.\"\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedTextControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedTextControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/text-control.tsx","actualName":"ValidatedTextControl","exportName":"ValidatedTextControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedtextareacontrol":{"id":"components-validatedtextareacontrol","name":"ValidatedTextareaControl","path":"../packages/components/src/validated-form-controls/components/stories/textarea-control.story.tsx","stories":[{"id":"components-validatedtextareacontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps<\n typeof ValidatedTextareaControl\n >[ 'value' ]\n >( '' );\n\n return (\n <ValidatedTextareaControl\n required\n label=\"Textarea\"\n help=\"The word \\\"error\\\" will trigger an error.\"\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value?.toLowerCase() === 'error'\n ? {\n type: 'invalid',\n message: 'The word \"error\" is not allowed.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedTextareaControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedTextareaControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/textarea-control.tsx","actualName":"ValidatedTextareaControl","exportName":"ValidatedTextareaControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedtogglecontrol":{"id":"components-validatedtogglecontrol","name":"ValidatedToggleControl","path":"../packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx","stories":[{"id":"components-validatedtogglecontrol--default","name":"Default","snippet":"const Default = () => {\n const [ checked, setChecked ] = useState( false );\n\n return (\n <ValidatedToggleControl\n required\n label=\"Toggle\"\n help=\"This toggle may neither be enabled nor disabled.\"\n checked={ checked }\n onChange={ ( newValue ) => {\n setChecked( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n checked\n ? {\n type: 'invalid',\n message: 'This toggle may not be enabled.',\n }\n : undefined\n } />\n );\n};"}],"import":"import { ValidatedToggleControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedToggleControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/toggle-control.tsx","actualName":"ValidatedToggleControl","exportName":"ValidatedToggleControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-validatedtogglegroupcontrol":{"id":"components-validatedtogglegroupcontrol","name":"ValidatedToggleGroupControl","path":"../packages/components/src/validated-form-controls/components/stories/toggle-group-control.story.tsx","stories":[{"id":"components-validatedtogglegroupcontrol--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] =\n useState<\n React.ComponentProps<\n typeof ValidatedToggleGroupControl\n >[ 'value' ]\n >( '1' );\n\n return (\n <ValidatedToggleGroupControl\n required\n label=\"Toggle Group\"\n isBlock\n help=\"Selecting option 2 will trigger an error.\"\n value={ value }\n onChange={ ( newValue ) => {\n setValue( newValue );\n onChange?.( newValue );\n } }\n customValidity={\n value === '2'\n ? {\n type: 'invalid',\n message: 'Option 2 is not allowed.',\n }\n : undefined\n }>{[\n <ToggleGroupControlOption value=\"1\" key=\"1\" label=\"Option 1\" />,\n <ToggleGroupControlOption value=\"2\" key=\"2\" label=\"Option 2\" />,\n ]}</ValidatedToggleGroupControl>\n );\n};"}],"import":"import { ToggleGroupControlOption, ValidatedToggleGroupControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ValidatedToggleGroupControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/validated-form-controls/components/toggle-group-control.tsx","actualName":"ValidatedToggleGroupControl","exportName":"ValidatedToggleGroupControl","props":{"required":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control is required.\n@default false"},"markWhenOptional":{"required":false,"tsType":{"name":"boolean"},"description":"Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n@default false"},"customValidity":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttype: 'validating' | 'valid' | 'invalid';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'validating' | 'valid' | 'invalid'","elements":[{"name":"literal","value":"'validating'"},{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]}},"description":"Show a custom message based on the validation status.\n\n- When `type` is `invalid`, the message will be applied to the underlying element using the\nnative [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\nThis means the custom message will be prioritized over any existing validity messages\ntriggered by HTML attribute-based validation.\n- When `type` is `validating` or `valid`, the custom validity message of the underlying element\nwill be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,\nthe message will be presented as a status indicator rather than an error. These indicators are intended\nfor asynchronous validation calls that may take more than 1 second to complete.\nOtherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`."}}}},"components-heading":{"id":"components-heading","name":"Heading","path":"../packages/components/src/heading/stories/index.story.tsx","stories":[{"id":"components-heading--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<Heading { ...props } />\n);"}],"import":"import { Heading } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedHeading","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/heading/component.tsx","actualName":"UnconnectedHeading"}},"components-texthighlight":{"id":"components-texthighlight","name":"TextHighlight","path":"../packages/components/src/text-highlight/stories/index.story.tsx","stories":[{"id":"components-texthighlight--default","name":"Default","snippet":"const Default = () => {\n return (\n <TextHighlight\n text=\"We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.\"\n highlight=\"Gutenberg\" />\n );\n};"}],"import":"import { TextHighlight } from \"@wordpress/components\";","jsDocTags":{},"description":"Highlights occurrences of a given string within another string of text. Wraps each match with a `<mark>` tag which provides browser default styling. ```jsx import { TextHighlight } from '@wordpress/components'; const MyTextHighlight = () => ( <TextHighlight text=\"Why do we like Gutenberg? Because Gutenberg is the best!\" highlight=\"Gutenberg\" /> ); ```","reactDocgen":{"description":"Highlights occurrences of a given string within another string of text. Wraps\neach match with a `<mark>` tag which provides browser default styling.\n\n```jsx\nimport { TextHighlight } from '@wordpress/components';\n\nconst MyTextHighlight = () => (\n <TextHighlight\n text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n highlight=\"Gutenberg\"\n />\n);\n```","methods":[],"displayName":"TextHighlight","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/text-highlight/index.tsx","actualName":"TextHighlight","exportName":"TextHighlight","props":{"highlight":{"required":true,"tsType":{"name":"string"},"description":"The string to search for and highlight within the `text`. Case\ninsensitive. Multiple matches.\n\n@default ''"},"text":{"required":true,"tsType":{"name":"string"},"description":"The string of text to be tested for occurrences of then given\n`highlight`.\n\n@default ''"}}}},"components-text":{"id":"components-text","name":"Text","path":"../packages/components/src/text/stories/index.story.tsx","stories":[{"id":"components-text--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <Text { ...props } />;\n};"},{"id":"components-text--truncate","name":"Truncate","snippet":"const Truncate = ( props ) => {\n\treturn <Text { ...props } />;\n};"},{"id":"components-text--highlight","name":"Highlight","snippet":"const Highlight = ( props ) => {\n\treturn <Text { ...props } />;\n};"}],"import":"import { Text } from \"@wordpress/components\";","jsDocTags":{"param":["props ","forwardedRef "]},"description":"","reactDocgen":{"description":"@param props\n@param forwardedRef","methods":[],"displayName":"UnconnectedText","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/text/component.tsx","actualName":"UnconnectedText"}},"components-truncate":{"id":"components-truncate","name":"Truncate","path":"../packages/components/src/truncate/stories/index.story.tsx","stories":[{"id":"components-truncate--default","name":"Default","snippet":"const Default = () => {\n return <Truncate numberOfLines={2}>{defaultText}</Truncate>;\n};"},{"id":"components-truncate--character-count","name":"Truncate by character count","snippet":"const CharacterCount = () => {\n return <Truncate limit={23} ellipsizeMode=\"tail\" ellipsis=\"[---]\">{defaultText}</Truncate>;\n};"}],"import":"import { Truncate } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedTruncate","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/truncate/component.tsx","actualName":"UnconnectedTruncate"}},"components-visuallyhidden":{"id":"components-visuallyhidden","name":"VisuallyHidden","path":"../packages/components/src/visually-hidden/stories/index.story.tsx","stories":[{"id":"components-visuallyhidden--default","name":"Default","snippet":"const Default = () => <>\n <VisuallyHidden as=\"span\">This should not show.\n </VisuallyHidden>\n <div>This text will{ ' ' }\n <VisuallyHidden as=\"span\">but not inline{ ' ' }\n </VisuallyHidden>{ ' ' }always show.\n </div>\n</>;"},{"id":"components-visuallyhidden--with-forwarded-props","name":"With Forwarded Props","snippet":"const WithForwardedProps = () => <>Additional props can be passed to VisuallyHidden and are forwarded to\n the rendered element.{ ' ' }\n <VisuallyHidden as=\"span\" data-id=\"test\">Check out my data attribute!{ ' ' }\n </VisuallyHidden>Inspect the HTML to see!\n </>;"},{"id":"components-visuallyhidden--with-additional-class-names","name":"With Additional Class Names","snippet":"const WithAdditionalClassNames = () => <>Additional class names passed to VisuallyHidden extend the component\n class name.{ ' ' }\n <VisuallyHidden as=\"label\" className=\"test-input\">Check out my class!{ ' ' }\n </VisuallyHidden>Inspect the HTML to see!\n </>;"}],"import":"import { VisuallyHidden } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedVisuallyHidden","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/visually-hidden/component.tsx","actualName":"UnconnectedVisuallyHidden"}},"components-animate":{"id":"components-animate","name":"Animate","path":"../packages/components/src/animate/stories/index.story.tsx","stories":[{"id":"components-animate--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--appear-top-left","name":"Appear Top Left","snippet":"const AppearTopLeft = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--appear-top-right","name":"Appear Top Right","snippet":"const AppearTopRight = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--appear-bottom-left","name":"Appear Bottom Left","snippet":"const AppearBottomLeft = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--appear-bottom-right","name":"Appear Bottom Right","snippet":"const AppearBottomRight = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--loading","name":"Loading","snippet":"const Loading = ( props ) => (\n\t<Animate { ...props } />\n);"},{"id":"components-animate--slide-in","name":"Slide In","snippet":"const SlideIn = ( props ) => (\n\t<Animate { ...props } />\n);"}],"import":"import { Animate, Notice } from \"@wordpress/components\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/gutenberg/gutenberg/packages/components/src/animate/index.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { AnimateProps, GetAnimateOptions } from './types';\n\n/**\n * @param type The animation type\n * @return Default origin\n */\nfunction getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {\n\treturn type === 'appear' ? 'top' : 'left';\n}\n\n/**\n * @param options\n *\n * @return ClassName that applies the animations\n */\nexport function getAnimateClassName( options: GetAnimateOptions ) {\n\tif ( options.type === 'loading' ) {\n\t\treturn 'components-animate__loading';\n\t}\n\n\tconst { type, origin = getDefaultOrigin( type ) } = options;\n\n\tif ( type === 'appear' ) {\n\t\tconst [ yAxis, xAxis = 'center' ] = origin.split( ' ' );\n\t\treturn clsx( 'components-animate__appear', {\n\t\t\t[ 'is-from-' + xAxis ]: xAxis !== 'center',\n\t\t\t[ 'is-from-' + yAxis ]: yAxis !== 'middle',\n\t\t} );\n\t}\n\n\tif ( type === 'slide-in' ) {\n\t\treturn clsx( 'components-animate__slide-in', 'is-from-' + origin );\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Simple interface to introduce animations to components.\n *\n * ```jsx\n * import { Animate, Notice } from '@wordpress/components';\n *\n * const MyAnimatedNotice = () => (\n * \t<Animate type=\"slide-in\" options={ { origin: 'top' } }>\n * \t\t{ ( { className } ) => (\n * \t\t\t<Notice className={ className } status=\"success\">\n * \t\t\t\t<p>Animation finished.</p>\n * \t\t\t</Notice>\n * \t\t) }\n * \t</Animate>\n * );\n * ```\n */\nexport function Animate( { type, options = {}, children }: AnimateProps ) {\n\treturn children( {\n\t\tclassName: getAnimateClassName( {\n\t\t\ttype,\n\t\t\t...options,\n\t\t} as GetAnimateOptions ),\n\t} );\n}\n\nexport default Animate;\n"}},"components-composite":{"id":"components-composite","name":"Composite","path":"../packages/components/src/composite/stories/index.story.tsx","stories":[{"id":"components-composite--default","name":"Default","snippet":"const Default = () => <Composite>(<>\n <Composite.Item>Item one</Composite.Item>\n <Composite.Item>Item two</Composite.Item>\n <Composite.Item>Item three</Composite.Item>\n </>)</Composite>;"},{"id":"components-composite--groups","name":"Groups","snippet":"const Groups = () => <Composite>(<>\n <Composite.Group>\n <Composite.GroupLabel>Group one</Composite.GroupLabel>\n <Composite.Item>Item 1.1</Composite.Item>\n <Composite.Item>Item 1.2</Composite.Item>\n </Composite.Group>\n <Composite.Group>\n <Composite.GroupLabel>Group two</Composite.GroupLabel>\n <Composite.Item>Item 2.1</Composite.Item>\n <Composite.Item>Item 2.1</Composite.Item>\n </Composite.Group>\n </>)</Composite>;"},{"id":"components-composite--grid","name":"Grid","snippet":"const Grid = () => <Composite role=\"grid\" aria-label=\"Composite\">(<>\n <Composite.Row role=\"row\">\n <Composite.Item role=\"gridcell\">Item A1</Composite.Item>\n <Composite.Item role=\"gridcell\">Item A2</Composite.Item>\n <Composite.Item role=\"gridcell\">Item A3</Composite.Item>\n </Composite.Row>\n <Composite.Row role=\"row\">\n <Composite.Item role=\"gridcell\">Item B1</Composite.Item>\n <Composite.Item role=\"gridcell\">Item B2</Composite.Item>\n <Composite.Item role=\"gridcell\">Item B3</Composite.Item>\n </Composite.Row>\n <Composite.Row role=\"row\">\n <Composite.Item role=\"gridcell\">Item C1</Composite.Item>\n <Composite.Item role=\"gridcell\">Item C2</Composite.Item>\n <Composite.Item role=\"gridcell\">Item C3</Composite.Item>\n </Composite.Row>\n </>)</Composite>;"},{"id":"components-composite--hover","name":"Hover","snippet":"const Hover = () => <Composite>(<>\n <Composite.Hover render={ <Composite.Item /> }>\n Hover item one\n </Composite.Hover>\n <Composite.Hover render={ <Composite.Item /> }>\n Hover item two\n </Composite.Hover>\n <Composite.Hover render={ <Composite.Item /> }>\n Hover item three\n </Composite.Hover>\n </>)</Composite>;"},{"id":"components-composite--typeahead","name":"Typeahead","snippet":"const Typeahead = () => <Composite render={<Composite.Typeahead />}>(<>\n <Composite.Item>Apple</Composite.Item>\n <Composite.Item>Banana</Composite.Item>\n <Composite.Item>Peach</Composite.Item>\n </>)</Composite>;"},{"id":"components-composite--with-slot-fill","name":"With Slot Fill","snippet":"const WithSlotFill = () => <Composite>(<>\n <Composite.Item>Item one (direct child)</Composite.Item>\n <Slot />\n <Composite.Item>Item four (direct child)</Composite.Item>\n </>)</Composite>;"},{"id":"components-composite--with-tooltips","name":"With Tooltips","snippet":"const WithTooltips = () => <Composite>(<>\n <Tooltip text=\"Tooltip one\">\n <Composite.Item>Item one</Composite.Item>\n </Tooltip>\n <Tooltip text=\"Tooltip two\">\n <Composite.Item>Item two</Composite.Item>\n </Tooltip>\n <Tooltip text=\"Tooltip three\">\n <Composite.Item>Item three</Composite.Item>\n </Tooltip>\n </>)</Composite>;","description":"Combining the `Tooltip` and `Composite` component has a few caveats. And while there are a few ways to compose these two components, our recommendation is to render `Composite.Item` as a child of `Tooltip`. ```jsx // 🔴 Does not work <Composite.Item render={ <Tooltip text=\"Tooltip\"> <button>Item</button> </Tooltip> } /> // 🟢 Good <Tooltip text=\"Tooltip one\"> <Composite.Item> Item one </Composite.Item> </Tooltip> ```"}],"import":"import { Composite, Provider as SlotFillProvider, Tooltip } from \"@wordpress/components\";","jsDocTags":{"example":[" ```jsx import { Composite } from '@wordpress/components'; <Composite> <Composite.Item>Item 1</Composite.Item> <Composite.Item>Item 2</Composite.Item> </Composite> ```"]},"description":"Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite) role, which provides a single tab stop on the page and arrow key navigation through the focusable descendants.","reactDocgen":{"description":"Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\nrole, which provides a single tab stop on the page and arrow key navigation\nthrough the focusable descendants.\n\n@example\n```jsx\nimport { Composite } from '@wordpress/components';\n\n<Composite>\n <Composite.Item>Item 1</Composite.Item>\n <Composite.Item>Item 2</Composite.Item>\n</Composite>\n```","methods":[],"displayName":"Composite","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/composite/index.tsx","actualName":"Composite","exportName":"Composite","props":{"focusLoop":{"defaultValue":{"value":"false","computed":false},"required":false},"focusWrap":{"defaultValue":{"value":"false","computed":false},"required":false},"focusShift":{"defaultValue":{"value":"false","computed":false},"required":false},"virtualFocus":{"defaultValue":{"value":"false","computed":false},"required":false},"orientation":{"defaultValue":{"value":"'both'","computed":false},"required":false},"rtl":{"defaultValue":{"value":"isRTL()","computed":true},"required":false},"disabled":{"defaultValue":{"value":"false","computed":false},"required":false}}}},"components-disabled":{"id":"components-disabled","name":"Disabled","path":"../packages/components/src/disabled/stories/index.story.tsx","stories":[{"id":"components-disabled--default","name":"Default","snippet":"const Default = () => {\n return (\n <Disabled isDisabled>\n <Form />\n </Disabled>\n );\n};"},{"id":"components-disabled--content-editable","name":"Content Editable","snippet":"const ContentEditable = () => {\n return (\n <Disabled isDisabled>\n <div contentEditable tabIndex={ 0 } suppressContentEditableWarning>contentEditable\n </div>\n </Disabled>\n );\n};"}],"import":"import { Disabled, SelectControl, TextareaControl, TextControl, VStack } from \"@wordpress/components\";","jsDocTags":{"see":["https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert ```jsx import { Button, Disabled, TextControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDisabled = () => { const [ isDisabled, setIsDisabled ] = useState( true ); let input = ( <TextControl __next40pxDefaultSize label=\"Input\" onChange={ () => {} } /> ); if ( isDisabled ) { input = <Disabled>{ input }</Disabled>; } const toggleDisabled = () => { setIsDisabled( ( state ) => ! state ); }; return ( <div> { input } <Button variant=\"primary\" onClick={ toggleDisabled }> Toggle Disabled </Button> </div> ); }; ```"]},"description":"`Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction. _Note: this component may not behave as expected in browsers that don't support the `inert` HTML attribute. We recommend adding the official WICG polyfill when using this component in your project._","reactDocgen":{"description":"`Disabled` is a component which disables descendant tabbable elements and\nprevents pointer interaction.\n\n_Note: this component may not behave as expected in browsers that don't\nsupport the `inert` HTML attribute. We recommend adding the official WICG\npolyfill when using this component in your project._\n\n@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n\n```jsx\nimport { Button, Disabled, TextControl } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyDisabled = () => {\n\tconst [ isDisabled, setIsDisabled ] = useState( true );\n\nlet input = (\n\t<TextControl\n\t\t__next40pxDefaultSize\n\t\tlabel=\"Input\"\n\t\tonChange={ () => {} }\n\t/>\n);\n\tif ( isDisabled ) {\n\t\tinput = <Disabled>{ input }</Disabled>;\n\t}\n\n\tconst toggleDisabled = () => {\n\t\tsetIsDisabled( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<div>\n\t\t\t{ input }\n\t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n\t\t\t\tToggle Disabled\n\t\t\t</Button>\n\t\t</div>\n\t);\n};\n```","methods":[],"displayName":"Disabled","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/disabled/index.tsx","actualName":"Disabled","exportName":"default","props":{"isDisabled":{"defaultValue":{"value":"true","computed":false},"required":false}}}},"components-draggable":{"id":"components-draggable","name":"Draggable","path":"../packages/components/src/draggable/stories/index.story.tsx","stories":[{"id":"components-draggable--default","name":"Default","snippet":"const Default = () => {\n const [ isDragging, setDragging ] = useState( false );\n const instanceId = useInstanceId( DefaultTemplate );\n\n return (\n <div>\n <p\n style={ {\n\t\t\t\t\tpadding: '1em',\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\tbackgroundColor: 'whitesmoke',\n\t\t\t\t} }>Is Dragging? { isDragging ? 'Yes' : 'No!' }\n </p>\n <div\n style={ {\n\t\t\t\t\tzIndex: 100,\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t} }>\n <div\n id={ `draggable-example-box-${ instanceId }` }\n style={ {\n\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t} }>\n <Draggable\n onDragStart={fn()}\n onDragEnd={fn()}\n onDragOver={fn()}\n elementId={ `draggable-example-box-${ instanceId }` }>\n { ( { onDraggableStart, onDraggableEnd } ) => {\n\t\t\t\t\t\t\tconst handleOnDragStart = ( event: DragEvent ) => {\n\t\t\t\t\t\t\t\tsetDragging( true );\n\t\t\t\t\t\t\t\tonDraggableStart( event );\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tconst handleOnDragEnd = ( event: DragEvent ) => {\n\t\t\t\t\t\t\t\tsetDragging( false );\n\t\t\t\t\t\t\t\tonDraggableEnd( event );\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tonDragStart={ handleOnDragStart }\n\t\t\t\t\t\t\t\t\tonDragEnd={ handleOnDragEnd }\n\t\t\t\t\t\t\t\t\tdraggable\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t\t\t\theight: 100,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ddd',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon={ more } />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n </Draggable>\n </div>\n </div>\n </div>\n );\n};"},{"id":"components-draggable--append-element-to-owner-document","name":"Append Element To Owner Document","snippet":"const AppendElementToOwnerDocument = () => {\n const [ isDragging, setDragging ] = useState( false );\n const instanceId = useInstanceId( DefaultTemplate );\n\n return (\n <div>\n <p\n style={ {\n\t\t\t\t\tpadding: '1em',\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\tbackgroundColor: 'whitesmoke',\n\t\t\t\t} }>Is Dragging? { isDragging ? 'Yes' : 'No!' }\n </p>\n <div\n style={ {\n\t\t\t\t\tzIndex: 100,\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t} }>\n <div\n id={ `draggable-example-box-${ instanceId }` }\n style={ {\n\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t} }>\n <Draggable\n onDragStart={fn()}\n onDragEnd={fn()}\n onDragOver={fn()}\n appendToOwnerDocument\n elementId={ `draggable-example-box-${ instanceId }` }>\n { ( { onDraggableStart, onDraggableEnd } ) => {\n\t\t\t\t\t\t\tconst handleOnDragStart = ( event: DragEvent ) => {\n\t\t\t\t\t\t\t\tsetDragging( true );\n\t\t\t\t\t\t\t\tonDraggableStart( event );\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tconst handleOnDragEnd = ( event: DragEvent ) => {\n\t\t\t\t\t\t\t\tsetDragging( false );\n\t\t\t\t\t\t\t\tonDraggableEnd( event );\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tonDragStart={ handleOnDragStart }\n\t\t\t\t\t\t\t\t\tonDragEnd={ handleOnDragEnd }\n\t\t\t\t\t\t\t\t\tdraggable\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\t\t\t\t\theight: 100,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ddd',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon={ more } />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n </Draggable>\n </div>\n </div>\n </div>\n );\n};","description":"`appendToOwnerDocument` is used to append the element being dragged to the body of the owner document. This is useful when the element being dragged should not receive styles from its parent. For example, when the element's parent sets a `z-index` value that would cause the dragged element to be rendered behind other elements."}],"import":"import { Draggable } from \"@wordpress/components\";\nimport { Icon } from \"@wordpress/icons\";","jsDocTags":{},"description":"`Draggable` is a Component that provides a way to set up a cross-browser (including IE) customizable drag image and the transfer data for the drag event. It decouples the drag handle and the element to drag: use it by wrapping the component that will become the drag handle and providing the DOM ID of the element to drag. Note that the drag handle needs to declare the `draggable=\"true\"` property and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable` takes care of the logic to setup the drag image and the transfer data, but is not concerned with creating an actual DOM element that is draggable. ```jsx import { Draggable, Panel, PanelBody } from '@wordpress/components'; import { Icon, more } from '@wordpress/icons'; const MyDraggable = () => ( <div id=\"draggable-panel\"> <Panel header=\"Draggable panel\"> <PanelBody> <Draggable elementId=\"draggable-panel\" transferData={ {} }> { ( { onDraggableStart, onDraggableEnd } ) => ( <div className=\"example-drag-handle\" draggable onDragStart={ onDraggableStart } onDragEnd={ onDraggableEnd } > <Icon icon={ more } /> </div> ) } </Draggable> </PanelBody> </Panel> </div> ); ```","reactDocgen":{"description":"`Draggable` is a Component that provides a way to set up a cross-browser\n(including IE) customizable drag image and the transfer data for the drag\nevent. It decouples the drag handle and the element to drag: use it by\nwrapping the component that will become the drag handle and providing the DOM\nID of the element to drag.\n\nNote that the drag handle needs to declare the `draggable=\"true\"` property\nand bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\nhandlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\ntakes care of the logic to setup the drag image and the transfer data, but is\nnot concerned with creating an actual DOM element that is draggable.\n\n```jsx\nimport { Draggable, Panel, PanelBody } from '@wordpress/components';\nimport { Icon, more } from '@wordpress/icons';\n\nconst MyDraggable = () => (\n <div id=\"draggable-panel\">\n <Panel header=\"Draggable panel\">\n <PanelBody>\n <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n { ( { onDraggableStart, onDraggableEnd } ) => (\n <div\n className=\"example-drag-handle\"\n draggable\n onDragStart={ onDraggableStart }\n onDragEnd={ onDraggableEnd }\n >\n <Icon icon={ more } />\n </div>\n ) }\n </Draggable>\n </PanelBody>\n </Panel>\n </div>\n);\n```","methods":[],"displayName":"Draggable","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/draggable/index.tsx","actualName":"Draggable","exportName":"Draggable","props":{"children":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( props: {\n\t/**\n\t * `onDragStart` handler.\n\t */\n\tonDraggableStart: ( event: DragEvent ) => void;\n\t/**\n\t * `onDragEnd` handler.\n\t */\n\tonDraggableEnd: ( event: DragEvent ) => void;\n} ) => React.JSX.Element | null","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * `onDragStart` handler.\n\t */\n\tonDraggableStart: ( event: DragEvent ) => void;\n\t/**\n\t * `onDragEnd` handler.\n\t */\n\tonDraggableEnd: ( event: DragEvent ) => void;\n}","signature":{"properties":[{"key":"onDraggableStart","value":{"name":"signature","type":"function","raw":"( event: DragEvent ) => void","signature":{"arguments":[{"type":{"name":"DragEvent"},"name":"event"}],"return":{"name":"void"}},"required":true},"description":"`onDragStart` handler."},{"key":"onDraggableEnd","value":{"name":"signature","type":"function","raw":"( event: DragEvent ) => void","signature":{"arguments":[{"type":{"name":"DragEvent"},"name":"event"}],"return":{"name":"void"}},"required":true},"description":"`onDragEnd` handler."}]}},"name":"props"}],"return":{"name":"union","raw":"React.JSX.Element | null","elements":[{"name":"React.JSX.Element"},{"name":"null"}]}}},"description":"Children."},"appendToOwnerDocument":{"required":false,"tsType":{"name":"boolean"},"description":"Whether to append the cloned element to the `ownerDocument` body.\nBy default, elements sourced by id are appended to the element's wrapper.\n\n@default false","defaultValue":{"value":"false","computed":false}},"cloneClassname":{"required":false,"tsType":{"name":"string"},"description":"Classname for the cloned element."},"elementId":{"required":true,"tsType":{"name":"string"},"description":"The HTML id of the element to clone on drag"},"onDragEnd":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( event: DragEvent ) => void","signature":{"arguments":[{"type":{"name":"DragEvent"},"name":"event"}],"return":{"name":"void"}}},"description":"A function called when dragging ends. This callback receives the `event`\nobject from the `dragend` event as its first parameter."},"onDragOver":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( event: DragEvent ) => void","signature":{"arguments":[{"type":{"name":"DragEvent"},"name":"event"}],"return":{"name":"void"}}},"description":"A function called when the element being dragged is dragged over a valid\ndrop target. This callback receives the `event` object from the\n`dragover` event as its first parameter."},"onDragStart":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( event: DragEvent ) => void","signature":{"arguments":[{"type":{"name":"DragEvent"},"name":"event"}],"return":{"name":"void"}}},"description":"A function called when dragging starts. This callback receives the\n`event` object from the `dragstart` event as its first parameter."},"transferData":{"required":true,"tsType":{"name":"unknown"},"description":"Arbitrary data object attached to the drag and drop event."},"__experimentalTransferDataType":{"required":false,"tsType":{"name":"string"},"description":"The transfer data type to set.\n\n@default 'text'","defaultValue":{"value":"'text'","computed":false}},"__experimentalDragComponent":{"required":false,"tsType":{"name":"ReactNode"},"description":"Component to show when dragging."}}}},"components-keyboardshortcuts":{"id":"components-keyboardshortcuts","name":"KeyboardShortcuts","path":"../packages/components/src/keyboard-shortcuts/stories/index.story.tsx","stories":[{"id":"components-keyboardshortcuts--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<KeyboardShortcuts { ...props } />\n);"}],"import":"import { KeyboardShortcuts } from \"@wordpress/components\";","jsDocTags":{},"description":"`KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element. When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document. It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings. ```jsx import { KeyboardShortcuts } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyKeyboardShortcuts = () => { const [ isAllSelected, setIsAllSelected ] = useState( false ); const selectAll = () => { setIsAllSelected( true ); }; return ( <div> <KeyboardShortcuts shortcuts={ { 'mod+a': selectAll, } } /> [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' } </div> ); }; ```","reactDocgen":{"description":"`KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.\n\nWhen passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.\n\nIt uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.\n\n```jsx\nimport { KeyboardShortcuts } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyKeyboardShortcuts = () => {\n\tconst [ isAllSelected, setIsAllSelected ] = useState( false );\n\tconst selectAll = () => {\n\t\tsetIsAllSelected( true );\n\t};\n\n\treturn (\n\t\t<div>\n\t\t\t<KeyboardShortcuts\n\t\t\t\tshortcuts={ {\n\t\t\t\t\t'mod+a': selectAll,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }\n\t\t</div>\n\t);\n};\n```","methods":[],"displayName":"KeyboardShortcuts","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/keyboard-shortcuts/index.tsx","actualName":"KeyboardShortcuts","exportName":"default","props":{"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"Elements to render, upon whom key events are to be monitored."},"shortcuts":{"required":true,"tsType":{"name":"Record","elements":[{"name":"string"},{"name":"intersection['callback']","raw":"KeyboardShortcutProps[ 'callback' ]"}],"raw":"Record< string, KeyboardShortcutProps[ 'callback' ] >"},"description":"An object of shortcut bindings, where each key is a keyboard combination,\nthe value of which is the callback to be invoked when the key combination is pressed.\n\nThe value of each shortcut should be a consistent function reference, not an anonymous function.\nOtherwise, the callback will not be correctly unbound when the component unmounts.\n\nThe `KeyboardShortcuts` component will not update to reflect a changed `shortcuts` prop.\nIf you need to change shortcuts, mount a separate `KeyboardShortcuts` element,\nwhich can be achieved by assigning a unique `key` prop.\n\n@see {@link https://craig.is/killing/mice Mousetrap documentation}"},"bindGlobal":{"required":false,"tsType":{"name":"intersection['bindGlobal']","raw":"KeyboardShortcutProps[ 'bindGlobal' ]"},"description":"By default, a callback will not be invoked if the key combination occurs in an editable field.\nPass `bindGlobal` as `true` if the key events should be observed globally, including within editable fields.\n\nTip: If you need some but not all keyboard events to be observed globally,\nsimply render two distinct `KeyboardShortcuts` elements, one with and one without the `bindGlobal` prop."},"eventName":{"required":false,"tsType":{"name":"intersection['eventName']","raw":"KeyboardShortcutProps[ 'eventName' ]"},"description":"By default, a callback is invoked in response to the `keydown` event.\nTo override this, pass `eventName` with the name of a specific keyboard event."}}}},"components-resizablebox":{"id":"components-resizablebox","name":"ResizableBox","path":"../packages/components/src/resizable-box/stories/index.story.tsx","stories":[{"id":"components-resizablebox--default","name":"Default","snippet":"const Default = ( {\n\tonResizeStop,\n\t...props\n} ) => {\n\tconst [ { height, width }, setAttributes ] = useState( {\n\t\theight: 200,\n\t\twidth: 400,\n\t} );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\t{ ...props }\n\t\t\tsize={ {\n\t\t\t\theight,\n\t\t\t\twidth,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\tonResizeStop?.( event, direction, elt, delta );\n\t\t\t\tsetAttributes( {\n\t\t\t\t\theight: height + delta.height,\n\t\t\t\t\twidth: width + delta.width,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-resizablebox--disabled-directions","name":"Disabled Directions","snippet":"const DisabledDirections = ( {\n\tonResizeStop,\n\t...props\n} ) => {\n\tconst [ { height, width }, setAttributes ] = useState( {\n\t\theight: 200,\n\t\twidth: 400,\n\t} );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\t{ ...props }\n\t\t\tsize={ {\n\t\t\t\theight,\n\t\t\t\twidth,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\tonResizeStop?.( event, direction, elt, delta );\n\t\t\t\tsetAttributes( {\n\t\t\t\t\theight: height + delta.height,\n\t\t\t\t\twidth: width + delta.width,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n};","description":"The `enable` prop can be used to disable resizing in specific directions."}],"import":"import { ResizableBox } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ResizableBox","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/resizable-box/index.tsx","actualName":"ResizableBox","exportName":"ResizableBox","props":{"children":{"required":true,"tsType":{"name":"ReactNode"},"description":""},"showHandle":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"true","computed":false}},"__experimentalShowTooltip":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"__experimentalTooltipProps":{"required":false,"tsType":{"name":"Parameters[0]","raw":"Parameters< typeof ResizeTooltip >[ 0 ]"},"description":"","defaultValue":{"value":"{}","computed":false}}}}},"components-sandbox":{"id":"components-sandbox","name":"SandBox","path":"../packages/components/src/sandbox/stories/index.story.tsx","stories":[{"id":"components-sandbox--default","name":"Default","snippet":"const Default = () => <SandBox onFocus={fn()} html=\"<p>Arbitrary HTML content</p>\" />;"}],"import":"import { SandBox } from \"@wordpress/components\";","jsDocTags":{},"description":"This component provides an isolated environment for arbitrary HTML via iframes. ```jsx import { SandBox } from '@wordpress/components'; const MySandBox = () => ( <SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" /> ); ```","reactDocgen":{"description":"This component provides an isolated environment for arbitrary HTML via iframes.\n\n```jsx\nimport { SandBox } from '@wordpress/components';\n\nconst MySandBox = () => (\n\t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n);\n```","methods":[],"displayName":"SandBox","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/sandbox/index.tsx","actualName":"SandBox","exportName":"default","props":{"html":{"required":false,"tsType":{"name":"string"},"description":"The HTML to render in the body of the iframe document.\n\n@default ''","defaultValue":{"value":"''","computed":false}},"title":{"required":false,"tsType":{"name":"string"},"description":"The `<title>` of the iframe document.\n\n@default ''","defaultValue":{"value":"''","computed":false}},"type":{"required":false,"tsType":{"name":"string"},"description":"The CSS class name to apply to the `<html>` and `<body>` elements of the iframe."},"styles":{"required":false,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":"An array of CSS strings to inject into the `<head>` of the iframe document.\n\n@default []","defaultValue":{"value":"[]","computed":false}},"scripts":{"required":false,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":"An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.\n\n@default []","defaultValue":{"value":"[]","computed":false}},"onFocus":{"required":false,"tsType":{"name":"ReactDOMAttributes['onFocus']","raw":"React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]"},"description":"The `onFocus` callback for the iframe."},"tabIndex":{"required":false,"tsType":{"name":"HTMLElement['tabIndex']","raw":"HTMLElement[ 'tabIndex' ]"},"description":"The `tabindex` the iframe should receive.\n\n@default 0"}}}},"components-scrolllock":{"id":"components-scrolllock","name":"ScrollLock","path":"../packages/components/src/scroll-lock/stories/index.story.tsx","stories":[{"id":"components-scrolllock--default","name":"Default","snippet":"const Default = () => {\n\tconst [ isScrollLocked, setScrollLocked ] = useState( false );\n\tconst toggleLock = () => setScrollLocked( ! isScrollLocked );\n\n\treturn (\n\t\t<div style={ { height: 1000 } }>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\theight: 240,\n\t\t\t\t\tborder: '1px solid lightgray',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<StripedBackground>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tStart scrolling down. Once you scroll to the end of this\n\t\t\t\t\t\tcontainer with the stripes, the rest of the page will\n\t\t\t\t\t\tcontinue scrolling. <code>ScrollLock</code> prevents\n\t\t\t\t\t\tthis &quot;scroll bleed&quot; from happening.\n\t\t\t\t\t</div>\n\t\t\t\t\t<ToggleContainer>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ toggleLock }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle Scroll Lock\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ isScrollLocked && <ScrollLock /> }\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tScroll locked:{ ' ' }\n\t\t\t\t\t\t\t<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</ToggleContainer>\n\t\t\t\t</StripedBackground>\n\t\t\t</div>\n\t\t</div>\n\t);\n};"}],"import":"import { Button, ScrollLock } from \"@wordpress/components\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/gutenberg/gutenberg/packages/components/src/scroll-lock/index.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\n\nfunction setLocked( locked: boolean ) {\n\tconst scrollingElement = document.scrollingElement || document.body;\n\n\tif ( locked ) {\n\t\tpreviousScrollTop = scrollingElement.scrollTop;\n\t}\n\n\tconst methodName = locked ? 'add' : 'remove';\n\tscrollingElement.classList[ methodName ]( 'lockscroll' );\n\n\t// Adding the class to the document element seems to be necessary in iOS.\n\tdocument.documentElement.classList[ methodName ]( 'lockscroll' );\n\n\tif ( ! locked ) {\n\t\tscrollingElement.scrollTop = previousScrollTop;\n\t}\n}\n\nlet lockCounter = 0;\n\n/**\n * ScrollLock is a content-free React component for declaratively preventing\n * scroll bleed from modal UI to the page body. This component applies a\n * `lockscroll` class to the `document.documentElement` and\n * `document.scrollingElement` elements to stop the body from scrolling. When it\n * is present, the lock is applied.\n *\n * ```jsx\n * import { ScrollLock, Button } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyScrollLock = () => {\n * const [ isScrollLocked, setIsScrollLocked ] = useState( false );\n *\n * const toggleLock = () => {\n * setIsScrollLocked( ( locked ) => ! locked ) );\n * };\n *\n * return (\n * <div>\n * <Button variant=\"secondary\" onClick={ toggleLock }>\n * Toggle scroll lock\n * </Button>\n * { isScrollLocked && <ScrollLock /> }\n * <p>\n * Scroll locked:\n * <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n * </p>\n * </div>\n * );\n * };\n * ```\n */\nexport function ScrollLock(): null {\n\tuseEffect( () => {\n\t\tif ( lockCounter === 0 ) {\n\t\t\tsetLocked( true );\n\t\t}\n\n\t\t++lockCounter;\n\n\t\treturn () => {\n\t\t\tif ( lockCounter === 1 ) {\n\t\t\t\tsetLocked( false );\n\t\t\t}\n\n\t\t\t--lockCounter;\n\t\t};\n\t}, [] );\n\n\treturn null;\n}\n\nexport default ScrollLock;\n"}},"components-shortcut":{"id":"components-shortcut","name":"Shortcut","path":"../packages/components/src/shortcut/stories/index.story.tsx","stories":[{"id":"components-shortcut--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <Shortcut shortcut=\"Ctrl + S\" { ...props } />;\n};"},{"id":"components-shortcut--with-aria-label","name":"With Aria Label","snippet":"const WithAriaLabel = ( props ) => {\n\treturn <Shortcut shortcut=\"Ctrl + S\" { ...props } />;\n};"}],"import":"import { Shortcut } from \"@wordpress/components\";","jsDocTags":{},"description":"Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed. ```jsx import { Shortcut } from '@wordpress/components'; const MyShortcut = () => { return ( <Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} /> ); }; ```","reactDocgen":{"description":"Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.\n\n```jsx\nimport { Shortcut } from '@wordpress/components';\n\nconst MyShortcut = () => {\n\treturn (\n\t\t<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />\n\t);\n};\n```","methods":[],"displayName":"Shortcut","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/shortcut/index.tsx","actualName":"Shortcut","exportName":"default","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"Classname to apply to the shortcut."},"shortcut":{"required":false,"tsType":{"name":"union","raw":"string | { display: string; ariaLabel: string }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ display: string; ariaLabel: string }","signature":{"properties":[{"key":"display","value":{"name":"string","required":true}},{"key":"ariaLabel","value":{"name":"string","required":true}}]}}]},"description":"Shortcut configuration"}}}},"components-slotfill":{"id":"components-slotfill","name":"Slot","path":"../packages/components/src/slot-fill/stories/index.story.tsx","stories":[{"id":"components-slotfill--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<h2>Profile</h2>\n\t\t\t<p>\n\t\t\t\tName: <Slot { ...props } name=\"name\" />\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tAge: <Slot { ...props } name=\"age\" />\n\t\t\t</p>\n\t\t\t<Fill name=\"name\">Grace</Fill>\n\t\t\t<Fill name=\"age\">33</Fill>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-slotfill--with-fill-props","name":"With Fill Props","snippet":"const WithFillProps = ( props ) => {\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<h2>Profile</h2>\n\t\t\t<p>\n\t\t\t\tName:{ ' ' }\n\t\t\t\t<Slot\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tname=\"name\"\n\t\t\t\t\tfillProps={ { name: 'Grace' } }\n\t\t\t\t/>\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tAge: <Slot { ...props } name=\"age\" fillProps={ { age: 33 } } />\n\t\t\t</p>\n\n\t\t\t<Fill name=\"name\">{ ( fillProps ) => fillProps.name }</Fill>\n\t\t\t<Fill name=\"age\">{ ( fillProps ) => fillProps.age }</Fill>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-slotfill--with-slot-children","name":"With Slot Children","snippet":"const WithSlotChildren = ( props ) => {\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<h2>Profile</h2>\n\t\t\t<p>\n\t\t\t\tName:\n\t\t\t\t{ /* @ts-expect-error Not supported children for `<Slot />` when `bubblesVirtually` is true. */ }\n\t\t\t\t<Slot { ...props } name=\"name\">\n\t\t\t\t\t{ ( fills ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span style={ { color: 'red' } }>{ fills }</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t</Slot>\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tAge:\n\t\t\t\t{ /* @ts-expect-error Not support children for `<Slot />` when `bubblesVirtually` is true. */ }\n\t\t\t\t<Slot { ...props } name=\"age\">\n\t\t\t\t\t{ ( fills ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span style={ { color: 'red' } }>{ fills }</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t</Slot>\n\t\t\t</p>\n\t\t\t<Fill name=\"name\">Alice</Fill>\n\t\t\t<Fill name=\"age\">18</Fill>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-slotfill--with-context","name":"With Context","snippet":"const WithContext = ( props ) => {\n\tconst Context = createContext< string | number >( '' );\n\tconst ContextFill = ( { name }: { name: string } ) => {\n\t\tconst value = useContext( Context );\n\t\treturn <Fill name={ name }>{ value }</Fill>;\n\t};\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<h2>Profile</h2>\n\t\t\t<p>\n\t\t\t\tName: <Slot { ...props } name=\"name\" />\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tAge: <Slot { ...props } name=\"age\" />\n\t\t\t</p>\n\t\t\t<Context.Provider value=\"Grace\">\n\t\t\t\t<ContextFill name=\"name\" />\n\t\t\t</Context.Provider>\n\t\t\t<Context.Provider value={ 33 }>\n\t\t\t\t<ContextFill name=\"age\" />\n\t\t\t</Context.Provider>\n\t\t</SlotFillProvider>\n\t);\n};"}],"import":"import { Fill, Slot, Provider as SlotFillProvider } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Slot","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/slot-fill/index.tsx","actualName":"Slot","exportName":"Slot"}},"components-theme":{"id":"components-theme","name":"Theme","path":"../packages/components/src/theme/stories/index.story.tsx","stories":[{"id":"components-theme--default","name":"Default","snippet":"const Default = () => <Theme>\n <Button __next40pxDefaultSize variant=\"primary\">Hello\n </Button>\n</Theme>;"},{"id":"components-theme--nested","name":"Nested","snippet":"const Nested = () => <Theme accent=\"crimson\">\n <Button __next40pxDefaultSize variant=\"primary\">Outer theme (hardcoded)\n </Button>\n <Theme accent=\"blue\">\n <Button __next40pxDefaultSize variant=\"primary\">Inner theme (set via Storybook controls)\n </Button>\n </Theme>\n</Theme>;"},{"id":"components-theme--color-scheme","name":"Color Scheme","snippet":"const ColorScheme = ( {\n\taccent,\n\tbackground,\n} ) => {\n\tconst { colors } = generateThemeVariables( { accent, background } );\n\tconst { gray, ...otherColors } = colors;\n\t/* eslint-disable @typescript-eslint/no-unused-vars */\n\tconst contrastIssues = Object.entries(\n\t\tcheckContrasts( { accent, background }, colors )\n\t).filter( ( [ _, error ] ) => !! error );\n\t/* eslint-enable @typescript-eslint/no-unused-vars */\n\n\tconst Chip = ( { color, name }: { color: string; name: string } ) => (\n\t\t<HStack justify=\"flex-start\">\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\theight: '1.25em',\n\t\t\t\t\twidth: 40,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div style={ { fontSize: 14 } }>{ name }</div>\n\t\t</HStack>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ Object.entries( otherColors ).map( ( [ key, value ] ) => (\n\t\t\t\t<Chip color={ value } name={ key } key={ key } />\n\t\t\t) ) }\n\t\t\t{ Object.entries( gray as NonNullable< typeof gray > ).map(\n\t\t\t\t( [ key, value ] ) => (\n\t\t\t\t\t<Chip\n\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\tname={ `gray ${ key }` }\n\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t) }\n\t\t\t{ !! contrastIssues.length && (\n\t\t\t\t<>\n\t\t\t\t\t<h2>Contrast issues</h2>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{ contrastIssues.map( ( [ key, error ] ) => (\n\t\t\t\t\t\t\t<li key={ key }>{ error }</li>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ul>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n};","description":"The rest of the required colors are generated based on the given accent and background colors."}],"import":"import { Button, HStack, Theme } from \"@wordpress/components\";","jsDocTags":{},"description":"`Theme` allows defining theme variables for components in the `@wordpress/components` package. Multiple `Theme` components can be nested in order to override specific theme variables. ```jsx const Example = () => { return ( <Theme accent=\"red\"> <Button variant=\"primary\">I'm red</Button> <Theme accent=\"blue\"> <Button variant=\"primary\">I'm blue</Button> </Theme> </Theme> ); }; ```","reactDocgen":{"description":"`Theme` allows defining theme variables for components in the `@wordpress/components` package.\n\nMultiple `Theme` components can be nested in order to override specific theme variables.\n\n\n```jsx\nconst Example = () => {\n return (\n <Theme accent=\"red\">\n <Button variant=\"primary\">I'm red</Button>\n <Theme accent=\"blue\">\n <Button variant=\"primary\">I'm blue</Button>\n </Theme>\n </Theme>\n );\n};\n```","methods":[],"displayName":"Theme","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/theme/index.tsx","actualName":"Theme","exportName":"default"}},"components-buttongroup":{"id":"components-buttongroup","name":"ButtonGroup","path":"../packages/components/src/button-group/stories/index.story.tsx","stories":[{"id":"components-buttongroup--default","name":"Default","snippet":"const Default = () => <ButtonGroup>(<>\n <Button __next40pxDefaultSize variant=\"primary\">\n Button 1\n </Button>\n <Button __next40pxDefaultSize>Button 2</Button>\n </>)</ButtonGroup>;"}],"import":"import { Button, ButtonGroup } from \"@wordpress/components\";","jsDocTags":{},"description":"ButtonGroup can be used to group any related buttons together. To emphasize related buttons, a group should share a common container. This component is deprecated. Use `ToggleGroupControl` instead.","reactDocgen":{"description":"ButtonGroup can be used to group any related buttons together. To emphasize\nrelated buttons, a group should share a common container.\n\n@deprecated Use `ToggleGroupControl` instead.\n\n```jsx\nimport { Button, ButtonGroup } from '@wordpress/components';\n\nconst MyButtonGroup = () => (\n <ButtonGroup>\n <Button variant=\"primary\">Button 1</Button>\n <Button variant=\"primary\">Button 2</Button>\n </ButtonGroup>\n);\n```","methods":[],"displayName":"ButtonGroup","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/button-group/index.tsx","actualName":"ButtonGroup","exportName":"ButtonGroup"}},"components-composite-unstable":{"id":"components-composite-unstable","name":"UseCompositeStatePlaceholder","path":"../packages/components/src/composite/legacy/stories/index.story.tsx","stories":[{"id":"components-composite-unstable--two-dimensions-with-state-prop","name":"Two Dimensions With State Prop","snippet":"const TwoDimensionsWithStateProp = ( initialState ) => {\n\tconst state = useCompositeState( initialState );\n\n\treturn (\n\t\t<Composite\n\t\t\trole=\"grid\"\n\t\t\tstate={ state }\n\t\t\taria-label=\"Legacy Composite with state prop (two dimensions)\"\n\t\t>\n\t\t\t<CompositeGroup state={ state } role=\"row\">\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem A1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem A2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem A3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t\t<CompositeGroup state={ state } role=\"row\">\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem B1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem B2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem B3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t\t<CompositeGroup state={ state } role=\"row\">\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem C1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem C2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem state={ state } role=\"gridcell\">\n\t\t\t\t\tItem C3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t</Composite>\n\t);\n};"},{"id":"components-composite-unstable--two-dimensions-with-spread-props","name":"Two Dimensions With Spread Props","snippet":"const TwoDimensionsWithSpreadProps = ( initialState ) => {\n\tconst state = useCompositeState( initialState );\n\n\treturn (\n\t\t<Composite\n\t\t\trole=\"grid\"\n\t\t\t{ ...state }\n\t\t\taria-label=\"Legacy Composite with spread props (two dimensions)\"\n\t\t>\n\t\t\t<CompositeGroup { ...state } role=\"row\">\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem A1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem A2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem A3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t\t<CompositeGroup { ...state } role=\"row\">\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem B1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem B2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem B3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t\t<CompositeGroup { ...state } role=\"row\">\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem C1\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem C2\n\t\t\t\t</CompositeItem>\n\t\t\t\t<CompositeItem { ...state } role=\"gridcell\">\n\t\t\t\t\tItem C3\n\t\t\t\t</CompositeItem>\n\t\t\t</CompositeGroup>\n\t\t</Composite>\n\t);\n};"},{"id":"components-composite-unstable--one-dimension-with-state-prop","name":"One Dimension With State Prop","snippet":"const OneDimensionWithStateProp = ( initialState ) => {\n\tconst state = useCompositeState( initialState );\n\n\treturn (\n\t\t<Composite\n\t\t\trole=\"list\"\n\t\t\tstate={ state }\n\t\t\taria-label=\"Legacy Composite with state prop (one dimension)\"\n\t\t>\n\t\t\t<CompositeItem state={ state } role=\"listitem\">\n\t\t\t\tItem 1\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem state={ state } role=\"listitem\">\n\t\t\t\tItem 2\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem state={ state } role=\"listitem\">\n\t\t\t\tItem 3\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem state={ state } role=\"listitem\">\n\t\t\t\tItem 4\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem state={ state } role=\"listitem\">\n\t\t\t\tItem 5\n\t\t\t</CompositeItem>\n\t\t</Composite>\n\t);\n};"},{"id":"components-composite-unstable--one-dimension-with-spread-props","name":"One Dimension With Spread Props","snippet":"const OneDimensionWithSpreadProps = ( initialState ) => {\n\tconst state = useCompositeState( initialState );\n\n\treturn (\n\t\t<Composite\n\t\t\trole=\"list\"\n\t\t\t{ ...state }\n\t\t\taria-label=\"Legacy Composite with spread props (one dimension)\"\n\t\t>\n\t\t\t<CompositeItem { ...state } role=\"listitem\">\n\t\t\t\tItem 1\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem { ...state } role=\"listitem\">\n\t\t\t\tItem 2\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem { ...state } role=\"listitem\">\n\t\t\t\tItem 3\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem { ...state } role=\"listitem\">\n\t\t\t\tItem 4\n\t\t\t</CompositeItem>\n\t\t\t<CompositeItem { ...state } role=\"listitem\">\n\t\t\t\tItem 5\n\t\t\t</CompositeItem>\n\t\t</Composite>\n\t);\n};"}],"import":"import { Composite, CompositeGroup, CompositeItem, UseCompositeStatePlaceholder } from \"@wordpress/components\";","jsDocTags":{},"description":"Renders a composite widget. This unstable component is deprecated. Use `Composite` instead. ```jsx import { __unstableUseCompositeState as useCompositeState, __unstableComposite as Composite, __unstableCompositeItem as CompositeItem, } from '@wordpress/components'; const state = useCompositeState(); <Composite state={ state }> <CompositeItem>Item 1</CompositeItem> <CompositeItem>Item 2</CompositeItem> </Composite>; ```","reactDocgen":{"description":"Renders a composite widget.\n\nThis unstable component is deprecated. Use `Composite` instead.\n\n```jsx\nimport {\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableComposite as Composite,\n\t__unstableCompositeItem as CompositeItem,\n} from '@wordpress/components';\n\nconst state = useCompositeState();\n<Composite state={ state }>\n\t<CompositeItem>Item 1</CompositeItem>\n\t<CompositeItem>Item 2</CompositeItem>\n</Composite>;\n```","methods":[],"displayName":"useCompositeState","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/composite/legacy/stories/utils.tsx","actualName":"UseCompositeStatePlaceholder","exportName":"UseCompositeStatePlaceholder","props":{"baseId":{"required":false,"tsType":{"name":"string"},"description":"ID that will serve as a base for all the items IDs."},"rtl":{"required":false,"tsType":{"name":"boolean"},"description":"Determines how next and previous functions will behave. If `rtl` is set\nto `true`, they will be inverted. This only affects the composite widget\nbehavior. You still need to set `dir=\"rtl\"` on HTML/CSS.\n\n@default false"},"orientation":{"required":false,"tsType":{"name":"union","raw":"'horizontal' | 'vertical'","elements":[{"name":"literal","value":"'horizontal'"},{"name":"literal","value":"'vertical'"}]},"description":"Defines the orientation of the composite widget. If the composite has a\nsingle row or column (one-dimensional), the orientation value determines\nwhich arrow keys can be used to move focus."},"currentId":{"required":false,"tsType":{"name":"string"},"description":"The current focused item `id`."},"loop":{"required":false,"tsType":{"name":"union","raw":"boolean | Orientation","elements":[{"name":"boolean"},{"name":"union","raw":"'horizontal' | 'vertical'","elements":[{"name":"literal","value":"'horizontal'"},{"name":"literal","value":"'vertical'"}]}]},"description":"Determines how focus moves from the start and end of rows and columns.\n\n@default false"},"wrap":{"required":false,"tsType":{"name":"union","raw":"boolean | Orientation","elements":[{"name":"boolean"},{"name":"union","raw":"'horizontal' | 'vertical'","elements":[{"name":"literal","value":"'horizontal'"},{"name":"literal","value":"'vertical'"}]}]},"description":"If enabled, moving to the next item from the last one in a row or column\nwill focus the first item in the next row or column and vice-versa.\n\n** Has effect only on two-dimensional composites. **\n\n@default false"},"shift":{"required":false,"tsType":{"name":"boolean"},"description":"If enabled, moving up or down when there's no next item or the next item\nis disabled will shift to the item right before it.\n\n** Has effect only on two-dimensional composites. **\n\n@default false"},"unstable_virtual":{"required":false,"tsType":{"name":"boolean"},"description":""}}}},"components-navigation":{"id":"components-navigation","name":"Navigation","path":"../packages/components/src/navigation/stories/index.story.tsx","stories":[{"id":"components-navigation--default","name":"Default","snippet":"const _default = () => <Navigation onActivateMenu={fn()} />;"},{"id":"components-navigation--controlled-state","name":"Controlled State","snippet":"const ControlledState = () => <Navigation onActivateMenu={fn()} />;"},{"id":"components-navigation--groups","name":"Groups","snippet":"const Groups = () => <Navigation onActivateMenu={fn()} />;"},{"id":"components-navigation--search","name":"Search","snippet":"const Search = () => <Navigation onActivateMenu={fn()} />;"},{"id":"components-navigation--more-examples","name":"More Examples","snippet":"const MoreExamples = () => <Navigation onActivateMenu={fn()} />;"},{"id":"components-navigation--hide-if-empty","name":"Hide If Empty","snippet":"const HideIfEmpty = () => <Navigation onActivateMenu={fn()} />;"}],"import":"import { Navigation } from \"@wordpress/components\";","jsDocTags":{},"description":"Render a navigation list with optional groupings and hierarchy. This component is deprecated. Consider using `Navigator` instead.","reactDocgen":{"description":"Render a navigation list with optional groupings and hierarchy.\n\n@deprecated Use `Navigator` instead.\n\n```jsx\nimport {\n __experimentalNavigation as Navigation,\n __experimentalNavigationGroup as NavigationGroup,\n __experimentalNavigationItem as NavigationItem,\n __experimentalNavigationMenu as NavigationMenu,\n} from '@wordpress/components';\n\nconst MyNavigation = () => (\n <Navigation>\n <NavigationMenu title=\"Home\">\n <NavigationGroup title=\"Group 1\">\n <NavigationItem item=\"item-1\" title=\"Item 1\" />\n <NavigationItem item=\"item-2\" title=\"Item 2\" />\n </NavigationGroup>\n <NavigationGroup title=\"Group 2\">\n <NavigationItem\n item=\"item-3\"\n navigateToMenu=\"category\"\n title=\"Category\"\n />\n </NavigationGroup>\n </NavigationMenu>\n\n <NavigationMenu\n backButtonLabel=\"Home\"\n menu=\"category\"\n parentMenu=\"root\"\n title=\"Category\"\n >\n <NavigationItem badge=\"1\" item=\"child-1\" title=\"Child 1\" />\n <NavigationItem item=\"child-2\" title=\"Child 2\" />\n </NavigationMenu>\n </Navigation>\n);\n```","methods":[],"displayName":"Navigation","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/navigation/index.tsx","actualName":"Navigation","exportName":"Navigation","props":{"activeItem":{"required":false,"tsType":{"name":"string"},"description":"The active item slug."},"activeMenu":{"required":false,"tsType":{"name":"string"},"description":"The active menu slug.\n\n@default 'root'","defaultValue":{"value":"'root'","computed":false}},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The children components."},"className":{"required":false,"tsType":{"name":"string"},"description":"Optional classname for the component."},"onActivateMenu":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( activeMenuSlug: string ) => void","signature":{"arguments":[{"type":{"name":"string"},"name":"activeMenuSlug"}],"return":{"name":"void"}}},"description":"Callback used to sync the active menu between the external state\nand the Navigation's internal state.","defaultValue":{"value":"() => {}","computed":false}}}}},"components-radiogroup":{"id":"components-radiogroup","name":"RadioGroup","path":"../packages/components/src/radio-group/stories/index.story.tsx","stories":[{"id":"components-radiogroup--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <RadioGroup { ...props } />;\n};"},{"id":"components-radiogroup--disabled","name":"Disabled","snippet":"const Disabled = ( props ) => {\n\treturn <RadioGroup { ...props } />;\n};"},{"id":"components-radiogroup--controlled","name":"Controlled","snippet":"const Controlled = ( {\n\tchecked: checkedProp,\n\tonChange: onChangeProp,\n\t...props\n} ) => {\n\tconst [ checked, setChecked ] =\n\t\tuseState< React.ComponentProps< typeof RadioGroup >[ 'checked' ] >(\n\t\t\tcheckedProp\n\t\t);\n\n\tconst onChange: typeof onChangeProp = ( value ) => {\n\t\tsetChecked( value );\n\t\tonChangeProp?.( value );\n\t};\n\n\treturn (\n\t\t<RadioGroup { ...props } onChange={ onChange } checked={ checked } />\n\t);\n};"}],"import":"import { Radio, RadioGroup } from \"@wordpress/components\";","jsDocTags":{"deprecated":["Use `RadioControl` or `ToggleGroupControl` instead."]},"description":"","reactDocgen":{"description":"@deprecated Use `RadioControl` or `ToggleGroupControl` instead.","methods":[],"displayName":"RadioGroup","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/radio-group/index.tsx","actualName":"RadioGroup","exportName":"RadioGroup"}},"components-alignmentmatrixcontrol":{"id":"components-alignmentmatrixcontrol","name":"AlignmentMatrixControl","path":"../packages/components/src/alignment-matrix-control/stories/index.story.tsx","stories":[{"id":"components-alignmentmatrixcontrol--default","name":"Default","snippet":"const Default = ( {\n\tdefaultValue,\n\tonChange,\n\t...props\n} ) => {\n\tconst [ value, setValue ] =\n\t\tuseState< AlignmentMatrixControlProps[ 'value' ] >();\n\n\treturn (\n\t\t<AlignmentMatrixControl\n\t\t\t{ ...props }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange?.( ...changeArgs );\n\t\t\t} }\n\t\t\tvalue={ value }\n\t\t/>\n\t);\n};"},{"id":"components-alignmentmatrixcontrol--icon-subcomponent","name":"Icon Subcomponent","snippet":"const IconSubcomponent = () => {\n\treturn (\n\t\t<HStack justify=\"flex-start\">\n\t\t\t<Icon icon={ <AlignmentMatrixControl.Icon value=\"top left\" /> } />\n\t\t\t<Icon\n\t\t\t\ticon={ <AlignmentMatrixControl.Icon value=\"center center\" /> }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};"}],"import":"import { AlignmentMatrixControl, HStack } from \"@wordpress/components\";\nimport { Icon } from \"@wordpress/icons\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnforwardedAlignmentMatrixControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/alignment-matrix-control/index.tsx","actualName":"UnforwardedAlignmentMatrixControl","props":{"label":{"defaultValue":{"value":"__( 'Alignment Matrix Control' )","computed":true},"required":false},"defaultValue":{"defaultValue":{"value":"'center center'","computed":false},"required":false},"width":{"defaultValue":{"value":"92","computed":false},"required":false}}}},"components-anglepickercontrol":{"id":"components-anglepickercontrol","name":"AnglePickerControl","path":"../packages/components/src/angle-picker-control/stories/index.story.tsx","stories":[{"id":"components-anglepickercontrol--default","name":"Default","snippet":"const Default = () => {\n const [ angle, setAngle ] = useState< number >( 0 );\n\n const handleChange = ( newValue: number ) => {\n\t\tsetAngle( newValue );\n\t\tonChange( newValue );\n\t};\n\n return <AnglePickerControl value={ angle } onChange={ handleChange } />;\n};"}],"import":"import { AnglePickerControl } from \"@wordpress/components\";","jsDocTags":{},"description":"`AnglePickerControl` is a React component to render a UI that allows users to pick an angle. Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field. ```jsx import { useState } from '@wordpress/element'; import { AnglePickerControl } from '@wordpress/components'; function Example() { const [ angle, setAngle ] = useState( 0 ); return ( <AnglePickerControl value={ angle } onChange={ setAngle } /> ); } ```","reactDocgen":{"description":"`AnglePickerControl` is a React component to render a UI that allows users to\npick an angle. Users can choose an angle in a visual UI with the mouse by\ndragging an angle indicator inside a circle or by directly inserting the\ndesired angle in a text field.\n\n```jsx\nimport { useState } from '@wordpress/element';\nimport { AnglePickerControl } from '@wordpress/components';\n\nfunction Example() {\n const [ angle, setAngle ] = useState( 0 );\n return (\n <AnglePickerControl\n value={ angle }\n onChange={ setAngle }\n />\n );\n}\n```","methods":[],"displayName":"AnglePickerControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/angle-picker-control/index.tsx","actualName":"AnglePickerControl","exportName":"AnglePickerControl"}},"components-borderboxcontrol":{"id":"components-borderboxcontrol","name":"BorderBoxControl","path":"../packages/components/src/border-box-control/stories/index.story.tsx","stories":[{"id":"components-borderboxcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\tconst { onChange, ...otherProps } = props;\n\tconst [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();\n\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderBoxControl\n\t>[ 'onChange' ] = ( newBorders ) => {\n\t\tsetBorders( newBorders );\n\t\tonChange( newBorders );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<BorderBoxControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...otherProps }\n\t\t\t\tonChange={ onChangeMerged }\n\t\t\t\tvalue={ borders }\n\t\t\t/>\n\t\t\t<hr\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginTop: '100px',\n\t\t\t\t\tborderColor: '#ddd',\n\t\t\t\t\tborderStyle: 'solid',\n\t\t\t\t\tborderBottom: 'none',\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<p style={ { color: '#aaa', fontSize: '0.9em' } }>\n\t\t\t\tThe BorderBoxControl is intended to be used within a component\n\t\t\t\tthat will provide reset controls. The button below is only for\n\t\t\t\tconvenience.\n\t\t\t</p>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tonClick={ () => onChangeMerged( undefined ) }\n\t\t\t>\n\t\t\t\tReset\n\t\t\t</Button>\n\t\t</>\n\t);\n};"}],"import":"import { BorderBoxControl, Button } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedBorderBoxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/border-box-control/border-box-control/component.tsx","actualName":"UnconnectedBorderBoxControl"}},"components-bordercontrol":{"id":"components-bordercontrol","name":"BorderControl","path":"../packages/components/src/border-control/stories/index.story.tsx","stories":[{"id":"components-bordercontrol--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ border, setBorder ] = useState< Border >();\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderControl\n\t>[ 'onChange' ] = ( newBorder ) => {\n\t\tsetBorder( newBorder );\n\t\tonChange( newBorder );\n\t};\n\n\treturn (\n\t\t<BorderControl\n\t\t\t__next40pxDefaultSize\n\t\t\tonChange={ onChangeMerged }\n\t\t\tvalue={ border }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};"},{"id":"components-bordercontrol--with-slider","name":"With Slider","snippet":"const WithSlider = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ border, setBorder ] = useState< Border >();\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderControl\n\t>[ 'onChange' ] = ( newBorder ) => {\n\t\tsetBorder( newBorder );\n\t\tonChange( newBorder );\n\t};\n\n\treturn (\n\t\t<BorderControl\n\t\t\t__next40pxDefaultSize\n\t\t\tonChange={ onChangeMerged }\n\t\t\tvalue={ border }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};","description":"Render a slider beside the control."},{"id":"components-bordercontrol--with-slider-custom-width","name":"With Slider (Custom Width)","snippet":"const WithSliderCustomWidth = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ border, setBorder ] = useState< Border >();\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderControl\n\t>[ 'onChange' ] = ( newBorder ) => {\n\t\tsetBorder( newBorder );\n\t\tonChange( newBorder );\n\t};\n\n\treturn (\n\t\t<BorderControl\n\t\t\t__next40pxDefaultSize\n\t\t\tonChange={ onChangeMerged }\n\t\t\tvalue={ border }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};","description":"When rendering with a slider, the `width` prop is useful to customize the width of the number input."},{"id":"components-bordercontrol--is-compact","name":"Is Compact","snippet":"const IsCompact = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ border, setBorder ] = useState< Border >();\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderControl\n\t>[ 'onChange' ] = ( newBorder ) => {\n\t\tsetBorder( newBorder );\n\t\tonChange( newBorder );\n\t};\n\n\treturn (\n\t\t<BorderControl\n\t\t\t__next40pxDefaultSize\n\t\t\tonChange={ onChangeMerged }\n\t\t\tvalue={ border }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};","description":"Restrict the width of the control and prevent it from expanding to take up additional space. When `true`, the `width` prop will be ignored."},{"id":"components-bordercontrol--with-multiple-origins","name":"With Multiple Origins","snippet":"const WithMultipleOrigins = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ border, setBorder ] = useState< Border >();\n\tconst onChangeMerged: ComponentProps<\n\t\ttypeof BorderControl\n\t>[ 'onChange' ] = ( newBorder ) => {\n\t\tsetBorder( newBorder );\n\t\tonChange( newBorder );\n\t};\n\n\treturn (\n\t\t<BorderControl\n\t\t\t__next40pxDefaultSize\n\t\t\tonChange={ onChangeMerged }\n\t\t\tvalue={ border }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};","description":"The `colors` object can contain multiple origins."}],"import":"import { BorderControl } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedBorderControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/border-control/border-control/component.tsx","actualName":"UnconnectedBorderControl"}},"components-boxcontrol":{"id":"components-boxcontrol","name":"BoxControl","path":"../packages/components/src/box-control/stories/index.story.tsx","stories":[{"id":"components-boxcontrol--default","name":"Default","snippet":"const Default = ( props ) => {\n\treturn <BoxControl __next40pxDefaultSize { ...props } />;\n};"},{"id":"components-boxcontrol--controlled","name":"Controlled","snippet":"const Controlled = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-boxcontrol--arbitrary-sides","name":"Arbitrary Sides","snippet":"const ArbitrarySides = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-boxcontrol--single-side","name":"Single Side","snippet":"const SingleSide = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-boxcontrol--axial-controls","name":"Axial Controls","snippet":"const AxialControls = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-boxcontrol--axial-controls-with-single-side","name":"Axial Controls With Single Side","snippet":"const AxialControlsWithSingleSide = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-boxcontrol--control-with-presets","name":"Control With Presets","snippet":"const ControlWithPresets = ( props ) => {\n\tconst [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();\n\n\treturn (\n\t\t<BoxControl\n\t\t\t__next40pxDefaultSize\n\t\t\tvalues={ values }\n\t\t\t{ ...props }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetValues( nextValue );\n\t\t\t\tprops.onChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { BoxControl } from \"@wordpress/components\";","jsDocTags":{},"description":"A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`. ```jsx import { useState } from 'react'; import { BoxControl } from '@wordpress/components'; function Example() { const [ values, setValues ] = useState( { top: '50px', left: '10%', right: '10%', bottom: '50px', } ); return ( <BoxControl __next40pxDefaultSize values={ values } onChange={ setValues } /> ); }; ```","reactDocgen":{"description":"A control that lets users set values for top, right, bottom, and left. Can be\nused as an input control for values like `padding` or `margin`.\n\n```jsx\nimport { useState } from 'react';\nimport { BoxControl } from '@wordpress/components';\n\nfunction Example() {\n const [ values, setValues ] = useState( {\n top: '50px',\n left: '10%',\n right: '10%',\n bottom: '50px',\n } );\n\n return (\n <BoxControl\n __next40pxDefaultSize\n values={ values }\n onChange={ setValues }\n />\n );\n};\n```","methods":[],"displayName":"BoxControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/box-control/index.tsx","actualName":"BoxControl","exportName":"default","props":{"onMouseOver":{"required":false,"tsType":{"name":"intersection['onMouseOver']","raw":"UnitControlProps[ 'onMouseOver' ]"},"description":"@deprecated Pass to the `inputProps` prop instead.\n@ignore"},"onMouseOut":{"required":false,"tsType":{"name":"intersection['onMouseOut']","raw":"UnitControlProps[ 'onMouseOut' ]"},"description":"@deprecated Pass to the `inputProps` prop instead.\n@ignore"},"allowReset":{"required":false,"tsType":{"name":"boolean"},"description":"If this property is true, a button to reset the box control is rendered.\n\n@default true","defaultValue":{"value":"true","computed":false}},"id":{"required":false,"tsType":{"name":"string"},"description":"The id to use as a base for the unique HTML id attribute of the control."},"inputProps":{"required":false,"tsType":{"name":"Omit","elements":[{"name":"intersection","raw":"Pick< InputControlProps, 'size' > &\nOmit< UnitSelectControlProps, 'size' | 'unit' > &\nOmit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {\n\t/**\n\t * If `true`, the unit `<select>` is hidden.\n\t *\n\t * @default false\n\t */\n\tdisableUnits?: boolean;\n\t/**\n\t * If `true`, and the selected unit provides a `default` value, this value is set\n\t * when changing units.\n\t *\n\t * @default false\n\t */\n\tisResetValueOnUnitChange?: boolean;\n\t/**\n\t * Callback when the `unit` changes.\n\t */\n\tonUnitChange?: UnitControlOnChangeCallback;\n\t/**\n\t * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._\n\t *\n\t * @deprecated\n\t */\n\tunit?: string;\n\t/**\n\t * Current value. If passed as a string, the current unit will be inferred from this value.\n\t * For example, a `value` of \"50%\" will set the current unit to `%`.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * Callback when either the quantity or the unit inputs lose focus.\n\t */\n\tonBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t/**\n\t * Callback when either the quantity or the unit inputs gains focus.\n\t */\n\tonFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t/**\n\t * Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t *\n\t * @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n}","elements":[{"name":"Pick","elements":[{"name":"InputControlProps"},{"name":"literal","value":"'size'"}],"raw":"Pick< InputControlProps, 'size' >"},{"name":"Omit","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Whether the control can be focused via keyboard navigation.\n\t *\n\t * @default true\n\t */\n\tisUnitSelectTabbable?: boolean;\n\t/**\n\t * A callback function invoked when the value is changed.\n\t */\n\tonChange?: UnitControlOnChangeCallback;\n\t/**\n\t * The size of the unit select.\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Current unit.\n\t */\n\tunit?: string;\n\t/**\n\t * Available units to select from.\n\t *\n\t * @default CSS_UNITS\n\t */\n\tunits?: WPUnitControlUnit[];\n}","signature":{"properties":[{"key":"isUnitSelectTabbable","value":{"name":"boolean","required":false},"description":"Whether the control can be focused via keyboard navigation.\n\n@default true"},{"key":"onChange","value":{"name":"signature","type":"function","raw":"(\n\tnextValue: string | undefined,\n\textra: { event: SyntheticEvent } & P\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"name":"nextValue"},{"type":{"name":"intersection","raw":"{ event: SyntheticEvent } & P","elements":[{"name":"signature","type":"object","raw":"{ event: SyntheticEvent }","signature":{"properties":[{"key":"event","value":{"name":"SyntheticEvent","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdata?: WPUnitControlUnit;\n}","signature":{"properties":[{"key":"data","value":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The value for the unit, used in a CSS value (e.g `px`).\n\t */\n\tvalue: string;\n\t/**\n\t * The label used in a dropdown selector for the unit.\n\t */\n\tlabel: string;\n\t/**\n\t * Default value (quantity) for the unit, used when switching units.\n\t */\n\tdefault?: number;\n\t/**\n\t * An accessible label used by screen readers.\n\t */\n\ta11yLabel?: string;\n\t/**\n\t * A step value used when incrementing/decrementing the value.\n\t */\n\tstep?: number;\n}","signature":{"properties":[{"key":"value","value":{"name":"string","required":true},"description":"The value for the unit, used in a CSS value (e.g `px`)."},{"key":"label","value":{"name":"string","required":true},"description":"The label used in a dropdown selector for the unit."},{"key":"default","value":{"name":"number","required":false},"description":"Default value (quantity) for the unit, used when switching units."},{"key":"a11yLabel","value":{"name":"string","required":false},"description":"An accessible label used by screen readers."},{"key":"step","value":{"name":"number","required":false},"description":"A step value used when incrementing/decrementing the value."}]},"required":false}}]}}]},"name":"extra"}],"return":{"name":"void"}},"required":false},"description":"A callback function invoked when the value is changed."},{"key":"size","value":{"name":"union","raw":"'default' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'small'"}],"required":false},"description":"The size of the unit select."},{"key":"unit","value":{"name":"string","required":false},"description":"Current unit."},{"key":"units","value":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The value for the unit, used in a CSS value (e.g `px`).\n\t */\n\tvalue: string;\n\t/**\n\t * The label used in a dropdown selector for the unit.\n\t */\n\tlabel: string;\n\t/**\n\t * Default value (quantity) for the unit, used when switching units.\n\t */\n\tdefault?: number;\n\t/**\n\t * An accessible label used by screen readers.\n\t */\n\ta11yLabel?: string;\n\t/**\n\t * A step value used when incrementing/decrementing the value.\n\t */\n\tstep?: number;\n}","signature":{"properties":[{"key":"value","value":{"name":"string","required":true},"description":"The value for the unit, used in a CSS value (e.g `px`)."},{"key":"label","value":{"name":"string","required":true},"description":"The label used in a dropdown selector for the unit."},{"key":"default","value":{"name":"number","required":false},"description":"Default value (quantity) for the unit, used when switching units."},{"key":"a11yLabel","value":{"name":"string","required":false},"description":"An accessible label used by screen readers."},{"key":"step","value":{"name":"number","required":false},"description":"A step value used when incrementing/decrementing the value."}]},"required":false}],"raw":"WPUnitControlUnit[]","required":false},"description":"Available units to select from.\n\n@default CSS_UNITS"}]}},{"name":"union","raw":"'size' | 'unit'","elements":[{"name":"literal","value":"'size'"},{"name":"literal","value":"'unit'"}]}],"raw":"Omit< UnitSelectControlProps, 'size' | 'unit' >"},{"name":"Omit","elements":[{"name":"intersection","raw":"Omit<\n\tInputControlProps,\n\t'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'\n> & {\n\t/**\n\t * If true, the default `input` HTML arrows will be hidden.\n\t *\n\t * @deprecated\n\t * @default false\n\t */\n\thideHTMLArrows?: boolean;\n\t/**\n\t * The type of spin controls to display. These are buttons that allow the\n\t * user to quickly increment and decrement the number.\n\t *\n\t * - 'none' - Do not show spin controls.\n\t * - 'native' - Use browser's native HTML `input` controls.\n\t * - 'custom' - Use plus and minus icon buttons.\n\t *\n\t * @default 'native'\n\t */\n\tspinControls?: 'none' | 'native' | 'custom';\n\t/**\n\t * If true, enables mouse drag gestures.\n\t *\n\t * @default true\n\t */\n\tisDragEnabled?: InputControlProps[ 'isDragEnabled' ];\n\t/**\n\t * If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the\n\t * value by the `shiftStep` value.\n\t *\n\t * @default true\n\t */\n\tisShiftStepEnabled?: boolean;\n\t/**\n\t * The maximum `value` allowed.\n\t *\n\t * @default Infinity\n\t */\n\tmax?: number;\n\t/**\n\t * The minimum `value` allowed.\n\t *\n\t * @default -Infinity\n\t */\n\tmin?: number;\n\t/**\n\t * If `true` enforces a valid number within the control's min/max range.\n\t * If `false` allows an empty string as a valid value.\n\t *\n\t * @default false\n\t */\n\trequired?: InputControlProps[ 'required' ];\n\t/**\n\t * Amount to increment by when the `SHIFT` key is held down. This shift value is\n\t * a multiplier to the `step` value. For example, if the `step` value is `5`,\n\t * and `shiftStep` is `10`, each jump would increment/decrement by `50`.\n\t *\n\t * @default 10\n\t */\n\tshiftStep?: number;\n\t/**\n\t * Amount by which the `value` is changed when incrementing/decrementing.\n\t * It is also a factor in validation as `value` must be a multiple of `step`\n\t * (offset by `min`, if specified) to be valid. Accepts the special string value `any`\n\t * that voids the validation constraint and causes stepping actions to increment/decrement by `1`.\n\t *\n\t * @default 1\n\t */\n\tstep?: InputControlProps[ 'step' ];\n\t/**\n\t * Optional multiplication factor in spin changes. i.e. A spin changes\n\t * by `spinFactor * step` (if `step` is \"any\", 1 is used instead).\n\t *\n\t * @default 1\n\t */\n\tspinFactor?: number;\n\t/**\n\t * The `type` attribute of the `input` element.\n\t *\n\t * @default 'number'\n\t */\n\ttype?: InputControlProps[ 'type' ];\n\t/**\n\t * The value of the input.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t *\n\t * @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n}","elements":[{"name":"Omit","elements":[{"name":"InputControlProps"},{"name":"union","raw":"'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'","elements":[{"name":"literal","value":"'isDragEnabled'"},{"name":"literal","value":"'min'"},{"name":"literal","value":"'max'"},{"name":"literal","value":"'required'"},{"name":"literal","value":"'step'"},{"name":"literal","value":"'type'"},{"name":"literal","value":"'value'"}]}],"raw":"Omit<\n\tInputControlProps,\n\t'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'\n>"},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * If true, the default `input` HTML arrows will be hidden.\n\t *\n\t * @deprecated\n\t * @default false\n\t */\n\thideHTMLArrows?: boolean;\n\t/**\n\t * The type of spin controls to display. These are buttons that allow the\n\t * user to quickly increment and decrement the number.\n\t *\n\t * - 'none' - Do not show spin controls.\n\t * - 'native' - Use browser's native HTML `input` controls.\n\t * - 'custom' - Use plus and minus icon buttons.\n\t *\n\t * @default 'native'\n\t */\n\tspinControls?: 'none' | 'native' | 'custom';\n\t/**\n\t * If true, enables mouse drag gestures.\n\t *\n\t * @default true\n\t */\n\tisDragEnabled?: InputControlProps[ 'isDragEnabled' ];\n\t/**\n\t * If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the\n\t * value by the `shiftStep` value.\n\t *\n\t * @default true\n\t */\n\tisShiftStepEnabled?: boolean;\n\t/**\n\t * The maximum `value` allowed.\n\t *\n\t * @default Infinity\n\t */\n\tmax?: number;\n\t/**\n\t * The minimum `value` allowed.\n\t *\n\t * @default -Infinity\n\t */\n\tmin?: number;\n\t/**\n\t * If `true` enforces a valid number within the control's min/max range.\n\t * If `false` allows an empty string as a valid value.\n\t *\n\t * @default false\n\t */\n\trequired?: InputControlProps[ 'required' ];\n\t/**\n\t * Amount to increment by when the `SHIFT` key is held down. This shift value is\n\t * a multiplier to the `step` value. For example, if the `step` value is `5`,\n\t * and `shiftStep` is `10`, each jump would increment/decrement by `50`.\n\t *\n\t * @default 10\n\t */\n\tshiftStep?: number;\n\t/**\n\t * Amount by which the `value` is changed when incrementing/decrementing.\n\t * It is also a factor in validation as `value` must be a multiple of `step`\n\t * (offset by `min`, if specified) to be valid. Accepts the special string value `any`\n\t * that voids the validation constraint and causes stepping actions to increment/decrement by `1`.\n\t *\n\t * @default 1\n\t */\n\tstep?: InputControlProps[ 'step' ];\n\t/**\n\t * Optional multiplication factor in spin changes. i.e. A spin changes\n\t * by `spinFactor * step` (if `step` is \"any\", 1 is used instead).\n\t *\n\t * @default 1\n\t */\n\tspinFactor?: number;\n\t/**\n\t * The `type` attribute of the `input` element.\n\t *\n\t * @default 'number'\n\t */\n\ttype?: InputControlProps[ 'type' ];\n\t/**\n\t * The value of the input.\n\t */\n\tvalue?: number | string;\n\t/**\n\t * Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t *\n\t * @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n}","signature":{"properties":[{"key":"hideHTMLArrows","value":{"name":"boolean","required":false},"description":"If true, the default `input` HTML arrows will be hidden.\n\n@deprecated\n@default false"},{"key":"spinControls","value":{"name":"union","raw":"'none' | 'native' | 'custom'","elements":[{"name":"literal","value":"'none'"},{"name":"literal","value":"'native'"},{"name":"literal","value":"'custom'"}],"required":false},"description":"The type of spin controls to display. These are buttons that allow the\nuser to quickly increment and decrement the number.\n\n- 'none' - Do not show spin controls.\n- 'native' - Use browser's native HTML `input` controls.\n- 'custom' - Use plus and minus icon buttons.\n\n@default 'native'"},{"key":"isDragEnabled","value":{"name":"InputControlProps['isDragEnabled']","raw":"InputControlProps[ 'isDragEnabled' ]","required":false},"description":"If true, enables mouse drag gestures.\n\n@default true"},{"key":"isShiftStepEnabled","value":{"name":"boolean","required":false},"description":"If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the\nvalue by the `shiftStep` value.\n\n@default true"},{"key":"max","value":{"name":"number","required":false},"description":"The maximum `value` allowed.\n\n@default Infinity"},{"key":"min","value":{"name":"number","required":false},"description":"The minimum `value` allowed.\n\n@default -Infinity"},{"key":"required","value":{"name":"InputControlProps['required']","raw":"InputControlProps[ 'required' ]","required":false},"description":"If `true` enforces a valid number within the control's min/max range.\nIf `false` allows an empty string as a valid value.\n\n@default false"},{"key":"shiftStep","value":{"name":"number","required":false},"description":"Amount to increment by when the `SHIFT` key is held down. This shift value is\na multiplier to the `step` value. For example, if the `step` value is `5`,\nand `shiftStep` is `10`, each jump would increment/decrement by `50`.\n\n@default 10"},{"key":"step","value":{"name":"InputControlProps['step']","raw":"InputControlProps[ 'step' ]","required":false},"description":"Amount by which the `value` is changed when incrementing/decrementing.\nIt is also a factor in validation as `value` must be a multiple of `step`\n(offset by `min`, if specified) to be valid. Accepts the special string value `any`\nthat voids the validation constraint and causes stepping actions to increment/decrement by `1`.\n\n@default 1"},{"key":"spinFactor","value":{"name":"number","required":false},"description":"Optional multiplication factor in spin changes. i.e. A spin changes\nby `spinFactor * step` (if `step` is \"any\", 1 is used instead).\n\n@default 1"},{"key":"type","value":{"name":"InputControlProps['type']","raw":"InputControlProps[ 'type' ]","required":false},"description":"The `type` attribute of the `input` element.\n\n@default 'number'"},{"key":"value","value":{"name":"union","raw":"number | string","elements":[{"name":"number"},{"name":"string"}],"required":false},"description":"The value of the input."},{"key":"__shouldNotWarnDeprecated36pxSize","value":{"name":"boolean","required":false},"description":"Do not throw a warning for the deprecated 36px default size.\nFor internal components of other components that already throw the warning.\n\n@ignore"}]}}]},{"name":"union","raw":"'spinControls' | 'suffix' | 'type'","elements":[{"name":"literal","value":"'spinControls'"},{"name":"literal","value":"'suffix'"},{"name":"literal","value":"'type'"}]}],"raw":"Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' >"},{"name":"signature","type":"object","raw":"{\n\t/**\n\t * If `true`, the unit `<select>` is hidden.\n\t *\n\t * @default false\n\t */\n\tdisableUnits?: boolean;\n\t/**\n\t * If `true`, and the selected unit provides a `default` value, this value is set\n\t * when changing units.\n\t *\n\t * @default false\n\t */\n\tisResetValueOnUnitChange?: boolean;\n\t/**\n\t * Callback when the `unit` changes.\n\t */\n\tonUnitChange?: UnitControlOnChangeCallback;\n\t/**\n\t * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._\n\t *\n\t * @deprecated\n\t */\n\tunit?: string;\n\t/**\n\t * Current value. If passed as a string, the current unit will be inferred from this value.\n\t * For example, a `value` of \"50%\" will set the current unit to `%`.\n\t */\n\tvalue?: string | number;\n\t/**\n\t * Callback when either the quantity or the unit inputs lose focus.\n\t */\n\tonBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t/**\n\t * Callback when either the quantity or the unit inputs gains focus.\n\t */\n\tonFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t/**\n\t * Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t *\n\t * @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n}","signature":{"properties":[{"key":"disableUnits","value":{"name":"boolean","required":false},"description":"If `true`, the unit `<select>` is hidden.\n\n@default false"},{"key":"isResetValueOnUnitChange","value":{"name":"boolean","required":false},"description":"If `true`, and the selected unit provides a `default` value, this value is set\nwhen changing units.\n\n@default false"},{"key":"onUnitChange","value":{"name":"signature","type":"function","raw":"(\n\tnextValue: string | undefined,\n\textra: { event: SyntheticEvent } & P\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"name":"nextValue"},{"type":{"name":"intersection","raw":"{ event: SyntheticEvent } & P","elements":[{"name":"signature","type":"object","raw":"{ event: SyntheticEvent }","signature":{"properties":[{"key":"event","value":{"name":"SyntheticEvent","required":true}}]}},{"name":"signature","type":"object","raw":"{\n\tdata?: WPUnitControlUnit;\n}","signature":{"properties":[{"key":"data","value":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The value for the unit, used in a CSS value (e.g `px`).\n\t */\n\tvalue: string;\n\t/**\n\t * The label used in a dropdown selector for the unit.\n\t */\n\tlabel: string;\n\t/**\n\t * Default value (quantity) for the unit, used when switching units.\n\t */\n\tdefault?: number;\n\t/**\n\t * An accessible label used by screen readers.\n\t */\n\ta11yLabel?: string;\n\t/**\n\t * A step value used when incrementing/decrementing the value.\n\t */\n\tstep?: number;\n}","signature":{"properties":[{"key":"value","value":{"name":"string","required":true},"description":"The value for the unit, used in a CSS value (e.g `px`)."},{"key":"label","value":{"name":"string","required":true},"description":"The label used in a dropdown selector for the unit."},{"key":"default","value":{"name":"number","required":false},"description":"Default value (quantity) for the unit, used when switching units."},{"key":"a11yLabel","value":{"name":"string","required":false},"description":"An accessible label used by screen readers."},{"key":"step","value":{"name":"number","required":false},"description":"A step value used when incrementing/decrementing the value."}]},"required":false}}]}}]},"name":"extra"}],"return":{"name":"void"}},"required":false},"description":"Callback when the `unit` changes."},{"key":"unit","value":{"name":"string","required":false},"description":"Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._\n\n@deprecated"},{"key":"value","value":{"name":"union","raw":"string | number","elements":[{"name":"string"},{"name":"number"}],"required":false},"description":"Current value. If passed as a string, the current unit will be inferred from this value.\nFor example, a `value` of \"50%\" will set the current unit to `%`."},{"key":"onBlur","value":{"name":"FocusEventHandler","elements":[{"name":"union","raw":"HTMLInputElement | HTMLSelectElement","elements":[{"name":"HTMLInputElement"},{"name":"HTMLSelectElement"}]}],"raw":"FocusEventHandler< HTMLInputElement | HTMLSelectElement >","required":false},"description":"Callback when either the quantity or the unit inputs lose focus."},{"key":"onFocus","value":{"name":"FocusEventHandler","elements":[{"name":"union","raw":"HTMLInputElement | HTMLSelectElement","elements":[{"name":"HTMLInputElement"},{"name":"HTMLSelectElement"}]}],"raw":"FocusEventHandler< HTMLInputElement | HTMLSelectElement >","required":false},"description":"Callback when either the quantity or the unit inputs gains focus."},{"key":"__shouldNotWarnDeprecated36pxSize","value":{"name":"boolean","required":false},"description":"Do not throw a warning for the deprecated 36px default size.\nFor internal components of other components that already throw the warning.\n\n@ignore"}]}}]},{"name":"union","raw":"'label' | 'onChange' | 'onFocus' | 'units'","elements":[{"name":"literal","value":"'label'"},{"name":"literal","value":"'onChange'"},{"name":"literal","value":"'onFocus'"},{"name":"literal","value":"'units'"}]}],"raw":"Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>"},"description":"Props for the internal `UnitControl` components.\n\n@default { min: 0 }","defaultValue":{"value":"{\n\tmin: 0,\n}","computed":false}},"label":{"required":false,"tsType":{"name":"string"},"description":"Heading label for the control.\n\n@default __( 'Box Control' )","defaultValue":{"value":"__( 'Box Control' )","computed":true}},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( next: BoxControlValue ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n}","signature":{"properties":[{"key":"top","value":{"name":"string","required":false}},{"key":"right","value":{"name":"string","required":false}},{"key":"bottom","value":{"name":"string","required":false}},{"key":"left","value":{"name":"string","required":false}}]}},"name":"next"}],"return":{"name":"void"}}},"description":"A callback function when an input value changes.","defaultValue":{"value":"() => {}","computed":false}},"resetValues":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n}","signature":{"properties":[{"key":"top","value":{"name":"string","required":false}},{"key":"right","value":{"name":"string","required":false}},{"key":"bottom","value":{"name":"string","required":false}},{"key":"left","value":{"name":"string","required":false}}]}},"description":"The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\n@default { top: undefined, right: undefined, bottom: undefined, left: undefined }","defaultValue":{"value":"{\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n}","computed":false}},"sides":{"required":false,"tsType":{"name":"unknown"},"description":"Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\nAllowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\"."},"splitOnAxis":{"required":false,"tsType":{"name":"boolean"},"description":"If this property is true, when the box control is unlinked, vertical and horizontal controls\ncan be used instead of updating individual sides.\n\n@default false","defaultValue":{"value":"false","computed":false}},"values":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n}","signature":{"properties":[{"key":"top","value":{"name":"string","required":false}},{"key":"right","value":{"name":"string","required":false}},{"key":"bottom","value":{"name":"string","required":false}},{"key":"left","value":{"name":"string","required":false}}]}},"description":"The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values."},"__next40pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the larger default height that will become the default size in a future version.\n\n@default false","defaultValue":{"value":"false","computed":false}}}}},"components-divider":{"id":"components-divider","name":"Divider","path":"../packages/components/src/divider/stories/index.story.tsx","stories":[{"id":"components-divider--horizontal","name":"Horizontal","snippet":"const Horizontal = () => <div>\n <Text>Some text before the divider</Text>\n <Divider margin=\"2\" />\n <Text>Some text after the divider</Text>\n</div>;"},{"id":"components-divider--vertical","name":"Vertical","snippet":"const Vertical = () => <div>\n <Text>Some text before the divider</Text>\n <Divider orientation=\"vertical\" />\n <Text>Some text after the divider</Text>\n</div>;"},{"id":"components-divider--in-flex-container","name":"In Flex Container","snippet":"const InFlexContainer = () => {\n return (\n <Flex align=\"stretch\">\n <Text>Some text before the divider Some text before the divider Some\n text before the divider Some text before the divider Some text\n before the divider Some text before the divider Some text before\n the divider\n </Text>\n <Divider />\n <Text>Some text after the divider Some text after the divider Some\n text after the divider\n </Text>\n </Flex>\n );\n};"}],"import":"import { Divider, Flex, Text } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedDivider","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/divider/component.tsx","actualName":"UnconnectedDivider"}},"components-duotonepicker":{"id":"components-duotonepicker","name":"DuotonePicker","path":"../packages/components/src/duotone-picker/stories/duotone-picker.story.tsx","stories":[{"id":"components-duotonepicker--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();\n\n return (\n <DuotonePicker\n colorPalette={COLOR_PALETTE}\n duotonePalette={DUOTONE_PALETTE}\n onChange={ ( ...changeArgs ) => {\n\t\t\t\tsetValue( ...changeArgs );\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t} }\n value={ value } />\n );\n};"}],"import":"import { DuotonePicker } from \"@wordpress/components\";","jsDocTags":{},"description":"```jsx import { DuotonePicker, DuotoneSwatch } from '@wordpress/components'; import { useState } from '@wordpress/element'; const DUOTONE_PALETTE = [ { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' }, { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' }, ]; const COLOR_PALETTE = [ { color: '#ff4747', name: 'Red', slug: 'red' }, { color: '#fcff41', name: 'Yellow', slug: 'yellow' }, { color: '#000097', name: 'Blue', slug: 'blue' }, { color: '#8c00b7', name: 'Purple', slug: 'purple' }, ]; const Example = () => { const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] ); return ( <> <DuotonePicker duotonePalette={ DUOTONE_PALETTE } colorPalette={ COLOR_PALETTE } value={ duotone } onChange={ setDuotone } /> <DuotoneSwatch values={ duotone } /> </> ); }; ```","reactDocgen":{"description":"```jsx\nimport { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst DUOTONE_PALETTE = [\n\t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n\t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n];\n\nconst COLOR_PALETTE = [\n\t{ color: '#ff4747', name: 'Red', slug: 'red' },\n\t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n\t{ color: '#000097', name: 'Blue', slug: 'blue' },\n\t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n];\n\nconst Example = () => {\n\tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n\treturn (\n\t\t<>\n\t\t\t<DuotonePicker\n\t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n\t\t\t\tcolorPalette={ COLOR_PALETTE }\n\t\t\t\tvalue={ duotone }\n\t\t\t\tonChange={ setDuotone }\n\t\t\t/>\n\t\t\t<DuotoneSwatch values={ duotone } />\n\t\t</>\n\t);\n};\n```","methods":[],"displayName":"DuotonePicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/duotone-picker/duotone-picker.tsx","actualName":"DuotonePicker","exportName":"default","props":{"clearable":{"required":false,"tsType":{"name":"boolean"},"description":"Whether there should be a button to clear the duotone value.\n\n@default true","defaultValue":{"value":"true","computed":false}},"unsetable":{"required":false,"tsType":{"name":"boolean"},"description":"Whether there should be an `unset` option.\n\n@default true","defaultValue":{"value":"true","computed":false}},"colorPalette":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\tcolor: string;\n\tname: string;\n\tslug: string;\n}","signature":{"properties":[{"key":"color","value":{"name":"string","required":true}},{"key":"name","value":{"name":"string","required":true}},{"key":"slug","value":{"name":"string","required":true}}]}}],"raw":"Color[]"},"description":"Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`."},"duotonePalette":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\tcolors: string[];\n\tname: string;\n\tslug: string;\n}","signature":{"properties":[{"key":"colors","value":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]","required":true}},{"key":"name","value":{"name":"string","required":true}},{"key":"slug","value":{"name":"string","required":true}}]}}],"raw":"DuotoneColor[]"},"description":"Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`."},"disableCustomColors":{"required":false,"tsType":{"name":"boolean"},"description":"Whether custom colors should be disabled.\n\n@default false"},"disableCustomDuotone":{"required":false,"tsType":{"name":"boolean"},"description":"Whether custom duotone values should be disabled.\n\n@default false"},"value":{"required":false,"tsType":{"name":"union","raw":"string[] | 'unset'","elements":[{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},{"name":"literal","value":"'unset'"}]},"description":"An array of colors for the duotone effect."},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: DuotonePickerProps[ 'value' ] | undefined ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"DuotonePickerProps[ 'value' ] | undefined","elements":[{"name":"intersection['value']","raw":"DuotonePickerProps[ 'value' ]"},{"name":"undefined"}]},"name":"value"}],"return":{"name":"void"}}},"description":"Callback which is called when the duotone colors change."},"asButtons":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the control should present as a set of buttons,\neach with its own tab stop.\n\n@default false"},"loop":{"required":false,"tsType":{"name":"boolean"},"description":"Prevents keyboard interaction from wrapping around.\nOnly used when `asButtons` is not true.\n\n@default true"}}}},"components-duotoneswatch":{"id":"components-duotoneswatch","name":"DuotoneSwatch","path":"../packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx","stories":[{"id":"components-duotoneswatch--default","name":"Default","snippet":"const Default = () => {\n return <DuotoneSwatch values={[ '#000', '#fff' ]} />;\n};"},{"id":"components-duotoneswatch--single-color","name":"Single Color","snippet":"const SingleColor = () => {\n return <DuotoneSwatch values={[ 'pink' ]} />;\n};"},{"id":"components-duotoneswatch--null","name":"Null","snippet":"const Null = () => {\n return <DuotoneSwatch values={null} />;\n};"}],"import":"import { DuotoneSwatch } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DuotoneSwatch","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/duotone-picker/duotone-swatch.tsx","actualName":"DuotoneSwatch","exportName":"default","props":{"values":{"required":false,"tsType":{"name":"union","raw":"string[] | null","elements":[{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},{"name":"null"}]},"description":"An array of colors to show or `null` to show the placeholder swatch icon."}}}},"components-elevation":{"id":"components-elevation","name":"Elevation","path":"../packages/components/src/elevation/stories/index.story.tsx","stories":[{"id":"components-elevation--default","name":"Default","snippet":"const Default = () => {\n return (\n <div\n style={ {\n\t\t\t\twidth: 150,\n\t\t\t\theight: 150,\n\t\t\t\tposition: 'relative',\n\t\t\t} }>\n <Elevation value={5} />\n </div>\n );\n};"},{"id":"components-elevation--with-interactive","name":"With Interactive","snippet":"const WithInteractive = () => {\n return (\n <button\n style={ {\n\t\t\t\tborder: 0,\n\t\t\t\tbackground: 'transparent',\n\t\t\t\twidth: 150,\n\t\t\t\theight: 150,\n\t\t\t\tposition: 'relative',\n\t\t\t} }>Click me\n <Elevation isInteractive />\n </button>\n );\n};","description":"Enable the `isInteractive` prop to automatically generate values for the hover/active/focus states."},{"id":"components-elevation--with-custom-interactive","name":"With Custom Interactive","snippet":"const WithCustomInteractive = () => {\n return (\n <button\n style={ {\n\t\t\t\tborder: 0,\n\t\t\t\tbackground: 'transparent',\n\t\t\t\twidth: 150,\n\t\t\t\theight: 150,\n\t\t\t\tposition: 'relative',\n\t\t\t} }>Click me\n <Elevation hover={7} active={1} focus={10} />\n </button>\n );\n};","description":"You can also provide custom values for the hover/active/focus states instead of using the `isInteractive` prop."}],"import":"import { Elevation } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedElevation","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/elevation/component.tsx","actualName":"UnconnectedElevation"}},"components-flex":{"id":"components-flex","name":"Flex","path":"../packages/components/src/flex/stories/index.story.tsx","stories":[{"id":"components-flex--default","name":"Default","snippet":"const Default = () => {\n return (\n <Flex>\n <FlexItem>\n <GrayBox>Item 1</GrayBox>\n </FlexItem>\n <FlexItem>\n <GrayBox>Item 2</GrayBox>\n </FlexItem>\n <FlexItem>\n <GrayBox>Item 3</GrayBox>\n </FlexItem>\n </Flex>\n );\n};"},{"id":"components-flex--responsive-direction","name":"Responsive Direction","snippet":"const ResponsiveDirection = () => {\n return (\n <Flex direction={[ 'column', 'row' ]}>\n <FlexItem>\n <GrayBox>Item 1</GrayBox>\n </FlexItem>\n <FlexBlock>\n <GrayBox>Item 2</GrayBox>\n </FlexBlock>\n <FlexItem>\n <GrayBox>Item 3</GrayBox>\n </FlexItem>\n <FlexItem>\n <GrayBox>Item 4</GrayBox>\n </FlexItem>\n </Flex>\n );\n};"}],"import":"import { Flex, FlexBlock, FlexItem, View } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedFlex","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/flex/flex/component.tsx","actualName":"UnconnectedFlex"}},"components-focalpointpicker":{"id":"components-focalpointpicker","name":"FocalPointPicker","path":"../packages/components/src/focal-point-picker/stories/index.story.tsx","stories":[{"id":"components-focalpointpicker--default","name":"Default","snippet":"const Default = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ focalPoint, setFocalPoint ] = useState( {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t} );\n\n\treturn (\n\t\t<FocalPointPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ focalPoint }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t\tsetFocalPoint( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-focalpointpicker--image","name":"Image","snippet":"const Image = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ focalPoint, setFocalPoint ] = useState( {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t} );\n\n\treturn (\n\t\t<FocalPointPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ focalPoint }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t\tsetFocalPoint( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-focalpointpicker--video","name":"Video","snippet":"const Video = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ focalPoint, setFocalPoint ] = useState( {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t} );\n\n\treturn (\n\t\t<FocalPointPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ focalPoint }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t\tsetFocalPoint( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-focalpointpicker--snapping","name":"Snapping","snippet":"const Snapping = ( {\n\tonChange,\n\t...props\n} ) => {\n\tconst [ focalPoint, setFocalPoint ] = useState( {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t} );\n\n\treturn (\n\t\t<FocalPointPicker\n\t\t\t{ ...props }\n\t\t\tvalue={ focalPoint }\n\t\t\tonChange={ ( ...changeArgs ) => {\n\t\t\t\tonChange( ...changeArgs );\n\t\t\t\tsetFocalPoint( ...changeArgs );\n\t\t\t} }\n\t\t/>\n\t);\n};"}],"import":"import { FocalPointPicker } from \"@wordpress/components\";","jsDocTags":{},"description":"Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. This component addresses a specific problem: with large background images it is common to see undesirable crops, especially when viewing on smaller viewports such as mobile phones. This component allows the selection of the point with the most important visual information and returns it as a pair of numbers between 0 and 1. This value can be easily converted into the CSS `background-position` attribute, and will ensure that the focal point is never cropped out, regardless of viewport. - Example focal point picker value: `{ x: 0.5, y: 0.1 }` - Corresponding CSS: `background-position: 50% 10%;` ```jsx import { FocalPointPicker } from '@wordpress/components'; import { useState } from '@wordpress/element'; const Example = () => { const [ focalPoint, setFocalPoint ] = useState( { x: 0.5, y: 0.5, } ); const url = '/path/to/image'; // Example function to render the CSS styles based on Focal Point Picker value const style = { backgroundImage: `url(${ url })`, backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`, }; return ( <> <FocalPointPicker url={ url } value={ focalPoint } onDragStart={ setFocalPoint } onDrag={ setFocalPoint } onChange={ setFocalPoint } /> <div style={ style } /> </> ); }; ```","reactDocgen":{"description":"Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n\nThis component addresses a specific problem: with large background images it is common to see undesirable crops,\nespecially when viewing on smaller viewports such as mobile phones. This component allows the selection of\nthe point with the most important visual information and returns it as a pair of numbers between 0 and 1.\nThis value can be easily converted into the CSS `background-position` attribute, and will ensure that the\nfocal point is never cropped out, regardless of viewport.\n\n- Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n- Corresponding CSS: `background-position: 50% 10%;`\n\n```jsx\nimport { FocalPointPicker } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst Example = () => {\n\tconst [ focalPoint, setFocalPoint ] = useState( {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t} );\n\n\tconst url = '/path/to/image';\n\n\t// Example function to render the CSS styles based on Focal Point Picker value\n\tconst style = {\n\t\tbackgroundImage: `url(${ url })`,\n\t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<FocalPointPicker\n\t\t\t\turl={ url }\n\t\t\t\tvalue={ focalPoint }\n\t\t\t\tonDragStart={ setFocalPoint }\n\t\t\t\tonDrag={ setFocalPoint }\n\t\t\t\tonChange={ setFocalPoint }\n\t\t\t/>\n\t\t\t<div style={ style } />\n\t\t</>\n\t);\n};\n```","methods":[],"displayName":"FocalPointPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/focal-point-picker/index.tsx","actualName":"FocalPointPicker","exportName":"FocalPointPicker","props":{"autoPlay":{"defaultValue":{"value":"true","computed":false},"required":false},"value":{"defaultValue":{"value":"{\n\tx: 0.5,\n\ty: 0.5,\n}","computed":false},"required":false}}}},"components-fontsizepicker":{"id":"components-fontsizepicker","name":"FontSizePicker","path":"../packages/components/src/font-size-picker/stories/index.story.tsx","stories":[{"id":"components-fontsizepicker--default","name":"Default","snippet":"const Default = ( {\n\tvalue,\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\tconst [ fontSize, setFontSize ] = useState( value );\n\treturn (\n\t\t<FontSizePicker\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tvalue={ fontSize }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetFontSize( nextValue );\n\t\t\t\tonChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-fontsizepicker--with-slider","name":"With Slider","snippet":"const WithSlider = ( {\n\tvalue,\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\tconst [ fontSize, setFontSize ] = useState( value );\n\treturn (\n\t\t<FontSizePicker\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tvalue={ fontSize }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetFontSize( nextValue );\n\t\t\t\tonChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};"},{"id":"components-fontsizepicker--with-custom-sizes-disabled","name":"With Custom Sizes Disabled","snippet":"const WithCustomSizesDisabled = ( {\n\tvalue,\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\tconst [ fontSize, setFontSize ] = useState( value );\n\treturn (\n\t\t<FontSizePicker\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tvalue={ fontSize }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetFontSize( nextValue );\n\t\t\t\tonChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};","description":"With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will only be able to pick one of the predefined sizes passed in `fontSizes`."},{"id":"components-fontsizepicker--with-more-font-sizes","name":"With More Font Sizes","snippet":"const WithMoreFontSizes = ( {\n\tvalue,\n\tonChange,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\tconst [ fontSize, setFontSize ] = useState( value );\n\treturn (\n\t\t<FontSizePicker\n\t\t\t__next40pxDefaultSize\n\t\t\t{ ...props }\n\t\t\tvalue={ fontSize }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tsetFontSize( nextValue );\n\t\t\t\tonChange?.( nextValue );\n\t\t\t} }\n\t\t/>\n\t);\n};","description":"When there are more than 5 font size options, the UI is no longer a toggle group."},{"id":"components-fontsizepicker--with-units","name":"With Units","snippet":"const WithUnits = ( {\n\tfontSizes,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\treturn (\n\t\t<>\n\t\t\t<h2>Fewer font sizes</h2>\n\t\t\t<FontSizePickerWithState\n\t\t\t\t{ ...props }\n\t\t\t\tfontSizes={ fontSizes?.slice( 0, 4 ) }\n\t\t\t/>\n\n\t\t\t<h2>More font sizes</h2>\n\t\t\t<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />\n\t\t</>\n\t);\n};","description":"When units like `px` are specified explicitly, it will be shown as a label hint."},{"id":"components-fontsizepicker--with-complex-css-values","name":"With Complex CSS Values","snippet":"const WithComplexCSSValues = ( {\n\tfontSizes,\n\t...props\n}: React.ComponentProps< typeof FontSizePicker > ) => {\n\treturn (\n\t\t<>\n\t\t\t<h2>Fewer font sizes</h2>\n\t\t\t<FontSizePickerWithState\n\t\t\t\t{ ...props }\n\t\t\t\tfontSizes={ fontSizes?.slice( 0, 4 ) }\n\t\t\t/>\n\n\t\t\t<h2>More font sizes</h2>\n\t\t\t<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />\n\t\t</>\n\t);\n};","description":"The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values in this context are CSS functions like `calc()`, `clamp()`, and `var()`."}],"import":"import { FontSizePicker } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FontSizePicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/font-size-picker/index.tsx","actualName":"FontSizePicker","exportName":"FontSizePicker","props":{"disableCustomFontSizes":{"required":false,"tsType":{"name":"boolean"},"description":"If `true`, it will not be possible to choose a custom fontSize. The user\nwill be forced to pick one of the pre-defined sizes passed in fontSizes.\n\n@default false"},"fallbackFontSize":{"required":false,"tsType":{"name":"number"},"description":"If no value exists, this prop defines the starting position for the font\nsize picker slider. Only relevant if `withSlider` is `true`."},"fontSizes":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n\t/**\n\t * The `hint` property is an optional string that provides additional information\n\t * about the font size, such as fluid typography ranges or custom descriptions.\n\t * Consumers can use this to provide their own preferred hints.\n\t */\n\thint?: string;\n}","signature":{"properties":[{"key":"size","value":{"name":"union","raw":"number | string","elements":[{"name":"number"},{"name":"string"}],"required":true},"description":"The property `size` contains a number with the font size value, in `px` or\na string specifying the font size CSS property that should be used eg:\n\"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\"."},{"key":"name","value":{"name":"string","required":false},"description":"The `name` property includes a label for that font size e.g.: `Small`."},{"key":"slug","value":{"name":"string","required":true},"description":"The `slug` property is a string with a unique identifier for the font\nsize. Used for the class generation process."},{"key":"hint","value":{"name":"string","required":false},"description":"The `hint` property is an optional string that provides additional information\nabout the font size, such as fluid typography ranges or custom descriptions.\nConsumers can use this to provide their own preferred hints."}]}}],"raw":"FontSize[]"},"description":"An array of font size objects. The object should contain properties size,\nname, and slug."},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(\n\tvalue: number | string | undefined,\n\tselectedItem?: FontSize\n) => void","signature":{"arguments":[{"type":{"name":"union","raw":"number | string | undefined","elements":[{"name":"number"},{"name":"string"},{"name":"undefined"}]},"name":"value"},{"type":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The property `size` contains a number with the font size value, in `px` or\n\t * a string specifying the font size CSS property that should be used eg:\n\t * \"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\".\n\t */\n\tsize: number | string;\n\t/**\n\t * The `name` property includes a label for that font size e.g.: `Small`.\n\t */\n\tname?: string;\n\t/**\n\t * The `slug` property is a string with a unique identifier for the font\n\t * size. Used for the class generation process.\n\t */\n\tslug: string;\n\t/**\n\t * The `hint` property is an optional string that provides additional information\n\t * about the font size, such as fluid typography ranges or custom descriptions.\n\t * Consumers can use this to provide their own preferred hints.\n\t */\n\thint?: string;\n}","signature":{"properties":[{"key":"size","value":{"name":"union","raw":"number | string","elements":[{"name":"number"},{"name":"string"}],"required":true},"description":"The property `size` contains a number with the font size value, in `px` or\na string specifying the font size CSS property that should be used eg:\n\"13px\", \"1em\", or \"clamp(12px, 5vw, 100px)\"."},{"key":"name","value":{"name":"string","required":false},"description":"The `name` property includes a label for that font size e.g.: `Small`."},{"key":"slug","value":{"name":"string","required":true},"description":"The `slug` property is a string with a unique identifier for the font\nsize. Used for the class generation process."},{"key":"hint","value":{"name":"string","required":false},"description":"The `hint` property is an optional string that provides additional information\nabout the font size, such as fluid typography ranges or custom descriptions.\nConsumers can use this to provide their own preferred hints."}]}},"name":"selectedItem"}],"return":{"name":"void"}}},"description":"A function that receives the new font size value.\nIf onChange is called without any parameter, it should reset the value,\nattending to what reset means in that context, e.g., set the font size to\nundefined or set the font size a starting value."},"units":{"required":false,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":"Available units for custom font size selection.\n\n@default [ 'px', 'em', 'rem', 'vw', 'vh' ]"},"value":{"required":false,"tsType":{"name":"union","raw":"number | string","elements":[{"name":"number"},{"name":"string"}]},"description":"The current font size value.\n\nNote: For the `units` property to work, the current font size value must be specified\nas strings with units (e.g., '12px' instead of 12). When the font size is provided\nas a number, the component operates in \"unitless mode\" where the `units` property has no effect."},"valueMode":{"required":false,"tsType":{"name":"union","raw":"'literal' | 'slug'","elements":[{"name":"literal","value":"'literal'"},{"name":"literal","value":"'slug'"}]},"description":"Determines how the `value` prop should be interpreted.\n- `'literal'`: The `value` prop contains the actual font size value (number or string)\n- `'slug'`: The `value` prop contains the slug of the selected font size\n\n@default 'literal'"},"withSlider":{"required":false,"tsType":{"name":"boolean"},"description":"If `true`, a slider will be displayed alongside the input field when a\ncustom font size is active. Has no effect when `disableCustomFontSizes`\nis `true`.\n\n@default false"},"withReset":{"required":false,"tsType":{"name":"boolean"},"description":"If `true`, a reset button will be displayed alongside the input field\nwhen a custom font size is active. Has no effect when\n`disableCustomFontSizes` is `true`.\n\n@default true"},"__nextHasNoMarginBottom":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the new margin-free styles that will become the default\nin a future version, currently scheduled to be WordPress 6.4. (The prop\ncan be safely removed once this happens.)\n\n@default false\n@deprecated Default behavior since WP 6.5. Prop can be safely removed.\n@ignore"},"__next40pxDefaultSize":{"required":false,"tsType":{"name":"boolean"},"description":"Start opting into the larger default height that will become the default size in a future version.\n\n@default false"},"size":{"required":false,"tsType":{"name":"union","raw":"'default' | '__unstable-large'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'__unstable-large'"}]},"description":"Size of the control.\n\n@default 'default'"}}}},"components-formtoggle":{"id":"components-formtoggle","name":"FormToggle","path":"../packages/components/src/form-toggle/stories/index.story.tsx","stories":[{"id":"components-formtoggle--default","name":"Default","snippet":"const Default = () => {\n const [ isChecked, setChecked ] = useState( true );\n\n return (\n <FormToggle\n checked={ isChecked }\n onChange={ ( e ) => {\n\t\t\t\tsetChecked( ( state ) => ! state );\n\t\t\t\tonChange( e );\n\t\t\t} } />\n );\n};"}],"import":"import { FormToggle } from \"@wordpress/components\";","jsDocTags":{},"description":"FormToggle switches a single setting on or off. ```jsx import { FormToggle } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyFormToggle = () => { const [ isChecked, setChecked ] = useState( true ); return ( <FormToggle checked={ isChecked } onChange={ () => setChecked( ( state ) => ! state ) } /> ); }; ```","reactDocgen":{"description":"FormToggle switches a single setting on or off.\n\n```jsx\nimport { FormToggle } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\nconst MyFormToggle = () => {\n const [ isChecked, setChecked ] = useState( true );\n\n return (\n <FormToggle\n checked={ isChecked }\n onChange={ () => setChecked( ( state ) => ! state ) }\n />\n );\n};\n```","methods":[],"displayName":"FormToggle","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/form-toggle/index.tsx","actualName":"FormToggle","exportName":"FormToggle"}},"components-grid":{"id":"components-grid","name":"Grid","path":"../packages/components/src/grid/stories/index.story.tsx","stories":[{"id":"components-grid--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<Grid { ...props }>\n\t\t<Item>One</Item>\n\t\t<Item>Two</Item>\n\t\t<Item>Three</Item>\n\t\t<Item>Four</Item>\n\t\t<Item>Five</Item>\n\t\t<Item>Six</Item>\n\t\t<Item>Seven</Item>\n\t\t<Item>Eight</Item>\n\t</Grid>\n);"}],"import":"import { Grid, View } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedGrid","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/grid/component.tsx","actualName":"UnconnectedGrid"}},"components-guide":{"id":"components-guide","name":"Guide","path":"../packages/components/src/guide/stories/index.story.tsx","stories":[{"id":"components-guide--default","name":"Default","snippet":"const Default = ( { onFinish, ...props } ) => {\n\tconst [ isOpen, setOpen ] = useState( false );\n\n\tconst openGuide = () => setOpen( true );\n\tconst closeGuide = () => setOpen( false );\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tonClick={ openGuide }\n\t\t\t>\n\t\t\t\tOpen Guide\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Guide\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tonFinish={ ( ...finishArgs ) => {\n\t\t\t\t\t\tcloseGuide();\n\t\t\t\t\t\tonFinish?.( ...finishArgs );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};"}],"import":"import { Button, Guide } from \"@wordpress/components\";","jsDocTags":{},"description":"`Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide. ```jsx function MyTutorial() { const [ isOpen, setIsOpen ] = useState( true ); if ( ! isOpen ) { return null; } return ( <Guide onFinish={ () => setIsOpen( false ) } pages={ [ { content: <p>Welcome to the ACME Store!</p>, }, { image: <img src=\"https://acmestore.com/add-to-cart.png\" />, content: ( <p> Click <i>Add to Cart</i> to buy a product. </p> ), }, ] } /> ); } ```","reactDocgen":{"description":"`Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n\n```jsx\nfunction MyTutorial() {\n\tconst [ isOpen, setIsOpen ] = useState( true );\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Guide\n\t\t\tonFinish={ () => setIsOpen( false ) }\n\t\t\tpages={ [\n\t\t\t\t{\n\t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t] }\n\t\t/>\n\t);\n}\n```","methods":[],"displayName":"Guide","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/guide/index.tsx","actualName":"Guide","exportName":"default","props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"Deprecated. Use `pages` prop instead.\n\n@deprecated since 5.5"},"className":{"required":false,"tsType":{"name":"string"},"description":"A custom class to add to the modal."},"contentLabel":{"required":true,"tsType":{"name":"string","raw":"ModalProps[ 'contentLabel' ]"},"description":"Used as the modal's accessibility label."},"finishButtonText":{"required":false,"tsType":{"name":"string"},"description":"Use this to customize the label of the _Finish_ button shown at the end of the guide.\n\n@default 'Finish'","defaultValue":{"value":"__( 'Finish' )","computed":true}},"nextButtonText":{"required":false,"tsType":{"name":"string"},"description":"Use this to customize the label of the _Next_ button shown on each page of the guide.\n\n@default 'Next'","defaultValue":{"value":"__( 'Next' )","computed":true}},"previousButtonText":{"required":false,"tsType":{"name":"string"},"description":"Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.\n\n@default 'Previous'","defaultValue":{"value":"__( 'Previous' )","computed":true}},"onFinish":{"required":true,"tsType":{"name":"signature","raw":"ModalProps[ 'onRequestClose' ]"},"description":"A function which is called when the guide is finished."},"pages":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Content of the page.\n\t */\n\tcontent: ReactNode;\n\t/**\n\t * Image displayed above the page content.\n\t */\n\timage?: ReactNode;\n}","signature":{"properties":[{"key":"content","value":{"name":"ReactNode","required":true},"description":"Content of the page."},{"key":"image","value":{"name":"ReactNode","required":false},"description":"Image displayed above the page content."}]}}],"raw":"Page[]"},"description":"A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.\n\n@default []","defaultValue":{"value":"[]","computed":false}}}}},"components-icon":{"id":"components-icon","name":"Icon","path":"../packages/components/src/icon/stories/index.story.tsx","stories":[{"id":"components-icon--default","name":"Default","snippet":"const Default = () => <Icon icon={wordpress} />;"},{"id":"components-icon--fill-color","name":"Fill Color","snippet":"const FillColor = () => {\n return (\n <div\n style={ {\n\t\t\t\tfill: 'blue',\n\t\t\t} }>\n <Icon />\n </div>\n );\n};"},{"id":"components-icon--with-a-function","name":"With A Function","snippet":"const WithAFunction = () => <Icon\n icon={( { size }: { size?: number } ) => (\n\t\t<img\n\t\t\twidth={ size }\n\t\t\theight={ size }\n\t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-wmark.png\"\n\t\t\talt=\"WordPress\"\n\t\t/>\n\t)} />;","description":"When `icon` is a function, it will be passed the `size` prop and any other additional props."},{"id":"components-icon--with-a-component","name":"With A Component","snippet":"const WithAComponent = () => <Icon icon={<MyIconComponent />} />;","description":"When `icon` is a component, it will be passed the `size` prop and any other additional props."},{"id":"components-icon--with-an-svg","name":"With An SVG","snippet":"const WithAnSVG = () => <Icon\n icon={(<SVG>\n <Path d=\"M5 4v3h5.5v12h3V7H19V4z\" />\n </SVG>)} />;"},{"id":"components-icon--with-a-dashicon","name":"With A Dashicon","snippet":"const WithADashicon = () => {\n return (\n <VStack>\n <Icon icon=\"wordpress\" />\n <small>This won’t show an icon if the Dashicons stylesheet isn’t\n loaded.\n </small>\n </VStack>\n );\n};","description":"Although it's preferred to use icons from the `@wordpress/icons` package, [Dashicons](https://developer.wordpress.org/resource/dashicons/) are still supported, as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here, use the Global CSS Injector in the Storybook toolbar at the top and select the \"WordPress\" preset."}],"import":"import { Icon, VStack } from \"@wordpress/components\";\nimport { Path, SVG } from \"@wordpress/primitives\";","jsDocTags":{},"description":"Renders a raw icon without any initial styling or wrappers. ```jsx import { wordpress } from '@wordpress/icons'; <Icon icon={ wordpress } /> ```","reactDocgen":{"description":"Renders a raw icon without any initial styling or wrappers.\n\n```jsx\nimport { wordpress } from '@wordpress/icons';\n\n<Icon icon={ wordpress } />\n```","methods":[],"displayName":"Icon","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/icon/index.tsx","actualName":"Icon","exportName":"default","props":{"icon":{"required":false,"tsType":{"name":"union","raw":"IconType | null","elements":[{"name":"union","raw":"| DashiconIconKey\n| ComponentType< { size?: number } >\n| ( ( props: { size?: number } ) => React.JSX.Element )\n| React.JSX.Element","elements":[{"name":"union","raw":"| 'admin-appearance'\n| 'admin-collapse'\n| 'admin-comments'\n| 'admin-customizer'\n| 'admin-generic'\n| 'admin-home'\n| 'admin-links'\n| 'admin-media'\n| 'admin-multisite'\n| 'admin-network'\n| 'admin-page'\n| 'admin-plugins'\n| 'admin-post'\n| 'admin-settings'\n| 'admin-site-alt'\n| 'admin-site-alt2'\n| 'admin-site-alt3'\n| 'admin-site'\n| 'admin-tools'\n| 'admin-users'\n| 'airplane'\n| 'album'\n| 'align-center'\n| 'align-full-width'\n| 'align-left'\n| 'align-none'\n| 'align-pull-left'\n| 'align-pull-right'\n| 'align-right'\n| 'align-wide'\n| 'amazon'\n| 'analytics'\n| 'archive'\n| 'arrow-down-alt'\n| 'arrow-down-alt2'\n| 'arrow-down'\n| 'arrow-left-alt'\n| 'arrow-left-alt2'\n| 'arrow-left'\n| 'arrow-right-alt'\n| 'arrow-right-alt2'\n| 'arrow-right'\n| 'arrow-up-alt'\n| 'arrow-up-alt2'\n| 'arrow-up'\n| 'arrow-up-duplicate'\n| 'art'\n| 'awards'\n| 'backup'\n| 'bank'\n| 'beer'\n| 'bell'\n| 'block-default'\n| 'book-alt'\n| 'book'\n| 'buddicons-activity'\n| 'buddicons-bbpress-logo'\n| 'buddicons-buddypress-logo'\n| 'buddicons-community'\n| 'buddicons-forums'\n| 'buddicons-friends'\n| 'buddicons-groups'\n| 'buddicons-pm'\n| 'buddicons-replies'\n| 'buddicons-topics'\n| 'buddicons-tracking'\n| 'building'\n| 'businessman'\n| 'businessperson'\n| 'businesswoman'\n| 'button'\n| 'calculator'\n| 'camera-alt'\n| 'car'\n| 'calendar-alt'\n| 'calendar'\n| 'camera'\n| 'carrot'\n| 'cart'\n| 'category'\n| 'chart-area'\n| 'chart-bar'\n| 'chart-line'\n| 'chart-pie'\n| 'clipboard'\n| 'clock'\n| 'cloud-saved'\n| 'cloud-upload'\n| 'cloud'\n| 'columns'\n| 'code-standards'\n| 'coffee'\n| 'color-picker'\n| 'controls-back'\n| 'controls-forward'\n| 'controls-pause'\n| 'controls-play'\n| 'controls-repeat'\n| 'controls-skipback'\n| 'controls-skipforward'\n| 'controls-volumeoff'\n| 'controls-volumeon'\n| 'cover-image'\n| 'dashboard'\n| 'database'\n| 'database-add'\n| 'database-export'\n| 'database-import'\n| 'database-remove'\n| 'database-view'\n| 'desktop'\n| 'dismiss'\n| 'download'\n| 'drumstick'\n| 'edit'\n| 'edit-large'\n| 'edit-page'\n| 'editor-aligncenter'\n| 'editor-alignleft'\n| 'editor-alignright'\n| 'editor-bold'\n| 'editor-break'\n| 'editor-code'\n| 'editor-code-duplicate'\n| 'editor-contract'\n| 'editor-customchar'\n| 'editor-expand'\n| 'editor-help'\n| 'editor-indent'\n| 'editor-insertmore'\n| 'editor-italic'\n| 'editor-justify'\n| 'editor-kitchensink'\n| 'editor-ltr'\n| 'editor-ol-rtl'\n| 'editor-ol'\n| 'editor-outdent'\n| 'editor-paragraph'\n| 'editor-paste-text'\n| 'editor-paste-word'\n| 'editor-quote'\n| 'editor-removeformatting'\n| 'editor-rtl'\n| 'editor-spellcheck'\n| 'editor-strikethrough'\n| 'editor-table'\n| 'editor-textcolor'\n| 'editor-ul'\n| 'editor-underline'\n| 'editor-unlink'\n| 'editor-video'\n| 'ellipsis'\n| 'email-alt'\n| 'email-alt2'\n| 'email'\n| 'embed-audio'\n| 'embed-generic'\n| 'embed-photo'\n| 'embed-post'\n| 'embed-video'\n| 'excerpt-view'\n| 'exit'\n| 'external'\n| 'facebook-alt'\n| 'facebook'\n| 'feedback'\n| 'filter'\n| 'flag'\n| 'food'\n| 'format-aside'\n| 'format-audio'\n| 'format-chat'\n| 'format-gallery'\n| 'format-image'\n| 'format-quote'\n| 'format-status'\n| 'format-video'\n| 'forms'\n| 'fullscreen-alt'\n| 'fullscreen-exit-alt'\n| 'games'\n| 'google'\n| 'googleplus'\n| 'grid-view'\n| 'groups'\n| 'hammer'\n| 'heading'\n| 'heart'\n| 'hidden'\n| 'hourglass'\n| 'html'\n| 'id-alt'\n| 'id'\n| 'image-crop'\n| 'image-filter'\n| 'image-flip-horizontal'\n| 'image-flip-vertical'\n| 'image-rotate-left'\n| 'image-rotate-right'\n| 'image-rotate'\n| 'images-alt'\n| 'images-alt2'\n| 'index-card'\n| 'info-outline'\n| 'info'\n| 'insert-after'\n| 'insert-before'\n| 'insert'\n| 'instagram'\n| 'laptop'\n| 'layout'\n| 'leftright'\n| 'lightbulb'\n| 'list-view'\n| 'linkedin'\n| 'location-alt'\n| 'location'\n| 'lock-duplicate'\n| 'lock'\n| 'marker'\n| 'media-archive'\n| 'media-audio'\n| 'media-code'\n| 'media-default'\n| 'media-document'\n| 'media-interactive'\n| 'media-spreadsheet'\n| 'media-text'\n| 'media-video'\n| 'megaphone'\n| 'menu-alt'\n| 'menu-alt2'\n| 'menu-alt3'\n| 'menu'\n| 'money-alt'\n| 'microphone'\n| 'migrate'\n| 'minus'\n| 'money'\n| 'move'\n| 'nametag'\n| 'networking'\n| 'no-alt'\n| 'no'\n| 'open-folder'\n| 'palmtree'\n| 'paperclip'\n| 'performance'\n| 'pets'\n| 'pdf'\n| 'phone'\n| 'pinterest'\n| 'playlist-audio'\n| 'playlist-video'\n| 'plus-alt'\n| 'plus'\n| 'portfolio'\n| 'post-status'\n| 'pressthis'\n| 'products'\n| 'plugins-checked'\n| 'plus-alt2'\n| 'podio'\n| 'printer'\n| 'privacy'\n| 'randomize'\n| 'reddit'\n| 'redo'\n| 'remove'\n| 'rest-api'\n| 'rss'\n| 'saved'\n| 'schedule'\n| 'screenoptions'\n| 'search'\n| 'share-alt'\n| 'share-alt2'\n| 'share'\n| 'shield-alt'\n| 'shield'\n| 'shortcode'\n| 'slides'\n| 'smartphone'\n| 'smiley'\n| 'sort'\n| 'sos'\n| 'star-empty'\n| 'star-filled'\n| 'star-half'\n| 'sticky'\n| 'store'\n| 'spotify'\n| 'superhero'\n| 'superhero-alt'\n| 'table-col-after'\n| 'table-col-before'\n| 'table-col-delete'\n| 'table-row-after'\n| 'table-row-before'\n| 'table-row-delete'\n| 'tablet'\n| 'tag'\n| 'tagcloud'\n| 'testimonial'\n| 'text'\n| 'text-page'\n| 'thumbs-down'\n| 'thumbs-up'\n| 'tickets-alt'\n| 'tickets'\n| 'tide'\n| 'translation'\n| 'trash'\n| 'twitch'\n| 'twitter'\n| 'twitter-alt'\n| 'undo'\n| 'universal-access-alt'\n| 'universal-access'\n| 'unlock'\n| 'update-alt'\n| 'update'\n| 'upload'\n| 'vault'\n| 'video-alt'\n| 'video-alt2'\n| 'video-alt3'\n| 'visibility'\n| 'warning'\n| 'welcome-add-page'\n| 'welcome-comments'\n| 'welcome-learn-more'\n| 'welcome-view-site'\n| 'welcome-widgets-menus'\n| 'welcome-write-blog'\n| 'whatsapp'\n| 'wordpress-alt'\n| 'wordpress'\n| 'xing'\n| 'yes-alt'\n| 'yes'\n| 'youtube'","elements":[{"name":"literal","value":"'admin-appearance'"},{"name":"literal","value":"'admin-collapse'"},{"name":"literal","value":"'admin-comments'"},{"name":"literal","value":"'admin-customizer'"},{"name":"literal","value":"'admin-generic'"},{"name":"literal","value":"'admin-home'"},{"name":"literal","value":"'admin-links'"},{"name":"literal","value":"'admin-media'"},{"name":"literal","value":"'admin-multisite'"},{"name":"literal","value":"'admin-network'"},{"name":"literal","value":"'admin-page'"},{"name":"literal","value":"'admin-plugins'"},{"name":"literal","value":"'admin-post'"},{"name":"literal","value":"'admin-settings'"},{"name":"literal","value":"'admin-site-alt'"},{"name":"literal","value":"'admin-site-alt2'"},{"name":"literal","value":"'admin-site-alt3'"},{"name":"literal","value":"'admin-site'"},{"name":"literal","value":"'admin-tools'"},{"name":"literal","value":"'admin-users'"},{"name":"literal","value":"'airplane'"},{"name":"literal","value":"'album'"},{"name":"literal","value":"'align-center'"},{"name":"literal","value":"'align-full-width'"},{"name":"literal","value":"'align-left'"},{"name":"literal","value":"'align-none'"},{"name":"literal","value":"'align-pull-left'"},{"name":"literal","value":"'align-pull-right'"},{"name":"literal","value":"'align-right'"},{"name":"literal","value":"'align-wide'"},{"name":"literal","value":"'amazon'"},{"name":"literal","value":"'analytics'"},{"name":"literal","value":"'archive'"},{"name":"literal","value":"'arrow-down-alt'"},{"name":"literal","value":"'arrow-down-alt2'"},{"name":"literal","value":"'arrow-down'"},{"name":"literal","value":"'arrow-left-alt'"},{"name":"literal","value":"'arrow-left-alt2'"},{"name":"literal","value":"'arrow-left'"},{"name":"literal","value":"'arrow-right-alt'"},{"name":"literal","value":"'arrow-right-alt2'"},{"name":"literal","value":"'arrow-right'"},{"name":"literal","value":"'arrow-up-alt'"},{"name":"literal","value":"'arrow-up-alt2'"},{"name":"literal","value":"'arrow-up'"},{"name":"literal","value":"'arrow-up-duplicate'"},{"name":"literal","value":"'art'"},{"name":"literal","value":"'awards'"},{"name":"literal","value":"'backup'"},{"name":"literal","value":"'bank'"},{"name":"literal","value":"'beer'"},{"name":"literal","value":"'bell'"},{"name":"literal","value":"'block-default'"},{"name":"literal","value":"'book-alt'"},{"name":"literal","value":"'book'"},{"name":"literal","value":"'buddicons-activity'"},{"name":"literal","value":"'buddicons-bbpress-logo'"},{"name":"literal","value":"'buddicons-buddypress-logo'"},{"name":"literal","value":"'buddicons-community'"},{"name":"literal","value":"'buddicons-forums'"},{"name":"literal","value":"'buddicons-friends'"},{"name":"literal","value":"'buddicons-groups'"},{"name":"literal","value":"'buddicons-pm'"},{"name":"literal","value":"'buddicons-replies'"},{"name":"literal","value":"'buddicons-topics'"},{"name":"literal","value":"'buddicons-tracking'"},{"name":"literal","value":"'building'"},{"name":"literal","value":"'businessman'"},{"name":"literal","value":"'businessperson'"},{"name":"literal","value":"'businesswoman'"},{"name":"literal","value":"'button'"},{"name":"literal","value":"'calculator'"},{"name":"literal","value":"'camera-alt'"},{"name":"literal","value":"'car'"},{"name":"literal","value":"'calendar-alt'"},{"name":"literal","value":"'calendar'"},{"name":"literal","value":"'camera'"},{"name":"literal","value":"'carrot'"},{"name":"literal","value":"'cart'"},{"name":"literal","value":"'category'"},{"name":"literal","value":"'chart-area'"},{"name":"literal","value":"'chart-bar'"},{"name":"literal","value":"'chart-line'"},{"name":"literal","value":"'chart-pie'"},{"name":"literal","value":"'clipboard'"},{"name":"literal","value":"'clock'"},{"name":"literal","value":"'cloud-saved'"},{"name":"literal","value":"'cloud-upload'"},{"name":"literal","value":"'cloud'"},{"name":"literal","value":"'columns'"},{"name":"literal","value":"'code-standards'"},{"name":"literal","value":"'coffee'"},{"name":"literal","value":"'color-picker'"},{"name":"literal","value":"'controls-back'"},{"name":"literal","value":"'controls-forward'"},{"name":"literal","value":"'controls-pause'"},{"name":"literal","value":"'controls-play'"},{"name":"literal","value":"'controls-repeat'"},{"name":"literal","value":"'controls-skipback'"},{"name":"literal","value":"'controls-skipforward'"},{"name":"literal","value":"'controls-volumeoff'"},{"name":"literal","value":"'controls-volumeon'"},{"name":"literal","value":"'cover-image'"},{"name":"literal","value":"'dashboard'"},{"name":"literal","value":"'database'"},{"name":"literal","value":"'database-add'"},{"name":"literal","value":"'database-export'"},{"name":"literal","value":"'database-import'"},{"name":"literal","value":"'database-remove'"},{"name":"literal","value":"'database-view'"},{"name":"literal","value":"'desktop'"},{"name":"literal","value":"'dismiss'"},{"name":"literal","value":"'download'"},{"name":"literal","value":"'drumstick'"},{"name":"literal","value":"'edit'"},{"name":"literal","value":"'edit-large'"},{"name":"literal","value":"'edit-page'"},{"name":"literal","value":"'editor-aligncenter'"},{"name":"literal","value":"'editor-alignleft'"},{"name":"literal","value":"'editor-alignright'"},{"name":"literal","value":"'editor-bold'"},{"name":"literal","value":"'editor-break'"},{"name":"literal","value":"'editor-code'"},{"name":"literal","value":"'editor-code-duplicate'"},{"name":"literal","value":"'editor-contract'"},{"name":"literal","value":"'editor-customchar'"},{"name":"literal","value":"'editor-expand'"},{"name":"literal","value":"'editor-help'"},{"name":"literal","value":"'editor-indent'"},{"name":"literal","value":"'editor-insertmore'"},{"name":"literal","value":"'editor-italic'"},{"name":"literal","value":"'editor-justify'"},{"name":"literal","value":"'editor-kitchensink'"},{"name":"literal","value":"'editor-ltr'"},{"name":"literal","value":"'editor-ol-rtl'"},{"name":"literal","value":"'editor-ol'"},{"name":"literal","value":"'editor-outdent'"},{"name":"literal","value":"'editor-paragraph'"},{"name":"literal","value":"'editor-paste-text'"},{"name":"literal","value":"'editor-paste-word'"},{"name":"literal","value":"'editor-quote'"},{"name":"literal","value":"'editor-removeformatting'"},{"name":"literal","value":"'editor-rtl'"},{"name":"literal","value":"'editor-spellcheck'"},{"name":"literal","value":"'editor-strikethrough'"},{"name":"literal","value":"'editor-table'"},{"name":"literal","value":"'editor-textcolor'"},{"name":"literal","value":"'editor-ul'"},{"name":"literal","value":"'editor-underline'"},{"name":"literal","value":"'editor-unlink'"},{"name":"literal","value":"'editor-video'"},{"name":"literal","value":"'ellipsis'"},{"name":"literal","value":"'email-alt'"},{"name":"literal","value":"'email-alt2'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'embed-audio'"},{"name":"literal","value":"'embed-generic'"},{"name":"literal","value":"'embed-photo'"},{"name":"literal","value":"'embed-post'"},{"name":"literal","value":"'embed-video'"},{"name":"literal","value":"'excerpt-view'"},{"name":"literal","value":"'exit'"},{"name":"literal","value":"'external'"},{"name":"literal","value":"'facebook-alt'"},{"name":"literal","value":"'facebook'"},{"name":"literal","value":"'feedback'"},{"name":"literal","value":"'filter'"},{"name":"literal","value":"'flag'"},{"name":"literal","value":"'food'"},{"name":"literal","value":"'format-aside'"},{"name":"literal","value":"'format-audio'"},{"name":"literal","value":"'format-chat'"},{"name":"literal","value":"'format-gallery'"},{"name":"literal","value":"'format-image'"},{"name":"literal","value":"'format-quote'"},{"name":"literal","value":"'format-status'"},{"name":"literal","value":"'format-video'"},{"name":"literal","value":"'forms'"},{"name":"literal","value":"'fullscreen-alt'"},{"name":"literal","value":"'fullscreen-exit-alt'"},{"name":"literal","value":"'games'"},{"name":"literal","value":"'google'"},{"name":"literal","value":"'googleplus'"},{"name":"literal","value":"'grid-view'"},{"name":"literal","value":"'groups'"},{"name":"literal","value":"'hammer'"},{"name":"literal","value":"'heading'"},{"name":"literal","value":"'heart'"},{"name":"literal","value":"'hidden'"},{"name":"literal","value":"'hourglass'"},{"name":"literal","value":"'html'"},{"name":"literal","value":"'id-alt'"},{"name":"literal","value":"'id'"},{"name":"literal","value":"'image-crop'"},{"name":"literal","value":"'image-filter'"},{"name":"literal","value":"'image-flip-horizontal'"},{"name":"literal","value":"'image-flip-vertical'"},{"name":"literal","value":"'image-rotate-left'"},{"name":"literal","value":"'image-rotate-right'"},{"name":"literal","value":"'image-rotate'"},{"name":"literal","value":"'images-alt'"},{"name":"literal","value":"'images-alt2'"},{"name":"literal","value":"'index-card'"},{"name":"literal","value":"'info-outline'"},{"name":"literal","value":"'info'"},{"name":"literal","value":"'insert-after'"},{"name":"literal","value":"'insert-before'"},{"name":"literal","value":"'insert'"},{"name":"literal","value":"'instagram'"},{"name":"literal","value":"'laptop'"},{"name":"literal","value":"'layout'"},{"name":"literal","value":"'leftright'"},{"name":"literal","value":"'lightbulb'"},{"name":"literal","value":"'list-view'"},{"name":"literal","value":"'linkedin'"},{"name":"literal","value":"'location-alt'"},{"name":"literal","value":"'location'"},{"name":"literal","value":"'lock-duplicate'"},{"name":"literal","value":"'lock'"},{"name":"literal","value":"'marker'"},{"name":"literal","value":"'media-archive'"},{"name":"literal","value":"'media-audio'"},{"name":"literal","value":"'media-code'"},{"name":"literal","value":"'media-default'"},{"name":"literal","value":"'media-document'"},{"name":"literal","value":"'media-interactive'"},{"name":"literal","value":"'media-spreadsheet'"},{"name":"literal","value":"'media-text'"},{"name":"literal","value":"'media-video'"},{"name":"literal","value":"'megaphone'"},{"name":"literal","value":"'menu-alt'"},{"name":"literal","value":"'menu-alt2'"},{"name":"literal","value":"'menu-alt3'"},{"name":"literal","value":"'menu'"},{"name":"literal","value":"'money-alt'"},{"name":"literal","value":"'microphone'"},{"name":"literal","value":"'migrate'"},{"name":"literal","value":"'minus'"},{"name":"literal","value":"'money'"},{"name":"literal","value":"'move'"},{"name":"literal","value":"'nametag'"},{"name":"literal","value":"'networking'"},{"name":"literal","value":"'no-alt'"},{"name":"literal","value":"'no'"},{"name":"literal","value":"'open-folder'"},{"name":"literal","value":"'palmtree'"},{"name":"literal","value":"'paperclip'"},{"name":"literal","value":"'performance'"},{"name":"literal","value":"'pets'"},{"name":"literal","value":"'pdf'"},{"name":"literal","value":"'phone'"},{"name":"literal","value":"'pinterest'"},{"name":"literal","value":"'playlist-audio'"},{"name":"literal","value":"'playlist-video'"},{"name":"literal","value":"'plus-alt'"},{"name":"literal","value":"'plus'"},{"name":"literal","value":"'portfolio'"},{"name":"literal","value":"'post-status'"},{"name":"literal","value":"'pressthis'"},{"name":"literal","value":"'products'"},{"name":"literal","value":"'plugins-checked'"},{"name":"literal","value":"'plus-alt2'"},{"name":"literal","value":"'podio'"},{"name":"literal","value":"'printer'"},{"name":"literal","value":"'privacy'"},{"name":"literal","value":"'randomize'"},{"name":"literal","value":"'reddit'"},{"name":"literal","value":"'redo'"},{"name":"literal","value":"'remove'"},{"name":"literal","value":"'rest-api'"},{"name":"literal","value":"'rss'"},{"name":"literal","value":"'saved'"},{"name":"literal","value":"'schedule'"},{"name":"literal","value":"'screenoptions'"},{"name":"literal","value":"'search'"},{"name":"literal","value":"'share-alt'"},{"name":"literal","value":"'share-alt2'"},{"name":"literal","value":"'share'"},{"name":"literal","value":"'shield-alt'"},{"name":"literal","value":"'shield'"},{"name":"literal","value":"'shortcode'"},{"name":"literal","value":"'slides'"},{"name":"literal","value":"'smartphone'"},{"name":"literal","value":"'smiley'"},{"name":"literal","value":"'sort'"},{"name":"literal","value":"'sos'"},{"name":"literal","value":"'star-empty'"},{"name":"literal","value":"'star-filled'"},{"name":"literal","value":"'star-half'"},{"name":"literal","value":"'sticky'"},{"name":"literal","value":"'store'"},{"name":"literal","value":"'spotify'"},{"name":"literal","value":"'superhero'"},{"name":"literal","value":"'superhero-alt'"},{"name":"literal","value":"'table-col-after'"},{"name":"literal","value":"'table-col-before'"},{"name":"literal","value":"'table-col-delete'"},{"name":"literal","value":"'table-row-after'"},{"name":"literal","value":"'table-row-before'"},{"name":"literal","value":"'table-row-delete'"},{"name":"literal","value":"'tablet'"},{"name":"literal","value":"'tag'"},{"name":"literal","value":"'tagcloud'"},{"name":"literal","value":"'testimonial'"},{"name":"literal","value":"'text'"},{"name":"literal","value":"'text-page'"},{"name":"literal","value":"'thumbs-down'"},{"name":"literal","value":"'thumbs-up'"},{"name":"literal","value":"'tickets-alt'"},{"name":"literal","value":"'tickets'"},{"name":"literal","value":"'tide'"},{"name":"literal","value":"'translation'"},{"name":"literal","value":"'trash'"},{"name":"literal","value":"'twitch'"},{"name":"literal","value":"'twitter'"},{"name":"literal","value":"'twitter-alt'"},{"name":"literal","value":"'undo'"},{"name":"literal","value":"'universal-access-alt'"},{"name":"literal","value":"'universal-access'"},{"name":"literal","value":"'unlock'"},{"name":"literal","value":"'update-alt'"},{"name":"literal","value":"'update'"},{"name":"literal","value":"'upload'"},{"name":"literal","value":"'vault'"},{"name":"literal","value":"'video-alt'"},{"name":"literal","value":"'video-alt2'"},{"name":"literal","value":"'video-alt3'"},{"name":"literal","value":"'visibility'"},{"name":"literal","value":"'warning'"},{"name":"literal","value":"'welcome-add-page'"},{"name":"literal","value":"'welcome-comments'"},{"name":"literal","value":"'welcome-learn-more'"},{"name":"literal","value":"'welcome-view-site'"},{"name":"literal","value":"'welcome-widgets-menus'"},{"name":"literal","value":"'welcome-write-blog'"},{"name":"literal","value":"'whatsapp'"},{"name":"literal","value":"'wordpress-alt'"},{"name":"literal","value":"'wordpress'"},{"name":"literal","value":"'xing'"},{"name":"literal","value":"'yes-alt'"},{"name":"literal","value":"'yes'"},{"name":"literal","value":"'youtube'"}]},{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{ size?: number }","signature":{"properties":[{"key":"size","value":{"name":"number","required":false}}]}}],"raw":"ComponentType< { size?: number } >"},{"name":"unknown"},{"name":"React.JSX.Element"}]},{"name":"null"}]},"description":"The icon to render. In most cases, you should use an icon from\n[the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).\n\nOther supported values are: component instances, functions,\n[Dashicons](https://developer.wordpress.org/resource/dashicons/)\n(specified as strings), and `null`.\n\nThe `size` value, as well as any other additional props, will be passed through.\n\n@default null","defaultValue":{"value":"null","computed":false}},"size":{"required":false,"tsType":{"name":"number"},"description":"The size (width and height) of the icon.\n\nDefaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.\n\n@default `'string' === typeof icon ? 20 : 24`.","defaultValue":{"value":"'string' === typeof icon ? 20 : 24","computed":false}}}}},"components-itemgroup":{"id":"components-itemgroup","name":"ItemGroup","path":"../packages/components/src/item-group/stories/index.story.tsx","stories":[{"id":"components-itemgroup--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<ItemGroup { ...props } />\n);"},{"id":"components-itemgroup--non-clickable-items","name":"Non Clickable Items","snippet":"const NonClickableItems = ( props ) => (\n\t<ItemGroup { ...props } />\n);"},{"id":"components-itemgroup--custom-item-size","name":"Custom Item Size","snippet":"const CustomItemSize = ( props ) => (\n\t<ItemGroup { ...props } />\n);"},{"id":"components-itemgroup--without-border","name":"Without Border","snippet":"const WithoutBorder = ( props ) => (\n\t<ItemGroup { ...props } />\n);"}],"import":"import { Item, ItemGroup } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedItemGroup","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/item-group/item-group/component.tsx","actualName":"UnconnectedItemGroup"}},"components-paletteedit":{"id":"components-paletteedit","name":"PaletteEdit","path":"../packages/components/src/palette-edit/stories/index.story.tsx","stories":[{"id":"components-paletteedit--default","name":"Default","snippet":"const Default = ( args ) => {\n\tconst { colors, gradients, onChange, ...props } = args;\n\tconst [ value, setValue ] = useState( gradients || colors );\n\n\treturn (\n\t\t<PaletteEdit\n\t\t\t{ ...( gradients\n\t\t\t\t? {\n\t\t\t\t\t\tgradients: value as Gradient[],\n\t\t\t\t\t\tonChange: ( newValue?: Gradient[] ) => {\n\t\t\t\t\t\t\tsetValue( newValue );\n\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t},\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\tcolors: value as Color[],\n\t\t\t\t\t\tonChange: ( newValue?: Color[] ) => {\n\t\t\t\t\t\t\tsetValue( newValue );\n\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};"},{"id":"components-paletteedit--gradients","name":"Gradients","snippet":"const Gradients = ( args ) => {\n\tconst { colors, gradients, onChange, ...props } = args;\n\tconst [ value, setValue ] = useState( gradients || colors );\n\n\treturn (\n\t\t<PaletteEdit\n\t\t\t{ ...( gradients\n\t\t\t\t? {\n\t\t\t\t\t\tgradients: value as Gradient[],\n\t\t\t\t\t\tonChange: ( newValue?: Gradient[] ) => {\n\t\t\t\t\t\t\tsetValue( newValue );\n\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t},\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\tcolors: value as Color[],\n\t\t\t\t\t\tonChange: ( newValue?: Color[] ) => {\n\t\t\t\t\t\t\tsetValue( newValue );\n\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n};"}],"import":"import { PaletteEdit } from \"@wordpress/components\";","jsDocTags":{},"description":"Allows editing a palette of colors or gradients. ```jsx import { PaletteEdit } from '@wordpress/components'; const MyPaletteEdit = () => { const [ controlledColors, setControlledColors ] = useState( colors ); return ( <PaletteEdit colors={ controlledColors } onChange={ ( newColors?: Color[] ) => { setControlledColors( newColors ); } } paletteLabel=\"Here is a label\" /> ); }; ```","reactDocgen":{"description":"Allows editing a palette of colors or gradients.\n\n```jsx\nimport { PaletteEdit } from '@wordpress/components';\nconst MyPaletteEdit = () => {\n const [ controlledColors, setControlledColors ] = useState( colors );\n\n return (\n <PaletteEdit\n colors={ controlledColors }\n onChange={ ( newColors?: Color[] ) => {\n setControlledColors( newColors );\n } }\n paletteLabel=\"Here is a label\"\n />\n );\n};\n```","methods":[],"displayName":"PaletteEdit","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/palette-edit/index.tsx","actualName":"PaletteEdit","exportName":"PaletteEdit","props":{"canOnlyChangeValues":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the user can only change the color or gradient values.\nIf true, they cannot change names or delete values.\n\n@default false"},"canReset":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the user can reset the editor.\n\n@default false"},"emptyMessage":{"required":false,"tsType":{"name":"string"},"description":"A message to show if there's nothing to edit."},"paletteLabel":{"required":true,"tsType":{"name":"string"},"description":"A heading label for the palette."},"paletteLabelHeadingLevel":{"required":false,"tsType":{"name":"union","raw":"| 1\n| 2\n| 3\n| 4\n| 5\n| 6\n| '1'\n| '2'\n| '3'\n| '4'\n| '5'\n| '6'","elements":[{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"},{"name":"literal","value":"'1'"},{"name":"literal","value":"'2'"},{"name":"literal","value":"'3'"},{"name":"literal","value":"'4'"},{"name":"literal","value":"'5'"},{"name":"literal","value":"'6'"}]},"description":"The label's heading level.\n\n@default 2","defaultValue":{"value":"2","computed":false}},"slugPrefix":{"required":false,"tsType":{"name":"string"},"description":"The prefix for the element slug.\n\n@default ''","defaultValue":{"value":"''","computed":false}},"popoverProps":{"required":false,"tsType":{"name":"Omit","elements":[{"name":"ReactComponentPropsWithoutRef","raw":"React.ComponentPropsWithoutRef< typeof Popover >","elements":[{"name":"Popover"}]},{"name":"literal","value":"'children'"}],"raw":"Omit<\n\tReact.ComponentPropsWithoutRef< typeof Popover >,\n\t'children'\n>"},"description":"Props to pass through to the underlying Popover component."},"colors":{"defaultValue":{"value":"[]","computed":false},"required":false}}}},"components-placeholder":{"id":"components-placeholder","name":"Placeholder","path":"../packages/components/src/placeholder/stories/index.story.tsx","stories":[{"id":"components-placeholder--default","name":"Default","snippet":"const Default = () => {\n const [ value, setValue ] = useState( '' );\n\n return (\n <Placeholder\n icon=\"wordpress\"\n label=\"My Placeholder Label\"\n instructions=\"Here are instructions you should follow\">\n <div>\n <TextControl\n __next40pxDefaultSize\n label=\"Sample Field\"\n placeholder=\"Enter something here\"\n value={ value }\n onChange={ setValue } />\n </div>\n </Placeholder>\n );\n};"}],"import":"import { Placeholder, TextControl } from \"@wordpress/components\";","jsDocTags":{},"description":"Renders a placeholder. Normally used by blocks to render their empty state. ```jsx import { Placeholder } from '@wordpress/components'; import { more } from '@wordpress/icons'; const MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />; ```","reactDocgen":{"description":"Renders a placeholder. Normally used by blocks to render their empty state.\n\n```jsx\nimport { Placeholder } from '@wordpress/components';\nimport { more } from '@wordpress/icons';\n\nconst MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />;\n```","methods":[],"displayName":"Placeholder","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/placeholder/index.tsx","actualName":"Placeholder","exportName":"Placeholder"}},"components-querycontrols":{"id":"components-querycontrols","name":"QueryControls","path":"../packages/components/src/query-controls/stories/index.story.tsx","stories":[{"id":"components-querycontrols--default","name":"Default","snippet":"const Default = ( args ) => {\n\tconst {\n\t\tonAuthorChange,\n\t\tonCategoryChange,\n\t\tonNumberOfItemsChange,\n\t\tonOrderByChange,\n\t\tonOrderChange,\n\t\t...props\n\t} = args as QueryControlsWithMultipleCategorySelectionProps;\n\tconst [ ownNumberOfItems, setOwnNumberOfItems ] = useState(\n\t\tprops.numberOfItems\n\t);\n\tconst [ ownOrder, setOwnOrder ] = useState( props.order );\n\tconst [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );\n\tconst [ ownSelectedAuthorId, setOwnSelectedAuthorId ] = useState(\n\t\tprops.selectedAuthorId\n\t);\n\tconst [ ownSelectedCategories, setOwnSelectedCategories ] = useState(\n\t\tprops.selectedCategories\n\t);\n\n\tconst handleCategoryChange: QueryControlsWithMultipleCategorySelectionProps[ 'onCategoryChange' ] =\n\t\t( tokens ) => {\n\t\t\tonCategoryChange?.( tokens );\n\n\t\t\tconst hasNoSuggestion = tokens.some(\n\t\t\t\t( token ) =>\n\t\t\t\t\ttypeof token === 'string' &&\n\t\t\t\t\t! props.categorySuggestions?.[ token ]\n\t\t\t);\n\t\t\tif ( hasNoSuggestion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst allCategories = tokens\n\t\t\t\t.map( ( token ) => {\n\t\t\t\t\treturn typeof token === 'string'\n\t\t\t\t\t\t? props.categorySuggestions?.[ token ]\n\t\t\t\t\t\t: token;\n\t\t\t\t} )\n\t\t\t\t.filter( Boolean ) as Array< Required< Category > >;\n\n\t\t\tsetOwnSelectedCategories( allCategories );\n\t\t};\n\n\treturn (\n\t\t<QueryControls\n\t\t\t{ ...props }\n\t\t\tnumberOfItems={ ownNumberOfItems }\n\t\t\tonCategoryChange={ handleCategoryChange }\n\t\t\tonOrderByChange={ ( newOrderBy ) => {\n\t\t\t\tonOrderByChange?.( newOrderBy );\n\t\t\t\tsetOwnOrderBy( newOrderBy );\n\t\t\t} }\n\t\t\tonOrderChange={ ( newOrder ) => {\n\t\t\t\tonOrderChange?.( newOrder );\n\t\t\t\tsetOwnOrder( newOrder );\n\t\t\t} }\n\t\t\torder={ ownOrder }\n\t\t\torderBy={ ownOrderBy }\n\t\t\tonNumberOfItemsChange={ ( newNumber ) => {\n\t\t\t\tonNumberOfItemsChange?.( newNumber );\n\t\t\t\tsetOwnNumberOfItems( newNumber );\n\t\t\t} }\n\t\t\tonAuthorChange={ ( newAuthor ) => {\n\t\t\t\tonAuthorChange?.( newAuthor );\n\t\t\t\tsetOwnSelectedAuthorId( Number( newAuthor ) );\n\t\t\t} }\n\t\t\tselectedAuthorId={ ownSelectedAuthorId }\n\t\t\tselectedCategories={ ownSelectedCategories }\n\t\t/>\n\t);\n};"},{"id":"components-querycontrols--select-single-category","name":"Select Single Category","snippet":"const SelectSingleCategory = ( args ) => {\n\tconst {\n\t\tonAuthorChange,\n\t\tonCategoryChange,\n\t\tonNumberOfItemsChange,\n\t\tonOrderByChange,\n\t\tonOrderChange,\n\t\t...props\n\t} = args as QueryControlsWithSingleCategorySelectionProps;\n\tconst [ ownOrder, setOwnOrder ] = useState( props.order );\n\tconst [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );\n\tconst [ ownSelectedCategoryId, setSelectedCategoryId ] = useState(\n\t\tprops.selectedCategoryId\n\t);\n\n\tconst handleCategoryChange: QueryControlsWithSingleCategorySelectionProps[ 'onCategoryChange' ] =\n\t\t( newCategory ) => {\n\t\t\tonCategoryChange?.( newCategory );\n\t\t\tsetSelectedCategoryId( Number( newCategory ) );\n\t\t};\n\n\treturn (\n\t\t<QueryControls\n\t\t\t{ ...props }\n\t\t\tonCategoryChange={ handleCategoryChange }\n\t\t\tonOrderByChange={ ( newOrderBy ) => {\n\t\t\t\tsetOwnOrderBy( newOrderBy );\n\t\t\t} }\n\t\t\tonOrderChange={ ( newOrder ) => {\n\t\t\t\tonOrderChange?.( newOrder );\n\t\t\t\tsetOwnOrder( newOrder );\n\t\t\t} }\n\t\t\torder={ ownOrder }\n\t\t\torderBy={ ownOrderBy }\n\t\t\tselectedCategoryId={ ownSelectedCategoryId }\n\t\t/>\n\t);\n};"}],"import":"import { QueryControls } from \"@wordpress/components\";","jsDocTags":{},"description":"Controls to query for posts. ```jsx const MyQueryControls = () => ( <QueryControls { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } } onOrderByChange={ ( newOrderBy ) => { updateQuery( { orderBy: newOrderBy } ) } onOrderChange={ ( newOrder ) => { updateQuery( { order: newOrder } ) } categoriesList={ categories } selectedCategoryId={ category } onCategoryChange={ ( newCategory ) => { updateQuery( { category: newCategory } ) } onNumberOfItemsChange={ ( newNumberOfItems ) => { updateQuery( { numberOfItems: newNumberOfItems } ) } } /> ); ```","reactDocgen":{"description":"Controls to query for posts.\n\n```jsx\nconst MyQueryControls = () => (\n <QueryControls\n { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }\n onOrderByChange={ ( newOrderBy ) => {\n updateQuery( { orderBy: newOrderBy } )\n }\n onOrderChange={ ( newOrder ) => {\n updateQuery( { order: newOrder } )\n }\n categoriesList={ categories }\n selectedCategoryId={ category }\n onCategoryChange={ ( newCategory ) => {\n updateQuery( { category: newCategory } )\n }\n onNumberOfItemsChange={ ( newNumberOfItems ) => {\n updateQuery( { numberOfItems: newNumberOfItems } )\n } }\n />\n);\n```","methods":[],"displayName":"QueryControls","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/query-controls/index.tsx","actualName":"QueryControls","exportName":"QueryControls","props":{"orderByOptions":{"defaultValue":{"value":"[\n\t{\n\t\tlabel: __( 'Newest to oldest' ),\n\t\tvalue: 'date/desc',\n\t},\n\t{\n\t\tlabel: __( 'Oldest to newest' ),\n\t\tvalue: 'date/asc',\n\t},\n\t{\n\t\t/* translators: Label for ordering posts by title in ascending order. */\n\t\tlabel: __( 'A → Z' ),\n\t\tvalue: 'title/asc',\n\t},\n\t{\n\t\t/* translators: Label for ordering posts by title in descending order. */\n\t\tlabel: __( 'Z → A' ),\n\t\tvalue: 'title/desc',\n\t},\n]","computed":false},"required":false},"maxItems":{"defaultValue":{"value":"100","computed":false},"required":false},"minItems":{"defaultValue":{"value":"1","computed":false},"required":false}}}},"components-scrollable":{"id":"components-scrollable","name":"Scrollable","path":"../packages/components/src/scrollable/stories/index.story.tsx","stories":[{"id":"components-scrollable--default","name":"Default","snippet":"const Default = () => {\n const targetRef = useRef< HTMLInputElement >( null );\n\n const onButtonClick = () => {\n\t\ttargetRef.current?.focus();\n\t};\n\n const containerWidth = 300;\n const containerHeight = 400;\n\n return (\n <Scrollable\n style={ { height: containerHeight, width: containerWidth } }\n smoothScroll={false}\n scrollDirection=\"y\">\n <View\n style={ {\n\t\t\t\t\tbackgroundColor: '#eee',\n\t\t\t\t\theight:\n\t\t\t\t\t\targs.scrollDirection === 'x' ? containerHeight : 1000,\n\t\t\t\t\twidth: args.scrollDirection === 'y' ? containerWidth : 1000,\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t} }>\n <button onClick={ onButtonClick }>Move focus to an element out of view\n </button>\n <input\n ref={ targetRef }\n style={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tbottom: args.scrollDirection === 'x' ? 'initial' : 0,\n\t\t\t\t\t\tright: 0,\n\t\t\t\t\t} }\n type=\"text\"\n value=\"Focus me\"\n readOnly />\n </View>\n </Scrollable>\n );\n};"}],"import":"import { Scrollable, View } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedScrollable","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/scrollable/component.tsx","actualName":"UnconnectedScrollable"}},"components-spacer":{"id":"components-spacer","name":"Spacer","path":"../packages/components/src/spacer/stories/index.story.tsx","stories":[{"id":"components-spacer--default","name":"Default","snippet":"const Default = () => {\n return (\n <>\n <BlackBox />\n <Spacer>This is the spacer</Spacer>\n <BlackBox />\n </>\n );\n};"}],"import":"import { Spacer } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedSpacer","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/spacer/component.tsx","actualName":"UnconnectedSpacer"}},"components-surface":{"id":"components-surface","name":"Surface","path":"../packages/components/src/surface/stories/index.story.tsx","stories":[{"id":"components-surface--default","name":"Default","snippet":"const Default = () => {\n return (\n <Surface style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }>\n <Text>Code is Poetry</Text>\n </Surface>\n );\n};"}],"import":"import { Surface, Text } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedSurface","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/surface/component.tsx","actualName":"UnconnectedSurface"}},"components-toolbar":{"id":"components-toolbar","name":"Toolbar","path":"../packages/components/src/toolbar/stories/index.story.tsx","stories":[{"id":"components-toolbar--default","name":"Default","snippet":"const Default = ( props ) => (\n\t<div style={ { height: 280 } }>\n\t\t<Toolbar { ...props } />\n\t</div>\n);"},{"id":"components-toolbar--without-group","name":"Without Group","snippet":"const WithoutGroup = ( props ) => (\n\t<div style={ { height: 280 } }>\n\t\t<Toolbar { ...props } />\n\t</div>\n);"},{"id":"components-toolbar--unstyled","name":"Unstyled","snippet":"const Unstyled = ( props ) => (\n\t<div style={ { height: 280 } }>\n\t\t<Toolbar { ...props } />\n\t</div>\n);","description":"Set the variant to `unstyled` to remove default border styles. Otherwise, leave it as `undefined` for default styles."}],"import":"import {\n DropdownMenu,\n Toolbar,\n ToolbarButton,\n ToolbarDropdownMenu,\n ToolbarGroup,\n ToolbarItem,\n} from \"@wordpress/components\";\nimport { Path, SVG } from \"@wordpress/primitives\";","jsDocTags":{},"description":"Renders a toolbar. To add controls, simply pass `ToolbarButton` components as children. ```jsx import { Toolbar, ToolbarButton } from '@wordpress/components'; import { formatBold, formatItalic, link } from '@wordpress/icons'; function MyToolbar() { return ( <Toolbar label=\"Options\"> <ToolbarButton icon={ formatBold } label=\"Bold\" /> <ToolbarButton icon={ formatItalic } label=\"Italic\" /> <ToolbarButton icon={ link } label=\"Link\" /> </Toolbar> ); } ```","reactDocgen":{"description":"Renders a toolbar.\n\nTo add controls, simply pass `ToolbarButton` components as children.\n\n```jsx\nimport { Toolbar, ToolbarButton } from '@wordpress/components';\nimport { formatBold, formatItalic, link } from '@wordpress/icons';\n\nfunction MyToolbar() {\n return (\n <Toolbar label=\"Options\">\n <ToolbarButton icon={ formatBold } label=\"Bold\" />\n <ToolbarButton icon={ formatItalic } label=\"Italic\" />\n <ToolbarButton icon={ link } label=\"Link\" />\n </Toolbar>\n );\n}\n```","methods":[],"displayName":"Toolbar","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/toolbar/toolbar/index.tsx","actualName":"Toolbar","exportName":"Toolbar"}},"components-toolspanel":{"id":"components-toolspanel","name":"ToolsPanel","path":"../packages/components/src/tools-panel/stories/index.story.tsx","stories":[{"id":"components-toolspanel--default","name":"Default","snippet":"const Default = ( {\n\tresetAll: resetAllProp,\n\t...props\n} ) => {\n\tconst [ height, setHeight ] = useState< string | undefined >();\n\tconst [ minHeight, setMinHeight ] = useState< string | undefined >();\n\tconst [ width, setWidth ] = useState< string | undefined >();\n\tconst [ scale, setScale ] = useState< number | string | undefined >();\n\n\tconst resetAll: typeof resetAllProp = ( filters ) => {\n\t\tsetHeight( undefined );\n\t\tsetWidth( undefined );\n\t\tsetMinHeight( undefined );\n\t\tsetScale( undefined );\n\t\tresetAllProp( filters );\n\t};\n\n\treturn (\n\t\t<PanelWrapperView>\n\t\t\t<Panel>\n\t\t\t\t<ToolsPanel { ...props } resetAll={ resetAll }>\n\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\tonDeselect={ () => setWidth( undefined ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\t\tonChange={ ( next ) => setWidth( next ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\tonDeselect={ () => setHeight( undefined ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\t\tonChange={ ( next ) => setHeight( next ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! minHeight }\n\t\t\t\t\t\tlabel=\"Minimum height\"\n\t\t\t\t\t\tonDeselect={ () => setMinHeight( undefined ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Minimum height\"\n\t\t\t\t\t\t\tvalue={ minHeight }\n\t\t\t\t\t\t\tonChange={ ( next ) => setMinHeight( next ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! scale }\n\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\tonDeselect={ () => setScale( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\t\tonChange={ ( next ) => setScale( next ) }\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\t\t\t\tlabel=\"Cover\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\t\t\t\tlabel=\"Contain\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"fill\"\n\t\t\t\t\t\t\t\tlabel=\"Fill\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</Panel>\n\t\t</PanelWrapperView>\n\t);\n};"},{"id":"components-toolspanel--with-non-tools-panel-items","name":"With Non Tools Panel Items","snippet":"const WithNonToolsPanelItems = ( {\n\tresetAll: resetAllProp,\n\t...props\n} ) => {\n\tconst [ height, setHeight ] = useState< string | undefined >();\n\tconst [ width, setWidth ] = useState< string | undefined >();\n\n\tconst resetAll: typeof resetAllProp = ( filters ) => {\n\t\tsetHeight( undefined );\n\t\tsetWidth( undefined );\n\t\tresetAllProp( filters );\n\t};\n\n\treturn (\n\t\t<PanelWrapperView>\n\t\t\t<Panel>\n\t\t\t\t<ToolsPanel { ...props } resetAll={ resetAll }>\n\t\t\t\t\t<IntroText>\n\t\t\t\t\t\tThis text illustrates not all items must be wrapped in a\n\t\t\t\t\t\tToolsPanelItem and represented in the panel menu.\n\t\t\t\t\t</IntroText>\n\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\tonDeselect={ () => setWidth( undefined ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\t\tonChange={ ( next ) => setWidth( next ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\tonDeselect={ () => setHeight( undefined ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\t\tonChange={ ( next ) => setHeight( next ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</Panel>\n\t\t</PanelWrapperView>\n\t);\n};"},{"id":"components-toolspanel--with-optional-items-plus-icon","name":"With Optional Items Plus Icon","snippet":"const WithOptionalItemsPlusIcon = ( {\n\tresetAll: resetAllProp,\n\t...props\n} ) => {\n\tconst [\n\t\tisFirstToolsPanelItemShownByDefault,\n\t\tsetIsFirstToolsPanelItemShownByDefault,\n\t] = useState( false );\n\tconst [ height, setHeight ] = useState< string | undefined >();\n\tconst [ width, setWidth ] = useState< string | undefined >();\n\tconst [ minWidth, setMinWidth ] = useState< string | undefined >();\n\n\tconst resetAll: typeof resetAllProp = ( filters ) => {\n\t\tsetHeight( undefined );\n\t\tsetWidth( undefined );\n\t\tsetMinWidth( undefined );\n\t\tresetAllProp( filters );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PanelWrapperView>\n\t\t\t\t<Panel>\n\t\t\t\t\t<ToolsPanel\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tresetAll={ resetAll }\n\t\t\t\t\t\t// `key` property here is used as a hack to force `ToolsPanel` to re-render\n\t\t\t\t\t\t// See https://github.com/WordPress/gutenberg/pull/38262/files#r793422991\n\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\tisFirstToolsPanelItemShownByDefault\n\t\t\t\t\t\t\t\t? 'true'\n\t\t\t\t\t\t\t\t: 'false'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\t\thasValue={ () => !! minWidth }\n\t\t\t\t\t\t\tlabel=\"Minimum width\"\n\t\t\t\t\t\t\tonDeselect={ () => setMinWidth( undefined ) }\n\t\t\t\t\t\t\tisShownByDefault={\n\t\t\t\t\t\t\t\tisFirstToolsPanelItemShownByDefault\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel=\"Minimum width\"\n\t\t\t\t\t\t\t\tvalue={ minWidth }\n\t\t\t\t\t\t\t\tonChange={ ( next ) => setMinWidth( next ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\t\tonDeselect={ () => setWidth( undefined ) }\n\t\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel=\"Width\"\n\t\t\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\t\t\tonChange={ ( next ) => setWidth( next ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t\t<SingleColumnItem\n\t\t\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\t\tonDeselect={ () => setHeight( undefined ) }\n\t\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel=\"Height\"\n\t\t\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\t\t\tonChange={ ( next ) => setHeight( next ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</SingleColumnItem>\n\t\t\t\t\t</ToolsPanel>\n\t\t\t\t</Panel>\n\t\t\t</PanelWrapperView>\n\n\t\t\t<button\n\t\t\t\tonClick={ () =>\n\t\t\t\t\tsetIsFirstToolsPanelItemShownByDefault(\n\t\t\t\t\t\t! isFirstToolsPanelItemShownByDefault\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\taria-pressed={\n\t\t\t\t\tisFirstToolsPanelItemShownByDefault ? 'true' : 'false'\n\t\t\t\t}\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginTop: '2rem',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ isFirstToolsPanelItemShownByDefault\n\t\t\t\t\t? 'Make first PanelItem hidden by default'\n\t\t\t\t\t: 'Make first PanelItem shown by default' }\n\t\t\t</button>\n\t\t</>\n\t);\n};"},{"id":"components-toolspanel--with-slot-fill-items","name":"With Slot Fill Items","snippet":"const WithSlotFillItems = ( {\n\tresetAll: resetAllProp,\n\tpanelId,\n\t...props\n} ) => {\n\tconst [ attributes, setAttributes ] = useState< {\n\t\twidth?: string;\n\t\theight?: string;\n\t} >( {} );\n\tconst { width, height } = attributes;\n\n\tconst resetAll: typeof resetAllProp = ( resetFilters = [] ) => {\n\t\tlet newAttributes: typeof attributes = {};\n\n\t\tresetFilters.forEach( ( resetFilter ) => {\n\t\t\tnewAttributes = {\n\t\t\t\t...newAttributes,\n\t\t\t\t...resetFilter( newAttributes ),\n\t\t\t};\n\t\t} );\n\n\t\tsetAttributes( newAttributes );\n\t\tresetAllProp( resetFilters );\n\t};\n\n\tconst updateAttribute = ( name: string, value?: any ) => {\n\t\tsetAttributes( {\n\t\t\t...attributes,\n\t\t\t[ name ]: value,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ToolsPanelItems>\n\t\t\t\t<SingleColumnItem\n\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\tlabel=\"Injected Width\"\n\t\t\t\t\tonDeselect={ () => updateAttribute( 'width', undefined ) }\n\t\t\t\t\tresetAllFilter={ () => ( { width: undefined } ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel=\"Injected Width\"\n\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\tupdateAttribute( 'width', next )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</SingleColumnItem>\n\t\t\t\t<SingleColumnItem\n\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\tonDeselect={ () => updateAttribute( 'height', undefined ) }\n\t\t\t\t\tresetAllFilter={ () => ( { height: undefined } ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\tupdateAttribute( 'height', next )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</SingleColumnItem>\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => true }\n\t\t\t\t\tlabel=\"Item for alternate panel\"\n\t\t\t\t\tonDeselect={ () => undefined }\n\t\t\t\t\tresetAllFilter={ () => undefined }\n\t\t\t\t\tpanelId=\"intended-for-another-panel-via-shared-slot\"\n\t\t\t\t>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis panel item will not be displayed in the demo as its\n\t\t\t\t\t\tpanelId does not match the panel being rendered.\n\t\t\t\t\t</p>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t</ToolsPanelItems>\n\t\t\t<PanelWrapperView>\n\t\t\t\t<Panel>\n\t\t\t\t\t<ToolsPanel\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tresetAll={ resetAll }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Slot />\n\t\t\t\t\t</ToolsPanel>\n\t\t\t\t</Panel>\n\t\t\t</PanelWrapperView>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-toolspanel--with-conditional-default-control","name":"With Conditional Default Control","snippet":"const WithConditionalDefaultControl = ( {\n\tresetAll: resetAllProp,\n\tpanelId,\n\t...props\n} ) => {\n\tconst [ attributes, setAttributes ] = useState< {\n\t\theight?: string;\n\t\tscale?: number | string;\n\t} >( {} );\n\tconst { height, scale } = attributes;\n\n\tconst resetAll: typeof resetAllProp = ( resetFilters = [] ) => {\n\t\tlet newAttributes: typeof attributes = {};\n\n\t\tresetFilters.forEach( ( resetFilter ) => {\n\t\t\tnewAttributes = {\n\t\t\t\t...newAttributes,\n\t\t\t\t...resetFilter( newAttributes ),\n\t\t\t};\n\t\t} );\n\n\t\tsetAttributes( newAttributes );\n\n\t\tresetAllProp( resetFilters );\n\t};\n\n\tconst updateAttribute = ( name: string, value?: any ) => {\n\t\tsetAttributes( {\n\t\t\t...attributes,\n\t\t\t[ name ]: value,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ToolsPanelItems>\n\t\t\t\t<SingleColumnItem\n\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\tonDeselect={ () => updateAttribute( 'height', undefined ) }\n\t\t\t\t\tresetAllFilter={ () => ( { height: undefined } ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\tupdateAttribute( 'height', next )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</SingleColumnItem>\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! scale }\n\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\tonDeselect={ () => updateAttribute( 'scale', undefined ) }\n\t\t\t\t\tresetAllFilter={ () => ( { scale: undefined } ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tisShownByDefault={ !! height }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\tupdateAttribute( 'scale', next )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption value=\"cover\" label=\"Cover\" />\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\t\t\tlabel=\"Contain\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption value=\"fill\" label=\"Fill\" />\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t</ToolsPanelItems>\n\t\t\t<PanelWrapperView>\n\t\t\t\t<Panel>\n\t\t\t\t\t<ToolsPanel\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tresetAll={ resetAll }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Slot />\n\t\t\t\t\t</ToolsPanel>\n\t\t\t\t</Panel>\n\t\t\t</PanelWrapperView>\n\t\t</SlotFillProvider>\n\t);\n};"},{"id":"components-toolspanel--with-conditionally-rendered-control","name":"With Conditionally Rendered Control","snippet":"const WithConditionallyRenderedControl = ( { resetAll: resetAllProp, panelId, ...props } ) => {\n\tconst [ attributes, setAttributes ] = useState< {\n\t\theight?: string;\n\t\tscale?: number | string;\n\t} >( {} );\n\tconst { height, scale } = attributes;\n\n\tconst resetAll: typeof resetAllProp = ( resetFilters = [] ) => {\n\t\tlet newAttributes: typeof attributes = {};\n\n\t\tresetFilters.forEach( ( resetFilter ) => {\n\t\t\tnewAttributes = {\n\t\t\t\t...newAttributes,\n\t\t\t\t...resetFilter( newAttributes ),\n\t\t\t};\n\t\t} );\n\n\t\tsetAttributes( newAttributes );\n\n\t\tresetAllProp( resetFilters );\n\t};\n\n\tconst updateAttribute = ( name: string, value?: any ) => {\n\t\tsetAttributes( {\n\t\t\t...attributes,\n\t\t\t[ name ]: value,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ToolsPanelItems>\n\t\t\t\t<SingleColumnItem\n\t\t\t\t\thasValue={ () => !! height }\n\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\tupdateAttribute( 'scale', undefined );\n\t\t\t\t\t\tupdateAttribute( 'height', undefined );\n\t\t\t\t\t} }\n\t\t\t\t\tresetAllFilter={ () => ( { height: undefined } ) }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel=\"Injected Height\"\n\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\tupdateAttribute( 'height', next )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</SingleColumnItem>\n\t\t\t\t{ !! height && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! scale }\n\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tupdateAttribute( 'scale', undefined )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tresetAllFilter={ () => ( { scale: undefined } ) }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel=\"Scale\"\n\t\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\t\tonChange={ ( next ) =>\n\t\t\t\t\t\t\t\tupdateAttribute( 'scale', next )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\t\t\t\tlabel=\"Cover\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\t\t\t\tlabel=\"Contain\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tvalue=\"fill\"\n\t\t\t\t\t\t\t\tlabel=\"Fill\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</ToolsPanelItems>\n\t\t\t<PanelWrapperView>\n\t\t\t\t<Panel>\n\t\t\t\t\t<ToolsPanel\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tresetAll={ resetAll }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Slot />\n\t\t\t\t\t</ToolsPanel>\n\t\t\t\t</Panel>\n\t\t\t</PanelWrapperView>\n\t\t</SlotFillProvider>\n\t);\n};"}],"import":"import {\n Panel,\n Provider as SlotFillProvider,\n ToggleGroupControl,\n ToggleGroupControlOption,\n ToolsPanel,\n ToolsPanelItem,\n UnitControl,\n} from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedToolsPanel","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/tools-panel/tools-panel/component.tsx","actualName":"UnconnectedToolsPanel"}},"components-view":{"id":"components-view","name":"View","path":"../packages/components/src/view/stories/index.story.tsx","stories":[{"id":"components-view--default","name":"Default","snippet":"const Default = () => {\n return <View>An example tip</View>;\n};"}],"import":"import { View } from \"@wordpress/components\";","jsDocTags":{},"description":"`View` is a core component that renders everything in the library. It is the principle component in the entire library. ```jsx import { View } from `@wordpress/components`; function Example() { return ( <View> Code is Poetry </View> ); } ```","reactDocgen":{"description":"`View` is a core component that renders everything in the library.\nIt is the principle component in the entire library.\n\n```jsx\nimport { View } from `@wordpress/components`;\n\nfunction Example() {\n\treturn (\n\t\t<View>\n\t\t\t Code is Poetry\n\t\t</View>\n\t);\n}\n```","methods":[],"displayName":"View","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/view/component.tsx","actualName":"View","exportName":"View"}},"components-zstack":{"id":"components-zstack","name":"ZStack","path":"../packages/components/src/z-stack/stories/index.story.tsx","stories":[{"id":"components-zstack--default","name":"Default","snippet":"const Default = () => {\n return (\n <ZStack offset={20}>\n <Avatar backgroundColor=\"#444\" />\n <Avatar backgroundColor=\"#777\" />\n <Avatar backgroundColor=\"#aaa\" />\n <Avatar backgroundColor=\"#fff\" />\n </ZStack>\n );\n};"}],"import":"import { Elevation, View, ZStack } from \"@wordpress/components\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"UnconnectedZStack","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/components/src/z-stack/component.tsx","actualName":"UnconnectedZStack"}},"icons-icon":{"id":"icons-icon","name":"Icon","path":"../packages/icons/src/icon/stories/index.story.tsx","stories":[{"id":"icons-icon--default","name":"Default","snippet":"const Default = (): ReactElement => {\n\treturn (\n\t\t<>\n\t\t\t<div>\n\t\t\t\t<h2>Dashicons (corrected viewport)</h2>\n\n\t\t\t\t<Icon icon={ check } />\n\t\t\t\t<Icon icon={ check } size={ 36 } />\n\t\t\t\t<Icon icon={ check } size={ 48 } />\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<h2>Material and Other</h2>\n\n\t\t\t\t<Icon icon={ icons.paragraph } />\n\t\t\t\t<Icon icon={ icons.paragraph } size={ 36 } />\n\t\t\t\t<Icon icon={ icons.paragraph } size={ 48 } />\n\t\t\t</div>\n\t\t</>\n\t);\n};"}],"import":"import { Icon } from \"@wordpress/icons\";","jsDocTags":{"param":["props The component props."],"return":["Icon component"]},"description":"Return an SVG icon.","reactDocgen":{"description":"Return an SVG icon.\n\n@param props The component props.\n\n@return Icon component","methods":[],"definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/icons/src/icon/index.ts","actualName":"","exportName":"default","props":{"icon":{"required":true,"tsType":{"name":"ReactElement"},"description":"The SVG component to render"},"size":{"required":false,"tsType":{"name":"number"},"description":"The size of the icon in pixels\n\n@default 24","defaultValue":{"value":"24","computed":false}}},"composes":["SVGProps"]}},"design-system-patterns-save-submit":{"id":"design-system-patterns-save-submit","name":"LayoutCardSaveExample","path":"./stories/design-system/patterns/save-and-submit.story.tsx","stories":[{"id":"design-system-patterns-save-submit--save-form-layout-card","name":"Save form layout card","snippet":"const SaveFormLayoutCard = () => <LayoutCardSaveExample />;"}],"import":"import { Button, Card, CardBody } from \"@wordpress/components\";\nimport { DataForm } from \"@wordpress/dataviews\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"LayoutCardSaveExample\" component.\n 51 | };\n 52 |\n> 53 | const meta: Meta< typeof LayoutCardSaveExample > = {\n | ^\n 54 | \ttitle: 'Design System/Patterns/Save & Submit',\n 55 | \tcomponent: LayoutCardSaveExample,\n 56 | \tparameters: {\n\n./stories/design-system/patterns/save-and-submit.mdx:\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button, Card, CardBody } from '@wordpress/components';\nimport { DataForm } from '@wordpress/dataviews';\nimport { useState } from '@wordpress/element';\n\nconst LayoutCardSaveExample = () => {\n\tconst [ data, setData ] = useState( { title: '' } );\n\n\treturn (\n\t\t<div style={ { maxWidth: '480px' } }>\n\t\t\t<Card\n\t\t\t\tsize={ {\n\t\t\t\t\tblockStart: 'medium',\n\t\t\t\t\tblockEnd: 'medium',\n\t\t\t\t\tinlineStart: 'medium',\n\t\t\t\t\tinlineEnd: 'medium',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<DataForm\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfields={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: 'title',\n\t\t\t\t\t\t\t\tlabel: 'Title',\n\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tform={ {\n\t\t\t\t\t\t\tlayout: { type: 'regular' },\n\t\t\t\t\t\t\tfields: [ 'title' ],\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( edits ) =>\n\t\t\t\t\t\t\tsetData( ( previous ) => ( {\n\t\t\t\t\t\t\t\t...previous,\n\t\t\t\t\t\t\t\t...edits,\n\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tisBusy\n\t\t\t\t\t\tstyle={ { marginTop: '16px' } }\n\t\t\t\t\t>\n\t\t\t\t\t\tSave\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n};\n\nconst meta: Meta< typeof LayoutCardSaveExample > = {\n\ttitle: 'Design System/Patterns/Save & Submit',\n\tcomponent: LayoutCardSaveExample,\n\tparameters: {\n\t\tcontrols: { disable: true },\n\t},\n\ttags: [ '!dev' /* Hide individual story pages from sidebar */ ],\n};\n\nexport default meta;\n\ntype Story = StoryObj< typeof LayoutCardSaveExample >;\n\nexport const SaveFormLayoutCard: Story = {\n\tname: 'Save form layout card',\n\trender: () => <LayoutCardSaveExample />,\n};\n"},"docs":{"design-system-patterns-save-submit--docs":{"id":"design-system-patterns-save-submit--docs","name":"Docs","path":"./stories/design-system/patterns/save-and-submit.mdx","title":"Design System/Patterns/Save & Submit","content":"import { Canvas, Meta } from '@storybook/addon-docs/blocks';\nimport * as SaveSubmitStories from './save-and-submit.story';\n\n<Meta of={ SaveSubmitStories } />\n\n# Save & Submit\n\nGuidelines for form submission and saving settings.\n\n## Feedback\n\nThe following feedback patterns help users interpret save and submit results.\n\n### Saving\n\n- While saving the button state switches to a busy or loading state.\n- A [Snackbar](https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs) confirms a successful save.\n\n<Canvas of={ SaveSubmitStories.SaveFormLayoutCard } />\n\n### No unsaved changes\n\nWhen all changes are saved the Save button is disabled and reveals a “No unsaved changes” tooltip on hover or focus.\n\n### Invalid fields\n\nIf the save or submit fails due to user error (an invalid field or a required field is omitted) then the page scrolls with animation to the first invalid field, which shows a validation error message.\n\n### Failed save\n\nIf the save process fails for any reason the user is notified via `ConfirmDialog`.\n\n### Auto-save\n\n- Auto-saving is restricted to `ToggleControl` fields.\n- Follows the same feedback conventions as other save methods.\n- It is preferable to use a toggle instead of a checkbox for turning features on and off. The exception would be if the checkbox is part of a form with other fields that also need to be updated at the same time.\n- Keep labels short. Use the description under the toggle or in the card title to provide more context.\n- Lead labels with a verb like “Use, Allow, Show,” or “Enable”.\n"}}},"design-system-theme-theme-provider":{"id":"design-system-theme-theme-provider","name":"ThemeProvider","path":"../packages/theme/src/stories/index.story.tsx","stories":[{"id":"design-system-theme-theme-provider--default","name":"Default","snippet":"const Default = () => <ThemeProvider isRoot><DSTokensList /></ThemeProvider>;"},{"id":"design-system-theme-theme-provider--with-picker","name":"With Picker","snippet":"const WithPicker = () => {\n const id = useId();\n const [ primary, setPrimary ] = useState< undefined | string >();\n\n return (\n <ThemeProvider\n isRoot\n color={ {\n primary,\n } }>\n <div style={ { position: 'relative' } }>\n <div\n style={ {\n position: 'sticky',\n top: 0,\n right: 0,\n backgroundColor:\n 'var(--wpds-color-bg-surface-neutral)',\n color: 'var( --wpds-color-fg-content-neutral )',\n padding: '0.5rem',\n borderRadius: '0.5rem',\n boxShadow: '0 0 0.5rem 0 rgba(0, 0, 0, 0.1)',\n } }>\n <div>\n <input\n type=\"color\"\n id={ id }\n name=\"primary\"\n value={ primary }\n onChange={ ( e ) =>\n setPrimary( e.target.value )\n } />\n <label htmlFor={ id }>Pick the primary color</label>\n </div>\n </div>\n <DSTokensList />\n </div>\n </ThemeProvider>\n );\n};"},{"id":"design-system-theme-theme-provider--nesting-and-inheriting","name":"Nesting And Inheriting","snippet":"const NestingAndInheriting = () => {\n return (\n <ThemeProvider>\n <NestingDebug\n bg=\"inherit (root)\"\n primary=\"inherit (root)\"\n density=\"inherit (root)\"\n />\n <div style={ { paddingInlineStart: '1rem' } }>\n <ThemeProvider\n color={ {\n bg: '#1e1e1e',\n } }\n density=\"compact\"\n >\n <NestingDebug\n bg=\"#1e1e1e\"\n primary=\"inherit (root)\"\n density=\"compact\"\n />\n <div style={ { paddingInlineStart: '1rem' } }>\n <ThemeProvider>\n <NestingDebug\n bg=\"inherit (#1e1e1e)\"\n primary=\"inherit (root)\"\n density=\"inherit (compact)\"\n />\n <div style={ { paddingInlineStart: '1rem' } }>\n <ThemeProvider\n color={ { primary: 'hotpink' } }\n density=\"default\"\n >\n <NestingDebug\n bg=\"inherit (#1e1e1e)\"\n primary=\"hotpink\"\n density=\"default\"\n />\n <div\n style={ {\n paddingInlineStart: '1rem',\n } }\n >\n <ThemeProvider\n color={ { bg: '#f8f8f8' } }\n >\n <NestingDebug\n bg=\"#f8f8f8\"\n primary=\"inherit (hotpink)\"\n density=\"inherit (default)\"\n />\n </ThemeProvider>\n </div>\n </ThemeProvider>\n </div>\n </ThemeProvider>\n </div>\n </ThemeProvider>\n </div>\n </ThemeProvider>\n );\n};"},{"id":"design-system-theme-theme-provider--across-iframes","name":"Across Iframes","snippet":"const AcrossIframes = () => {\n return (\n <ThemeProvider isRoot>\n (<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } }>Code is poetry.{ ' ' }\n <span\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\tpadding: 'var(--wpds-dimension-padding-sm)',\n\t\t\t\t\t\tborderRadius: '0.25rem',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t'var(--wpds-color-bg-interactive-brand-strong)',\n\t\t\t\t\t\tcolor: 'var(--wpds-color-fg-interactive-brand-strong)',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\tprimary\n\t\t\t\t</span>\n </div>)\n <IframeWithClonedTokenStyles>\n <div\n style={ {\n color: 'var(--wpds-color-fg-content-neutral)',\n } }>In the iframe, but outside of `ThemeProvider`\n </div>\n <ThemeProvider\n // Note: the isRoot prop is necessary to apply the DS tokens to any\n // UI rendered outside of the ThemeProvider (including overlays, etc)\n isRoot>\n (<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } }>Code is poetry.{ ' ' }\n <span\n style={ {\n display: 'inline-block',\n padding: 'var(--wpds-dimension-padding-sm)',\n borderRadius: '0.25rem',\n backgroundColor:\n 'var(--wpds-color-bg-interactive-brand-strong)',\n color: 'var(--wpds-color-fg-interactive-brand-strong)',\n } }\n >\n primary\n </span>\n </div>)\n </ThemeProvider>\n </IframeWithClonedTokenStyles>\n </ThemeProvider>\n );\n};"}],"import":"import { ThemeProvider } from \"@wordpress/theme\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ThemeProvider","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/theme/src/theme-provider.tsx","actualName":"ThemeProvider","exportName":"ThemeProvider","props":{"color":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The primary seed color to use for the theme.\n\t *\n\t * By default, it inherits from parent `ThemeProvider`,\n\t * and fallbacks to statically built CSS.\n\t */\n\tprimary?: string;\n\t/**\n\t * The background seed color to use for the theme.\n\t *\n\t * By default, it inherits from parent `ThemeProvider`,\n\t * and fallbacks to statically built CSS.\n\t */\n\tbg?: string;\n}","signature":{"properties":[{"key":"primary","value":{"name":"string","required":false},"description":"The primary seed color to use for the theme.\n\nBy default, it inherits from parent `ThemeProvider`,\nand fallbacks to statically built CSS."},{"key":"bg","value":{"name":"string","required":false},"description":"The background seed color to use for the theme.\n\nBy default, it inherits from parent `ThemeProvider`,\nand fallbacks to statically built CSS."}]}},"description":"The set of color options to apply to the theme.","defaultValue":{"value":"{}","computed":false}},"cursor":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The cursor style for interactive controls that are not links\n\t * (e.g. buttons, checkboxes, and toggles).\n\t *\n\t * By default, it inherits from the parent `ThemeProvider`,\n\t * and falls back to the prebuilt default (`default`).\n\t */\n\tcontrol?: 'default' | 'pointer';\n}","signature":{"properties":[{"key":"control","value":{"name":"union","raw":"'default' | 'pointer'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'pointer'"}],"required":false},"description":"The cursor style for interactive controls that are not links\n(e.g. buttons, checkboxes, and toggles).\n\nBy default, it inherits from the parent `ThemeProvider`,\nand falls back to the prebuilt default (`default`)."}]}},"description":"The set of cursor options to apply to the theme."},"density":{"required":false,"tsType":{"name":"union","raw":"undefined | 'default' | 'compact' | 'comfortable'","elements":[{"name":"undefined"},{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'comfortable'"}]},"description":"The density of the theme. If left unspecified, the theme inherits from\nthe density of the closest `ThemeProvider`, or uses the default density\nif there is no inherited density.\n\n@default undefined"},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The children to render."},"isRoot":{"required":false,"tsType":{"name":"boolean"},"description":"When a ThemeProvider is the root provider, it will apply its theming\nsettings also to the root document element (e.g. the html element).\nThis is useful, for example, to make sure that the `html` element can\nconsume the right background color, or that overlays rendered inside a\nportal can inherit the correct color scheme.\n\n@default false","defaultValue":{"value":"false","computed":false}}}}},"design-system-theme-theme-provider-example-application":{"id":"design-system-theme-theme-provider-example-application","name":"ThemeProvider","path":"./stories/design-system/theme-example-application.story.tsx","stories":[{"id":"design-system-theme-theme-provider-example-application--example-application","name":"Example Application","snippet":"const ExampleApplication = () => {\n const [ primary, setPrimary ] = useState< string | undefined >();\n const [ bg, setBg ] = useState< string | undefined >();\n const [ density, setDensity ] = useState<\n 'default' | 'compact' | 'comfortable' | undefined\n >();\n\n return (\n <div>\n <div\n style={ {\n display: 'flex',\n alignItems: 'center',\n gap: '16px',\n padding: '12px 16px',\n marginBlockEnd: '16px',\n borderRadius: '8px',\n background: '#f0f0f0',\n fontSize: '13px',\n flexWrap: 'wrap',\n } }\n >\n { /* eslint-disable jsx-a11y/label-has-associated-control */ }\n <label\n style={ {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '6px',\n } }\n >\n Primary\n <input\n type=\"color\"\n value={ primary ?? '#3858e9' }\n onChange={ ( e ) => setPrimary( e.target.value ) }\n />\n </label>\n <label\n style={ {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '6px',\n } }\n >\n Background\n <input\n type=\"color\"\n value={ bg ?? '#ffffff' }\n onChange={ ( e ) => setBg( e.target.value ) }\n />\n </label>\n <label\n style={ {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '6px',\n } }\n >\n Density\n <select\n value={ density ?? '' }\n onChange={ ( e ) =>\n setDensity(\n ( e.target.value || undefined ) as\n | 'default'\n | 'compact'\n | 'comfortable'\n | undefined\n )\n }\n >\n <option value=\"\">Default</option>\n <option value=\"compact\">Compact</option>\n <option value=\"comfortable\">Comfortable</option>\n </select>\n </label>\n { /* eslint-enable jsx-a11y/label-has-associated-control */ }\n </div>\n <ThemeProvider\n color={ { primary, bg } }\n density={ density }\n isRoot\n >\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: '200px 1fr',\n minHeight: '500px',\n color: 'var(--wpds-color-fg-content-neutral)',\n } }\n >\n { /* Sidebar */ }\n <div\n style={ {\n backgroundColor:\n 'var(--wpds-color-bg-surface-neutral-weak)',\n padding:\n 'var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-lg)',\n } }\n >\n <Text\n variant=\"heading-sm\"\n render={ <h2 /> }\n style={ {\n marginBlockEnd:\n 'var(--wpds-dimension-gap-xl)',\n } }\n >\n My App\n </Text>\n <nav>\n <Stack\n direction=\"column\"\n gap=\"xs\"\n render={ <ul /> }\n style={ {\n listStyle: 'none',\n margin: 0,\n padding: 0,\n } }\n >\n { sidebarNavItems.map( ( item ) => (\n <li key={ item }>\n <Text variant=\"body-md\">\n { item }\n </Text>\n </li>\n ) ) }\n </Stack>\n </nav>\n </div>\n\n { /* Page content (header + content area) */ }\n <div\n style={ {\n backgroundColor:\n 'var(--wpds-color-bg-surface-neutral-weak)',\n padding: 'var(--wpds-dimension-padding-lg)',\n } }\n >\n <div\n style={ {\n display: 'flex',\n flexDirection: 'column',\n borderRadius:\n 'var(--wpds-border-radius-lg)',\n border: '1px solid var(--wpds-color-stroke-surface-neutral-weak)',\n overflow: 'hidden',\n height: '100%',\n } }\n >\n { /* Header */ }\n <div\n style={ {\n backgroundColor:\n 'var(--wpds-color-bg-surface-neutral-strong)',\n padding:\n 'var(--wpds-dimension-padding-xl)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 'var(--wpds-dimension-gap-lg)',\n borderBlockEnd:\n '1px solid var(--wpds-color-stroke-surface-neutral-weak)',\n } }\n >\n <div\n style={ {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--wpds-dimension-gap-md)',\n } }\n >\n <Text\n variant=\"heading-lg\"\n render={ <h1 /> }\n style={ {\n margin: 0,\n } }\n >\n Settings\n </Text>\n <Badge intent=\"informational\">\n Beta\n </Badge>\n </div>\n <Button\n variant=\"solid\"\n tone=\"brand\"\n size=\"compact\"\n >\n Save changes\n </Button>\n </div>\n\n { /* Content area */ }\n <div\n style={ {\n backgroundColor:\n 'var(--wpds-color-bg-surface-neutral)',\n padding:\n 'var(--wpds-dimension-padding-xl)',\n flexGrow: 1,\n } }\n >\n <Stack\n direction=\"column\"\n gap=\"xl\"\n style={ {\n maxWidth: '640px',\n marginInline: 'auto',\n } }\n >\n <Notice.Root intent=\"info\">\n <Notice.Title>\n Welcome to your new site\n </Notice.Title>\n <Notice.Description>\n Complete the steps below to\n finish setting up.\n </Notice.Description>\n </Notice.Root>\n\n { /* Card 1: General */ }\n <Card.Root>\n <Card.Header>\n <Card.Title>General</Card.Title>\n </Card.Header>\n <Card.Content>\n <Stack\n direction=\"column\"\n gap=\"md\"\n >\n <Text>\n Configure the basic\n settings for your site.\n You can update your{ ' ' }\n <Link href=\"#\">\n site title\n </Link>\n , tagline, and{ ' ' }\n <Link href=\"#\">\n admin email address\n </Link>{ ' ' }\n at any time.\n </Text>\n <Text>\n For more advanced\n options, visit the{ ' ' }\n <Link href=\"#\">\n developer\n documentation\n </Link>\n .\n </Text>\n </Stack>\n </Card.Content>\n </Card.Root>\n\n { /* Card 2: Display */ }\n <Card.Root>\n <Card.Header>\n <Card.Title>Display</Card.Title>\n </Card.Header>\n <Card.Content>\n <Tabs.Root defaultValue=\"appearance\">\n <Tabs.List variant=\"minimal\">\n <Tabs.Tab value=\"appearance\">\n Appearance\n </Tabs.Tab>\n <Tabs.Tab value=\"layout\">\n Layout\n </Tabs.Tab>\n <Tabs.Tab value=\"accessibility\">\n Accessibility\n </Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"appearance\">\n <Text\n style={ {\n paddingBlockStart:\n 'var(--wpds-dimension-padding-lg)',\n } }\n >\n Control how your\n site looks to\n visitors. Adjust{ ' ' }\n <Link href=\"#\">\n typography\n </Link>\n ,{ ' ' }\n <Link href=\"#\">\n colors\n </Link>\n , and spacing to\n match your brand.\n </Text>\n </Tabs.Panel>\n <Tabs.Panel value=\"layout\">\n <Text\n style={ {\n paddingBlockStart:\n 'var(--wpds-dimension-padding-lg)',\n } }\n >\n Choose a layout\n structure for your\n pages. Options\n include full-width,\n boxed, and{ ' ' }\n <Link href=\"#\">\n custom layouts\n </Link>\n .\n </Text>\n </Tabs.Panel>\n <Tabs.Panel value=\"accessibility\">\n <Text\n style={ {\n paddingBlockStart:\n 'var(--wpds-dimension-padding-lg)',\n } }\n >\n Review your\n site&apos;s{ ' ' }\n <Link href=\"#\">\n accessibility\n settings\n </Link>{ ' ' }\n to ensure it meets\n WCAG guidelines.\n </Text>\n </Tabs.Panel>\n </Tabs.Root>\n </Card.Content>\n </Card.Root>\n </Stack>\n </div>\n </div>\n </div>\n </div>\n </ThemeProvider>\n </div>\n );\n};","description":"A mock application page demonstrating how `ThemeProvider` affects multiple `@wordpress/ui` components in concert. Use the inline controls to adjust the `primary` seed color, `bg` seed color, and `density`, and observe how every surface, text element, and interactive control adapts accordingly."}],"import":"import { Badge, Button, Card, Link, Notice, Stack, Tabs, Text } from \"@wordpress/ui\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"ThemeProvider\" component.\n 30 | ];\n 31 |\n> 32 | const meta: Meta< typeof ThemeProvider > = {\n | ^\n 33 | \ttitle: 'Design System/Theme/Theme Provider/Example Application',\n 34 | \tcomponent: ThemeProvider,\n 35 | \tparameters: {\n\n./stories/design-system/theme-example-application.story.tsx:\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from '@wordpress/element';\nimport { privateApis as themeApis } from '@wordpress/theme';\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nimport {\n\tBadge,\n\tButton,\n\tCard,\n\tLink,\n\tNotice,\n\tStack,\n\tTabs,\n\tText,\n} from '@wordpress/ui';\n\nconst { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t'@wordpress/theme'\n);\n\nconst { ThemeProvider } = unlock( themeApis );\n\nconst sidebarNavItems = [\n\t'Dashboard',\n\t'Posts',\n\t'Pages',\n\t'Comments',\n\t'Appearance',\n\t'Settings',\n];\n\nconst meta: Meta< typeof ThemeProvider > = {\n\ttitle: 'Design System/Theme/Theme Provider/Example Application',\n\tcomponent: ThemeProvider,\n\tparameters: {\n\t\tcontrols: { expanded: true },\n\t\tdocs: { canvas: { sourceState: 'hidden' } },\n\t},\n};\nexport default meta;\n\n/**\n * A mock application page demonstrating how `ThemeProvider` affects multiple\n * `@wordpress/ui` components in concert. Use the inline controls to adjust\n * the `primary` seed color, `bg` seed color, and `density`, and observe how\n * every surface, text element, and interactive control adapts accordingly.\n */\nexport const ExampleApplication: StoryObj< typeof ThemeProvider > = {\n\trender: () => {\n\t\tconst [ primary, setPrimary ] = useState< string | undefined >();\n\t\tconst [ bg, setBg ] = useState< string | undefined >();\n\t\tconst [ density, setDensity ] = useState<\n\t\t\t'default' | 'compact' | 'comfortable' | undefined\n\t\t>();\n\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '16px',\n\t\t\t\t\t\tpadding: '12px 16px',\n\t\t\t\t\t\tmarginBlockEnd: '16px',\n\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\tbackground: '#f0f0f0',\n\t\t\t\t\t\tfontSize: '13px',\n\t\t\t\t\t\tflexWrap: 'wrap',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ /* eslint-disable jsx-a11y/label-has-associated-control */ }\n\t\t\t\t\t<label\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: '6px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\tPrimary\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={ primary ?? '#3858e9' }\n\t\t\t\t\t\t\tonChange={ ( e ) => setPrimary( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t\t<label\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: '6px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\tBackground\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={ bg ?? '#ffffff' }\n\t\t\t\t\t\t\tonChange={ ( e ) => setBg( e.target.value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t\t<label\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: '6px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\tDensity\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tvalue={ density ?? '' }\n\t\t\t\t\t\t\tonChange={ ( e ) =>\n\t\t\t\t\t\t\t\tsetDensity(\n\t\t\t\t\t\t\t\t\t( e.target.value || undefined ) as\n\t\t\t\t\t\t\t\t\t\t| 'default'\n\t\t\t\t\t\t\t\t\t\t| 'compact'\n\t\t\t\t\t\t\t\t\t\t| 'comfortable'\n\t\t\t\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<option value=\"\">Default</option>\n\t\t\t\t\t\t\t<option value=\"compact\">Compact</option>\n\t\t\t\t\t\t\t<option value=\"comfortable\">Comfortable</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</label>\n\t\t\t\t\t{ /* eslint-enable jsx-a11y/label-has-associated-control */ }\n\t\t\t\t</div>\n\t\t\t\t<ThemeProvider\n\t\t\t\t\tcolor={ { primary, bg } }\n\t\t\t\t\tdensity={ density }\n\t\t\t\t\tisRoot\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tdisplay: 'grid',\n\t\t\t\t\t\t\tgridTemplateColumns: '200px 1fr',\n\t\t\t\t\t\t\tminHeight: '500px',\n\t\t\t\t\t\t\tcolor: 'var(--wpds-color-fg-content-neutral)',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Sidebar */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t'var(--wpds-color-bg-surface-neutral-weak)',\n\t\t\t\t\t\t\t\tpadding:\n\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-lg)',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tvariant=\"heading-sm\"\n\t\t\t\t\t\t\t\trender={ <h2 /> }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmarginBlockEnd:\n\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-gap-xl)',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tMy App\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\t\t\t\trender={ <ul /> }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tlistStyle: 'none',\n\t\t\t\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ sidebarNavItems.map( ( item ) => (\n\t\t\t\t\t\t\t\t\t\t<li key={ item }>\n\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-md\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ item }\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{ /* Page content (header + content area) */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t'var(--wpds-color-bg-surface-neutral-weak)',\n\t\t\t\t\t\t\t\tpadding: 'var(--wpds-dimension-padding-lg)',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t'var(--wpds-border-radius-lg)',\n\t\t\t\t\t\t\t\t\tborder: '1px solid var(--wpds-color-stroke-surface-neutral-weak)',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ /* Header */ }\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t\t\t\t\t\t\t\t\t\tpadding:\n\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-xl)',\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\tgap: 'var(--wpds-dimension-gap-lg)',\n\t\t\t\t\t\t\t\t\t\tborderBlockEnd:\n\t\t\t\t\t\t\t\t\t\t\t'1px solid var(--wpds-color-stroke-surface-neutral-weak)',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tgap: 'var(--wpds-dimension-gap-md)',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"heading-lg\"\n\t\t\t\t\t\t\t\t\t\t\trender={ <h1 /> }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tSettings\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Badge intent=\"informational\">\n\t\t\t\t\t\t\t\t\t\t\tBeta\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"solid\"\n\t\t\t\t\t\t\t\t\t\ttone=\"brand\"\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tSave changes\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{ /* Content area */ }\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-color-bg-surface-neutral)',\n\t\t\t\t\t\t\t\t\t\tpadding:\n\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-xl)',\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\tgap=\"xl\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth: '640px',\n\t\t\t\t\t\t\t\t\t\t\tmarginInline: 'auto',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Notice.Root intent=\"info\">\n\t\t\t\t\t\t\t\t\t\t\t<Notice.Title>\n\t\t\t\t\t\t\t\t\t\t\t\tWelcome to your new site\n\t\t\t\t\t\t\t\t\t\t\t</Notice.Title>\n\t\t\t\t\t\t\t\t\t\t\t<Notice.Description>\n\t\t\t\t\t\t\t\t\t\t\t\tComplete the steps below to\n\t\t\t\t\t\t\t\t\t\t\t\tfinish setting up.\n\t\t\t\t\t\t\t\t\t\t\t</Notice.Description>\n\t\t\t\t\t\t\t\t\t\t</Notice.Root>\n\n\t\t\t\t\t\t\t\t\t\t{ /* Card 1: General */ }\n\t\t\t\t\t\t\t\t\t\t<Card.Root>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>General</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tgap=\"md\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tConfigure the basic\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsettings for your site.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tYou can update your{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsite title\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t, tagline, and{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tadmin email address\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tat any time.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tFor more advanced\n\t\t\t\t\t\t\t\t\t\t\t\t\t\toptions, visit the{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdeveloper\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdocumentation\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Content>\n\t\t\t\t\t\t\t\t\t\t</Card.Root>\n\n\t\t\t\t\t\t\t\t\t\t{ /* Card 2: Display */ }\n\t\t\t\t\t\t\t\t\t\t<Card.Root>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Display</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Root defaultValue=\"appearance\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.List variant=\"minimal\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Tab value=\"appearance\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAppearance\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Tab value=\"layout\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tLayout\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Tab value=\"accessibility\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAccessibility\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.List>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Panel value=\"appearance\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpaddingBlockStart:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-lg)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tControl how your\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsite looks to\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisitors. Adjust{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypography\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t,{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolors\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t, and spacing to\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmatch your brand.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Panel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Panel value=\"layout\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpaddingBlockStart:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-lg)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tChoose a layout\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstructure for your\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpages. Options\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinclude full-width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tboxed, and{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcustom layouts\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Panel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tabs.Panel value=\"accessibility\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpaddingBlockStart:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'var(--wpds-dimension-padding-lg)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tReview your\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsite&apos;s{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taccessibility\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsettings\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tto ensure it meets\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tWCAG guidelines.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Panel>\n\t\t\t\t\t\t\t\t\t\t\t\t</Tabs.Root>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Content>\n\t\t\t\t\t\t\t\t\t\t</Card.Root>\n\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ThemeProvider>\n\t\t\t</div>\n\t\t);\n\t},\n\tparameters: {\n\t\tcontrols: { disable: true },\n\t},\n};\n"}},"design-system-theme-theme-provider-brand-color-fallbacks":{"id":"design-system-theme-theme-provider-brand-color-fallbacks","name":"Verifier","path":"../packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx","stories":[{"id":"design-system-theme-theme-provider-brand-color-fallbacks--default","name":"Default","snippet":"const Default = ( { adminThemeColor } ) => (\n <div\n style={\n {\n '--wp-admin-theme-color': adminThemeColor,\n fontSize: 13,\n } as React.CSSProperties\n }\n >\n <p\n style={ {\n margin: '0 0 16px',\n color: '#757575',\n fontSize: 12,\n } }\n >\n <strong>Actual:</strong> real token value from ThemeProvider\n (ramp algorithm). <strong>Fallback:</strong> approximation via{ ' ' }\n <code>color-mix()</code> and <code>--wp-admin-theme-color</code>\n .\n </p>\n <ThemeProvider color={ { primary: adminThemeColor } }>\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: '40px 40px 1fr 1fr',\n gap: '4px 12px',\n alignItems: 'center',\n } }\n >\n <div style={ headerStyle }>Actual</div>\n <div style={ headerStyle }>Fallback</div>\n <div style={ headerStyle }>Token</div>\n <div style={ headerStyle }>Fallback expression</div>\n { brandTokens.map( ( { cssVarName, fallbackExpr } ) => (\n <Row\n key={ cssVarName }\n cssVarName={ cssVarName }\n fallbackExpr={ fallbackExpr }\n />\n ) ) }\n </div>\n </ThemeProvider>\n </div>\n);"}],"import":"import { ThemeProvider } from \"@wordpress/theme\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Verifier\" component.\n 44 | * schemes and observe how closely the fallbacks track the real values.\n 45 | */\n> 46 | const meta: Meta< typeof Verifier > = {\n | ^\n 47 | \ttitle: 'Design System/Theme/Theme Provider/Brand Color Fallbacks',\n 48 | \tcomponent: Verifier,\n 49 | \targTypes: {\n\n../packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx:\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport colorTokens from '../../prebuilt/ts/color-tokens';\nimport _tokenFallbacks from '../../prebuilt/js/design-token-fallbacks.mjs';\nimport { ThemeProvider } from '../../theme-provider';\n\nconst tokenFallbacks: Record< string, string > = _tokenFallbacks;\n\ntype BrandToken = {\n\tcssVarName: string;\n\tfallbackExpr: string;\n};\n\nfunction getBrandTokens(): BrandToken[] {\n\tconst tokens: BrandToken[] = [];\n\n\tfor ( const [ rampKey, tokenNames ] of Object.entries( colorTokens ) ) {\n\t\tif ( ! rampKey.startsWith( 'primary-' ) ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tfor ( const tokenName of tokenNames ) {\n\t\t\tconst cssVarName = `--wpds-color-${ tokenName }`;\n\t\t\ttokens.push( {\n\t\t\t\tcssVarName,\n\t\t\t\tfallbackExpr: tokenFallbacks[ cssVarName ] ?? '',\n\t\t\t} );\n\t\t}\n\t}\n\n\treturn tokens.sort( ( a, b ) =>\n\t\ta.cssVarName.localeCompare( b.cssVarName )\n\t);\n}\n\nconst brandTokens = getBrandTokens();\n\ntype VerifierProps = { adminThemeColor: string };\nconst Verifier: React.FC< VerifierProps > = () => null;\n\n/**\n * Compares actual brand token values (computed by ThemeProvider using the full\n * ramp algorithm) against their `color-mix()` fallback approximations driven\n * by `--wp-admin-theme-color`. Use the color picker to switch admin color\n * schemes and observe how closely the fallbacks track the real values.\n */\nconst meta: Meta< typeof Verifier > = {\n\ttitle: 'Design System/Theme/Theme Provider/Brand Color Fallbacks',\n\tcomponent: Verifier,\n\targTypes: {\n\t\tadminThemeColor: {\n\t\t\tcontrol: {\n\t\t\t\ttype: 'color',\n\t\t\t\tpresetColors: [\n\t\t\t\t\t'#3858e9', // modern\n\t\t\t\t\t'#0085ba', // light\n\t\t\t\t\t'#096484', // blue\n\t\t\t\t\t'#46403c', // coffee\n\t\t\t\t\t'#523f6d', // ectoplasm\n\t\t\t\t\t'#e14d43', // midnight\n\t\t\t\t\t'#627c83', // ocean\n\t\t\t\t\t'#dd823b', // sunrise\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t},\n\tparameters: {\n\t\tcontrols: { expanded: true },\n\t},\n};\nexport default meta;\n\nexport const Default: StoryObj< typeof Verifier > = {\n\trender: ( { adminThemeColor } ) => (\n\t\t<div\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t'--wp-admin-theme-color': adminThemeColor,\n\t\t\t\t\tfontSize: 13,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t<p\n\t\t\t\tstyle={ {\n\t\t\t\t\tmargin: '0 0 16px',\n\t\t\t\t\tcolor: '#757575',\n\t\t\t\t\tfontSize: 12,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<strong>Actual:</strong> real token value from ThemeProvider\n\t\t\t\t(ramp algorithm). <strong>Fallback:</strong> approximation via{ ' ' }\n\t\t\t\t<code>color-mix()</code> and <code>--wp-admin-theme-color</code>\n\t\t\t\t.\n\t\t\t</p>\n\t\t\t<ThemeProvider color={ { primary: adminThemeColor } }>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'grid',\n\t\t\t\t\t\tgridTemplateColumns: '40px 40px 1fr 1fr',\n\t\t\t\t\t\tgap: '4px 12px',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div style={ headerStyle }>Actual</div>\n\t\t\t\t\t<div style={ headerStyle }>Fallback</div>\n\t\t\t\t\t<div style={ headerStyle }>Token</div>\n\t\t\t\t\t<div style={ headerStyle }>Fallback expression</div>\n\t\t\t\t\t{ brandTokens.map( ( { cssVarName, fallbackExpr } ) => (\n\t\t\t\t\t\t<Row\n\t\t\t\t\t\t\tkey={ cssVarName }\n\t\t\t\t\t\t\tcssVarName={ cssVarName }\n\t\t\t\t\t\t\tfallbackExpr={ fallbackExpr }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</ThemeProvider>\n\t\t</div>\n\t),\n\targs: {\n\t\tadminThemeColor: '#3858e9',\n\t},\n};\n\nconst headerStyle: React.CSSProperties = {\n\tfontSize: 11,\n\tfontWeight: 600,\n\tcolor: '#757575',\n\tpaddingBottom: 4,\n\tborderBottom: '1px solid #e0e0e0',\n};\n\nfunction Row( { cssVarName, fallbackExpr }: BrandToken ) {\n\treturn (\n\t\t<>\n\t\t\t<Swatch\n\t\t\t\tcolor={ `var(${ cssVarName })` }\n\t\t\t\ttitle={ `${ cssVarName } (actual)` }\n\t\t\t/>\n\t\t\t<Swatch color={ fallbackExpr } title=\"Fallback (rendered)\" />\n\t\t\t<code style={ { fontSize: 12 } }>{ cssVarName }</code>\n\t\t\t<code\n\t\t\t\tstyle={ {\n\t\t\t\t\tfontSize: 11,\n\t\t\t\t\tcolor: '#555',\n\t\t\t\t\twordBreak: 'break-all',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ fallbackExpr }\n\t\t\t</code>\n\t\t</>\n\t);\n}\n\nfunction Swatch( { color, title }: { color: string; title: string } ) {\n\treturn (\n\t\t<div\n\t\t\ttitle={ title }\n\t\t\tstyle={ {\n\t\t\t\tbackgroundColor: color,\n\t\t\t\twidth: 40,\n\t\t\t\theight: 28,\n\t\t\t\tborder: '1px solid rgba(0, 0, 0, 0.1)',\n\t\t\t} }\n\t\t/>\n\t);\n}\n"}},"design-system-theme-theme-provider-color-scales":{"id":"design-system-theme-theme-provider-color-scales","name":"ColorGen","path":"../packages/theme/src/color-ramps/stories/index.story.tsx","stories":[{"id":"design-system-theme-theme-provider-color-scales--default","name":"Default","snippet":"const Default = ( args ) => {\n const bgSeed = args.background ?? DEFAULT_SEED_COLORS.bg;\n const primarySeed = args.primary ?? DEFAULT_SEED_COLORS.primary;\n const bgRamp = buildBgRamp( bgSeed );\n\n const bgRampObj = {\n seed: {\n name: 'surface2' as const,\n value: bgSeed,\n },\n ramp: bgRamp.ramp,\n };\n\n const primaryRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: primarySeed,\n },\n ramp: buildAccentRamp( primarySeed, bgRamp ).ramp,\n };\n const infoRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: DEFAULT_SEED_COLORS.info,\n },\n ramp: buildAccentRamp( DEFAULT_SEED_COLORS.info, bgRamp ).ramp,\n };\n const successRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: DEFAULT_SEED_COLORS.success,\n },\n ramp: buildAccentRamp( DEFAULT_SEED_COLORS.success, bgRamp ).ramp,\n };\n const warningRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: DEFAULT_SEED_COLORS.warning,\n },\n ramp: buildAccentRamp( DEFAULT_SEED_COLORS.warning, bgRamp ).ramp,\n };\n const cautionRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: DEFAULT_SEED_COLORS.caution,\n },\n ramp: buildAccentRamp( DEFAULT_SEED_COLORS.caution, bgRamp ).ramp,\n };\n const errorRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: DEFAULT_SEED_COLORS.error,\n },\n ramp: buildAccentRamp( DEFAULT_SEED_COLORS.error, bgRamp ).ramp,\n };\n\n const unmetTargets = checkAccessibleCombinations( {\n bgRamp,\n } );\n\n return (\n <div\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: '32px',\n } }\n >\n <RampTable\n ramps={ [\n bgRampObj,\n primaryRampObj,\n infoRampObj,\n successRampObj,\n warningRampObj,\n cautionRampObj,\n errorRampObj,\n ] }\n />\n\n { unmetTargets.length === 0 ? (\n <p>All accessibility targets met</p>\n ) : (\n <ul>\n { unmetTargets.map(\n (\n {\n bgName,\n bgColor,\n fgName,\n fgColor,\n unmetContrast,\n achievedContrast,\n },\n i\n ) => (\n <li key={ i }>\n { fgName } (\n <span\n style={ {\n width: 20,\n height: 20,\n backgroundColor: fgColor,\n display: 'inline-block',\n } }\n />\n { fgColor }) over { bgName } (\n <span\n style={ {\n width: 20,\n height: 20,\n backgroundColor: bgColor,\n display: 'inline-block',\n } }\n />\n { bgColor }) did not meet { unmetContrast },\n achieved just { achievedContrast }\n </li>\n )\n ) }\n </ul>\n ) }\n </div>\n );\n};"},{"id":"design-system-theme-theme-provider-color-scales--sample-combinations","name":"Sample Combinations","snippet":"const SampleCombinations = () => {\n const combinations = [\n // WordPress (light / dark)\n {\n background: '#f8f8f8',\n primary: '#3858e9',\n },\n {\n background: '#1e1e1e',\n primary: '#3858e9',\n },\n // WP Classic\n {\n background: '#1d2327',\n primary: '#2271b1',\n },\n // WP Light\n {\n background: '#e5e5e5',\n primary: '#d64e07',\n },\n // WP Blue\n {\n background: '#096484',\n primary: '#52accc',\n },\n // WP Coffee\n {\n background: '#46403c',\n primary: '#c7a589',\n },\n // WP Ectoplasm\n {\n background: '#413256',\n primary: '#a3b745',\n },\n // WP Ocean\n {\n background: '#627c83',\n primary: '#9ebaa0',\n },\n // Sunrise\n {\n background: '#b43c38',\n primary: '#dd823b',\n },\n ];\n\n const ramps = combinations.map( ( { background, primary } ) => {\n const bgRamp = buildBgRamp( background );\n\n const bgRampObj = {\n seed: {\n name: 'surface2' as const,\n value: background,\n },\n ramp: bgRamp.ramp,\n warnings: bgRamp.warnings,\n };\n\n const primaryRamp = buildAccentRamp( primary, bgRamp );\n const primaryRampObj = {\n seed: {\n name: 'bgFill1' as const,\n value: primary,\n },\n ramp: primaryRamp.ramp,\n warnings: primaryRamp.warnings,\n };\n\n return [ bgRampObj, primaryRampObj ];\n } );\n\n return (\n <div\n style={ { display: 'flex', flexDirection: 'column', gap: 16 } }\n >\n { ramps.map( ( r, i ) => (\n <RampTable key={ i } ramps={ r } />\n ) ) }\n </div>\n );\n};"}],"import":"import { RampTable } from \"@wordpress/theme\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"ColorGen\" component.\n 19 | };\n 20 |\n> 21 | const meta: Meta< typeof ColorGen > = {\n | ^\n 22 | \ttitle: 'Design System/Theme/Theme Provider/Color Scales',\n 23 | \tcomponent: ColorGen,\n 24 | \targTypes: {\n\n../packages/theme/src/color-ramps/stories/index.story.tsx:\n/**\n * External dependencies\n */\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\n/**\n * Internal dependencies\n */\nimport { RampTable } from './ramp-table';\nimport { buildBgRamp, buildAccentRamp, checkAccessibleCombinations } from '..';\nimport { DEFAULT_SEED_COLORS } from '../lib/constants';\n\nconst ColorGen = ( props: {\n\tbackground: string;\n\tprimary: string;\n\tchildren: React.ReactNode;\n} ) => {\n\treturn <div>{ props.children }</div>;\n};\n\nconst meta: Meta< typeof ColorGen > = {\n\ttitle: 'Design System/Theme/Theme Provider/Color Scales',\n\tcomponent: ColorGen,\n\targTypes: {\n\t\tbackground: {\n\t\t\tcontrol: { type: 'color', presetColors: [ '#1e1e1e', '#f8f8f8' ] },\n\t\t},\n\t\tprimary: {\n\t\t\tcontrol: {\n\t\t\t\ttype: 'color',\n\t\t\t\tpresetColors: [ '#3858e9', '#069e08', '#873eff' ],\n\t\t\t},\n\t\t},\n\t},\n\tparameters: {\n\t\tcontrols: { expanded: true },\n\t\tdocs: { canvas: { sourceState: 'shown' } },\n\t},\n};\nexport default meta;\n\nexport const Default: StoryObj< typeof ColorGen > = {\n\trender: ( args ) => {\n\t\tconst bgSeed = args.background ?? DEFAULT_SEED_COLORS.bg;\n\t\tconst primarySeed = args.primary ?? DEFAULT_SEED_COLORS.primary;\n\t\tconst bgRamp = buildBgRamp( bgSeed );\n\n\t\tconst bgRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'surface2' as const,\n\t\t\t\tvalue: bgSeed,\n\t\t\t},\n\t\t\tramp: bgRamp.ramp,\n\t\t};\n\n\t\tconst primaryRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: primarySeed,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( primarySeed, bgRamp ).ramp,\n\t\t};\n\t\tconst infoRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: DEFAULT_SEED_COLORS.info,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( DEFAULT_SEED_COLORS.info, bgRamp ).ramp,\n\t\t};\n\t\tconst successRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: DEFAULT_SEED_COLORS.success,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( DEFAULT_SEED_COLORS.success, bgRamp ).ramp,\n\t\t};\n\t\tconst warningRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: DEFAULT_SEED_COLORS.warning,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( DEFAULT_SEED_COLORS.warning, bgRamp ).ramp,\n\t\t};\n\t\tconst cautionRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: DEFAULT_SEED_COLORS.caution,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( DEFAULT_SEED_COLORS.caution, bgRamp ).ramp,\n\t\t};\n\t\tconst errorRampObj = {\n\t\t\tseed: {\n\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\tvalue: DEFAULT_SEED_COLORS.error,\n\t\t\t},\n\t\t\tramp: buildAccentRamp( DEFAULT_SEED_COLORS.error, bgRamp ).ramp,\n\t\t};\n\n\t\tconst unmetTargets = checkAccessibleCombinations( {\n\t\t\tbgRamp,\n\t\t} );\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: '32px',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<RampTable\n\t\t\t\t\tramps={ [\n\t\t\t\t\t\tbgRampObj,\n\t\t\t\t\t\tprimaryRampObj,\n\t\t\t\t\t\tinfoRampObj,\n\t\t\t\t\t\tsuccessRampObj,\n\t\t\t\t\t\twarningRampObj,\n\t\t\t\t\t\tcautionRampObj,\n\t\t\t\t\t\terrorRampObj,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\n\t\t\t\t{ unmetTargets.length === 0 ? (\n\t\t\t\t\t<p>All accessibility targets met</p>\n\t\t\t\t) : (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{ unmetTargets.map(\n\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tbgName,\n\t\t\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\t\t\tfgName,\n\t\t\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\t\t\tunmetContrast,\n\t\t\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ti\n\t\t\t\t\t\t\t) => (\n\t\t\t\t\t\t\t\t<li key={ i }>\n\t\t\t\t\t\t\t\t\t{ fgName } (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: fgColor,\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ fgColor }) over { bgName } (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: bgColor,\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ bgColor }) did not meet { unmetContrast },\n\t\t\t\t\t\t\t\t\tachieved just { achievedContrast }\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ul>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t},\n\targs: {},\n};\n\nexport const SampleCombinations: StoryObj< typeof ColorGen > = {\n\trender: () => {\n\t\tconst combinations = [\n\t\t\t// WordPress (light / dark)\n\t\t\t{\n\t\t\t\tbackground: '#f8f8f8',\n\t\t\t\tprimary: '#3858e9',\n\t\t\t},\n\t\t\t{\n\t\t\t\tbackground: '#1e1e1e',\n\t\t\t\tprimary: '#3858e9',\n\t\t\t},\n\t\t\t// WP Classic\n\t\t\t{\n\t\t\t\tbackground: '#1d2327',\n\t\t\t\tprimary: '#2271b1',\n\t\t\t},\n\t\t\t// WP Light\n\t\t\t{\n\t\t\t\tbackground: '#e5e5e5',\n\t\t\t\tprimary: '#d64e07',\n\t\t\t},\n\t\t\t// WP Blue\n\t\t\t{\n\t\t\t\tbackground: '#096484',\n\t\t\t\tprimary: '#52accc',\n\t\t\t},\n\t\t\t// WP Coffee\n\t\t\t{\n\t\t\t\tbackground: '#46403c',\n\t\t\t\tprimary: '#c7a589',\n\t\t\t},\n\t\t\t// WP Ectoplasm\n\t\t\t{\n\t\t\t\tbackground: '#413256',\n\t\t\t\tprimary: '#a3b745',\n\t\t\t},\n\t\t\t// WP Ocean\n\t\t\t{\n\t\t\t\tbackground: '#627c83',\n\t\t\t\tprimary: '#9ebaa0',\n\t\t\t},\n\t\t\t// Sunrise\n\t\t\t{\n\t\t\t\tbackground: '#b43c38',\n\t\t\t\tprimary: '#dd823b',\n\t\t\t},\n\t\t];\n\n\t\tconst ramps = combinations.map( ( { background, primary } ) => {\n\t\t\tconst bgRamp = buildBgRamp( background );\n\n\t\t\tconst bgRampObj = {\n\t\t\t\tseed: {\n\t\t\t\t\tname: 'surface2' as const,\n\t\t\t\t\tvalue: background,\n\t\t\t\t},\n\t\t\t\tramp: bgRamp.ramp,\n\t\t\t\twarnings: bgRamp.warnings,\n\t\t\t};\n\n\t\t\tconst primaryRamp = buildAccentRamp( primary, bgRamp );\n\t\t\tconst primaryRampObj = {\n\t\t\t\tseed: {\n\t\t\t\t\tname: 'bgFill1' as const,\n\t\t\t\t\tvalue: primary,\n\t\t\t\t},\n\t\t\t\tramp: primaryRamp.ramp,\n\t\t\t\twarnings: primaryRamp.warnings,\n\t\t\t};\n\n\t\t\treturn [ bgRampObj, primaryRampObj ];\n\t\t} );\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ { display: 'flex', flexDirection: 'column', gap: 16 } }\n\t\t\t>\n\t\t\t\t{ ramps.map( ( r, i ) => (\n\t\t\t\t\t<RampTable key={ i } ramps={ r } />\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t},\n\targTypes: {\n\t\tbackground: {\n\t\t\tcontrol: false,\n\t\t},\n\t\tprimary: {\n\t\t\tcontrol: false,\n\t\t},\n\t},\n};\n"}},"design-system-components-badge-choosing-intent":{"id":"design-system-components-badge-choosing-intent","name":"Badge","path":"../packages/ui/src/badge/stories/choosing-intent.story.tsx","stories":[{"id":"design-system-components-badge-choosing-intent--all-intents","name":"All Intents","snippet":"const AllIntents = () => (\n <>\n <Badge intent=\"high\">high</Badge>\n <Badge intent=\"medium\">medium</Badge>\n <Badge intent=\"low\">low</Badge>\n <Badge intent=\"stable\">stable</Badge>\n <Badge intent=\"informational\">informational</Badge>\n <Badge intent=\"draft\">draft</Badge>\n <Badge intent=\"none\">none</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--high","name":"High","snippet":"const High = () => (\n <>\n <Badge intent=\"high\">Payment declined</Badge>\n <Badge intent=\"high\">Security issue</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--medium","name":"Medium","snippet":"const Medium = () => (\n <>\n <Badge intent=\"medium\">Approval required</Badge>\n <Badge intent=\"medium\">Review needed</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--low","name":"Low","snippet":"const Low = () => (\n <>\n <Badge intent=\"low\">Pending</Badge>\n <Badge intent=\"low\">Queued</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--informational","name":"Informational","snippet":"const Informational = () => (\n <>\n <Badge intent=\"informational\">Scheduled</Badge>\n <Badge intent=\"informational\">Beta</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--draft","name":"Draft","snippet":"const Draft = () => (\n <>\n <Badge intent=\"draft\">Draft</Badge>\n <Badge intent=\"draft\">Unpublished</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--stable","name":"Stable","snippet":"const Stable = () => (\n <>\n <Badge intent=\"stable\">Healthy</Badge>\n <Badge intent=\"stable\">Active</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--none","name":"None","snippet":"const None = () => (\n <>\n <Badge intent=\"none\">Inactive</Badge>\n <Badge intent=\"none\">Expired</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--comment-status","name":"Comment Status","snippet":"const CommentStatus = () => (\n <>\n <Badge intent=\"none\">Approved</Badge>\n <Badge intent=\"medium\">Approval required</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--page-status","name":"Page Status","snippet":"const PageStatus = () => (\n <>\n <Badge intent=\"none\">Published</Badge>\n <Badge intent=\"low\">Pending</Badge>\n <Badge intent=\"draft\">Draft</Badge>\n <Badge intent=\"informational\">Scheduled</Badge>\n <Badge intent=\"informational\">Private</Badge>\n </>\n);"},{"id":"design-system-components-badge-choosing-intent--plugin-status","name":"Plugin Status","snippet":"const PluginStatus = () => (\n <>\n <Badge intent=\"stable\">Active</Badge>\n <Badge intent=\"none\">Inactive</Badge>\n </>\n);"}],"import":"import { Badge, Stack } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}},"docs":{"design-system-components-badge-choosing-intent--docs":{"id":"design-system-components-badge-choosing-intent--docs","name":"Docs","path":"../packages/ui/src/badge/stories/choosing-intent.mdx","title":"Design System/Components/Badge/Choosing intent","content":"import { Canvas, Meta } from '@storybook/addon-docs/blocks';\nimport * as ChoosingIntentStories from './choosing-intent.story';\n\n<Meta of={ ChoosingIntentStories } />\n\n# Choosing intent\n\n<Canvas of={ ChoosingIntentStories.AllIntents } />\n\nIt can be difficult to determine which badge intent to use because the component's properties are not tied to any specific product view. Those properties should be balanced against the requirements of the view in which the badge appears, all while keeping an eye on high-level consistency (global statuses that appear across multiple views).\n\nHere is a decision tree to help identify which badge to use.\n\n## 1. Ask first: should this draw the eye?\n\nIf the user scans this screen, should their attention be drawn to this badge?\n\n- If **no** → use `none` (or even just plain text; no badge), even if the state is positive or \"stable\".\n- If **yes** → pick an intent based on how important the action or awareness is.\n\n## 2. High / Medium / Low = action priority\n\nUse when there's something for the user to act on.\n\n### `high` – Critical / top priority\n\n* Needs attention as soon as possible\n* _E.g. \"Payment declined\", \"Security issue\"_\n\n<Canvas of={ ChoosingIntentStories.High } />\n\n### `medium` – Important / blocks progress\n\n* Blocks a key task, should be handled soon\n* _E.g. \"Approval required\", \"Review needed\"_\n\n<Canvas of={ ChoosingIntentStories.Medium } />\n\n### `low` – Worth noticing / non‑urgent\n\n* Good to be aware of; action may be optional or later\n* _E.g. \"Pending\", \"Queued\", \"Minor issues\", \"Optional setup\"_\n\n<Canvas of={ ChoosingIntentStories.Low } />\n\n## 3. Informational / draft = special non-final states\n\n### `informational` – Notable, no action / fix needed\n\n* Context only; no clear action\n* _E.g. \"Scheduled\", \"Beta\", \"Internal only\"_\n\n<Canvas of={ ChoosingIntentStories.Informational } />\n\n### `draft` – Not final / work in progress\n\n* _E.g. \"Draft\", \"Unpublished\", \"Work in progress\"_\n\n<Canvas of={ ChoosingIntentStories.Draft } />\n\n## 4. Stable / none = normal states\n\n### `stable` – Positive / \"healthy\" state\n\n* Use when confirming success or \"all good\" is important in that view\n* _E.g. \"Healthy\", \"Active\", \"Live\"_\n\n<Canvas of={ ChoosingIntentStories.Stable } />\n\n### `none` – Default for normal / background states\n\n* Especially in dense lists where too much color creates visual noise\n* _E.g. \"Inactive\", \"Expired\"_\n\n<Canvas of={ ChoosingIntentStories.None } />\n\n## Examples\n\n### Comment status\n\n- \"Approved\" → `none`\n- \"Approval required\" → `medium`\n\n<Canvas of={ ChoosingIntentStories.CommentStatus } />\n\n### Page status\n\n- \"Published\" → `none`\n- \"Pending\" → `low`\n- \"Draft\" → `draft`\n- \"Scheduled\" → `informational`\n- \"Private\" → `informational`\n\n<Canvas of={ ChoosingIntentStories.PageStatus } />\n\n### Plugin status\n\n- \"Active\" → `stable`\n- \"Inactive\" → `none`\n\n<Canvas of={ ChoosingIntentStories.PluginStatus } />\n\n## 5. When in doubt…\n\nUse the least attention‑grabbing intent that still:\n\n- Makes it clear what needs attention,\n- Marks what isn't final, or\n- Confirms a key success state in that context.\n"}}},"design-system-components-tooltip-usage-guidelines":{"id":"design-system-components-tooltip-usage-guidelines","name":"UsageGuidelines","path":"../packages/ui/src/tooltip/stories/usage-guidelines.story.tsx","stories":[{"id":"design-system-components-tooltip-usage-guidelines--recommended-usage","name":"Recommended Usage","snippet":"const RecommendedUsage = () => (\n <Tooltip.Provider delay={ 0 }>\n <div style={ { display: 'flex', gap: '0.25rem' } }>\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Bold\">\n <Icon icon={ formatBold } />\n </Tooltip.Trigger>\n <Tooltip.Popup>Bold</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Italic\">\n <Icon icon={ formatItalic } />\n </Tooltip.Trigger>\n <Tooltip.Popup>Italic</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Underline\">\n <Icon icon={ formatUnderline } />\n </Tooltip.Trigger>\n <Tooltip.Popup>Underline</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n);","description":"Tooltips work best as visual labels for icon-only controls. Each trigger must have its own accessible name via `aria-label`."},{"id":"design-system-components-tooltip-usage-guidelines--infotip-with-popover","name":"Infotip With Popover","snippet":"const InfotipWithPopover = () => (\n <div\n style={ {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n <span>Label</span>\n <Popover.Root>\n <Popover.Trigger\n openOnHover\n delay={ 200 }\n closeDelay={ 200 }\n aria-label=\"More information\"\n style={ {\n background: 'none',\n border: 'none',\n padding: 0,\n cursor: 'var(--wpds-cursor-control)',\n display: 'inline-flex',\n alignItems: 'center',\n borderRadius: 'var(--wpds-border-radius-sm)',\n } }\n >\n <Icon icon={ info } size={ 20 } />\n </Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <VisuallyHidden render={ <Popover.Title /> }>\n More information\n </VisuallyHidden>\n <Popover.Description>\n This is additional context about the label. Unlike\n tooltips, this content is accessible to touch and screen\n reader users.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n);","description":"Popups that open when hovering an info icon should use `Popover` with `openOnHover` instead of a Tooltip. This ensures the content is accessible to touch and screen reader users."},{"id":"design-system-components-tooltip-usage-guidelines--icon-button-with-tooltip","name":"Icon Button With Tooltip","snippet":"const IconButtonWithTooltip = () => (\n <div style={ { display: 'flex', gap: '0.25rem' } }>\n <IconButton icon={ formatBold } label=\"Bold\" size=\"compact\" />\n <IconButton icon={ formatItalic } label=\"Italic\" size=\"compact\" />\n <IconButton\n icon={ formatUnderline }\n label=\"Underline\"\n size=\"compact\"\n />\n </div>\n);","description":"`IconButton` has built-in tooltip support via the `label` prop, making it the easiest way to provide a tooltip for icon-only actions."}],"import":"import { Icon, IconButton, Popover, Tooltip, VisuallyHidden } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}},"docs":{"design-system-components-tooltip-usage-guidelines--docs":{"id":"design-system-components-tooltip-usage-guidelines--docs","name":"Docs","path":"../packages/ui/src/tooltip/stories/usage-guidelines.mdx","title":"Design System/Components/Tooltip/Usage Guidelines","content":"import { Canvas, Meta } from '@storybook/addon-docs/blocks';\nimport * as UsageGuidelinesStories from './usage-guidelines.story';\n\n<Meta of={ UsageGuidelinesStories } />\n\n# Tooltip usage guidelines\n\n## Usage guidelines\n\n- **Use tooltips as visual labels only.** Tooltips should act as\n supplementary visual labels for sighted mouse and keyboard users.\n Tooltip popups are not exposed to assistive technologies — the\n trigger's accessible name (e.g. `aria-label`) is what provides the\n label for screen reader users.\n See [_Alternatives to tooltips_](#alternatives-to-tooltips) below for\n more details.\n- **Provide an accessible name for the trigger.** Tooltips are visual-only\n elements and are not a replacement for labeling the trigger. The\n tooltip's trigger must have an `aria-label` that matches or is a concise\n equivalent of the tooltip's content to ensure consistency for screen\n reader users. If the tooltip also displays a keyboard shortcut, use\n `aria-keyshortcuts` on the trigger.\n\n<Canvas of={ UsageGuidelinesStories.RecommendedUsage } />\n\n`IconButton` has built-in tooltip support via the `label` prop, making it\nthe easiest way to provide a tooltip for icon-only actions.\n\n<Canvas of={ UsageGuidelinesStories.IconButtonWithTooltip } />\n\n## Alternatives to tooltips\n\nTooltips should be supplementary popups that provide non-essential clarity in\nhigh-density UIs. A user should not miss critical information if they never\nsee a tooltip.\n\nTooltips don't work well with touch input. Unlike mouse pointers with hover\ncapability, there's no easily discoverable way to reveal a tooltip before\ntapping its trigger on a touch device.\n\niOS doesn't provide a system-standard, touch-friendly tooltip affordance,\nwhile Android may show a tooltip on long press. However, on the web,\nlong press is often used to trigger contextual menus in the browser, which\ncan lead to potential conflicts. For this reason, tooltips are disabled on\ntouch devices.\n\n### Infotips\n\nPopups that open when hovering an info icon should use\n[Popover](?path=/docs/design-system-components-popover--docs) with the\n`openOnHover` prop on the trigger instead of a tooltip. This way, touch\nusers and screen reader users can access the content.\n\nTo know when to reach for a popover instead of a tooltip, consider the\n**purpose** of the trigger element: if the trigger's purpose is to open the\npopup itself, it's a popover. If the trigger's purpose is unrelated to\nopening the popup, it's a tooltip.\n\n<Canvas of={ UsageGuidelinesStories.InfotipWithPopover } />\n\nSee also the [Popover Infotip story](?path=/story/design-system-components-popover--infotip).\n\nInfotips opened on hover can be dismissed by pressing `Escape`.\n\n### Description text\n\nTooltips are designed for sighted mouse and keyboard users and are not a reliable way to deliver\nimportant information to touch users or assistive technologies. If the\ndescription is important to understanding the element, don't hide it behind a\ntooltip — use inline text or\n[Popover](?path=/docs/design-system-components-popover--docs) if space is\nlimited, so the information is accessible to everyone.\n\nSince tooltips serve sighted mouse and keyboard users, iconography should\nclearly communicate the purpose of icon-only triggers, especially on mobile\nwhere the text label may not be visible.\n\nIf the description is not critical, a tooltip can still be used to provide\nextra clarity for sighted mouse or keyboard users.\n\n### Contextual feedback messages\n\nFor contextual feedback after an action (e.g. \"Copied!\"), prefer a pattern\nthat ensures the message is announced to screen readers and supports complex\ncontent, such as a\n[Notice](?path=/docs/design-system-components-notice--docs).\n\n## References\n\n- [WCAG 1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) — tooltips must be dismissible (Escape), hoverable, and persistent.\n- [WAI-ARIA APG: Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) — note that this component intentionally diverges from the traditional `role=\"tooltip\"` + `aria-describedby` pattern. The trigger's `aria-label` is the source of truth for assistive technologies, and the tooltip popup is a visual-only supplement.\n"}}},"design-system-components-alertdialog":{"id":"design-system-components-alertdialog","name":"AlertDialog.Root","path":"../packages/ui/src/alert-dialog/stories/index.story.tsx","stories":[{"id":"design-system-components-alertdialog--default","name":"Default","snippet":"const Default = () => <AlertDialog.Root>(<>\n <AlertDialog.Trigger>Move to trash</AlertDialog.Trigger>\n <AlertDialog.Popup\n title=\"Move to trash?\"\n description=\"This post will be moved to trash. You can restore it later.\"\n />\n </>)</AlertDialog.Root>;","description":"Standard confirmation dialog for reversible actions. The dialog can be dismissed via Escape key or the cancel/confirm buttons. Backdrop click is blocked."},{"id":"design-system-components-alertdialog--irreversible","name":"Irreversible","snippet":"const Irreversible = () => <AlertDialog.Root>(<>\n <AlertDialog.Trigger>Delete permanently</AlertDialog.Trigger>\n <AlertDialog.Popup\n intent=\"irreversible\"\n title=\"Delete permanently?\"\n description=\"This action cannot be undone. All data will be lost.\"\n confirmButtonText=\"Delete permanently\"\n />\n </>)</AlertDialog.Root>;","description":"Confirmation dialog for irreversible actions that cannot be undone. The confirm button uses error/danger coloring."},{"id":"design-system-components-alertdialog--custom-labels","name":"Custom Labels","snippet":"const CustomLabels = () => <AlertDialog.Root>(<>\n <AlertDialog.Trigger>Send feedback</AlertDialog.Trigger>\n <AlertDialog.Popup\n title=\"Send feedback?\"\n description=\"Your feedback helps us improve. Would you like to send it now?\"\n confirmButtonText=\"Send feedback\"\n cancelButtonText=\"Not now\"\n />\n </>)</AlertDialog.Root>;","description":"Example with custom button labels for both confirm and cancel buttons."},{"id":"design-system-components-alertdialog--with-custom-content","name":"With Custom Content","snippet":"const WithCustomContent = () => <AlertDialog.Root>(<>\n <AlertDialog.Trigger>Remove pages</AlertDialog.Trigger>\n <AlertDialog.Popup\n title=\"Remove 3 pages?\"\n description=\"These pages will be moved to trash.\"\n confirmButtonText=\"Delete pages\"\n >\n <ul\n style={ {\n margin: 0,\n paddingInlineStart: 'var(--wpds-dimension-gap-lg)',\n } }\n >\n <Text render={ <li /> }>About us</Text>\n <Text render={ <li /> }>Contact</Text>\n <Text render={ <li /> }>Privacy policy</Text>\n </ul>\n </AlertDialog.Popup>\n </>)</AlertDialog.Root>;","description":"Use `children` to render custom content between the description and the action buttons. The `description` should be self-contained for accessibility (`aria-describedby`); `children` adds supplementary detail."},{"id":"design-system-components-alertdialog--menu-trigger","name":"Menu Trigger","snippet":"const MenuTrigger = () => {\n const [ menuOpen, setMenuOpen ] = useState( false );\n return (\n <>\n <Menu.Root onOpenChange={ setMenuOpen } open={ menuOpen }>\n <Menu.Trigger>Actions ▾</Menu.Trigger>\n <Menu.Portal>\n <Menu.Positioner>\n <Menu.Popup style={ menuPopupStyles }>\n <Menu.Item style={ menuItemStyles }>\n Edit\n </Menu.Item>\n <AlertDialog.Root\n onConfirm={ () => {\n setMenuOpen( false );\n action( 'onConfirm' )();\n } }\n >\n <Menu.Item\n render={\n <AlertDialog.Trigger\n // Quick fix to remove `button`-specific styles.\n // This shouldn't be an issue once we use the DS `Menu`\n // component, which will come with item styles.\n render={ <div /> }\n />\n }\n style={ menuItemStyles }\n closeOnClick={ false }\n >\n Delete...\n <AlertDialog.Popup\n intent=\"irreversible\"\n title=\"Delete permanently?\"\n description=\"This action cannot be undone. All data will be lost.\"\n confirmButtonText=\"Delete permanently\"\n />\n </Menu.Item>\n </AlertDialog.Root>\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n </>\n );\n};","description":"Example showing composition with a menu. The `AlertDialog.Trigger` is composed with Base UI's `Menu.Item` using the `render` prop, allowing the menu item to directly trigger the alert dialog. Note: the example currently uses the `Menu` component from BaseUI, although consumers should not use BaseUI directly and instead use the DS `Menu` component (not ready yet)."},{"id":"design-system-components-alertdialog--async-confirm","name":"Async Confirm","snippet":"const AsyncConfirm = () => {\n const [ shouldFail, setShouldFail ] = useState( false );\n const successId = useId();\n const failureId = useId();\n\n return (\n <>\n <fieldset>\n <legend>Async task outcome</legend>\n <label htmlFor={ successId }>\n <input\n id={ successId }\n type=\"radio\"\n name=\"async-outcome\"\n checked={ ! shouldFail }\n onChange={ () => setShouldFail( false ) } />Success (closes dialog)\n </label>\n <label htmlFor={ failureId } style={ { marginInlineStart: 12 } }>\n <input\n id={ failureId }\n type=\"radio\"\n name=\"async-outcome\"\n checked={ shouldFail }\n onChange={ () => setShouldFail( true ) } />Failure (dialog stays open, shows error)\n </label>\n </fieldset>\n <br />\n <AlertDialog.Root\n onConfirm={ async () => {\n action( 'onConfirm' )();\n try {\n await sleep( 2000 );\n if ( shouldFail ) {\n throw new Error( 'Task failed' );\n }\n } catch {\n return {\n close: false,\n error: 'Something went wrong. Please try again.',\n };\n }\n return undefined;\n } }>\n <AlertDialog.Trigger>Delete permanently\n </AlertDialog.Trigger>\n <AlertDialog.Popup\n intent=\"irreversible\"\n title=\"Delete permanently?\"\n description=\"This action cannot be undone. All data will be lost.\"\n confirmButtonText=\"Delete permanently\" />\n </AlertDialog.Root>\n </>\n );\n};","description":"Async confirm flow. The consumer returns a promise from `onConfirm`. The dialog automatically manages the pending state: buttons are disabled and a spinner appears on the confirm button. Toggle between success and failure to test both outcomes. On failure, the consumer catches the error and returns `{ close: false, error: '...' }`. The component displays the message below the action buttons and announces it to screen readers. The error is automatically cleared on the next confirm attempt or when the dialog reopens."},{"id":"design-system-components-alertdialog--controlled","name":"Controlled","snippet":"const Controlled = () => {\n const [ isOpen, setIsOpen ] = useState( false );\n\n return (\n <>\n <button onClick={ () => setIsOpen( true ) }>Open Dialog</button>\n <AlertDialog.Root\n open={ isOpen }\n onOpenChange={ ( open, eventDetails ) => {\n setIsOpen( open );\n args.onOpenChange?.( open, eventDetails );\n } }>\n <AlertDialog.Popup\n title=\"Move to trash?\"\n description=\"This post will be moved to trash. You can restore it later.\" />\n </AlertDialog.Root>\n </>\n );\n};","description":"The `AlertDialog.Trigger` element is not necessary when the open state is controlled externally. This is useful when the dialog needs to be opened from code or from a non-standard trigger element."}],"import":"import { AlertDialog, Text } from \"@wordpress/ui\";\nimport { Menu } from \"@base-ui/react/menu\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-badge":{"id":"design-system-components-badge","name":"Badge","path":"../packages/ui/src/badge/stories/index.story.tsx","stories":[{"id":"design-system-components-badge--default","name":"Default","snippet":"const Default = () => <Badge>Badge</Badge>;"},{"id":"design-system-components-badge--high","name":"High","snippet":"const High = () => <Badge intent=\"high\" />;"},{"id":"design-system-components-badge--medium","name":"Medium","snippet":"const Medium = () => <Badge intent=\"medium\" />;"},{"id":"design-system-components-badge--low","name":"Low","snippet":"const Low = () => <Badge intent=\"low\" />;"},{"id":"design-system-components-badge--stable","name":"Stable","snippet":"const Stable = () => <Badge intent=\"stable\" />;"},{"id":"design-system-components-badge--informational","name":"Informational","snippet":"const Informational = () => <Badge intent=\"informational\" />;"},{"id":"design-system-components-badge--draft","name":"Draft","snippet":"const Draft = () => <Badge intent=\"draft\" />;"},{"id":"design-system-components-badge--none","name":"None","snippet":"const None = () => <Badge intent=\"none\" />;"},{"id":"design-system-components-badge--all-intents","name":"All Intents","snippet":"const AllIntents = ( args ) => (\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: 'max-content min-content',\n gap: '1rem',\n color: 'var(--wpds-color-fg-content-neutral)',\n } }\n >\n { (\n [\n 'high',\n 'medium',\n 'low',\n 'stable',\n 'informational',\n 'draft',\n 'none',\n ] as const\n ).map( ( intent ) => (\n <Fragment key={ intent }>\n <div\n style={ {\n paddingInlineEnd: '1rem',\n display: 'flex',\n alignItems: 'center',\n } }\n >\n { intent }\n </div>\n <div\n style={ {\n padding: '0.5rem 1rem',\n display: 'flex',\n alignItems: 'center',\n } }\n >\n <Badge { ...args } intent={ intent } />\n </div>\n </Fragment>\n ) ) }\n </div>\n);"}],"import":"import { Badge } from \"@wordpress/ui\";\nimport { Fragment } from \"@wordpress/element\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-button":{"id":"design-system-components-button","name":"Button","path":"../packages/ui/src/button/stories/index.story.tsx","stories":[{"id":"design-system-components-button--default","name":"Default","snippet":"const Default = () => <Button>Button</Button>;"},{"id":"design-system-components-button--outline","name":"Outline","snippet":"const Outline = () => <Button variant=\"outline\" />;"},{"id":"design-system-components-button--minimal","name":"Minimal","snippet":"const Minimal = () => <Button variant=\"minimal\" />;"},{"id":"design-system-components-button--compact","name":"Compact","snippet":"const Compact = () => <Button size=\"compact\" />;"},{"id":"design-system-components-button--small","name":"Small","snippet":"const Small = () => <Button size=\"small\" />;"},{"id":"design-system-components-button--neutral","name":"Neutral","snippet":"const Neutral = () => <Button tone=\"neutral\" />;"},{"id":"design-system-components-button--neutral-outline","name":"Neutral Outline","snippet":"const NeutralOutline = () => <Button tone=\"neutral\" variant=\"outline\" />;"},{"id":"design-system-components-button--unstyled","name":"Unstyled","snippet":"const Unstyled = () => <Button variant=\"unstyled\" />;"},{"id":"design-system-components-button--all-tones-and-variants","name":"All Tones And Variants","snippet":"const AllTonesAndVariants = ( args ) => (\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: 'max-content repeat(2, min-content)',\n color: 'var(--wpds-color-fg-content-neutral)',\n } }\n >\n <div></div>\n <div style={ { textAlign: 'center' } }>Resting</div>\n <div style={ { textAlign: 'center' } }>Disabled</div>\n { ( [ 'brand', 'neutral' ] as const ).map( ( tone ) => (\n <Fragment key={ tone }>\n { (\n [ 'solid', 'outline', 'minimal', 'unstyled' ] as const\n ).map( ( variant ) => (\n <Fragment key={ variant }>\n <div\n style={ {\n paddingInlineEnd: '1rem',\n display: 'flex',\n alignItems: 'center',\n } }\n >\n { variant }, { tone }\n </div>\n <div\n style={ {\n padding: '0.5rem 1rem',\n display: 'flex',\n alignItems: 'center',\n } }\n >\n <Button\n { ...args }\n tone={ tone }\n variant={ variant }\n />\n </div>\n <div\n style={ {\n padding: '0.5rem 1rem',\n display: 'flex',\n alignItems: 'center',\n } }\n >\n <Button\n { ...args }\n tone={ tone }\n variant={ variant }\n disabled\n />\n </div>\n </Fragment>\n ) ) }\n </Fragment>\n ) ) }\n </div>\n);"},{"id":"design-system-components-button--with-icon","name":"With Icon","snippet":"const WithIcon = () => <Button>(<>\n <Button.Icon icon={ cog } />Button\n </>)</Button>;"},{"id":"design-system-components-button--loading","name":"Loading","snippet":"const Loading = () => <Button loading loadingAnnouncement=\"Saving data\" />;"},{"id":"design-system-components-button--pressed","name":"Pressed","snippet":"const Pressed = () => <Button tone=\"neutral\" variant=\"minimal\" aria-pressed />;","description":"The pressed state is only available for buttons with `tone=\"neutral\"` and `variant=\"minimal\"` and can be toggled via the `aria-pressed` HTML attribute."}],"import":"import { Button } from \"@wordpress/ui\";\nimport { Fragment } from \"@wordpress/element\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Button","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/button/button.tsx","actualName":"Button","exportName":"Button","props":{"variant":{"required":false,"tsType":{"name":"union","raw":"'solid' | 'outline' | 'minimal' | 'unstyled'","elements":[{"name":"literal","value":"'solid'"},{"name":"literal","value":"'outline'"},{"name":"literal","value":"'minimal'"},{"name":"literal","value":"'unstyled'"}]},"description":"The variant of the button. Variants describe the visual style treatment\nof the button.\n\n@default \"solid\"","defaultValue":{"value":"'solid'","computed":false}},"tone":{"required":false,"tsType":{"name":"union","raw":"'brand' | 'neutral'","elements":[{"name":"literal","value":"'brand'"},{"name":"literal","value":"'neutral'"}]},"description":"The tone of the button, describing a semantic color intent:\n\n- `'brand': for the most prominent actions, using the brand colors.\n- `'neutral'` for less prominent actions.\n\n@default \"brand\"","defaultValue":{"value":"'brand'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}]},"description":"The size of the button.\n\n- `'default'`: For normal text-label buttons, unless it is a toggle button.\n- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.\n- `'small'`: For icon buttons associated with more advanced or auxiliary features.\n\n@default \"default\"","defaultValue":{"value":"'default'","computed":false}},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the button is disabled."},"focusableWhenDisabled":{"required":false,"tsType":{"name":"intersection['focusableWhenDisabled']","raw":"_ButtonProps[ 'focusableWhenDisabled' ]"},"description":"Whether the element should be focusable even when it is disabled.\n\n@default true","defaultValue":{"value":"true","computed":false}},"aria-pressed":{"required":false,"tsType":{"name":"HTMLAttributes['aria-pressed']","raw":"HTMLAttributes< HTMLButtonElement >[ 'aria-pressed' ]"},"description":"Indicates the current \"pressed\" state of toggle buttons. This should only\nbe used with neutral minimal buttons."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content of the button."},"loading":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the button is in a loading state, such as when an action is being\nperformed.\n@default false"},"loadingAnnouncement":{"required":false,"tsType":{"name":"string"},"description":"The text used for assistive technology to indicate the loading state.","defaultValue":{"value":"__( 'Loading' )","computed":true}}},"composes":["Omit"]}},"design-system-components-card":{"id":"design-system-components-card","name":"Card.Root","path":"../packages/ui/src/card/stories/index.story.tsx","stories":[{"id":"design-system-components-card--default","name":"Default","snippet":"const Default = () => <Card.Root>(<>\n <Card.Header>\n <Card.Title>Card title</Card.Title>\n </Card.Header>\n <Card.Content>\n <Text>\n This is the main content area. It can contain any\n elements. This is the main content area. It can contain\n any elements. This is the main content area. It can\n contain any elements. This is the main content area. It\n can contain any elements. This is the main content area.\n It can contain any elements. This is the main content\n area. It can contain any elements.\n </Text>\n <Text>\n This is the main content area. It can contain any\n elements.\n </Text>\n </Card.Content>\n </>)</Card.Root>;"},{"id":"design-system-components-card--with-full-bleed","name":"With Full Bleed","snippet":"const WithFullBleed = () => <Card.Root>(<>\n <Card.Header>\n <Card.Title>Featured image</Card.Title>\n </Card.Header>\n <Card.Content>\n <Card.FullBleed>\n <div\n style={ {\n height: 160,\n background:\n 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n } }\n />\n </Card.FullBleed>\n <Text>Content below the full-bleed area.</Text>\n </Card.Content>\n </>)</Card.Root>;","description":"`Card.FullBleed` breaks out of the card's padding to span edge-to-edge. Useful for images, dividers, or embedded content."},{"id":"design-system-components-card--header-only","name":"Header Only","snippet":"const HeaderOnly = () => <Card.Root>(<Card.Header>\n <Card.Title>Simple card</Card.Title>\n </Card.Header>)</Card.Root>;","description":"A minimal card with only a header."},{"id":"design-system-components-card--custom-semantics","name":"Custom Semantics","snippet":"const CustomSemantics = () => <Card.Root render={<section />}>(<>\n <Card.Header>\n <Card.Title render={ <h2 /> }>Section heading</Card.Title>\n </Card.Header>\n <Card.Content>\n <Text>Semantically meaningful card content.</Text>\n </Card.Content>\n </>)</Card.Root>;","description":"Use the `render` prop to change the underlying HTML elements for better semantics. Here, `Card.Root` renders as a `<section>` and `Card.Title` renders as an `<h2>`."}],"import":"import { Content, FullBleed, Header, Root, Title } from \"@wordpress/ui\";","jsDocTags":{},"description":"A visually contained surface that groups related content and actions. ```jsx import { Card } from '@wordpress/ui'; function MyComponent() { return ( <Card.Root> <Card.Header> <Card.Title>Heading</Card.Title> </Card.Header> <Card.Content> <p>Main content here.</p> </Card.Content> </Card.Root> ); } ```","reactDocgen":{"description":"A visually contained surface that groups related content and actions.\n\n```jsx\nimport { Card } from '@wordpress/ui';\n\nfunction MyComponent() {\n\treturn (\n\t\t<Card.Root>\n\t\t\t<Card.Header>\n\t\t\t\t<Card.Title>Heading</Card.Title>\n\t\t\t</Card.Header>\n\t\t\t<Card.Content>\n\t\t\t\t<p>Main content here.</p>\n\t\t\t</Card.Content>\n\t\t</Card.Root>\n\t);\n}\n```","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/card/root.tsx","actualName":"Root","exportName":"Root","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the card."}}}},"design-system-components-collapsiblecard":{"id":"design-system-components-collapsiblecard","name":"CollapsibleCard.Root","path":"../packages/ui/src/collapsible-card/stories/index.story.tsx","stories":[{"id":"design-system-components-collapsiblecard--default","name":"Default","snippet":"const Default = () => <CollapsibleCard.Root>(<>\n <CollapsibleCard.Header>\n <Card.Title>\n Collapsible card (closed by default)\n </Card.Title>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>\n This is the collapsible content area. It can contain any\n elements, just like a regular Card.Content.\n </Text>\n <Text>\n When collapsed, only the header and chevron are visible.\n </Text>\n </CollapsibleCard.Content>\n </>)</CollapsibleCard.Root>;","description":"A collapsible card that is open by default."},{"id":"design-system-components-collapsiblecard--initially-opened","name":"Initially Opened","snippet":"const InitiallyOpened = () => <CollapsibleCard.Root defaultOpen>(<>\n <CollapsibleCard.Header>\n <Card.Title>Collapsed by default</Card.Title>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>This content was hidden until you expanded it.</Text>\n </CollapsibleCard.Content>\n </>)</CollapsibleCard.Root>;","description":"A collapsible card that starts collapsed."},{"id":"design-system-components-collapsiblecard--disabled","name":"Disabled","snippet":"const Disabled = () => <CollapsibleCard.Root disabled>(<>\n <CollapsibleCard.Header>\n <Card.Title>Disabled card</Card.Title>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>The header is not interactive when disabled.</Text>\n </CollapsibleCard.Content>\n </>)</CollapsibleCard.Root>;","description":"A disabled collapsible card cannot be toggled by the user."},{"id":"design-system-components-collapsiblecard--stacked","name":"Stacked","snippet":"const Stacked = () => (\n <div\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-lg)',\n } }\n >\n { [\n 'General',\n 'Advanced',\n 'Accessibility',\n 'Performance',\n 'Privacy',\n 'Notifications',\n ].map( ( title ) => (\n <CollapsibleCard.Root key={ title }>\n <CollapsibleCard.Header>\n <Card.Title>{ title }</Card.Title>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>\n Configure all { title.toLowerCase() } settings for\n your site. Changes here affect how your site behaves\n across all pages and posts.\n </Text>\n <Text>\n Review each option carefully before saving. Some\n changes may require a page reload to take effect.\n Hover over individual options for more details about\n what they control.\n </Text>\n <Text>\n If you&apos;re unsure about a setting, you can\n always reset to defaults using the button at the\n bottom of this section. Your previous configuration\n will be saved as a backup.\n </Text>\n </CollapsibleCard.Content>\n </CollapsibleCard.Root>\n ) ) }\n </div>\n);","description":"Multiple collapsible cards stacked vertically, simulating a typical settings-panel or FAQ-style layout."},{"id":"design-system-components-collapsiblecard--with-header-description","name":"With Header Description","snippet":"const WithHeaderDescription = ( { open, defaultOpen, onOpenChange, disabled, ...restArgs } ) => (\n <CollapsibleCard.Root\n open={ open }\n defaultOpen={ defaultOpen }\n onOpenChange={ onOpenChange }\n disabled={ disabled }\n { ...restArgs }\n >\n <CollapsibleCard.Header>\n <Stack justify=\"space-between\">\n <Card.Title>Settings</Card.Title>\n <CollapsibleCard.HeaderDescription>\n <span\n style={ {\n fontSize: 'var(--wpds-typography-font-size-sm)',\n color: 'var(--wpds-color-fg-content-neutral-weak)',\n } }\n >\n 3 items configured\n </span>\n </CollapsibleCard.HeaderDescription>\n </Stack>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>\n The header description provides supplementary context to the\n trigger button. Assistive technologies will announce the\n description alongside the button label.\n </Text>\n </CollapsibleCard.Content>\n </CollapsibleCard.Root>\n);","description":"A collapsible card with a `HeaderDescription` that provides supplementary information (e.g. status, summary) as an `aria-describedby` relationship."},{"id":"design-system-components-collapsiblecard--compared-to-card","name":"Compared To Card","snippet":"const ComparedToCard = ( { open, defaultOpen, onOpenChange, disabled, ...restArgs } ) => (\n <div\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var( --wpds-dimension-gap-lg )',\n } }\n >\n <CollapsibleCard.Root\n open={ open }\n defaultOpen={ defaultOpen }\n onOpenChange={ onOpenChange }\n disabled={ disabled }\n { ...restArgs }\n >\n <CollapsibleCard.Header>\n <Card.Title>CollapsibleCard (open)</Card.Title>\n </CollapsibleCard.Header>\n <CollapsibleCard.Content>\n <Text>\n Content should align with the regular card below.\n </Text>\n </CollapsibleCard.Content>\n </CollapsibleCard.Root>\n <Card.Root { ...restArgs }>\n <Card.Header>\n <Card.Title>Regular Card</Card.Title>\n </Card.Header>\n <Card.Content>\n <Text>\n Content should align with the collapsible card above.\n </Text>\n </Card.Content>\n </Card.Root>\n </div>\n);","description":"Visual comparison: a `CollapsibleCard` (open) next to a regular `Card` to verify identical spacing and layout."}],"import":"import { Content, Header, Root, Title, HeaderDescription, Stack } from \"@wordpress/ui\";","jsDocTags":{},"description":"A card that can be expanded and collapsed. When collapsed, only the header is visible. ```jsx import { CollapsibleCard, Card } from '@wordpress/ui'; function MyComponent() { return ( <CollapsibleCard.Root defaultOpen> <CollapsibleCard.Header> <Card.Title>Heading</Card.Title> </CollapsibleCard.Header> <CollapsibleCard.Content> <p>Collapsible content here.</p> </CollapsibleCard.Content> </CollapsibleCard.Root> ); } ```","reactDocgen":{"description":"A card that can be expanded and collapsed. When collapsed, only the\nheader is visible.\n\n```jsx\nimport { CollapsibleCard, Card } from '@wordpress/ui';\n\nfunction MyComponent() {\n\treturn (\n\t\t<CollapsibleCard.Root defaultOpen>\n\t\t\t<CollapsibleCard.Header>\n\t\t\t\t<Card.Title>Heading</Card.Title>\n\t\t\t</CollapsibleCard.Header>\n\t\t\t<CollapsibleCard.Content>\n\t\t\t\t<p>Collapsible content here.</p>\n\t\t\t</CollapsibleCard.Content>\n\t\t</CollapsibleCard.Root>\n\t);\n}\n```","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/collapsible-card/root.tsx","actualName":"Root","exportName":"Root","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the collapsible card.\nShould include `CollapsibleCard.Header` and `CollapsibleCard.Content`."},"open":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the collapsible panel is currently open (controlled).\n\nTo render an uncontrolled collapsible card, use `defaultOpen` instead."},"defaultOpen":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the collapsible panel is initially open (uncontrolled).\n@default false"},"onOpenChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( open: boolean ) => void","signature":{"arguments":[{"type":{"name":"boolean"},"name":"open"}],"return":{"name":"void"}}},"description":"Event handler called when the panel is opened or closed."},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the component should ignore user interaction.\n@default false"}}}},"design-system-components-collapsible":{"id":"design-system-components-collapsible","name":"Collapsible.Root","path":"../packages/ui/src/collapsible/stories/index.story.tsx","stories":[{"id":"design-system-components-collapsible--default","name":"Default","snippet":"const Default = () => <Collapsible.Root>(<>\n <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n <Collapsible.Panel>\n <p>Collapsible content here.</p>\n </Collapsible.Panel>\n </>)</Collapsible.Root>;"},{"id":"design-system-components-collapsible--default-open","name":"Default Open","snippet":"const DefaultOpen = () => <Collapsible.Root defaultOpen>(<>\n <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n <Collapsible.Panel>\n <p>This panel is open by default.</p>\n </Collapsible.Panel>\n </>)</Collapsible.Root>;"},{"id":"design-system-components-collapsible--disabled","name":"Disabled","snippet":"const Disabled = () => <Collapsible.Root disabled>(<>\n <Collapsible.Trigger>Toggle (disabled)</Collapsible.Trigger>\n <Collapsible.Panel>\n <p>This content cannot be toggled.</p>\n </Collapsible.Panel>\n </>)</Collapsible.Root>;"},{"id":"design-system-components-collapsible--hidden-until-found","name":"Hidden Until Found","snippet":"const HiddenUntilFound = function HiddenUntilFound() {\n return (\n <div>\n <p>\n Use the browser&apos;s find-in-page (Ctrl/Cmd+F) to search\n for &quot;hidden treasure&quot;. The collapsed panel will\n automatically expand to reveal the match.\n </p>\n <Collapsible.Root>\n <Collapsible.Trigger>Expand to reveal</Collapsible.Trigger>\n <Collapsible.Panel hiddenUntilFound>\n <p>\n This is the hidden treasure that can be found via\n the browser&apos;s built-in page search even while\n the panel is collapsed.\n </p>\n </Collapsible.Panel>\n </Collapsible.Root>\n </div>\n );\n};","description":"When `hiddenUntilFound` is set on `Collapsible.Panel`, the collapsed content remains in the DOM using the `hidden=\"until-found\"` HTML attribute instead of being removed entirely. This lets the browser's native page search (Ctrl/Cmd+F) find text inside collapsed panels and automatically expand them to reveal the match — improving discoverability without sacrificing the collapsed layout."},{"id":"design-system-components-collapsible--controlled","name":"Controlled","snippet":"const Controlled = function Controlled() {\n const [ open, setOpen ] = useState( false );\n return (\n <Collapsible.Root open={ open } onOpenChange={ setOpen }>\n <Collapsible.Trigger>\n { open ? 'Close' : 'Open' }\n </Collapsible.Trigger>\n <Collapsible.Panel>\n <p>Controlled collapsible panel.</p>\n </Collapsible.Panel>\n </Collapsible.Root>\n );\n};"}],"import":"import { Panel, Root, Trigger } from \"@wordpress/ui\";","jsDocTags":{},"description":"Groups all parts of the collapsible. `Collapsible` is a collection of React components that combine to render a collapsible panel controlled by a button.","reactDocgen":{"description":"Groups all parts of the collapsible.\n\n`Collapsible` is a collection of React components that combine to render\na collapsible panel controlled by a button.","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/collapsible/root.tsx","actualName":"Root","exportName":"Root","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the component."}}}},"design-system-components-dialog":{"id":"design-system-components-dialog","name":"Dialog.Root","path":"../packages/ui/src/dialog/stories/index.story.tsx","stories":[{"id":"design-system-components-dialog--default","name":"Default","snippet":"const _Default = () => <Dialog.Root>(<>\n <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n <Dialog.Popup>\n <Dialog.Header>\n <Dialog.Title>Welcome</Dialog.Title>\n <Dialog.CloseIcon />\n </Dialog.Header>\n <p>\n This dialog demonstrates best practices for\n informational dialogs. It includes a close icon because\n dismissing it is safe and expected.\n </p>\n <Dialog.Footer>\n <Dialog.Action>Got it</Dialog.Action>\n </Dialog.Footer>\n </Dialog.Popup>\n </>)</Dialog.Root>;","description":"An informational dialog with a close icon, where there is no ambiguity on what happens when clicking the close icon."},{"id":"design-system-components-dialog--all-sizes","name":"All Sizes","snippet":"const AllSizes = () => <Dialog.Root><SizePlaygroundContent /></Dialog.Root>;"},{"id":"design-system-components-dialog--with-custom-z-index","name":"With Custom z-index","snippet":"const WithCustomZIndex = () => <Dialog.Root />;","description":"Popovers in Gutenberg are managed with explicit z-index values, which can create situations where a dialog renders below another popover, when you want it to be rendered above. The `--wp-ui-dialog-z-index` CSS variable controls the z-index of both the backdrop and the popup. It can be overridden globally by setting the variable on `:root` or `body`. (This story doesn't actually demonstrate the feature because it requires a global CSS rule.)"},{"id":"design-system-components-dialog--with-visually-hidden-title","name":"With Visually Hidden Title","snippet":"const WithVisuallyHiddenTitle = () => <Dialog.Root>(<>\n <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n <Dialog.Popup>\n <Dialog.Header>\n <VisuallyHidden render={ <Dialog.Title /> }>\n Accessible dialog heading\n </VisuallyHidden>\n <Dialog.CloseIcon />\n </Dialog.Header>\n <p>\n This dialog has a visually hidden title. Inspect the DOM\n or use a screen reader to verify the heading is present.\n </p>\n <Dialog.Footer>\n <Dialog.Action>Got it</Dialog.Action>\n </Dialog.Footer>\n </Dialog.Popup>\n </>)</Dialog.Root>;","description":"A dialog with a visually hidden title. The title is still present in the DOM for `aria-labelledby`, but is not visible to sighted users. Use `<VisuallyHidden render={ <Dialog.Title /> }>` so that `Dialog.Title` keeps its `<h2>` element while being visually hidden."}],"import":"import {\n Action,\n CloseIcon,\n Footer,\n Header,\n Popup,\n Root,\n Title,\n Trigger,\n VisuallyHidden,\n} from \"@wordpress/ui\";","jsDocTags":{},"description":"Groups the dialog trigger and popup. `Dialog` is a collection of React components that combine to render an ARIA-compliant dialog pattern.","reactDocgen":{"description":"Groups the dialog trigger and popup.\n\n`Dialog` is a collection of React components that combine to render\nan ARIA-compliant dialog pattern.","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/dialog/root.tsx","actualName":"Root","exportName":"Root","props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the component."}},"composes":["Pick"]}},"design-system-components-emptystate":{"id":"design-system-components-emptystate","name":"EmptyState.Root","path":"../packages/ui/src/empty-state/stories/index.story.tsx","stories":[{"id":"design-system-components-emptystate--default","name":"Default","snippet":"const Default = () => <EmptyState.Root>(<>\n <EmptyState.Icon icon={ search } />\n <EmptyState.Title>No results found</EmptyState.Title>\n <EmptyState.Description>\n Try adjusting your search or filter to find what you&apos;re\n looking for.\n </EmptyState.Description>\n <EmptyState.Actions>\n <Button variant=\"outline\">Clear filters</Button>\n <Button>Add item</Button>\n </EmptyState.Actions>\n </>)</EmptyState.Root>;"},{"id":"design-system-components-emptystate--with-custom-visual","name":"With Custom Visual","snippet":"const WithCustomVisual = () => <EmptyState.Root>(<>\n <EmptyState.Visual>\n <svg\n width=\"50\"\n height=\"50\"\n viewBox=\"0 0 50 50\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"currentColor\" />\n </svg>\n </EmptyState.Visual>\n <EmptyState.Title>All caught up!</EmptyState.Title>\n <EmptyState.Description>\n You&apos;ve completed all your tasks. Great work!\n </EmptyState.Description>\n <EmptyState.Actions>\n <Button>Create new task</Button>\n </EmptyState.Actions>\n </>)</EmptyState.Root>;"}],"import":"import { Button, EmptyState } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-form-inputcontrol":{"id":"design-system-components-form-inputcontrol","name":"InputControl","path":"../packages/ui/src/form/input-control/stories/index.story.tsx","stories":[{"id":"design-system-components-form-inputcontrol--default","name":"Default","snippet":"const Default = () => <InputControl\n label=\"Label\"\n description=\"This is the description.\"\n placeholder=\"Placeholder\" />;"},{"id":"design-system-components-form-inputcontrol--visually-hidden-label","name":"Visually Hidden Label","snippet":"const VisuallyHiddenLabel = () => <InputControl hideLabelFromVision />;"},{"id":"design-system-components-form-inputcontrol--with-details","name":"With Details","snippet":"const WithDetails = () => <InputControl description={undefined} details={DETAILS_EXAMPLE} />;"},{"id":"design-system-components-form-inputcontrol--with-prefix","name":"WithPrefix","error":{"name":"SyntaxError","message":"Expected story to be a function or variable declaration\n 60 | \t...Default.args,\n 61 | };\n> 62 | export { WithPrefix, WithSuffixControl };\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 63 |\n 64 | export const Password: Story = {\n 65 | \trender: function Template( args ) {"}},{"id":"design-system-components-form-inputcontrol--with-suffix-control","name":"WithSuffixControl","error":{"name":"SyntaxError","message":"Expected story to be a function or variable declaration\n 60 | \t...Default.args,\n 61 | };\n> 62 | export { WithPrefix, WithSuffixControl };\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 63 |\n 64 | export const Password: Story = {\n 65 | \trender: function Template( args ) {"}},{"id":"design-system-components-form-inputcontrol--password","name":"Password","snippet":"const Password = () => {\n const [ show, setShow ] = useState( false );\n\n return (\n <InputControl\n defaultValue=\"password\"\n type={ show ? 'text' : 'password' }\n suffix={\n <InputLayout.Slot padding=\"minimal\">\n <IconButton\n label={ show ? 'Hide password' : 'Show password' }\n onClick={ () => setShow( ! show ) }\n icon={ show ? unseen : seen }\n size=\"small\"\n variant=\"minimal\"\n />\n </InputLayout.Slot>\n } />\n );\n};"},{"id":"design-system-components-form-inputcontrol--date","name":"Date","snippet":"const Date = () => <InputControl type=\"date\" />;"},{"id":"design-system-components-form-inputcontrol--number","name":"Number","snippet":"const Number = () => <InputControl placeholder=\"0\" type=\"number\" />;"},{"id":"design-system-components-form-inputcontrol--number-with-steppers","name":"Number With Steppers","snippet":"const NumberWithSteppers = () => {\n const [ value, setValue ] = useState( 0 );\n\n return (\n <>\n <style>\n { `\n .my-number-with-steppers input[type='number'] {\n -moz-appearance: textfield;\n }\n .my-number-with-steppers ::-webkit-inner-spin-button {\n appearance: none;\n }\n ` }\n </style>\n <InputControl\n type=\"number\"\n value={ value }\n onValueChange={ ( v ) => setValue( parseInt( v, 10 ) ) }\n className=\"my-number-with-steppers\"\n suffix={\n <InputLayout.Slot padding=\"minimal\">\n <Stack direction=\"row\" gap=\"xs\">\n <IconButton\n label=\"Increment\"\n icon={ plus }\n onClick={ () => setValue( value + 1 ) }\n size=\"small\"\n variant=\"minimal\"\n />\n <IconButton\n label=\"Decrement\"\n icon={ reset }\n onClick={ () => setValue( value - 1 ) }\n size=\"small\"\n variant=\"minimal\"\n />\n </Stack>\n </InputLayout.Slot>\n } />\n </>\n );\n};"},{"id":"design-system-components-form-inputcontrol--disabled","name":"Disabled","snippet":"const Disabled = () => <InputControl disabled />;"}],"import":"import { IconButton, InputControl, InputLayout, Stack } from \"@wordpress/ui\";","jsDocTags":{},"description":"A complete input field with integrated label and description.","reactDocgen":{"description":"A complete input field with integrated label and description.","methods":[],"displayName":"InputControl","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/form/input-control/input-control.tsx","actualName":"InputControl","exportName":"InputControl","props":{"label":{"required":true,"tsType":{"name":"ReactComponentProps['children']","raw":"React.ComponentProps< typeof Field.Label >[ 'children' ]"},"description":"The accessible label. All controls must be labeled."},"description":{"required":false,"tsType":{"name":"ReactComponentProps['children']","raw":"React.ComponentProps<\n\ttypeof Field.Description\n>[ 'children' ]"},"description":"The accessible description, associated using `aria-describedby`.\n\nFor screen reader accessibility, this should only contain plain text,\nand no semantics such as links."},"details":{"required":false,"tsType":{"name":"ReactComponentProps['children']","raw":"React.ComponentProps< typeof Field.Details >[ 'children' ]"},"description":"Additional information about the field, which unlike a normal description,\ncan include links and other semantic elements.\n\nDo not use this prop when the content is only plain text;\nuse `description` instead."},"hideLabelFromVision":{"required":false,"tsType":{"name":"ReactComponentProps['hideFromVision']","raw":"React.ComponentProps<\n\ttypeof Field.Label\n>[ 'hideFromVision' ]"},"description":"Whether to visually hide the label while keeping it accessible\nto screen readers.\n\n@default false"}}}},"design-system-components-form-primitives-field":{"id":"design-system-components-form-primitives-field","name":"Field.Root","path":"../packages/ui/src/form/primitives/field/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-field--default","name":"Default","snippet":"const Default = () => <Field.Root>(<>\n <Field.Label>Label</Field.Label>\n <Field.Control\n render={ <input type=\"text\" placeholder=\"Placeholder\" /> }\n />\n <Field.Description>\n The accessible description.\n </Field.Description>\n </>)</Field.Root>;","description":"If your control component forwards refs, as well as the `aria-labelledby` and `aria-describedby` props to the actual underlying HTML element to be labeled, you can simply place your control in the `render` prop of `Field.Control`."},{"id":"design-system-components-form-primitives-field--using-html-for","name":"Using htmlFor","snippet":"const UsingHtmlFor = () => {\n const controlId = useId();\n const descriptionId = useId();\n\n return (\n <Field.Root>\n <Field.Label htmlFor={ controlId }>Label</Field.Label>\n <MyNonRefForwardingControl\n placeholder=\"Placeholder\"\n id={ controlId }\n aria-describedby={ descriptionId } />\n <Field.Description id={ descriptionId }>The accessible description.\n </Field.Description>\n </Field.Root>\n );\n};","description":"If your control component does not forward refs, but does forward the `id` prop to the actual underlying HTML element to be labeled, use the `htmlFor` prop of the `Field.Label` component to associate the label with the control. This is preferred over `aria-labelledby` because it allows users to click the label to focus the control."},{"id":"design-system-components-form-primitives-field--using-aria-labelledby","name":"Using aria-labelledby","snippet":"const UsingAriaLabelledby = () => {\n const labelId = useId();\n const descriptionId = useId();\n\n return (\n <Field.Root>\n <Field.Label id={ labelId }>Label</Field.Label>\n <MyNonRefForwardingControl\n placeholder=\"Placeholder\"\n aria-labelledby={ labelId }\n aria-describedby={ descriptionId } />\n <Field.Description id={ descriptionId }>The accessible description.\n </Field.Description>{ ' ' }\n </Field.Root>\n );\n};","description":"If your control component does not forward refs nor the `id` prop, but does forward the `aria-labelledby` prop to the actual underlying HTML element to be labeled, use the `id` prop of the `Field.Label` component to associate the label with the control."},{"id":"design-system-components-form-primitives-field--hidden-label","name":"Hidden Label","snippet":"const HiddenLabel = () => <Field.Root>(<>\n <Field.Label hideFromVision>Label</Field.Label>\n <Field.Control\n render={ <input type=\"text\" placeholder=\"Placeholder\" /> }\n />\n </>)</Field.Root>;","description":"When `hideFromVision` is set on `Field.Label`, the label is visually hidden but remains accessible to screen readers."},{"id":"design-system-components-form-primitives-field--with-details","name":"With Details","snippet":"const WithDetails = () => <Field.Root>(<>\n <Field.Label>Label</Field.Label>\n <Field.Control\n render={ <input type=\"text\" placeholder=\"Placeholder\" /> }\n />\n <Field.Details>{ DETAILS_EXAMPLE }</Field.Details>\n </>)</Field.Root>;","description":"To add rich content (such as links) to the description, use `Field.Details`. Although this content is not associated with the field using direct semantics, it is made discoverable to screen reader users via a visually hidden description, alerting them to the presence of additional information below. If the content only includes plain text, use `Field.Description` instead, so the readout is not unnecessarily verbose for screen reader users."}],"import":"import { Field } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-form-primitives-fieldset":{"id":"design-system-components-form-primitives-fieldset","name":"Fieldset.Root","path":"../packages/ui/src/form/primitives/fieldset/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-fieldset--default","name":"Default","snippet":"const Default = () => <Fieldset.Root>(<>\n <Fieldset.Legend>Legend</Fieldset.Legend>\n { [ 'Apples', 'Bananas' ].map( ( fruit ) => (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n (<label key={ fruit }>\n <input type=\"checkbox\" /> { fruit }\n </label>)\n ) ) }\n <Fieldset.Description>\n This is a description for the entire fieldset.\n </Fieldset.Description>\n </>)</Fieldset.Root>;"},{"id":"design-system-components-form-primitives-fieldset--hidden-legend","name":"Hidden Legend","snippet":"const HiddenLegend = () => <Fieldset.Root>(<>\n <Fieldset.Legend hideFromVision>Legend</Fieldset.Legend>\n { [ 'Apples', 'Bananas' ].map( ( fruit ) => (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n (<label key={ fruit }>\n <input type=\"checkbox\" /> { fruit }\n </label>)\n ) ) }\n </>)</Fieldset.Root>;","description":"When `hideFromVision` is set on `Fieldset.Legend`, the legend is visually hidden but remains accessible to screen readers."},{"id":"design-system-components-form-primitives-fieldset--with-details","name":"With Details","snippet":"const WithDetails = () => <Fieldset.Root>(<>\n <Fieldset.Legend>Legend</Fieldset.Legend>\n { [ 'Apples', 'Bananas' ].map( ( fruit ) => (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n (<label key={ fruit }>\n <input type=\"checkbox\" /> { fruit }\n </label>)\n ) ) }\n <Fieldset.Details>{ DETAILS_EXAMPLE }</Fieldset.Details>\n </>)</Fieldset.Root>;","description":"To add rich content (such as links) to the description, use `Fieldset.Details`. Although this content is not associated with the fieldset using direct semantics, it is made discoverable to screen reader users via a visually hidden description, alerting them to the presence of additional information below. If the content only includes plain text, use `Fieldset.Description` instead, so the readout is not unnecessarily verbose for screen reader users."}],"import":"import { Fieldset } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-form-primitives-inputlayout":{"id":"design-system-components-form-primitives-inputlayout","name":"InputLayout","path":"../packages/ui/src/form/primitives/input-layout/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-inputlayout--default","name":"Default","snippet":"const Default = () => <InputLayout />;"},{"id":"design-system-components-form-primitives-inputlayout--with-prefix","name":"With Prefix","snippet":"const WithPrefix = () => <InputLayout\n prefix={(<div\n style={ {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n aspectRatio: '1 / 1',\n background: '#eee',\n } }\n >$\n </div>)} />;","description":"By default, the `prefix` and `suffix` slots are rendered with no padding."},{"id":"design-system-components-form-primitives-inputlayout--with-padded-prefix","name":"With Padded Prefix","snippet":"const WithPaddedPrefix = () => <InputLayout prefix={<InputLayout.Slot>https://</InputLayout.Slot>} />;","description":"The `InputLayout.Slot` component can be used to add standard padding in the `prefix` or `suffix` slot. The `padding=\"minimal\"` setting will work best when the slot content is a button or icon."},{"id":"design-system-components-form-primitives-inputlayout--with-suffix-control","name":"With Suffix Control","snippet":"const WithSuffixControl = () => <InputLayout\n suffix={(<InputLayout.Slot padding=\"minimal\">\n <IconButton\n size=\"small\"\n variant=\"minimal\"\n icon={ copy }\n label=\"Copy\"\n />\n </InputLayout.Slot>)}><div style={ { flex: 1 } } /></InputLayout>;","description":"The `padding=\"minimal\"` setting on `InputLayout.Slot` will work best when the slot content is a button or icon."},{"id":"design-system-components-form-primitives-inputlayout--compact","name":"Compact","snippet":"const Compact = () => <InputLayout size=\"compact\" />;"},{"id":"design-system-components-form-primitives-inputlayout--small","name":"Small","snippet":"const Small = () => <InputLayout size=\"small\" />;","description":"The `small` size is intended only for rare cases like the trigger button of a low-profile `select` element."}],"import":"import { IconButton, InputLayout } from \"@wordpress/ui\";","jsDocTags":{},"description":"A low-level component that handles the visual layout of an input-like field, including disabled states and standard prefix/suffix slots.","reactDocgen":{"description":"A low-level component that handles the visual layout of an input-like field,\nincluding disabled states and standard prefix/suffix slots.","methods":[],"displayName":"InputLayout","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/form/primitives/input-layout/input-layout.tsx","actualName":"InputLayout","exportName":"InputLayout","props":{"visuallyDisabled":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the field should be visually styled as disabled."},"size":{"required":false,"tsType":{"name":"union","raw":"'default' | 'compact' | 'small'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'compact'"},{"name":"literal","value":"'small'"}]},"description":"The size of the field.\n\n@default 'default'","defaultValue":{"value":"'default'","computed":false}},"isBorderless":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the field should hide the border."},"prefix":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"Element to render before the input."},"suffix":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"Element to render after the input."}},"composes":["Omit"]}},"design-system-components-form-primitives-input":{"id":"design-system-components-form-primitives-input","name":"Input","path":"../packages/ui/src/form/primitives/input/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-input--default","name":"Default","snippet":"const Default = () => <Input placeholder=\"Placeholder\" />;"},{"id":"design-system-components-form-primitives-input--with-prefix","name":"With Prefix","snippet":"const WithPrefix = () => <Input placeholder=\"username\" prefix={<InputLayout.Slot>@</InputLayout.Slot>} />;","description":"The `InputLayout.Slot` component can be used to add standard padding in the `prefix` or `suffix` slot."},{"id":"design-system-components-form-primitives-input--with-suffix-control","name":"WithSuffixControl","error":{"name":"SyntaxError","message":"Expected story to be a function or variable declaration\n 38 | \tchildren: undefined,\n 39 | };\n> 40 | export { WithSuffixControl };\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 41 |\n 42 | export const Disabled: Story = {\n 43 | \targs: {"}},{"id":"design-system-components-form-primitives-input--disabled","name":"Disabled","snippet":"const Disabled = () => <Input disabled />;"}],"import":"import { Input, InputLayout } from \"@wordpress/ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Input","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/form/primitives/input/input.tsx","actualName":"Input","exportName":"Input","props":{"disabled":{"required":false,"tsType":{"name":"boolean"},"description":"Whether the field is disabled."},"type":{"required":false,"tsType":{"name":"Input.Props['type']","raw":"Input.Props[ 'type' ]"},"description":"The type of the input element."},"defaultValue":{"required":false,"tsType":{"name":"Input.Props['defaultValue']","raw":"Input.Props[ 'defaultValue' ]"},"description":"The default value to use in uncontrolled mode."},"value":{"required":false,"tsType":{"name":"Input.Props['value']","raw":"Input.Props[ 'value' ]"},"description":"The value to use in controlled mode."},"size":{"required":false,"tsType":{"name":"Exclude","elements":[{"name":"InputLayoutProps['size']","raw":"InputLayoutProps[ 'size' ]"},{"name":"literal","value":"'small'"}],"raw":"Exclude< InputLayoutProps[ 'size' ], 'small' >"},"description":"The size of the field.","defaultValue":{"value":"'default'","computed":false}}}}},"design-system-components-form-primitives-select":{"id":"design-system-components-form-primitives-select","name":"Select.Root","path":"../packages/ui/src/form/primitives/select/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-select--default","name":"Default","snippet":"const Default = () => <Select.Root>(<>\n <Select.Trigger />\n <Select.Popup>\n { Array.from( { length: 6 }, ( _, index ) => (\n <Select.Item\n key={ index }\n value={ `Item ${ index + 1 }` }\n />\n ) ) }\n </Select.Popup>\n </>)</Select.Root>;"},{"id":"design-system-components-form-primitives-select--compact","name":"Compact","snippet":"const Compact = () => <Select.Root defaultValue=\"Item 1\">(<>\n <Select.Trigger size=\"compact\" />\n <Select.Popup>\n { Array.from( { length: 6 }, ( _, index ) => (\n <Select.Item\n key={ index }\n value={ `Item ${ index + 1 }` }\n size=\"compact\"\n />\n ) ) }\n </Select.Popup>\n </>)</Select.Root>;"},{"id":"design-system-components-form-primitives-select--minimal","name":"Minimal","snippet":"const Minimal = () => <Select.Root defaultValue=\"1\">(<>\n <Select.Trigger size=\"small\" variant=\"minimal\" />\n <Select.Popup>\n { Array.from( { length: 6 }, ( _, index ) => (\n <Select.Item\n key={ index }\n value={ `${ index + 1 }` }\n size=\"small\"\n />\n ) ) }\n </Select.Popup>\n </>)</Select.Root>;","description":"The `minimal` variant must be used judiciously, because in many contexts it can be unclear to users that it is a select trigger. Combined with the `small` size, `minimal` can be used to create a very low-profile `Select`, intended for rare use cases like a pagination control."},{"id":"design-system-components-form-primitives-select--with-empty-value-option","name":"With Empty Value Option","snippet":"const WithEmptyValueOption = () => <Select.Root items={withEmptyOptionItems} defaultValue=\"\">(<>\n <Select.Trigger />\n <Select.Popup>\n { withEmptyOptionItems.map( ( item ) => (\n <Select.Item\n key={ item.value }\n value={ item.value }\n label={ item.label }\n disabled={ item.disabled }\n >\n { item.label }\n </Select.Item>\n ) ) }\n </Select.Popup>\n </>)</Select.Root>;","description":"By passing an `items` array to `Select.Root`, the `Select.Trigger` will be able to render a `label` string for each item rather than the raw `value` string. In this case, the option with an empty string value has a `\"Select\"` label string. This may be easier than writing a custom render function for the `Select.Trigger`."},{"id":"design-system-components-form-primitives-select--labeling","name":"Labeling","snippet":"const Labeling = () => <Select.Root defaultValue=\"Administrator\">(<>\n <Select.Trigger aria-label=\"User role\" />\n <Select.Popup>\n <Select.Item value=\"Administrator\" />\n <Select.Item value=\"Editor\" />\n </Select.Popup>\n </>)</Select.Root>;","description":"When accessibly labeling a `Select`, note that the label must be associated with the `Select.Trigger`, not the `Select.Root`. Whether labeling with `aria-label`, `htmlFor`, or `aria-labelledby`, the association must be made to the `Select.Trigger`."},{"id":"design-system-components-form-primitives-select--with-overflow","name":"With Overflow","snippet":"const WithOverflow = () => <Select.Root defaultValue={longItemValue}>(<>\n <Select.Trigger />\n <Select.Popup>\n <Select.Item value={ longItemValue } />\n <Select.Item value=\"Item 2\" />\n </Select.Popup>\n </>)</Select.Root>;"},{"id":"design-system-components-form-primitives-select--disabled","name":"Disabled","snippet":"const Disabled = () => <Select.Root defaultValue=\"Item 1\" disabled>(<>\n <Select.Trigger />\n <Select.Popup>\n <Select.Item value=\"Item 1\" />\n <Select.Item value=\"Item 2\" />\n </Select.Popup>\n </>)</Select.Root>;"},{"id":"design-system-components-form-primitives-select--with-disabled-item","name":"With Disabled Item","snippet":"const WithDisabledItem = () => <Select.Root defaultValue=\"Item 1\">(<>\n <Select.Trigger />\n <Select.Popup>\n <Select.Item value=\"Item 1\" />\n <Select.Item value=\"Item 2\" disabled />\n </Select.Popup>\n </>)</Select.Root>;"},{"id":"design-system-components-form-primitives-select--with-custom-trigger-and-item","name":"With Custom Trigger And Item","snippet":"const WithCustomTriggerAndItem = () => <Select.Root defaultValue=\"User 1\">(<>\n <Select.Trigger>\n { ( value ) => (\n <span\n style={ {\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n } }\n >\n <img\n src={ `https://gravatar.com/avatar/?d=initials&name=${ value }` }\n alt=\"\"\n width=\"20\"\n style={ {\n borderRadius: '50%',\n } }\n />\n { value }\n </span>\n ) }\n </Select.Trigger>\n <Select.Popup>\n { customOptions.map( ( item ) => (\n <Select.Item\n key={ item.value }\n value={ item.value }\n label={ item.label }\n >\n { item.label }\n </Select.Item>\n ) ) }\n </Select.Popup>\n </>)</Select.Root>;","description":"For custom needs, a `Select.Trigger` can take a custom render function as its children, while `Select.Item` can take arbitrary content as children."},{"id":"design-system-components-form-primitives-select--with-custom-z-index","name":"With Custom z-index","snippet":"const WithCustomZIndex = () => <Select.Root defaultValue=\"Item 1\">(<>\n <Select.Trigger />\n <Select.Popup style={ { '--wp-ui-select-z-index': '1000001' } }>\n <Select.Item value=\"Item 1\" />\n <Select.Item value=\"Item 2\" />\n </Select.Popup>\n </>)</Select.Root>;","description":"Popovers in Gutenberg are managed with explicit z-index values, which can create situations where a popover renders below another popover, when you want it to be rendered above. The `--wp-ui-select-z-index` CSS variable, available on the `Select.Popup` component, is an escape hatch that can be used to override the z-index of a given `Select` popover on a case-by-case basis."}],"import":"import { Select } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-form-primitives-textarea":{"id":"design-system-components-form-primitives-textarea","name":"Textarea","path":"../packages/ui/src/form/primitives/textarea/stories/index.story.tsx","stories":[{"id":"design-system-components-form-primitives-textarea--default","name":"Default","snippet":"const Default = () => <Textarea placeholder=\"Placeholder\" />;"},{"id":"design-system-components-form-primitives-textarea--disabled","name":"Disabled","snippet":"const Disabled = () => <Textarea disabled />;"},{"id":"design-system-components-form-primitives-textarea--with-overflow","name":"With Overflow","snippet":"const WithOverflow = () => <Textarea\n defaultValue={`Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`} />;"},{"id":"design-system-components-form-primitives-textarea--with-one-row","name":"With One Row","snippet":"const WithOneRow = () => <Textarea rows={1} />;","description":"When `rows` is set to `1`, the textarea will have the same footprint as a default `Input`."}],"import":"import { Textarea } from \"@wordpress/ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Textarea","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/form/primitives/textarea/textarea.tsx","actualName":"Textarea","exportName":"Textarea","props":{"rows":{"required":false,"tsType":{"name":"ReactComponentProps['rows']","raw":"React.ComponentProps< 'textarea' >[ 'rows' ]"},"description":"The number of rows the textarea should contain.\n\n@default 4","defaultValue":{"value":"4","computed":false}}}}},"design-system-components-iconbutton":{"id":"design-system-components-iconbutton","name":"IconButton","path":"../packages/ui/src/icon-button/stories/index.story.tsx","stories":[{"id":"design-system-components-iconbutton--default","name":"Default","snippet":"const Default = () => <IconButton icon={cog} label=\"Settings\" />;"},{"id":"design-system-components-iconbutton--outline","name":"Outline","snippet":"const Outline = () => <IconButton variant=\"outline\" />;"},{"id":"design-system-components-iconbutton--minimal","name":"Minimal","snippet":"const Minimal = () => <IconButton variant=\"minimal\" />;"},{"id":"design-system-components-iconbutton--neutral","name":"Neutral","snippet":"const Neutral = () => <IconButton tone=\"neutral\" label=\"Settings\" />;"},{"id":"design-system-components-iconbutton--neutral-outline","name":"Neutral Outline","snippet":"const NeutralOutline = () => <IconButton tone=\"neutral\" variant=\"outline\" label=\"Settings\" />;"},{"id":"design-system-components-iconbutton--disabled","name":"Disabled","snippet":"const Disabled = () => <IconButton disabled label=\"Settings\" />;"},{"id":"design-system-components-iconbutton--with-different-icons","name":"With Different Icons","snippet":"const WithDifferentIcons = () => <div\n style={ {\n display: 'flex',\n gap: '1rem',\n alignItems: 'center',\n flexWrap: 'wrap',\n } }>\n <IconButton icon={ wordpress } label=\"WordPress\" />\n <IconButton icon={ plus } label=\"Add\" />\n <IconButton icon={ pencil } label=\"Edit\" />\n <IconButton icon={ trash } label=\"Delete\" />\n <IconButton icon={ download } label=\"Download\" />\n <IconButton icon={ upload } label=\"Upload\" />\n</div>;"},{"id":"design-system-components-iconbutton--pressed","name":"Pressed","snippet":"const Pressed = () => <IconButton tone=\"neutral\" variant=\"minimal\" label=\"Toggle Settings\" aria-pressed />;","description":"The pressed state is only available for buttons with `tone=\"neutral\"` and `variant=\"minimal\"` and can be toggled via the `aria-pressed` HTML attribute."},{"id":"design-system-components-iconbutton--with-shortcut","name":"With Shortcut","snippet":"const WithShortcut = () => <IconButton icon={copy} label=\"Copy\" shortcut={EXAMPLE_SHORTCUT_OBJECT} />;"}],"import":"import { IconButton } from \"@wordpress/ui\";","jsDocTags":{},"description":"An icon-only button with automatic tooltip and optimized styling. Inherits all Button props while providing icon-specific enhancements.","reactDocgen":{"description":"An icon-only button with automatic tooltip and optimized styling.\nInherits all Button props while providing icon-specific enhancements.","methods":[],"displayName":"IconButton","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/icon-button/icon-button.tsx","actualName":"IconButton","exportName":"IconButton","props":{"label":{"required":true,"tsType":{"name":"string"},"description":"A label describing the button's action, shown as a tooltip and to\nassistive technology."},"icon":{"required":true,"tsType":{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]"},"description":"The icon to display in the button."},"shortcut":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\t/**\n\t * The human-readable representation of the shortcut, displayed in the\n\t * tooltip. Use platform-appropriate symbols (e.g., \"⌘S\" on macOS,\n\t * \"Ctrl+S\" on Windows).\n\t */\n\tdisplayShortcut: string;\n\t/**\n\t * The shortcut in a format compatible with the\n\t * [aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts)\n\t * attribute. Use \"+\" to separate keys and standard key names\n\t * (e.g., \"Meta+S\", \"Control+Shift+P\").\n\t */\n\tariaKeyShortcut: string;\n}","signature":{"properties":[{"key":"displayShortcut","value":{"name":"string","required":true},"description":"The human-readable representation of the shortcut, displayed in the\ntooltip. Use platform-appropriate symbols (e.g., \"⌘S\" on macOS,\n\"Ctrl+S\" on Windows)."},{"key":"ariaKeyShortcut","value":{"name":"string","required":true},"description":"The shortcut in a format compatible with the\n[aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts)\nattribute. Use \"+\" to separate keys and standard key names\n(e.g., \"Meta+S\", \"Control+Shift+P\")."}]}},"description":"The keyboard shortcut associated with this button. When provided, the\nshortcut is displayed in the tooltip and announced to assistive technology.\n\n**Note**: This prop is for display and accessibility purposes only — the\nconsumer is responsible for implementing the actual keyboard event handler."},"children":{"required":false,"tsType":{"name":"unknown"},"description":""}}}},"design-system-components-icon":{"id":"design-system-components-icon","name":"Icon","path":"../packages/ui/src/icon/stories/index.story.tsx","stories":[{"id":"design-system-components-icon--default","name":"Default","snippet":"const Default = () => <Icon icon={wordpress} />;"},{"id":"design-system-components-icon--with-intrinsic-fill-color","name":"With Intrinsic Fill Color","snippet":"const WithIntrinsicFillColor = () => <Icon\n icon={(<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"blue\"\n >\n <rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" />\n </svg>)} />;","description":"Explicit `fill` colors in the icon will be preserved."}],"import":"import { Icon } from \"@wordpress/ui\";","jsDocTags":{},"description":"Renders an SVG icon with a 24px default size. If no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill. ```jsx import { wordpress } from '@wordpress/icons'; <Icon icon={ wordpress } /> ```","reactDocgen":{"description":"Renders an SVG icon with a 24px default size.\n\nIf no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill.\n\n```jsx\nimport { wordpress } from '@wordpress/icons';\n\n<Icon icon={ wordpress } />\n```","methods":[],"displayName":"Icon","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/icon/icon.tsx","actualName":"Icon","exportName":"Icon","props":{"icon":{"required":true,"tsType":{"name":"ReactReactElement","raw":"React.ReactElement< React.ComponentProps< 'svg' > >","elements":[{"name":"ReactComponentProps","raw":"React.ComponentProps< 'svg' >","elements":[{"name":"literal","value":"'svg'"}]}]},"description":"The icon to render, which must be an svg element or an `SVG` from `@wordpress/primitives`.\n\nIn most cases, you should use an icon from\n[the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library)."},"size":{"required":false,"tsType":{"name":"number"},"description":"The size (width and height) of the icon.\n@default 24","defaultValue":{"value":"24","computed":false}}}}},"design-system-components-link":{"id":"design-system-components-link","name":"Link","path":"../packages/ui/src/link/stories/index.story.tsx","stories":[{"id":"design-system-components-link--default","name":"Default","snippet":"const Default = () => <Link href=\"#\">Learn more</Link>;"},{"id":"design-system-components-link--all-tones-and-variants","name":"All Tones And Variants","snippet":"const AllTonesAndVariants = ( args ) => (\n <Stack direction=\"column\" gap=\"lg\">\n { ( [ 'brand', 'neutral' ] as const ).map( ( tone ) =>\n ( [ 'default', 'unstyled' ] as const ).map( ( variant ) => (\n <Stack\n direction=\"column\"\n gap=\"xs\"\n key={ `${ tone }-${ variant }` }\n >\n <Text variant=\"heading-sm\">\n { tone } tone, { variant } variant\n </Text>\n <Link { ...args } tone={ tone } variant={ variant } />\n </Stack>\n ) )\n ) }\n </Stack>\n);","description":"Note: `tone` has no effect on `unstyled` variant"},{"id":"design-system-components-link--inline","name":"Inline","snippet":"const Inline = () => <Text variant=\"body-md\" render={ <p /> }>This is a paragraph with an <Link>inline link</Link>that inherits its\n typography from the parent Text component.\n </Text>;"},{"id":"design-system-components-link--standalone","name":"Standalone","snippet":"const Standalone = ( args ) => (\n <Stack direction=\"column\" gap=\"md\">\n <Text variant=\"body-md\" render={ <Link { ...args } /> }>\n A standalone link with body-md typography\n </Text>\n <Text variant=\"body-sm\" render={ <Link { ...args } /> }>\n A standalone link with body-sm typography\n </Text>\n </Stack>\n);","description":"When composing `Text` and `Link` via the `render` prop, the order matters: - `<Text render={ <Link /> } />` renders an `<a>` element (Link's default tag wins). - `<Link render={ <Text /> } />` renders a `<span>` element (Text's default tag wins)."}],"import":"import { Link, Stack, Text } from \"@wordpress/ui\";","jsDocTags":{},"description":"A styled anchor element with support for semantic color tones and an unstyled escape hatch.","reactDocgen":{"description":"A styled anchor element with support for semantic color tones and an\nunstyled escape hatch.","methods":[],"displayName":"Link","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/link/link.tsx","actualName":"Link","exportName":"Link","props":{"variant":{"required":false,"tsType":{"name":"union","raw":"'default' | 'unstyled'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'unstyled'"}]},"description":"The visual treatment of the link.\n\n- `default`: Applies tone-based color and underline styles.\n- `unstyled`: Strips all visual styles so consumers can bring their own.\n\n@default \"default\"","defaultValue":{"value":"'default'","computed":false}},"tone":{"required":false,"tsType":{"name":"union","raw":"'brand' | 'neutral'","elements":[{"name":"literal","value":"'brand'"},{"name":"literal","value":"'neutral'"}]},"description":"The tone of the link. Tone describes a semantic color intent.\nOnly applies when `variant` is `default`.\n\n@default \"brand\"","defaultValue":{"value":"'brand'","computed":false}},"openInNewTab":{"required":false,"tsType":{"name":"boolean"},"description":"Whether to open the link in a new browser tab.\nWhen true, sets `target=\"_blank\"`, appends a visual arrow indicator,\nand prevents navigation for internal anchors (`#`-prefixed hrefs).\n\n@default false","defaultValue":{"value":"false","computed":false}},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the component."}},"composes":["Omit"]}},"design-system-components-notice":{"id":"design-system-components-notice","name":"Notice.Root","path":"../packages/ui/src/notice/stories/index.story.tsx","stories":[{"id":"design-system-components-notice--default","name":"Default","snippet":"const Default = () => <Notice.Root>(<>\n <Notice.Title>Notice Title</Notice.Title>\n <Notice.Description>\n Description text with details about this notification.\n </Notice.Description>\n <Notice.Actions>\n <Notice.ActionButton>Primary button</Notice.ActionButton>\n <Notice.ActionButton variant=\"outline\">\n Secondary button\n </Notice.ActionButton>\n <Notice.ActionLink href=\"#\">Link</Notice.ActionLink>\n </Notice.Actions>\n <Notice.CloseIcon />\n </>)</Notice.Root>;"},{"id":"design-system-components-notice--info","name":"Info","snippet":"const Info = () => <Notice.Root intent=\"info\" />;"},{"id":"design-system-components-notice--warning","name":"Warning","snippet":"const Warning = () => <Notice.Root intent=\"warning\" />;"},{"id":"design-system-components-notice--success","name":"Success","snippet":"const Success = () => <Notice.Root intent=\"success\" />;"},{"id":"design-system-components-notice--error","name":"Error","snippet":"const Error = () => <Notice.Root intent=\"error\" />;"},{"id":"design-system-components-notice--non-dismissible","name":"Non Dismissible","snippet":"const NonDismissible = () => <Notice.Root intent=\"warning\">(<>\n <Notice.Title>Action Required</Notice.Title>\n <Notice.Description>\n This notice cannot be dismissed by the user.\n </Notice.Description>\n <Notice.Actions>\n <Notice.ActionButton>Take Action</Notice.ActionButton>\n <Notice.ActionLink href=\"#\">Visit link</Notice.ActionLink>\n </Notice.Actions>\n </>)</Notice.Root>;","description":"Omit Notice.CloseIcon to make the notice non-dismissable."},{"id":"design-system-components-notice--without-icon","name":"Without Icon","snippet":"const WithoutIcon = () => <Notice.Root intent=\"info\" icon={null}>(<>\n <Notice.Title>No Icon</Notice.Title>\n <Notice.Description>\n This notice has no decorative icon displayed.\n </Notice.Description>\n <Notice.CloseIcon />\n </>)</Notice.Root>;","description":"Pass `icon={ null }` to hide the default decorative icon."},{"id":"design-system-components-notice--without-actions","name":"Without Actions","snippet":"const WithoutActions = () => <Notice.Root intent=\"info\">(<>\n <Notice.Title>Simple Notice</Notice.Title>\n <Notice.Description>\n A dismissable notice without any action buttons or links.\n </Notice.Description>\n <Notice.CloseIcon />\n </>)</Notice.Root>;"},{"id":"design-system-components-notice--title-only","name":"Title Only","snippet":"const TitleOnly = () => <Notice.Root>(<>\n <Notice.Title>Just a title</Notice.Title>\n <Notice.CloseIcon />\n </>)</Notice.Root>;","description":"Title only, no description or actions."},{"id":"design-system-components-notice--description-only","name":"Description Only","snippet":"const DescriptionOnly = () => <Notice.Root intent=\"info\">(<>\n <Notice.Description>\n Just a description without title or actions.\n </Notice.Description>\n <Notice.CloseIcon />\n </>)</Notice.Root>;","description":"Description only, no title or actions."}],"import":"import { ActionButton, ActionLink, Actions, CloseIcon, Description, Root, Title } from \"@wordpress/ui\";","jsDocTags":{},"description":"A notice component that communicates system status and provides actions. ```jsx import { Notice } from '@wordpress/ui'; function MyComponent() { return ( <Notice.Root intent=\"info\"> <Notice.Title>Heading</Notice.Title> <Notice.Description>Body text</Notice.Description> <Notice.Actions> <Notice.ActionButton>Action</Notice.ActionButton> </Notice.Actions> <Notice.CloseIcon onClick={() => {}} /> </Notice.Root> ); } ```","reactDocgen":{"description":"A notice component that communicates system status and provides actions.\n\n```jsx\nimport { Notice } from '@wordpress/ui';\n\nfunction MyComponent() {\n\treturn (\n\t\t<Notice.Root intent=\"info\">\n\t\t\t<Notice.Title>Heading</Notice.Title>\n\t\t\t<Notice.Description>Body text</Notice.Description>\n\t\t\t<Notice.Actions>\n\t\t\t\t<Notice.ActionButton>Action</Notice.ActionButton>\n\t\t\t</Notice.Actions>\n\t\t\t<Notice.CloseIcon onClick={() => {}} />\n\t\t</Notice.Root>\n\t);\n}\n```","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/notice/root.tsx","actualName":"Root","exportName":"Root","props":{"intent":{"required":false,"tsType":{"name":"union","raw":"'warning' | 'success' | 'error' | 'info' | 'neutral'","elements":[{"name":"literal","value":"'warning'"},{"name":"literal","value":"'success'"},{"name":"literal","value":"'error'"},{"name":"literal","value":"'info'"},{"name":"literal","value":"'neutral'"}]},"description":"The semantic intent of the notice, communicating its meaning through color.\nAvailable intents: neutral, info, warning, success, and error.\n\n@default 'neutral'","defaultValue":{"value":"'neutral'","computed":false}},"icon":{"required":false,"tsType":{"name":"union","raw":"IconProps[ 'icon' ] | null","elements":[{"name":"intersection['icon']","raw":"IconProps[ 'icon' ]"},{"name":"null"}]},"description":"Custom icon to override the default intent icon. Pass `null` to hide the icon.\nDefault icons by intent: neutral (none), info (info), warning (caution),\nsuccess (published), error (error)."},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":"The content to be rendered inside the notice."},"spokenMessage":{"required":false,"tsType":{"name":"ReactNode"},"description":"The message to be announced to screen readers. Defaults to the children content.\nUsed by the `speak()` function from `@wordpress/a11y`.","defaultValue":{"value":"children","computed":false}},"politeness":{"required":false,"tsType":{"name":"union","raw":"'polite' | 'assertive'","elements":[{"name":"literal","value":"'polite'"},{"name":"literal","value":"'assertive'"}]},"description":"The politeness level for screen reader announcements.\nDefaults to 'assertive' for error intent, 'polite' for others.","defaultValue":{"value":"getDefaultPoliteness( intent )","computed":true}}},"composes":["Omit"]}},"design-system-components-popover":{"id":"design-system-components-popover","name":"Popover.Root","path":"../packages/ui/src/popover/stories/index.story.tsx","stories":[{"id":"design-system-components-popover--default","name":"Default","snippet":"const Default = () => <Popover.Root>(<>\n <Popover.Trigger>Open Popover</Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Popover title\n </Popover.Title>\n <Popover.Description>\n Popover description\n </Popover.Description>\n </Popover.Popup>\n </>)</Popover.Root>;"},{"id":"design-system-components-popover--no-arrow","name":"No Arrow","snippet":"const NoArrow = () => <Popover.Root>(<>\n <Popover.Trigger>Open Popover</Popover.Trigger>\n <Popover.Popup>\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Popover title\n </Popover.Title>\n <Popover.Description>\n Popover description\n </Popover.Description>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"A popover without the arrow sub-component. Omit `Popover.Arrow` from the popup content when an arrow indicator is not desired."},{"id":"design-system-components-popover--positioning","name":"Positioning","snippet":"const Positioning = function Render() {\n const sides = [ 'top', 'right', 'bottom', 'left' ] as const;\n const aligns = [ 'start', 'center', 'end' ] as const;\n\n return (\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: '6rem',\n padding: '6rem 4rem',\n justifyItems: 'center',\n } }\n >\n { sides.flatMap( ( side ) =>\n aligns.map( ( align ) => (\n <Popover.Root key={ `${ side }-${ align }` } open>\n <Popover.Trigger>\n { side } / { align }\n </Popover.Trigger>\n <Popover.Popup\n side={ side }\n align={ align }\n collisionAvoidance={ {\n side: 'none',\n align: 'none',\n } }\n >\n <VisuallyHidden render={ <Popover.Title /> }>\n { side } / { align }\n </VisuallyHidden>\n <Popover.Arrow />\n <Popover.Description>\n { side } side / { align } align\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n ) )\n ) }\n </div>\n );\n};","description":"All combinations of `side` and `align` props on `Popover.Popup`. Each row shows a side (`top`, `right`, `bottom`, `left`), and each column shows an alignment (`start`, `center`, `end`)."},{"id":"design-system-components-popover--with-close-button","name":"With Close Button","snippet":"const WithCloseButton = () => <Popover.Root>(<>\n <Popover.Trigger>Settings</Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <div\n style={ {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: 'var(--wpds-dimension-gap-sm)',\n } }\n >\n <Popover.Title>Settings</Popover.Title>\n <Popover.Close\n render={\n <IconButton\n variant=\"minimal\"\n size=\"compact\"\n tone=\"neutral\"\n icon={ close }\n label=\"Close\"\n />\n }\n />\n </div>\n <Popover.Description>\n Configure your notification preferences and display\n settings.\n </Popover.Description>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"A popover with a close icon button, title, and description. The `Popover.Close` component renders a button that closes the popover when clicked. Here it wraps an `IconButton` for a properly sized, accessible close action — matching the Dialog close-icon pattern."},{"id":"design-system-components-popover--controlled","name":"Controlled","snippet":"const Controlled = () => {\n const [ isOpen, setIsOpen ] = useState( false );\n const checkboxId = useId();\n const checkboxRef = useRef< HTMLInputElement >( null );\n const labelRef = useRef< HTMLLabelElement >( null );\n\n return (\n <div\n style={ {\n display: 'flex',\n gap: '1rem',\n alignItems: 'center',\n } }>\n <Popover.Root\n open={ isOpen }\n onOpenChange={ ( nextOpen, eventDetails ) => {\n if (\n [ 'outside-press', 'focus-out' ].includes(\n eventDetails.reason\n ) &&\n !! eventDetails.event.target &&\n (\n [\n checkboxRef.current,\n labelRef.current,\n ].filter( Boolean ) as EventTarget[]\n ).includes( eventDetails.event.target )\n ) {\n return;\n }\n\n setIsOpen( nextOpen );\n } }><>\n <Popover.Trigger>Toggle Popover</Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }>Controlled Popover\n </Popover.Title>\n <Popover.Description>This popover is controlled by external state.\n </Popover.Description>\n </Popover.Popup>\n </></Popover.Root>\n <label htmlFor={ checkboxId } ref={ labelRef }>\n <input\n ref={ checkboxRef }\n id={ checkboxId }\n type=\"checkbox\"\n checked={ isOpen }\n onChange={ ( e ) => setIsOpen( e.target.checked ) } />Open\n </label>\n </div>\n );\n};","description":"Use the `open` and `onOpenChange` props on `Popover.Root` to control the popover's visibility programmatically. The checkbox drives the popover state externally. The popover's trigger and click-outside dismiss both sync back to the same state via `onOpenChange`, keeping everything in sync."},{"id":"design-system-components-popover--modal","name":"Modal","snippet":"const Modal = () => <Popover.Root modal>(<>\n <Popover.Trigger>Edit Settings</Popover.Trigger>\n <Popover.Popup backdrop>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Settings\n </Popover.Title>\n <form\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-sm)',\n marginTop: 'var(--wpds-dimension-gap-sm)',\n } }\n onSubmit={ ( e ) => e.preventDefault() }\n >\n <label\n htmlFor=\"popover-test-name-id\"\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-xs)',\n fontSize: 'inherit',\n } }\n >\n Name\n <input\n // eslint-disable-next-line no-restricted-syntax\n id=\"popover-test-name-id\"\n type=\"text\"\n placeholder=\"Enter your name\"\n />\n </label>\n <label\n htmlFor=\"popover-test-email-id\"\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-xs)',\n fontSize: 'inherit',\n } }\n >\n Email\n <input\n // eslint-disable-next-line no-restricted-syntax\n id=\"popover-test-email-id\"\n type=\"email\"\n placeholder=\"Enter your email\"\n />\n </label>\n <div\n style={ {\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 'var(--wpds-dimension-gap-sm)',\n marginTop: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n <Popover.Close\n style={ {\n all: 'unset',\n cursor: 'pointer',\n } }\n >\n Cancel\n </Popover.Close>\n <button type=\"submit\">Save</button>\n </div>\n </form>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"Set `modal` to `true` to trap focus inside the popover when it is open. This is useful for complex popover content that requires user interaction, such as forms. Try tabbing through the fields — focus stays inside the popover until it is dismissed. **Note:** focus trapping requires a `Popover.Close` part inside the popup so that screen readers always have an escape route. It can be visually hidden if needed. Pass `backdrop` to `Popover.Popup` to display a semi-transparent overlay beneath the popover, signalling that the page is blocked."},{"id":"design-system-components-popover--unstyled","name":"Unstyled","snippet":"const Unstyled = () => <Popover.Root>(<>\n <Popover.Trigger>Open Unstyled</Popover.Trigger>\n <Popover.Popup variant=\"unstyled\">\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Custom Styled\n </Popover.Title>\n <Popover.Description>\n This popup has no default styling — the consumer\n controls all visual appearance.\n </Popover.Description>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"The `variant=\"unstyled\"` option strips all visual styling from the popup, making it a blank positioning container for fully custom content."},{"id":"design-system-components-popover--overlay-placement","name":"Overlay Placement","snippet":"const OverlayPlacement = () => {\n const [ popupRef, popupSize ] = useMeasure< HTMLDivElement >();\n const [ triggerRef, triggerSize ] = useMeasure< HTMLButtonElement >();\n\n return (\n <div style={ { padding: '4rem', textAlign: 'center' } }>\n <Popover.Root defaultOpen>\n <Popover.Trigger ref={ triggerRef }>Trigger (covered by popover)\n </Popover.Trigger>\n <Popover.Popup\n ref={ popupRef }\n side=\"bottom\"\n align=\"center\"\n sideOffset={\n -1 *\n ( popupSize.height / 2 + triggerSize.height / 2 )\n }\n collisionAvoidance={ {\n side: 'none',\n align: 'none',\n } }>\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }>Overlay\n </Popover.Title>\n <Popover.Description>This popover is centered over its trigger using a\n negative sideOffset.\n <br />The trigger is currently hidden under the popover.\n <br />Try resizing the browser — collision avoidance is\n disabled so the popover stays overlaid.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n );\n};","description":"Overlay placement positions the popover centered on top of its trigger, effectively covering it. This is achieved by computing a negative `sideOffset` based on the measured sizes of the trigger and popup. This technique is useful when you want the popover to visually replace the trigger element in place."},{"id":"design-system-components-popover--inline","name":"Inline","snippet":"const Inline = function Render() {\n const inlineContainerRef = useRef< HTMLSpanElement >( null );\n\n return (\n <div data-testid=\"inline-wrapper\">\n <Popover.Root>\n <Popover.Trigger>Open Inline</Popover.Trigger>\n <span\n ref={ inlineContainerRef }\n style={ { display: 'contents' } }\n />\n <Popover.Popup container={ inlineContainerRef }>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Inline Popover\n </Popover.Title>\n <Popover.Description>\n This popup is rendered in place — no portal is used.\n Inspect the DOM to see it lives inside its parent.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n );\n};","description":"To render the popup inline (without a portal), create a local ref to a `<span>` with `display: contents` and pass it as the `container` prop. The popup will render inside the span rather than being portaled to `document.body`, while retaining all positioning behavior. **Note:** `backdrop` will not cover the full viewport in this mode."},{"id":"design-system-components-popover--collision-avoidance","name":"Collision Avoidance","snippet":"const CollisionAvoidance = function Render() {\n const [ boundary, setBoundary ] = useState< HTMLElement | null >(\n null\n );\n\n return (\n <div\n ref={ setBoundary }\n style={ {\n height: 300,\n overflow: 'auto',\n border: '1px solid #ccc',\n padding: '200px 2rem',\n } }\n >\n <div\n style={ {\n display: 'flex',\n gap: '2rem',\n justifyContent: 'center',\n } }\n >\n <Popover.Root defaultOpen>\n <Popover.Trigger>Flip (default)</Popover.Trigger>\n <Popover.Popup\n side=\"top\"\n collisionBoundary={ boundary ?? undefined }\n >\n <Popover.Title\n style={ {\n marginBottom:\n 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Flip\n </Popover.Title>\n <Popover.Description>\n Flips to bottom when clipped\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n\n <Popover.Root defaultOpen>\n <Popover.Trigger>No collision</Popover.Trigger>\n <Popover.Popup\n side=\"top\"\n collisionBoundary={ boundary ?? undefined }\n collisionAvoidance={ {\n side: 'none',\n align: 'none',\n } }\n >\n <Popover.Title\n style={ {\n marginBottom:\n 'var(--wpds-dimension-gap-xs)',\n } }\n >\n None\n </Popover.Title>\n <Popover.Description>\n Stays on top even when clipped\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n <div style={ { height: 600 } } />\n </div>\n );\n};","description":"Use the `collisionAvoidance` prop to control how the popover behaves when it collides with the edges of its collision boundary. Because the popup renders via a portal (outside the scrollable container), the container must be passed as `collisionBoundary` so Floating UI treats it as the clipping edge. - `side: 'flip'` flips to the opposite side (default). - `side: 'none'` disables collision handling. Scroll the container to see collision avoidance in action."},{"id":"design-system-components-popover--cross-iframe","name":"Cross Iframe","snippet":"const CrossIframe = () => {\n const portalContainerRef = useRef< HTMLDivElement >( null );\n const [ iframeBoundary, setIframeBoundary ] =\n useState< HTMLIFrameElement | null >( null );\n\n return (\n <div>\n <div ref={ portalContainerRef } />\n <GenericIframe\n ref={ setIframeBoundary }\n style={ {\n width: '100%',\n height: 400,\n border: 0,\n outline: '1px solid purple',\n } }>\n <div\n style={ {\n height: '200vh',\n paddingTop: '10vh',\n } }>\n <div\n style={ {\n maxWidth: 200,\n marginTop: 100,\n marginInline: 'auto',\n } }>\n <Popover.Root defaultOpen>\n <Popover.Trigger\n style={ {\n padding: 8,\n background: 'salmon',\n } }>Popover's anchor (inside iframe)\n </Popover.Trigger>\n <Popover.Popup\n container={\n portalContainerRef as React.RefObject< HTMLElement >\n }\n collisionBoundary={\n iframeBoundary ?? undefined\n }>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom:\n 'var(--wpds-dimension-gap-xs)',\n } }>Cross-Iframe Popover\n </Popover.Title>\n <Popover.Description>This popup is rendered in the parent\n document, not inside the iframe. Scroll\n the iframe to see the popover track the\n trigger.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n </div>\n </GenericIframe>\n </div>\n );\n};","description":"When the popover's trigger lives inside an iframe but the popover should render in the parent document, pass a parent-document element to the `container` prop on `Popover.Popup`. This technique is used in Gutenberg where the block editor canvas is an iframe but toolbars and menus must appear outside it. Scroll inside the iframe to verify that the popover tracks the trigger position across document boundaries."},{"id":"design-system-components-popover--cross-iframe-with-slot-fill","name":"Cross-Iframe (SlotFill)","snippet":"const CrossIframeWithSlotFill = () => {\n const slotRef = useRef< HTMLDivElement >( null );\n const [ iframeBoundary, setIframeBoundary ] =\n useState< HTMLIFrameElement | null >( null );\n\n return (\n <SlotFillProvider>\n <Slot name=\"popover-container\" bubblesVirtually ref={ slotRef } />\n <GenericIframe\n ref={ setIframeBoundary }\n style={ {\n width: '100%',\n height: 400,\n border: 0,\n outline: '1px solid purple',\n } }>\n <div\n style={ {\n height: '200vh',\n paddingTop: '10vh',\n } }>\n <div\n style={ {\n maxWidth: 200,\n marginTop: 100,\n marginInline: 'auto',\n } }>\n <Popover.Root defaultOpen>\n <Popover.Trigger\n style={ {\n padding: 8,\n background: 'salmon',\n } }>Popover's anchor (inside iframe)\n </Popover.Trigger>\n <Popover.Popup\n container={\n slotRef as React.RefObject< HTMLElement >\n }\n collisionBoundary={\n iframeBoundary ?? undefined\n }>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom:\n 'var(--wpds-dimension-gap-xs)',\n } }>Cross-Iframe (SlotFill)\n </Popover.Title>\n <Popover.Description>This popup renders in the parent\n document via a `Slot` from\n `@wordpress/components`.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n </div>\n </GenericIframe>\n </SlotFillProvider>\n );\n};","description":"Same cross-iframe scenario, but using `SlotFillProvider` and `Slot` from `@wordpress/components` as the render target. The `Slot` renders a `div` in the parent document, and its forwarded ref is passed to `Popover.Popup`'s `container` prop so the popup portals into the slot element. This mirrors the legacy Popover's `WithSlotOutsideIframe` pattern."},{"id":"design-system-components-popover--with-custom-z-index","name":"With Custom z-index","snippet":"const WithCustomZIndex = () => <Popover.Root>(<>\n <Popover.Trigger>Open Popover</Popover.Trigger>\n <Popover.Popup style={ { '--wp-ui-popover-z-index': '9999' } }>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Custom z-index\n </Popover.Title>\n <Popover.Description>\n This popover&apos;s positioner has z-index: 9999 via the\n `--wp-ui-popover-z-index` CSS custom property.\n </Popover.Description>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"Popovers in Gutenberg are managed with explicit z-index values, which can create situations where a popover renders below another popover, when you want it to be rendered above. The `--wp-ui-popover-z-index` CSS variable, available on the `Popover.Popup` component, is an escape hatch that can be used to override the z-index of a given popover on a case-by-case basis."},{"id":"design-system-components-popover--anchor","name":"Anchor","snippet":"const Anchor = function Render() {\n const [ elementAnchor, setElementAnchor ] =\n useState< HTMLElement | null >( null );\n const refAnchor = useRef< HTMLDivElement >( null );\n const virtualAnchorLabel = useRef< HTMLDivElement >( null );\n const callbackTarget = useRef< HTMLDivElement >( null );\n\n const virtualAnchor = {\n getBoundingClientRect: () =>\n virtualAnchorLabel.current?.getBoundingClientRect() ??\n new DOMRect(),\n };\n\n const anchorBoxStyle = {\n padding: '8px 12px',\n border: '2px dashed currentcolor',\n borderRadius: 4,\n fontSize: 12,\n textAlign: 'center' as const,\n };\n\n const popupProps = {\n collisionAvoidance: {\n side: 'none' as const,\n align: 'none' as const,\n },\n };\n\n return (\n <div\n style={ {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n gap: '4rem',\n padding: '4rem 2rem',\n } }\n >\n { /* 1. Element anchor */ }\n <div>\n <div ref={ setElementAnchor } style={ anchorBoxStyle }>\n Element anchor\n </div>\n <Popover.Root open>\n <Popover.Popup\n anchor={ elementAnchor ?? undefined }\n { ...popupProps }\n >\n <VisuallyHidden render={ <Popover.Title /> }>\n Element anchor\n </VisuallyHidden>\n <Popover.Arrow />\n <Popover.Description>\n Anchored to a DOM element\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n\n { /* 2. VirtualElement anchor */ }\n <div>\n <div ref={ virtualAnchorLabel } style={ anchorBoxStyle }>\n VirtualElement anchor\n </div>\n <Popover.Root open>\n <Popover.Popup\n anchor={ virtualAnchor }\n { ...popupProps }\n >\n <VisuallyHidden render={ <Popover.Title /> }>\n Virtual anchor\n </VisuallyHidden>\n <Popover.Arrow />\n <Popover.Description>\n Anchored to a virtual element\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n\n { /* 3. RefObject anchor */ }\n <div>\n <div ref={ refAnchor } style={ anchorBoxStyle }>\n RefObject anchor\n </div>\n <Popover.Root open>\n <Popover.Popup anchor={ refAnchor } { ...popupProps }>\n <VisuallyHidden render={ <Popover.Title /> }>\n Ref anchor\n </VisuallyHidden>\n <Popover.Arrow />\n <Popover.Description>\n Anchored via useRef\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n\n { /* 4. Callback anchor */ }\n <div>\n <div ref={ callbackTarget } style={ anchorBoxStyle }>\n Callback anchor\n </div>\n <Popover.Root open>\n <Popover.Popup\n anchor={ () => callbackTarget.current }\n { ...popupProps }\n >\n <VisuallyHidden render={ <Popover.Title /> }>\n Callback anchor\n </VisuallyHidden>\n <Popover.Arrow />\n <Popover.Description>\n Anchored via callback function\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n </div>\n );\n};","description":"Use the `anchor` prop on `Popover.Popup` to position the popover against an arbitrary element instead of the built-in trigger. Base UI accepts four anchor types: 1. **Element** — a direct DOM element reference. 2. **VirtualElement** — an object with a `getBoundingClientRect()` method. 3. **RefObject** — a `React.RefObject` pointing to an element. 4. **Callback** — a function returning an Element or VirtualElement. This is the most-used pattern in Gutenberg: block popovers anchor to selected block elements, the link popover anchors to the text selection, and data views anchor to right-click positions."},{"id":"design-system-components-popover--toolbar-variant","name":"Toolbar Variant","snippet":"const ToolbarVariant = () => <Popover.Root>(<>\n <Popover.Trigger>Open Toolbar</Popover.Trigger>\n <Popover.Popup\n variant=\"unstyled\"\n style={ {\n display: 'flex',\n gap: 'var(--wpds-dimension-gap-xs)',\n padding: '4px 8px',\n border: '1px solid #1e1e1e',\n borderRadius: 2,\n background: '#fff',\n fontSize: 13,\n } }\n >\n <VisuallyHidden render={ <Popover.Title /> }>\n Formatting\n </VisuallyHidden>\n <button type=\"button\">B</button>\n <button type=\"button\">I</button>\n <button type=\"button\">U</button>\n <button type=\"button\">Link</button>\n </Popover.Popup>\n </>)</Popover.Root>;","description":"Use `variant=\"unstyled\"` and custom inline styles to replicate a toolbar-like appearance: high-contrast border, no shadow, and a smaller border radius. A first-class `variant=\"toolbar\"` may be added in the future if this pattern becomes widespread."},{"id":"design-system-components-popover--viewport-constrained-size","name":"Viewport-Constrained Size","snippet":"const ViewportConstrainedSize = () => {\n return (\n <div\n style={ {\n height: 250,\n overflow: 'auto',\n border: '1px solid #ccc',\n padding: '60px 2rem',\n } }>\n <Popover.Root defaultOpen>\n <Popover.Trigger>Show Content</Popover.Trigger>\n <Popover.Popup\n side=\"bottom\"\n style={ {\n maxHeight: 'var(--available-height, 300px)',\n maxWidth: 'var(--available-width, 300px)',\n } }>\n <div style={ { overflow: 'auto', height: '100%' } }>\n <Popover.Title\n style={ {\n marginBottom:\n 'var(--wpds-dimension-gap-xs)',\n } }>Constrained\n </Popover.Title>\n <Popover.Description>This popup constrains its size using the\n `--available-height` and `--available-width` CSS\n variables exposed by the positioner.\n </Popover.Description>\n <div style={ { height: 400 } }>\n <p>Scroll inside this popup — its max-height is\n capped to the available viewport space.\n </p>\n </div>\n </div>\n </Popover.Popup>\n </Popover.Root>\n <div style={ { height: 600 } } />\n </div>\n );\n};","description":"Base UI's Positioner exposes `--available-height` and `--available-width` CSS variables representing the space between the anchor and the viewport edge. Apply them as `max-height` / `max-width` via the `style` prop (which targets the positioner) to constrain the popup size. Then add `overflow: auto` on an inner wrapper so scrolling happens inside the popup content area — this replaces the legacy Popover's `resize` prop. Open the popover and resize or scroll the container to see the popup shrink to fit."},{"id":"design-system-components-popover--on-open-change-details","name":"onOpenChange Details","snippet":"const OnOpenChangeDetails = function Render() {\n const [ log, setLog ] = useState< string[] >( [] );\n\n return (\n <div style={ { display: 'flex', gap: '2rem' } }>\n <Popover.Root\n onOpenChange={ ( nextOpen, eventDetails ) => {\n setLog( ( prev ) => [\n ...prev.slice( -9 ),\n `open=${ nextOpen } reason=${ eventDetails.reason }`,\n ] );\n } }\n >\n <Popover.Trigger>Toggle</Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Event Log\n </Popover.Title>\n <Popover.Description>\n Dismiss this popover via Escape, click-outside, or\n moving focus away.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n\n <pre\n style={ {\n flex: 1,\n padding: 8,\n fontSize: 12,\n lineHeight: 1.5,\n background: '#f5f5f5',\n borderRadius: 4,\n minHeight: 100,\n margin: 0,\n } }\n >\n { log.length\n ? log.join( '\\n' )\n : 'Interact with the popover to see events…' }\n </pre>\n </div>\n );\n};","description":"The `onOpenChange` callback on `Popover.Root` receives an `eventDetails` object with a `reason` field that describes why the popover is opening/closing. This replaces the legacy Popover's separate `onClose` and `onFocusOutside` callbacks: - `reason === 'escape-key'` — user pressed Escape (was `onClose`) - `reason === 'outside-press'` — user clicked outside (was `onClose`) - `reason === 'focus-out'` — focus moved outside (was `onFocusOutside`) Open the popover, then dismiss it in different ways to see the logged reason."},{"id":"design-system-components-popover--initial-focus","name":"Initial Focus","snippet":"const InitialFocus = function Render() {\n const emailRef = useRef< HTMLInputElement >( null );\n const nameId = useId();\n const emailId = useId();\n\n return (\n <Popover.Root>\n <Popover.Trigger>Open Form</Popover.Trigger>\n <Popover.Popup initialFocus={ emailRef }>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }\n >\n Contact\n </Popover.Title>\n <form\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-sm)',\n } }\n onSubmit={ ( e ) => e.preventDefault() }\n >\n <label\n htmlFor={ nameId }\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-xs)',\n fontSize: 'inherit',\n } }\n >\n Name\n </label>\n <input\n id={ nameId }\n type=\"text\"\n placeholder=\"Enter name\"\n />\n <label\n htmlFor={ emailId }\n style={ {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--wpds-dimension-gap-xs)',\n fontSize: 'inherit',\n } }\n >\n Email (auto-focused)\n </label>\n <input\n id={ emailId }\n ref={ emailRef }\n type=\"email\"\n placeholder=\"Enter email\"\n />\n </form>\n </Popover.Popup>\n </Popover.Root>\n );\n};","description":"Pass a ref to `initialFocus` on `Popover.Popup` to focus a specific element when the popover opens. This replaces the legacy Popover's `focusOnMount` prop. In this example, the Email field receives focus instead of the first focusable element (Name)."},{"id":"design-system-components-popover--trap-focus","name":"Trap Focus","snippet":"const TrapFocus = () => {\n return (\n <div style={ { display: 'flex', gap: '2rem' } }>\n <Popover.Root modal={'trap-focus' as const}>\n <Popover.Trigger>Open</Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }>Trap Focus\n </Popover.Title>\n <Popover.Description>Tab cycles within this popover, but clicking outside\n still works.\n </Popover.Description>\n <div\n style={ {\n display: 'flex',\n gap: 'var(--wpds-dimension-gap-sm)',\n marginTop: 'var(--wpds-dimension-gap-sm)',\n } }>\n <input placeholder=\"Field A\" />\n <input placeholder=\"Field B\" />\n <Popover.Close>Close</Popover.Close>\n </div>\n </Popover.Popup>\n </Popover.Root>\n <button\n type=\"button\"\n onClick={ () =>\n // eslint-disable-next-line no-alert\n window.alert( 'Outside button clicked!' )\n }>Outside button\n </button>\n </div>\n );\n};","description":"Set `modal=\"trap-focus\"` on `Popover.Root` to trap keyboard focus inside the popover without making it fully modal. Unlike `modal={true}`, this mode: - Traps Tab/Shift+Tab cycling within the popover - Does **not** lock page scroll - Does **not** block pointer interaction outside A `Popover.Close` part must be rendered inside the popup so that screen readers can escape. It can be visually hidden if not needed visually. This replaces the legacy Popover's `constrainTabbing` prop. Try tabbing through the fields — focus stays inside — then click the button outside to verify that pointer interaction still works."},{"id":"design-system-components-popover--hover-trigger","name":"Hover Trigger","snippet":"const HoverTrigger = () => {\n return (\n <Popover.Root>\n <Popover.Trigger openOnHover delay={ 200 } closeDelay={ 150 }>Hover me\n </Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <Popover.Title\n style={ {\n marginBottom: 'var(--wpds-dimension-gap-xs)',\n } }>Hover Popover\n </Popover.Title>\n <Popover.Description>This popover opens on hover with a 200ms delay and\n closes 150ms after the pointer leaves.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n );\n};","description":"Set `openOnHover` on `Popover.Trigger` to open the popover when the trigger is hovered. The `delay` and `closeDelay` props control the timing (in ms). This is a capability the legacy Popover does not have natively — consumers would need to wire up `mouseenter`/`mouseleave` handlers manually."},{"id":"design-system-components-popover--infotip","name":"Infotip","snippet":"const Infotip = () => {\n return (\n <div\n style={ {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--wpds-dimension-gap-xs)',\n } }>\n <span>Label</span>\n <Popover.Root>\n <Popover.Trigger\n openOnHover\n delay={ 200 }\n closeDelay={ 200 }\n aria-label=\"More information\"\n style={ {\n background: 'none',\n border: 'none',\n padding: 0,\n cursor: 'var(--wpds-cursor-control)',\n display: 'inline-flex',\n alignItems: 'center',\n borderRadius: 'var(--wpds-border-radius-sm)',\n } }>\n <Icon icon={ info } size={ 20 } />\n </Popover.Trigger>\n <Popover.Popup>\n <Popover.Arrow />\n <VisuallyHidden render={ <Popover.Title /> }>More information\n </VisuallyHidden>\n <Popover.Description>This is additional context about the label. Unlike\n tooltips, this content is accessible to touch and\n screen reader users.\n </Popover.Description>\n </Popover.Popup>\n </Popover.Root>\n </div>\n );\n};","description":"Popups that open when hovering an info icon should use Popover with the `openOnHover` prop on the trigger instead of a tooltip. This way, touch users and screen reader users can access the content. To know when to reach for a popover instead of a tooltip, consider the purpose of the trigger element: If the trigger's purpose is to open the popup itself, it's a popover. If the trigger's purpose is unrelated to opening the popup, it's a tooltip."}],"import":"import { GenericIframe, Icon, IconButton, Popover, VisuallyHidden } from \"@wordpress/ui\";\nimport { Slot, SlotFillProvider } from \"@wordpress/components\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-stack":{"id":"design-system-components-stack","name":"Stack","path":"../packages/ui/src/stack/stories/index.story.tsx","stories":[{"id":"design-system-components-stack--default","name":"Default","snippet":"const Default = () => <Stack gap=\"md\">(<>\n <DemoBox />\n <DemoBox variant=\"lg\" />\n <DemoBox />\n <DemoBox />\n <DemoBox variant=\"lg\" />\n <DemoBox />\n </>)</Stack>;"},{"id":"design-system-components-stack--nested","name":"Nested","snippet":"const Nested = () => <Stack align=\"center\" justify=\"center\">(<>\n <DemoBox variant=\"lg\" />\n <Stack gap=\"lg\">\n <DemoBox />\n <DemoBox />\n </Stack>\n <DemoBox variant=\"lg\" />\n <Stack direction=\"column\">\n <DemoBox />\n <DemoBox />\n </Stack>\n <DemoBox variant=\"lg\" />\n </>)</Stack>;"}],"import":"import { Stack } from \"@wordpress/ui\";","jsDocTags":{},"description":"A flexible layout component using CSS Flexbox for consistent spacing and alignment. Built on design tokens for predictable spacing values.","reactDocgen":{"description":"A flexible layout component using CSS Flexbox for consistent spacing and alignment.\nBuilt on design tokens for predictable spacing values.","methods":[],"displayName":"Stack","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/stack/stack.tsx","actualName":"Stack","exportName":"Stack","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"direction":{"required":false,"tsType":{"name":"Exclude","elements":[{"name":"ReactCSSProperties['flexDirection']","raw":"React.CSSProperties[ 'flexDirection' ]"},{"name":"union","raw":"'row-reverse' | 'column-reverse'","elements":[{"name":"literal","value":"'row-reverse'"},{"name":"literal","value":"'column-reverse'"}]}],"raw":"Exclude<\n\tReact.CSSProperties[ 'flexDirection' ],\n\t'row-reverse' | 'column-reverse'\n>"},"description":"The direction of the stack."},"gap":{"required":false,"tsType":{"name":"GapSize"},"description":"The amount of space between each child element using design system tokens.\n\n@default undefined"},"align":{"required":false,"tsType":{"name":"ReactCSSProperties['alignItems']","raw":"React.CSSProperties[ 'alignItems' ]"},"description":"The alignment of the stack items along the cross axis.\n\n@default 'initial'"},"justify":{"required":false,"tsType":{"name":"ReactCSSProperties['justifyContent']","raw":"React.CSSProperties[ 'justifyContent' ]"},"description":"The alignment of the stack items along the main axis.\n\n@default 'initial'"},"wrap":{"required":false,"tsType":{"name":"Exclude","elements":[{"name":"ReactCSSProperties['flexWrap']","raw":"React.CSSProperties[ 'flexWrap' ]"},{"name":"literal","value":"'wrap-reverse'"}],"raw":"Exclude< React.CSSProperties[ 'flexWrap' ], 'wrap-reverse' >"},"description":"Whether the stack items should wrap to the next line."},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The content to be rendered inside the component."}}}},"design-system-components-tabs":{"id":"design-system-components-tabs","name":"Tabs.Root","path":"../packages/ui/src/tabs/stories/index.story.tsx","stories":[{"id":"design-system-components-tabs--default","name":"Default","snippet":"const Default = () => <Tabs.Root defaultValue=\"tab1\">(<>\n <Tabs.List>\n <Tabs.Tab value=\"tab1\">Tab 1</Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Tab 2</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">Tab 3</Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"tab1\">\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\">\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\">\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n </Tabs.Panel>\n </>)</Tabs.Root>;"},{"id":"design-system-components-tabs--minimal","name":"Minimal","snippet":"const Minimal = () => <Tabs.Root>(<>\n <Tabs.List variant=\"minimal\">\n <Tabs.Tab value=\"tab1\">Tab 1</Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Tab 2</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">Tab 3</Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"tab1\">\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\">\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\">\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n </Tabs.Panel>\n </>)</Tabs.Root>;"},{"id":"design-system-components-tabs--size-and-overflow-playground","name":"Size And Overflow Playground","snippet":"const SizeAndOverflowPlayground = function SizeAndOverflowPlayground( props ) {\n const [ fullWidth, setFullWidth ] = useState( false );\n return (\n <div>\n <div\n style={ {\n maxWidth: '40rem',\n marginBottom: '1rem',\n color: 'var( --wpds-color-fg-content-neutral )',\n } }\n >\n <p>\n This story helps understand how the TabList component\n behaves under different conditions. The container below\n (with the dotted red border) can be horizontally\n resized, and it has a bit of padding to be out of the\n way of the TabList.\n </p>\n <p>\n The button will toggle between full width (adding{ ' ' }\n <code>width: 100%</code>) and the default width.\n </p>\n <p>Try the following:</p>\n <ul>\n <li>\n <strong>Small container</strong> that causes tabs to\n overflow with scroll.\n </li>\n <li>\n <strong>Large container</strong> that exceeds the\n normal width of the tabs.\n <ul>\n <li>\n <strong>\n With <code>width: 100%</code>\n </strong>{ ' ' }\n set on the TabList (tabs fill up the space).\n </li>\n <li>\n <strong>\n Without <code>width: 100%</code>\n </strong>{ ' ' }\n (defaults to <code>auto</code>) set on the\n TabList (tabs take up space proportional to\n their content).\n </li>\n </ul>\n </li>\n </ul>\n </div>\n <button\n style={ { marginBottom: '1rem' } }\n onClick={ () => setFullWidth( ! fullWidth ) }\n >\n { fullWidth\n ? 'Remove width: 100% from TabList'\n : 'Set width: 100% in TabList' }\n </button>\n <Tabs.Root\n { ...props }\n style={ {\n ...props.style,\n width: '20rem',\n border: '2px dotted red',\n padding: '1rem',\n resize: 'horizontal',\n overflow: 'auto',\n } }\n >\n <Tabs.List\n style={ {\n maxWidth: '100%',\n width: fullWidth ? '100%' : undefined,\n } }\n >\n <Tabs.Tab value=\"tab1\">\n Label with multiple words\n </Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Short</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">\n Hippopotomonstrosesquippedaliophobia\n </Tabs.Tab>\n <Tabs.Tab value=\"tab4\">Tab 4</Tabs.Tab>\n <Tabs.Tab value=\"tab5\">Tab 5</Tabs.Tab>\n </Tabs.List>\n\n <Tabs.Panel value=\"tab1\">\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n <ThemedParagraph>\n (Label with multiple words)\n </ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\">\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n <ThemedParagraph>(Short)</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\">\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n <ThemedParagraph>\n (Hippopotomonstrosesquippedaliophobia)\n </ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab4\">\n <ThemedParagraph>Selected tab: Tab 4</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab5\">\n <ThemedParagraph>Selected tab: Tab 5</ThemedParagraph>\n </Tabs.Panel>\n </Tabs.Root>\n </div>\n );\n};"},{"id":"design-system-components-tabs--vertical","name":"Vertical","snippet":"const Vertical = () => <Tabs.Root\n orientation=\"vertical\"\n style={{\n minWidth: '320px',\n display: 'grid',\n gridTemplateColumns: '120px 1fr',\n gap: '24px',\n }} />;"},{"id":"design-system-components-tabs--with-disabled-tab","name":"With Disabled Tab","snippet":"const WithDisabledTab = () => <Tabs.Root defaultValue=\"tab3\">(<>\n <Tabs.List>\n <Tabs.Tab value=\"tab1\" disabled>\n Tab 1\n </Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Tab 2</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">Tab 3</Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"tab1\">\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\">\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\">\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n </Tabs.Panel>\n </>)</Tabs.Root>;"},{"id":"design-system-components-tabs--with-tab-icons-and-tooltips","name":"With Tab Icons And Tooltips","snippet":"const WithTabIconsAndTooltips = () => <Tabs.Root>(<>\n <Tabs.List>\n { tabWithIconsData.map(\n ( { value, label, icon: Icon } ) => (\n <Tooltip.Root key={ value }>\n <Tooltip.Trigger\n aria-label={ label }\n render={ <Tabs.Tab value={ value } /> }\n >\n { /* TODO: potentially refactor with new Icon component */ }\n <Icon\n style={ {\n width: '20px',\n height: '20px',\n } }\n />\n </Tooltip.Trigger>\n <Tooltip.Popup align=\"center\" side=\"top\">\n { label }\n </Tooltip.Popup>\n </Tooltip.Root>\n )\n ) }\n </Tabs.List>\n { tabWithIconsData.map( ( { value, label } ) => (\n <Tabs.Panel value={ value } key={ value }>\n <ThemedParagraph>\n Selected tab: { label }\n </ThemedParagraph>\n </Tabs.Panel>\n ) ) }\n </>)</Tabs.Root>;"},{"id":"design-system-components-tabs--with-panels-always-mounted","name":"With Panels Always Mounted","snippet":"const WithPanelsAlwaysMounted = () => <Tabs.Root>(<>\n <Tabs.List>\n <Tabs.Tab value=\"tab1\">Tab 1</Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Tab 2</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">Tab 3</Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"tab1\" keepMounted>\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\" keepMounted>\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\" keepMounted>\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n </Tabs.Panel>\n </>)</Tabs.Root>;"},{"id":"design-system-components-tabs--with-non-focusable-panels","name":"With Non Focusable Panels","snippet":"const WithNonFocusablePanels = () => <Tabs.Root>(<>\n <Tabs.List>\n <Tabs.Tab value=\"tab1\">Tab 1</Tabs.Tab>\n <Tabs.Tab value=\"tab2\">Tab 2</Tabs.Tab>\n <Tabs.Tab value=\"tab3\">Tab 3</Tabs.Tab>\n </Tabs.List>\n <Tabs.Panel value=\"tab1\" tabIndex={ -1 }>\n <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>\n <ThemedParagraph>\n This tabpanel is not focusable, therefore tabbing into\n it will focus its first tabbable child.\n </ThemedParagraph>\n <button>Focus me</button>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab2\" tabIndex={ -1 }>\n <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>\n <ThemedParagraph>\n This tabpanel is not focusable, therefore tabbing into\n it will focus its first tabbable child.\n </ThemedParagraph>\n <button>Focus me</button>\n </Tabs.Panel>\n <Tabs.Panel value=\"tab3\" tabIndex={ -1 }>\n <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>\n <ThemedParagraph>\n This tabpanel is not focusable, therefore tabbing into\n it will focus its first tabbable child.\n </ThemedParagraph>\n <button>Focus me</button>\n </Tabs.Panel>\n </>)</Tabs.Root>;"}],"import":"import { Tabs, Tooltip } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-text":{"id":"design-system-components-text","name":"Text","path":"../packages/ui/src/text/stories/index.story.tsx","stories":[{"id":"design-system-components-text--default","name":"Default","snippet":"const Default = () => <Text variant=\"body-md\">The quick brown fox jumps over the lazy dog.</Text>;"},{"id":"design-system-components-text--all-variants","name":"All Variants","snippet":"const AllVariants = () => (\n <Stack\n direction=\"column\"\n gap=\"lg\"\n style={ { color: 'var(--wpds-color-fg-content-neutral)' } }\n >\n { (\n [\n 'heading-2xl',\n 'heading-xl',\n 'heading-lg',\n 'heading-md',\n 'heading-sm',\n 'body-xl',\n 'body-lg',\n 'body-md',\n 'body-sm',\n ] as const\n ).map( ( variant ) => (\n <Stack key={ variant } direction=\"column\" gap=\"xs\">\n <Text variant=\"heading-sm\">{ variant }</Text>\n <Text variant={ variant }>\n The quick brown fox jumps over the lazy dog.\n </Text>\n </Stack>\n ) ) }\n </Stack>\n);","description":"Important: Setting the `variant` prop to a `heading` variant will not automatically render a heading element. Use the `render` prop to render a heading element with the appropriate level."},{"id":"design-system-components-text--with-render-prop","name":"With Render Prop","snippet":"const WithRenderProp = () => (\n <Stack direction=\"column\" gap=\"md\">\n <Text variant=\"heading-2xl\" render={ <h1 /> }>\n Page Title\n </Text>\n <Text variant=\"heading-xl\" render={ <h2 /> }>\n Section Heading\n </Text>\n <Text variant=\"body-md\" render={ <p /> }>\n A paragraph of body text rendered as a semantic paragraph\n element.\n </Text>\n </Stack>\n);"}],"import":"import { Stack, Text } from \"@wordpress/ui\";","jsDocTags":{},"description":"A text component for rendering content with predefined typographic variants. Built on design tokens for consistent typography across the UI.","reactDocgen":{"description":"A text component for rendering content with predefined typographic variants.\nBuilt on design tokens for consistent typography across the UI.","methods":[],"displayName":"Text","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/text/text.tsx","actualName":"Text","exportName":"Text","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"variant":{"required":false,"tsType":{"name":"union","raw":"| 'heading-2xl'\n| 'heading-xl'\n| 'heading-lg'\n| 'heading-md'\n| 'heading-sm'\n| 'body-xl'\n| 'body-lg'\n| 'body-md'\n| 'body-sm'","elements":[{"name":"literal","value":"'heading-2xl'"},{"name":"literal","value":"'heading-xl'"},{"name":"literal","value":"'heading-lg'"},{"name":"literal","value":"'heading-md'"},{"name":"literal","value":"'heading-sm'"},{"name":"literal","value":"'body-xl'"},{"name":"literal","value":"'body-lg'"},{"name":"literal","value":"'body-md'"},{"name":"literal","value":"'body-sm'"}]},"description":"The typographic variant to apply, controlling font family, size,\nline height, and weight.\n\n@default \"body-md\"","defaultValue":{"value":"'body-md'","computed":false}},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The content to be rendered inside the component."}}}},"design-system-components-tooltip":{"id":"design-system-components-tooltip","name":"Tooltip.Root","path":"../packages/ui/src/tooltip/stories/index.story.tsx","stories":[{"id":"design-system-components-tooltip--default","name":"Default","snippet":"const Default = () => <Tooltip.Root>(<>\n <Tooltip.Trigger aria-label=\"Save\">💾</Tooltip.Trigger>\n <Tooltip.Popup>Save</Tooltip.Popup>\n </>)</Tooltip.Root>;"},{"id":"design-system-components-tooltip--disabled","name":"Disabled","snippet":"const Disabled = () => <Tooltip.Root disabled />;","description":"The `disabled` prop prevents the tooltip from showing, and can be used to show the tooltip conditionally without rendering the underlying react component conditionally (which could cause reconciliation issues)."},{"id":"design-system-components-tooltip--positioning","name":"Positioning","snippet":"const Positioning = () => (\n <div\n style={ {\n display: 'flex',\n gap: '2rem',\n padding: '4rem',\n justifyContent: 'center',\n } }\n >\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Up\">⬆️</Tooltip.Trigger>\n <Tooltip.Popup side=\"top\">Up</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Forward\">➡️</Tooltip.Trigger>\n <Tooltip.Popup side=\"right\">Forward</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Down\">⬇️</Tooltip.Trigger>\n <Tooltip.Popup side=\"bottom\">Down</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Back\">⬅️</Tooltip.Trigger>\n <Tooltip.Popup side=\"left\">Back</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n);","description":"Use the `side` prop to control where the tooltip appears relative to the trigger element."},{"id":"design-system-components-tooltip--with-provider","name":"With Provider","snippet":"const WithProvider = () => (\n <Tooltip.Provider delay={ 0 }>\n <div style={ { display: 'flex', gap: '1rem' } }>\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Bold\">\n <Icon icon={ formatBold } />\n </Tooltip.Trigger>\n <Tooltip.Popup>Bold</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root>\n <Tooltip.Trigger aria-label=\"Italic\">\n <Icon icon={ formatItalic } />\n </Tooltip.Trigger>\n <Tooltip.Popup>Italic</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n);","description":"Use `Tooltip.Provider` to control the delay before tooltips appear. This is useful when you have multiple tooltips and want them to share the same delay configuration."}],"import":"import { Icon, Tooltip } from \"@wordpress/ui\";","jsDocTags":{},"description":"A badge component for displaying labels with semantic intent.","reactDocgen":{"description":"A badge component for displaying labels with semantic intent.","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":true,"tsType":{"name":"string"},"description":"The text to display in the badge."},"intent":{"required":false,"tsType":{"name":"union","raw":"| 'high'\n| 'medium'\n| 'low'\n| 'stable'\n| 'informational'\n| 'draft'\n| 'none'","elements":[{"name":"literal","value":"'high'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'low'"},{"name":"literal","value":"'stable'"},{"name":"literal","value":"'informational'"},{"name":"literal","value":"'draft'"},{"name":"literal","value":"'none'"}]},"description":"The semantic intent of the badge, communicating its meaning through color.\n\n@default \"none\"","defaultValue":{"value":"'none'","computed":false}}}}},"design-system-components-visuallyhidden":{"id":"design-system-components-visuallyhidden","name":"VisuallyHidden","path":"../packages/ui/src/visually-hidden/stories/index.story.tsx","stories":[{"id":"design-system-components-visuallyhidden--default","name":"Default","snippet":"const Default = () => (\n <>\n <VisuallyHidden>This should not show.</VisuallyHidden>\n <div>\n This text will <VisuallyHidden>but not inline </VisuallyHidden>\n always show.\n </div>\n </>\n);"},{"id":"design-system-components-visuallyhidden--with-custom-element","name":"With Custom Element","snippet":"const WithCustomElement = function WithCustomElementStory() {\n const inputId = useId();\n return (\n <>\n { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }\n <VisuallyHidden render={ <label htmlFor={ inputId } /> }>\n Accessible label\n </VisuallyHidden>\n <input\n id={ inputId }\n placeholder=\"This input has a visually hidden label\"\n />\n </>\n );\n};","description":"Use the `render` prop to change the underlying HTML element. By default, `VisuallyHidden` renders a `<div>`. Here it renders a `<label>` instead, keeping the native label–input association while hiding the label text visually."}],"import":"import { VisuallyHidden } from \"@wordpress/ui\";","jsDocTags":{},"description":"Visually hides content while keeping it accessible to screen readers. Useful when providing context that's only meaningful to assistive technology. Renders a `<div>` by default. Use the `render` prop to swap the underlying element while preserving the visually-hidden behavior. ## Composing with other components When composing with another component that uses the `render` prop pattern, there are two directions — and they produce different results. Most of the time you'll want `VisuallyHidden` as the **host** (outer component) and pass the other component via `render`. This keeps the other component's HTML element and semantics intact, while `VisuallyHidden` only adds its hiding styles: ```jsx // OtherComponent keeps its semantic element (e.g. <h2>). <VisuallyHidden render={ <OtherComponent /> }> Accessible text </VisuallyHidden> ``` The opposite direction is also possible, but be aware that it replaces the other component's element with VisuallyHidden's default `<div>`: ```jsx // OtherComponent's element becomes a <div>. <OtherComponent render={ <VisuallyHidden /> }> Accessible text </OtherComponent> ``` Choose based on what you need: if the other component's semantic element matters (e.g. `<label>`, `<legend>`, `<h2>`), keep `VisuallyHidden` as the host so the element is preserved.","reactDocgen":{"description":"Visually hides content while keeping it accessible to screen readers.\nUseful when providing context that's only meaningful to assistive technology.\n\nRenders a `<div>` by default. Use the `render` prop to swap the\nunderlying element while preserving the visually-hidden behavior.\n\n## Composing with other components\n\nWhen composing with another component that uses the `render` prop\npattern, there are two directions — and they produce different results.\n\nMost of the time you'll want `VisuallyHidden` as the **host** (outer\ncomponent) and pass the other component via `render`. This keeps the\nother component's HTML element and semantics intact, while\n`VisuallyHidden` only adds its hiding styles:\n\n```jsx\n// OtherComponent keeps its semantic element (e.g. <h2>).\n<VisuallyHidden render={ <OtherComponent /> }>\n Accessible text\n</VisuallyHidden>\n```\n\nThe opposite direction is also possible, but be aware that it replaces\nthe other component's element with VisuallyHidden's default `<div>`:\n\n```jsx\n// OtherComponent's element becomes a <div>.\n<OtherComponent render={ <VisuallyHidden /> }>\n Accessible text\n</OtherComponent>\n```\n\nChoose based on what you need: if the other component's semantic\nelement matters (e.g. `<label>`, `<legend>`, `<h2>`), keep\n`VisuallyHidden` as the host so the element is preserved.","methods":[],"displayName":"VisuallyHidden","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/ui/src/visually-hidden/visually-hidden.tsx","actualName":"VisuallyHidden","exportName":"VisuallyHidden","props":{"className":{"required":false,"tsType":{"name":"string"},"description":"CSS class name to apply to the component."},"render":{"required":false,"tsType":{"name":"union","raw":"| ComponentRenderFn< HTMLAttributesWithRef >\n| React.ReactElement< Record< string, unknown > >","elements":[{"name":"signature","type":"function","raw":"(\n\tprops: Props\n) => React.ReactElement< unknown >","signature":{"arguments":[{"type":{"name":"intersection","raw":"HTMLAttributes< T > & { ref?: Ref< T > | undefined }","elements":[{"name":"HTMLAttributes","elements":[{"name":"T"}],"raw":"HTMLAttributes< T >"},{"name":"signature","type":"object","raw":"{ ref?: Ref< T > | undefined }","signature":{"properties":[{"key":"ref","value":{"name":"union","raw":"Ref< T > | undefined","elements":[{"name":"Ref","elements":[{"name":"T"}],"raw":"Ref< T >"},{"name":"undefined"}],"required":false}}]}}]},"name":"props"}],"return":{"name":"ReactReactElement","raw":"React.ReactElement< unknown >","elements":[{"name":"unknown"}]}}},{"name":"ReactReactElement","raw":"React.ReactElement< Record< string, unknown > >","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"unknown"}],"raw":"Record< string, unknown >"}]}]},"description":"Replaces the component's default HTML element using a given React\nelement, or a function that returns a React element."},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":"The content to be rendered inside the component."}}}},"dataviews-dataviews":{"id":"dataviews-dataviews","name":"DataViews","path":"../packages/dataviews/src/dataviews/stories/index.story.tsx","stories":[{"id":"dataviews-dataviews--layout-table","name":"Layout Table","snippet":"const LayoutTable = () => <DataViews\n containerHeight=\"auto\"\n groupBy={false}\n groupByLabel\n hasClickableItems\n perPageSizes={[ 10, 25, 50, 100 ]}\n showMedia />;"},{"id":"dataviews-dataviews--layout-grid","name":"Layout Grid","snippet":"const LayoutGrid = () => <DataViews\n containerHeight=\"auto\"\n groupBy={false}\n groupByLabel\n hasClickableItems\n perPageSizes={[ 10, 25, 50, 100 ]}\n showMedia />;"},{"id":"dataviews-dataviews--layout-list","name":"Layout List","snippet":"const LayoutList = () => <DataViews\n containerHeight=\"auto\"\n fullWidth={false}\n groupBy={false}\n groupByLabel\n hasClickableItems\n perPageSizes={[ 10, 25, 50, 100 ]}\n showMedia />;"},{"id":"dataviews-dataviews--layout-activity","name":"Layout Activity","snippet":"const LayoutActivity = () => <DataViews\n containerHeight=\"auto\"\n fullWidth={false}\n groupBy={false}\n groupByLabel\n hasClickableItems\n perPageSizes={[ 10, 25, 50, 100 ]}\n showMedia />;"},{"id":"dataviews-dataviews--layout-custom","name":"Layout Custom","snippet":"const LayoutCustom = () => <DataViews containerHeight=\"auto\" />;"},{"id":"dataviews-dataviews--empty","name":"Empty","snippet":"const Empty = () => <DataViews containerHeight=\"auto\" customEmpty={false} isLoading={false} />;"},{"id":"dataviews-dataviews--minimal-ui","name":"Minimal UI","snippet":"const MinimalUI = () => <DataViews containerHeight=\"auto\" />;"},{"id":"dataviews-dataviews--free-composition","name":"Free Composition","snippet":"const FreeComposition = () => <DataViews containerHeight=\"auto\" />;"},{"id":"dataviews-dataviews--with-card","name":"With Card","snippet":"const WithCard = () => <DataViews containerHeight=\"auto\" />;"},{"id":"dataviews-dataviews--infinite-scroll","name":"Infinite Scroll","snippet":"const InfiniteScroll = () => <DataViews containerHeight=\"auto\" />;"}],"import":"import { DataViews } from \"@wordpress/dataviews\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DataViews","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/dataviews/src/dataviews/index.tsx","actualName":"DataViews","props":{"view":{"required":true,"tsType":{"name":"union","raw":"| ViewList\n| ViewGrid\n| ViewTable\n| ViewPickerGrid\n| ViewPickerTable\n| ViewActivity","elements":[{"name":"ViewList"},{"name":"ViewGrid"},{"name":"ViewTable"},{"name":"ViewPickerGrid"},{"name":"ViewPickerTable"},{"name":"ViewActivity"}]},"description":""},"onChangeView":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( view: View ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"| ViewList\n| ViewGrid\n| ViewTable\n| ViewPickerGrid\n| ViewPickerTable\n| ViewActivity","elements":[{"name":"ViewList"},{"name":"ViewGrid"},{"name":"ViewTable"},{"name":"ViewPickerGrid"},{"name":"ViewPickerTable"},{"name":"ViewActivity"}]},"name":"view"}],"return":{"name":"void"}}},"description":""},"fields":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldTypeName;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string | ReactElement;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether a field should be disabled.\n\t * Can be a boolean or a callback receiving the current item and field.\n\t * Defaults to false.\n\t */\n\tisDisabled?:\n\t\t| boolean\n\t\t| ( ( args: {\n\t\t\t\titem: Item;\n\t\t\t\tfield: NormalizedField< Item >;\n\t\t } ) => boolean );\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field can be hidden in the UI.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Retrieval function for elements.\n\t */\n\tgetElements?: () => Promise< Option[] >;\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n\n\t/**\n\t * Callback used to set the value of the field on the item.\n\t * Used for editing operations to update field values.\n\t */\n\tsetValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\n\t/**\n\t * Display format configuration for fields.\n\t */\n\tformat?: FormatDatetime | FormatDate | FormatNumber | FormatInteger;\n\n\t/**\n\t * Callback used to format the value of the field for display.\n\t */\n\tgetValueFormatted?: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},"description":"Type of the fields."},{"key":"id","value":{"name":"string","required":true},"description":"The unique identifier of the field."},{"key":"label","value":{"name":"string","required":false},"description":"The label of the field. Defaults to the id."},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"The header of the field. Defaults to the label.\nIt allows the usage of a React Element to render the field labels."},{"key":"description","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"A description of the field."},{"key":"placeholder","value":{"name":"string","required":false},"description":"Placeholder for the field."},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tsizes: string;\n}","signature":{"properties":[{"key":"sizes","value":{"name":"string","required":true}}]},"required":false}}]}}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":false},"description":"Callback used to render the field. Defaults to `field.getValue`."},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | string | EditConfig","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"string"},{"name":"union","raw":"| EditConfigTextarea\n| EditConfigText\n| EditConfigDatetime\n| EditConfigGeneric","elements":[{"name":"signature","type":"object","raw":"{\n\tcontrol: 'textarea';\n\t/**\n\t * Number of rows for the textarea.\n\t */\n\trows?: number;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'textarea'","required":true}},{"key":"rows","value":{"name":"number","required":false},"description":"Number of rows for the textarea."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'text';\n\t/**\n\t * Prefix component to display before the input.\n\t */\n\tprefix?: React.ComponentType;\n\t/**\n\t * Suffix component to display after the input.\n\t */\n\tsuffix?: React.ComponentType;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'text'","required":true}},{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Prefix component to display before the input."},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Suffix component to display after the input."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'datetime';\n\t/**\n\t * Whether to render a compact version without the calendar widget.\n\t */\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'datetime'","required":true}},{"key":"compact","value":{"name":"boolean","required":false},"description":"Whether to render a compact version without the calendar widget."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;\n}","signature":{"properties":[{"key":"control","value":{"name":"Exclude","elements":[{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},{"name":"union","raw":"'text' | 'textarea' | 'datetime'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'textarea'"},{"name":"literal","value":"'datetime'"}]}],"raw":"Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >","required":true}}]}}]}],"required":false},"description":"Callback used to render an edit control for the field."},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":false},"description":"Callback used to sort the field."},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: boolean;\n\telements?: boolean;\n\tpattern?: string;\n\tminLength?: number;\n\tmaxLength?: number;\n\tmin?: number;\n\tmax?: number;\n\tcustom?:\n\t\t| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n\t\t| ( (\n\t\t\t\titem: Item,\n\t\t\t\tfield: NormalizedField< Item >\n\t\t ) => Promise< null | string > );\n}","signature":{"properties":[{"key":"required","value":{"name":"boolean","required":false}},{"key":"elements","value":{"name":"boolean","required":false}},{"key":"pattern","value":{"name":"string","required":false}},{"key":"minLength","value":{"name":"number","required":false}},{"key":"maxLength","value":{"name":"number","required":false}},{"key":"min","value":{"name":"number","required":false}},{"key":"max","value":{"name":"number","required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":false},"description":"Callback used to validate the field."},{"key":"isVisible","value":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}},"required":false},"description":"Callback used to decide if a field should be displayed."},{"key":"isDisabled","value":{"name":"union","raw":"| boolean\n| ( ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n } ) => boolean )","elements":[{"name":"boolean"},{"name":"unknown"}],"required":false},"description":"Whether a field should be disabled.\nCan be a boolean or a callback receiving the current item and field.\nDefaults to false."},{"key":"enableSorting","value":{"name":"boolean","required":false},"description":"Whether the field is sortable."},{"key":"enableGlobalSearch","value":{"name":"boolean","required":false},"description":"Whether the field is searchable."},{"key":"enableHiding","value":{"name":"boolean","required":false},"description":"Whether the field can be hidden in the UI."},{"key":"elements","value":{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]","required":false},"description":"The list of options to pick from when using the field as a filter."},{"key":"getElements","value":{"name":"signature","type":"function","raw":"() => Promise< Option[] >","signature":{"arguments":[],"return":{"name":"Promise","elements":[{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]"}],"raw":"Promise< Option[] >"}},"required":false},"description":"Retrieval function for elements."},{"key":"filterBy","value":{"name":"union","raw":"FilterByConfig | false","elements":[{"name":"FilterByConfig"},{"name":"literal","value":"false"}],"required":false},"description":"Filter config for the field."},{"key":"readOnly","value":{"name":"boolean","required":false},"description":"Whether the field is readOnly.\nIf `true`, the value will be rendered using the `render` callback."},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":false},"description":"Callback used to retrieve the value of the field from the item.\nDefaults to `item[ field.id ]`."},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":false},"description":"Callback used to set the value of the field on the item.\nUsed for editing operations to update field values."},{"key":"format","value":{"name":"union","raw":"FormatDatetime | FormatDate | FormatNumber | FormatInteger","elements":[{"name":"signature","type":"object","raw":"{\n\tdatetime?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"datetime","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"required":false},"description":"Display format configuration for fields."},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}}]}},"name":""}],"return":{"name":"string"}},"required":false},"description":"Callback used to format the value of the field for display."}]}}],"raw":"Field< Item >[]"},"description":""},"search":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"true","computed":false}},"searchLabel":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"undefined","computed":true}},"actions":{"required":false,"tsType":{"name":"Array","elements":[{"name":"union","raw":"ActionModal< Item > | ActionButton< Item >","elements":[{"name":"ActionModal","elements":[{"name":"Item"}],"raw":"ActionModal< Item >"},{"name":"ActionButton","elements":[{"name":"Item"}],"raw":"ActionButton< Item >"}]}],"raw":"Action< Item >[]"},"description":"","defaultValue":{"value":"[]","computed":false}},"data":{"required":true,"tsType":{"name":"Array","elements":[{"name":"Item"}],"raw":"Item[]"},"description":""},"isLoading":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"paginationInfo":{"required":true,"tsType":{"name":"signature","type":"object","raw":"{\n\ttotalItems: number;\n\ttotalPages: number;\n}","signature":{"properties":[{"key":"totalItems","value":{"name":"number","required":true}},{"key":"totalPages","value":{"name":"number","required":true}}]}},"description":""},"defaultLayouts":{"required":true,"tsType":{"name":"SupportedLayouts"},"description":""},"selection":{"required":false,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":""},"onChangeSelection":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( items: string[] ) => void","signature":{"arguments":[{"type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"name":"items"}],"return":{"name":"void"}}},"description":""},"onClickItem":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( item: Item ) => void","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"void"}}},"description":""},"renderItemLink":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(\n\tprops: {\n\t\titem: Item;\n\t} & ComponentProps< 'a' >\n) => ReactElement","signature":{"arguments":[{"type":{"name":"intersection","raw":"{\n\titem: Item;\n} & ComponentProps< 'a' >","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},{"name":"ComponentProps","elements":[{"name":"literal","value":"'a'"}],"raw":"ComponentProps< 'a' >"}]},"name":"props"}],"return":{"name":"ReactElement"}}},"description":""},"isItemClickable":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}}},"description":"","defaultValue":{"value":"() => true","computed":false}},"header":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"getItemLevel":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( item: Item ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"number"}}},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"config":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\tperPageSizes: number[];\n}","signature":{"properties":[{"key":"perPageSizes","value":{"name":"Array","elements":[{"name":"number"}],"raw":"number[]","required":true}}]}},"description":"","defaultValue":{"value":"{ perPageSizes: [ 10, 20, 50, 100 ] }","computed":false}},"empty":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"onReset":{"required":false,"tsType":{"name":"union","raw":"( () => void ) | false","elements":[{"name":"unknown"},{"name":"literal","value":"false"}]},"description":""},"getItemId":{"defaultValue":{"value":"( item: ItemWithId ) => item.id","computed":false},"required":false}}},"docs":{"dataviews-dataviews--best-practices":{"id":"dataviews-dataviews--best-practices","name":"Best practices","path":"../packages/dataviews/src/dataviews/stories/best-practices.story.mdx","title":"DataViews/DataViews","content":"import { Meta } from '@storybook/addon-docs/blocks';\n\nimport * as DataViewsStories from './index.story';\n\n<Meta of={ DataViewsStories } name=\"Best practices\" />\n\n# Data Views\n\nData Views allow users to display and interact with information through different layouts such as table or grid. It includes features like search, filtering, sorting, pagination, and customization options to adjust column order, items per page, and hide columns, enhancing data exploration and flexibility. \n\nA typical flow might be:\n\n- Use search and filters to narrow down a large collection.\n- Adjust the layout and visible fields to match the task (compare, skim, or visually scan).\n- Take inline actions on item metadata, or open an editing interface when more detail is needed.\n\n## Choosing a layout\n\n### When to use **List**\n\nUse the **List** layout when:\n\n- **Content needs the most compact layout**, whether because it's used in a constrained context, or if paired with a preview surface.\n- Default information density allows for a reduced set of secondary metadata.\n- The view needs to work well in **narrow spaces**.\n\nList is a good fit for items like Pages that benefit from a live preview next to the list.\n\n### When to use **Grid**\n\nUse the **Grid** layout when:\n\n- **Visual previews across multiple items at once are important** for recognition (patterns, templates, media, products).\n- You want a **card‑based experience**, with each item having its own tile (image + metadata).\n- You expect more **browsing and scanning by look** than comparing raw values.\n\nGrid works well when choosing “by look” is more important than comparing precise numbers or dates.\n\n### When to use **Table**\n\nUse the **Table** layout when:\n\n- Users need to **compare multiple attributes across items** at once.\n- **Column headers and alignment** are critical for understanding the data.\n- The task involves working with structured data.\n\nTable is ideal for dense, structured information where sorting and scanning down aligned columns is the primary workflow, such as posts or comments where metadata is important for choosing the next action.\n\n## When to use something else\n\nData Views are designed for **browsing and managing collections**. In other situations, consider other components in the `@wordpress/dataviews` package:\n\n- **Use `DataForm`** when the primary workflow primarily relates to **creating or editing a single item** at a level that doesn't require a full editor.\n- **Use `DataViewsPicker`** when the goal is **selecting one or more items** and returning that selection to another part of the UI. This is a better fit for dialogs and sidebars where the outcome is a selection, not ongoing management of a collection, e.g. inserting from a media library.\n\n"}}},"dataviews-dataform-content":{"id":"dataviews-dataform-content","name":"DataForm","path":"../packages/dataviews/src/dataform/stories/content.story.tsx","stories":[{"id":"dataviews-dataform-content--labels","name":"Labels","snippet":"const Labels = () => {\n const [ data, setData ] = useState< SampleData >( {\n name: '',\n email: '',\n phone: '',\n } );\n\n const fields: Field< SampleData >[] = useMemo(\n () => [\n {\n id: 'name',\n label: 'Name',\n type: 'text',\n },\n {\n id: 'email',\n label: 'Email',\n type: 'email',\n },\n {\n id: 'phone',\n label: 'Phone number',\n type: 'telephone',\n },\n ],\n []\n );\n\n const form: Form = useMemo(\n () => ( {\n layout: { type: 'regular' },\n fields: [ 'name', 'email', 'phone' ],\n } ),\n []\n );\n\n return (\n <Stack direction=\"column\" gap=\"lg\">\n <DataForm< SampleData >\n data={ data }\n fields={ fields }\n form={ form }\n onChange={ ( edits ) =>\n setData( ( prev ) => ( { ...prev, ...edits } ) )\n }\n />\n </Stack>\n );\n};"},{"id":"dataviews-dataform-content--help-text","name":"Help Text","snippet":"const HelpText = () => {\n const [ data, setData ] = useState< HelpTextData >( {\n name: '',\n email: '',\n phone: '',\n } );\n\n const fields: Field< HelpTextData >[] = useMemo(\n () => [\n {\n id: 'name',\n label: 'Name',\n type: 'text',\n placeholder: 'Jane Doe',\n description:\n 'Enter your full legal name as it appears on official documents.',\n },\n {\n id: 'email',\n label: 'Email',\n type: 'email',\n placeholder: 'you@example.com',\n description:\n 'We will use this to send you important account notifications and updates.',\n },\n {\n id: 'phone',\n label: 'Phone number',\n type: 'telephone',\n placeholder: '+1 (555) 123-4567',\n description:\n 'Include your country code. This number will be used for account verification.',\n },\n ],\n []\n );\n\n const form: Form = useMemo(\n () => ( {\n layout: { type: 'regular' },\n fields: [ 'name', 'email', 'phone' ],\n } ),\n []\n );\n\n return (\n <Stack direction=\"column\" gap=\"lg\">\n <DataForm< HelpTextData >\n data={ data }\n fields={ fields }\n form={ form }\n onChange={ ( edits ) =>\n setData( ( prev ) => ( { ...prev, ...edits } ) )\n }\n />\n </Stack>\n );\n};"},{"id":"dataviews-dataform-content--validation-messages","name":"Validation Messages","snippet":"const ValidationMessages = () => {\n const [ data, setData ] = useState< ValidationMessagesData >( {\n name: '',\n email: 'invalid-email',\n phone: '123',\n } );\n\n const fields: Field< ValidationMessagesData >[] = useMemo(\n () => [\n {\n id: 'name',\n label: 'Name',\n type: 'text',\n placeholder: 'Jane Doe',\n isValid: {\n required: true,\n },\n },\n {\n id: 'email',\n label: 'Email',\n type: 'email',\n placeholder: 'you@example.com',\n isValid: {\n required: true,\n custom: ( item ) => {\n if ( ! item.email ) {\n return null;\n }\n if ( ! item.email.includes( '@' ) ) {\n return 'Please enter a valid email address.';\n }\n return null;\n },\n },\n },\n {\n id: 'phone',\n label: 'Phone number',\n type: 'telephone',\n placeholder: '+1 (555) 123-4567',\n isValid: {\n required: true,\n custom: ( item ) => {\n if ( ! item.phone ) {\n return null;\n }\n if ( item.phone.length < 10 ) {\n return 'Phone number must be at least 10 digits long.';\n }\n return null;\n },\n },\n },\n ],\n []\n );\n\n const form: Form = useMemo(\n () => ( {\n layout: { type: 'regular' },\n fields: [ 'name', 'email', 'phone' ],\n } ),\n []\n );\n\n const { validity } = useFormValidity( data, fields, form );\n const containerRef = useRef< HTMLDivElement >( null );\n\n // Show validation messages on load without focusing\n useEffect( () => {\n if ( validity && containerRef.current ) {\n const inputs = containerRef.current.querySelectorAll( 'input' );\n inputs.forEach( ( input ) => {\n // Dispatch 'invalid' event to trigger the validation message display\n input.dispatchEvent(\n new Event( 'invalid', { bubbles: false } )\n );\n } );\n }\n }, [ validity ] );\n\n return (\n <div ref={ containerRef }>\n <Stack direction=\"column\" gap=\"xl\">\n <DataForm< ValidationMessagesData >\n data={ data }\n fields={ fields }\n form={ form }\n validity={ validity }\n onChange={ ( edits ) =>\n setData( ( prev ) => ( { ...prev, ...edits } ) )\n }\n />\n </Stack>\n </div>\n );\n};"},{"id":"dataviews-dataform-content--high-level-help-text","name":"High Level Help Text","snippet":"const HighLevelHelpText = () => {\n const [ data, setData ] = useState< HighLevelHelpTextData >( {\n name: '',\n email: '',\n phone: '',\n } );\n\n const fields: Field< HighLevelHelpTextData >[] = useMemo(\n () => [\n {\n id: 'name',\n label: 'Name',\n type: 'text',\n },\n {\n id: 'email',\n label: 'Email',\n type: 'email',\n },\n {\n id: 'phone',\n label: 'Phone number',\n type: 'telephone',\n },\n ],\n []\n );\n\n const form: Form = useMemo(\n () => ( {\n layout: { type: 'regular' },\n fields: [\n {\n id: 'accountForm',\n label: 'Account information',\n description:\n 'We collect this information to create your account and provide personalized services. Your data will be kept secure and used only for account management and service improvements.',\n children: [ 'name', 'email', 'phone' ],\n layout: {\n isCollapsible: false,\n summary: 'account-form',\n type: 'card',\n withHeader: true,\n },\n },\n ],\n } ),\n []\n );\n\n return (\n <Stack direction=\"column\" gap=\"lg\">\n <DataForm< HighLevelHelpTextData >\n data={ data }\n fields={ fields }\n form={ form }\n onChange={ ( edits ) =>\n setData( ( prev ) => ( { ...prev, ...edits } ) )\n }\n />\n </Stack>\n );\n};"},{"id":"dataviews-dataform-content--placeholders","name":"Placeholders","snippet":"const Placeholders = () => {\n const [ data, setData ] = useState< PlaceholdersData >( {\n name: '',\n email: '',\n phone: '',\n } );\n\n const fields: Field< PlaceholdersData >[] = useMemo(\n () => [\n {\n id: 'name',\n label: 'Name',\n type: 'text',\n placeholder: 'Jane Doe',\n },\n {\n id: 'email',\n label: 'Email',\n type: 'email',\n placeholder: 'you@example.com',\n },\n {\n id: 'phone',\n label: 'Phone number',\n type: 'telephone',\n placeholder: '+1 (555) 123-4567',\n },\n ],\n []\n );\n\n const form: Form = useMemo(\n () => ( {\n layout: { type: 'regular' },\n fields: [ 'name', 'email', 'phone' ],\n } ),\n []\n );\n\n return (\n <Stack direction=\"column\" gap=\"lg\">\n <DataForm< PlaceholdersData >\n data={ data }\n fields={ fields }\n form={ form }\n onChange={ ( edits ) =>\n setData( ( prev ) => ( { ...prev, ...edits } ) )\n }\n />\n </Stack>\n );\n};"}],"import":"import { DataForm } from \"@wordpress/dataviews\";\nimport { Stack } from \"@wordpress/ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DataForm","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/dataviews/src/dataform/index.tsx","actualName":"DataForm","exportName":"default","props":{"data":{"required":true,"tsType":{"name":"Item"},"description":""},"fields":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldTypeName;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string | ReactElement;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether a field should be disabled.\n\t * Can be a boolean or a callback receiving the current item and field.\n\t * Defaults to false.\n\t */\n\tisDisabled?:\n\t\t| boolean\n\t\t| ( ( args: {\n\t\t\t\titem: Item;\n\t\t\t\tfield: NormalizedField< Item >;\n\t\t } ) => boolean );\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field can be hidden in the UI.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Retrieval function for elements.\n\t */\n\tgetElements?: () => Promise< Option[] >;\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n\n\t/**\n\t * Callback used to set the value of the field on the item.\n\t * Used for editing operations to update field values.\n\t */\n\tsetValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\n\t/**\n\t * Display format configuration for fields.\n\t */\n\tformat?: FormatDatetime | FormatDate | FormatNumber | FormatInteger;\n\n\t/**\n\t * Callback used to format the value of the field for display.\n\t */\n\tgetValueFormatted?: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},"description":"Type of the fields."},{"key":"id","value":{"name":"string","required":true},"description":"The unique identifier of the field."},{"key":"label","value":{"name":"string","required":false},"description":"The label of the field. Defaults to the id."},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"The header of the field. Defaults to the label.\nIt allows the usage of a React Element to render the field labels."},{"key":"description","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"A description of the field."},{"key":"placeholder","value":{"name":"string","required":false},"description":"Placeholder for the field."},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tsizes: string;\n}","signature":{"properties":[{"key":"sizes","value":{"name":"string","required":true}}]},"required":false}}]}}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":false},"description":"Callback used to render the field. Defaults to `field.getValue`."},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | string | EditConfig","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"string"},{"name":"union","raw":"| EditConfigTextarea\n| EditConfigText\n| EditConfigDatetime\n| EditConfigGeneric","elements":[{"name":"signature","type":"object","raw":"{\n\tcontrol: 'textarea';\n\t/**\n\t * Number of rows for the textarea.\n\t */\n\trows?: number;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'textarea'","required":true}},{"key":"rows","value":{"name":"number","required":false},"description":"Number of rows for the textarea."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'text';\n\t/**\n\t * Prefix component to display before the input.\n\t */\n\tprefix?: React.ComponentType;\n\t/**\n\t * Suffix component to display after the input.\n\t */\n\tsuffix?: React.ComponentType;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'text'","required":true}},{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Prefix component to display before the input."},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Suffix component to display after the input."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'datetime';\n\t/**\n\t * Whether to render a compact version without the calendar widget.\n\t */\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'datetime'","required":true}},{"key":"compact","value":{"name":"boolean","required":false},"description":"Whether to render a compact version without the calendar widget."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;\n}","signature":{"properties":[{"key":"control","value":{"name":"Exclude","elements":[{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},{"name":"union","raw":"'text' | 'textarea' | 'datetime'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'textarea'"},{"name":"literal","value":"'datetime'"}]}],"raw":"Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >","required":true}}]}}]}],"required":false},"description":"Callback used to render an edit control for the field."},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":false},"description":"Callback used to sort the field."},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: boolean;\n\telements?: boolean;\n\tpattern?: string;\n\tminLength?: number;\n\tmaxLength?: number;\n\tmin?: number;\n\tmax?: number;\n\tcustom?:\n\t\t| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n\t\t| ( (\n\t\t\t\titem: Item,\n\t\t\t\tfield: NormalizedField< Item >\n\t\t ) => Promise< null | string > );\n}","signature":{"properties":[{"key":"required","value":{"name":"boolean","required":false}},{"key":"elements","value":{"name":"boolean","required":false}},{"key":"pattern","value":{"name":"string","required":false}},{"key":"minLength","value":{"name":"number","required":false}},{"key":"maxLength","value":{"name":"number","required":false}},{"key":"min","value":{"name":"number","required":false}},{"key":"max","value":{"name":"number","required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":false},"description":"Callback used to validate the field."},{"key":"isVisible","value":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}},"required":false},"description":"Callback used to decide if a field should be displayed."},{"key":"isDisabled","value":{"name":"union","raw":"| boolean\n| ( ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n } ) => boolean )","elements":[{"name":"boolean"},{"name":"unknown"}],"required":false},"description":"Whether a field should be disabled.\nCan be a boolean or a callback receiving the current item and field.\nDefaults to false."},{"key":"enableSorting","value":{"name":"boolean","required":false},"description":"Whether the field is sortable."},{"key":"enableGlobalSearch","value":{"name":"boolean","required":false},"description":"Whether the field is searchable."},{"key":"enableHiding","value":{"name":"boolean","required":false},"description":"Whether the field can be hidden in the UI."},{"key":"elements","value":{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]","required":false},"description":"The list of options to pick from when using the field as a filter."},{"key":"getElements","value":{"name":"signature","type":"function","raw":"() => Promise< Option[] >","signature":{"arguments":[],"return":{"name":"Promise","elements":[{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]"}],"raw":"Promise< Option[] >"}},"required":false},"description":"Retrieval function for elements."},{"key":"filterBy","value":{"name":"union","raw":"FilterByConfig | false","elements":[{"name":"FilterByConfig"},{"name":"literal","value":"false"}],"required":false},"description":"Filter config for the field."},{"key":"readOnly","value":{"name":"boolean","required":false},"description":"Whether the field is readOnly.\nIf `true`, the value will be rendered using the `render` callback."},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":false},"description":"Callback used to retrieve the value of the field from the item.\nDefaults to `item[ field.id ]`."},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":false},"description":"Callback used to set the value of the field on the item.\nUsed for editing operations to update field values."},{"key":"format","value":{"name":"union","raw":"FormatDatetime | FormatDate | FormatNumber | FormatInteger","elements":[{"name":"signature","type":"object","raw":"{\n\tdatetime?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"datetime","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"required":false},"description":"Display format configuration for fields."},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}}]}},"name":""}],"return":{"name":"string"}},"required":false},"description":"Callback used to format the value of the field for display."}]}}],"raw":"Field< Item >[]"},"description":""},"form":{"required":true,"tsType":{"name":"signature","type":"object","raw":"{\n\tlayout?: Layout;\n\tfields?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"fields","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"signature","type":"object","raw":"{\n\tid: string;\n\tlabel?: string;\n\tdescription?: string;\n\tlayout?: Layout;\n\tchildren?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"label","value":{"name":"string","required":false}},{"key":"description","value":{"name":"string","required":false}},{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"children","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"FormField"},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},"description":""},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: Record< string, any > ) => void","signature":{"arguments":[{"type":{"name":"Record","elements":[{"name":"string"},{"name":"any"}],"raw":"Record< string, any >"},"name":"value"}],"return":{"name":"void"}}},"description":""},"validity":{"required":false,"tsType":{"name":"union","raw":"Record< string, FieldValidity > | undefined","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]}}],"raw":"Record< string, FieldValidity >"},{"name":"undefined"}]},"description":""}}},"docs":{"dataviews-dataform-content--docs":{"id":"dataviews-dataform-content--docs","name":"Docs","path":"../packages/dataviews/src/dataform/stories/content.story.mdx","title":"DataViews/DataForm/Content","content":"import { Canvas, Meta } from '@storybook/addon-docs/blocks';\nimport * as ContentStories from './content.story';\n\n<Meta of={ ContentStories } />\n\n# Content Elements\n\nGuidance on understanding the semantics and proper usage of content elements in `DataForm` instances, including when and how to use high-level help text, labels, placeholders, field-level help text, and validation messages.\n\n## Accessibility\n\nProper use of content elements is essential for accessibility. Each element serves a specific semantic purpose that assistive technologies rely on:\n\n- **Labels** are announced by screen readers to identify form fields. Every field must have a label.\n- **Placeholders** provide example input to hint at expected format. They are not a substitute for labels—they disappear on input and are not reliably announced.\n- **Help text** provides additional context that is programmatically associated with fields and read by assistive technologies.\n- **Validation messages** are announced when they appear so users know how to correct errors.\n\nFollowing these semantics benefits all users, including those navigating with keyboards, using screen readers, or experiencing cognitive challenges.\n\n## High-level help text\n\nHigh-level help text provides context and guidance for an entire form. It should be used to explain the purpose of the form, the information that will be collected, and how the information will be used. To add high-level help text, use the `description` property on a field group object (a `FormField` type) in the form configuration's `fields` array that wraps all the form fields as children.\n\n<Canvas of={ ContentStories.HighLevelHelpText } />\n\n## Labels\n\nA label tells users what information they need to enter in a field. Labels must be short, clear, and descriptive to avoid confusion.\n\n<Canvas of={ ContentStories.Labels } />\n\n### Guidelines\n\n<table style={ { width: '100%' } }>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style={ { width: '50%' } }>✅ Do</th>\n\t\t\t<th style={ { width: '50%' } }>🚫 Don't</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Use clear and straightforward language.</td>\n\t\t\t<td style={ { width: '50%' } }>Use vague or ambiguous terms like \"Information\" or \"Details\".</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Limit labels to 1 to 3 concise words.</td>\n\t\t\t<td style={ { width: '50%' } }>Exceed 3 words—longer labels create visual clutter.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Remove filler words and redundant phrasing.</td>\n\t\t\t<td style={ { width: '50%' } }>Include filler words like \"Please enter your\" or \"Kindly provide\".</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Use plain language that users understand.</td>\n\t\t\t<td style={ { width: '50%' } }>Use technical jargon that users might not understand.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Be specific and descriptive.</td>\n\t\t\t<td style={ { width: '50%' } }>Use generic labels like \"Input\" or \"Field 1\".</td>\n\t\t</tr>\n\t</tbody>\n</table>\n\n## Placeholders\n\nA placeholder provides example input to help users understand the expected format. Use placeholders sparingly, keep them short (1 to 3 words), and use real-world examples where possible. They should only be used for formatting hints or common examples, never as a replacement for labels or instructions.\n\n<Canvas of={ ContentStories.Placeholders } />\n\n<table style={ { width: '100%' } }>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style={ { width: '50%' } }>✅ Good</th>\n\t\t\t<th style={ { width: '50%' } }>🚫 Bad</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>For a name field: \"Jane Doe\".</td>\n\t\t\t<td style={ { width: '50%' } }>For a name field: \"Enter your full name here\" (Should be a label or help text, not a placeholder).</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>For an email field: \"you@example.com\".</td>\n\t\t\t<td style={ { width: '50%' } }>For a password field: \"At least 8 characters\" (Belongs in help text, not a placeholder).</td>\n\t\t</tr>\n\t</tbody>\n</table>\n\n## Help text\n\nFor complicated inputs, use help text to explain how the user should proceed. Help text is always visible, appears immediately after the input, and provides essential guidance for completing the input correctly. Help text can also inform users about how their information might be used, providing transparency and context that helps build trust and sets appropriate expectations.\n\nUse help text when the user needs contextual guidance upfront to avoid errors, when the instruction explains why or how to complete the field correctly, when the form field has complex requirements or constraints (e.g., password rules, business logic), or when the information should be accessible without additional interaction.\n\n<Canvas of={ ContentStories.HelpText } />\n\n### Guidelines\n\n<table style={ { width: '100%' } }>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style={ { width: '50%' } }>✅ Do</th>\n\t\t\t<th style={ { width: '50%' } }>🚫 Don't</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Keep help text concise—one to two sentences maximum.</td>\n\t\t\t<td style={ { width: '50%' } }>Write lengthy paragraphs that overwhelm the user.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Provide actionable, contextual guidance about why or how to complete the field.</td>\n\t\t\t<td style={ { width: '50%' } }>State the obvious or repeat what the label already conveys.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Explain requirements or constraints that aren't obvious from the label.</td>\n\t\t\t<td style={ { width: '50%' } }>Duplicate format examples that belong in placeholders (e.g., \"Use YYYY-MM-DD format\").</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Focus on what the user needs to know to succeed.</td>\n\t\t\t<td style={ { width: '50%' } }>Include unnecessary background information or explanations.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Write in plain, user-friendly language.</td>\n\t\t\t<td style={ { width: '50%' } }>Use technical terms or system-specific jargon.</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>For radios or selects, explain how to choose between options.</td>\n\t\t\t<td style={ { width: '50%' } }>Use help text to describe what a selected value means after selection.</td>\n\t\t</tr>\n\t</tbody>\n</table>\n\n## Validation messages\n\nValidation messages help users understand and fix errors in a form. They should be clear, concise, and actionable to guide users toward correcting their input.\n\nWhere possible, messages should infer what is wrong and how the user can fix it.\n\n<Canvas of={ ContentStories.ValidationMessages } />\n\n### Guidelines\n\n<table style={ { width: '100%' } }>\n\t<thead>\n\t\t<tr>\n\t\t\t<th style={ { width: '50%' } }>✅ Good</th>\n\t\t\t<th style={ { width: '50%' } }>🚫 Bad</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td style={ { width: '50%' } }>Name must be at least 2 characters long.</td>\n\t\t\t<td style={ { width: '50%' } }>Invalid name.</td>\n\t\t</tr>\n\t</tbody>\n</table>\n"}}},"dataviews-dataform":{"id":"dataviews-dataform","name":"DataForm","path":"../packages/dataviews/src/dataform/stories/index.story.tsx","stories":[{"id":"dataviews-dataform--layout-card","name":"Layout Card","snippet":"const LayoutCard = () => <DataForm withHeader withSummary isCollapsible />;"},{"id":"dataviews-dataform--layout-details","name":"Layout Details","snippet":"const LayoutDetails = () => <DataForm />;"},{"id":"dataviews-dataform--layout-panel","name":"Layout Panel","snippet":"const LayoutPanel = () => <DataForm openAs=\"default\" />;"},{"id":"dataviews-dataform--layout-regular","name":"Layout Regular","snippet":"const LayoutRegular = () => <DataForm disabled={false} />;"},{"id":"dataviews-dataform--layout-row","name":"Layout Row","snippet":"const LayoutRow = () => <DataForm alignment=\"default\" />;"},{"id":"dataviews-dataform--layout-mixed","name":"Layout Mixed","snippet":"const LayoutMixed = () => <DataForm />;"},{"id":"dataviews-dataform--validation","name":"Validation","snippet":"const Validation = () => <DataForm\n layout=\"regular\"\n required\n elements=\"sync\"\n custom=\"sync\"\n pattern={false}\n minMax={false} />;"},{"id":"dataviews-dataform--visibility","name":"Visibility","snippet":"const Visibility = () => <DataForm />;"},{"id":"dataviews-dataform--data-adapter","name":"Data Adapter","snippet":"const DataAdapter = () => <DataForm />;"}],"import":"import { DataForm } from \"@wordpress/dataviews\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DataForm","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/dataviews/src/dataform/index.tsx","actualName":"DataForm","exportName":"default","props":{"data":{"required":true,"tsType":{"name":"Item"},"description":""},"fields":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldTypeName;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string | ReactElement;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether a field should be disabled.\n\t * Can be a boolean or a callback receiving the current item and field.\n\t * Defaults to false.\n\t */\n\tisDisabled?:\n\t\t| boolean\n\t\t| ( ( args: {\n\t\t\t\titem: Item;\n\t\t\t\tfield: NormalizedField< Item >;\n\t\t } ) => boolean );\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field can be hidden in the UI.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Retrieval function for elements.\n\t */\n\tgetElements?: () => Promise< Option[] >;\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n\n\t/**\n\t * Callback used to set the value of the field on the item.\n\t * Used for editing operations to update field values.\n\t */\n\tsetValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\n\t/**\n\t * Display format configuration for fields.\n\t */\n\tformat?: FormatDatetime | FormatDate | FormatNumber | FormatInteger;\n\n\t/**\n\t * Callback used to format the value of the field for display.\n\t */\n\tgetValueFormatted?: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},"description":"Type of the fields."},{"key":"id","value":{"name":"string","required":true},"description":"The unique identifier of the field."},{"key":"label","value":{"name":"string","required":false},"description":"The label of the field. Defaults to the id."},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"The header of the field. Defaults to the label.\nIt allows the usage of a React Element to render the field labels."},{"key":"description","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"A description of the field."},{"key":"placeholder","value":{"name":"string","required":false},"description":"Placeholder for the field."},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tsizes: string;\n}","signature":{"properties":[{"key":"sizes","value":{"name":"string","required":true}}]},"required":false}}]}}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":false},"description":"Callback used to render the field. Defaults to `field.getValue`."},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | string | EditConfig","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"string"},{"name":"union","raw":"| EditConfigTextarea\n| EditConfigText\n| EditConfigDatetime\n| EditConfigGeneric","elements":[{"name":"signature","type":"object","raw":"{\n\tcontrol: 'textarea';\n\t/**\n\t * Number of rows for the textarea.\n\t */\n\trows?: number;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'textarea'","required":true}},{"key":"rows","value":{"name":"number","required":false},"description":"Number of rows for the textarea."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'text';\n\t/**\n\t * Prefix component to display before the input.\n\t */\n\tprefix?: React.ComponentType;\n\t/**\n\t * Suffix component to display after the input.\n\t */\n\tsuffix?: React.ComponentType;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'text'","required":true}},{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Prefix component to display before the input."},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Suffix component to display after the input."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'datetime';\n\t/**\n\t * Whether to render a compact version without the calendar widget.\n\t */\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'datetime'","required":true}},{"key":"compact","value":{"name":"boolean","required":false},"description":"Whether to render a compact version without the calendar widget."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;\n}","signature":{"properties":[{"key":"control","value":{"name":"Exclude","elements":[{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},{"name":"union","raw":"'text' | 'textarea' | 'datetime'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'textarea'"},{"name":"literal","value":"'datetime'"}]}],"raw":"Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >","required":true}}]}}]}],"required":false},"description":"Callback used to render an edit control for the field."},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":false},"description":"Callback used to sort the field."},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: boolean;\n\telements?: boolean;\n\tpattern?: string;\n\tminLength?: number;\n\tmaxLength?: number;\n\tmin?: number;\n\tmax?: number;\n\tcustom?:\n\t\t| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n\t\t| ( (\n\t\t\t\titem: Item,\n\t\t\t\tfield: NormalizedField< Item >\n\t\t ) => Promise< null | string > );\n}","signature":{"properties":[{"key":"required","value":{"name":"boolean","required":false}},{"key":"elements","value":{"name":"boolean","required":false}},{"key":"pattern","value":{"name":"string","required":false}},{"key":"minLength","value":{"name":"number","required":false}},{"key":"maxLength","value":{"name":"number","required":false}},{"key":"min","value":{"name":"number","required":false}},{"key":"max","value":{"name":"number","required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":false},"description":"Callback used to validate the field."},{"key":"isVisible","value":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}},"required":false},"description":"Callback used to decide if a field should be displayed."},{"key":"isDisabled","value":{"name":"union","raw":"| boolean\n| ( ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n } ) => boolean )","elements":[{"name":"boolean"},{"name":"unknown"}],"required":false},"description":"Whether a field should be disabled.\nCan be a boolean or a callback receiving the current item and field.\nDefaults to false."},{"key":"enableSorting","value":{"name":"boolean","required":false},"description":"Whether the field is sortable."},{"key":"enableGlobalSearch","value":{"name":"boolean","required":false},"description":"Whether the field is searchable."},{"key":"enableHiding","value":{"name":"boolean","required":false},"description":"Whether the field can be hidden in the UI."},{"key":"elements","value":{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]","required":false},"description":"The list of options to pick from when using the field as a filter."},{"key":"getElements","value":{"name":"signature","type":"function","raw":"() => Promise< Option[] >","signature":{"arguments":[],"return":{"name":"Promise","elements":[{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]"}],"raw":"Promise< Option[] >"}},"required":false},"description":"Retrieval function for elements."},{"key":"filterBy","value":{"name":"union","raw":"FilterByConfig | false","elements":[{"name":"FilterByConfig"},{"name":"literal","value":"false"}],"required":false},"description":"Filter config for the field."},{"key":"readOnly","value":{"name":"boolean","required":false},"description":"Whether the field is readOnly.\nIf `true`, the value will be rendered using the `render` callback."},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":false},"description":"Callback used to retrieve the value of the field from the item.\nDefaults to `item[ field.id ]`."},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":false},"description":"Callback used to set the value of the field on the item.\nUsed for editing operations to update field values."},{"key":"format","value":{"name":"union","raw":"FormatDatetime | FormatDate | FormatNumber | FormatInteger","elements":[{"name":"signature","type":"object","raw":"{\n\tdatetime?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"datetime","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"required":false},"description":"Display format configuration for fields."},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}}]}},"name":""}],"return":{"name":"string"}},"required":false},"description":"Callback used to format the value of the field for display."}]}}],"raw":"Field< Item >[]"},"description":""},"form":{"required":true,"tsType":{"name":"signature","type":"object","raw":"{\n\tlayout?: Layout;\n\tfields?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"fields","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"signature","type":"object","raw":"{\n\tid: string;\n\tlabel?: string;\n\tdescription?: string;\n\tlayout?: Layout;\n\tchildren?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"label","value":{"name":"string","required":false}},{"key":"description","value":{"name":"string","required":false}},{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"children","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"FormField"},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},"description":""},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: Record< string, any > ) => void","signature":{"arguments":[{"type":{"name":"Record","elements":[{"name":"string"},{"name":"any"}],"raw":"Record< string, any >"},"name":"value"}],"return":{"name":"void"}}},"description":""},"validity":{"required":false,"tsType":{"name":"union","raw":"Record< string, FieldValidity > | undefined","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]}}],"raw":"Record< string, FieldValidity >"},{"name":"undefined"}]},"description":""}}}},"dataviews-dataviewspicker":{"id":"dataviews-dataviewspicker","name":"DataViewsPicker","path":"../packages/dataviews/src/dataviews-picker/stories/index.story.tsx","stories":[{"id":"dataviews-dataviewspicker--default","name":"Default","snippet":"const Default = ( {\n\tperPageSizes = [ 10, 25, 50, 100 ],\n\tisMultiselectable,\n\tisGrouped,\n\tinfiniteScrollEnabled,\n}: {\n\tperPageSizes: number[];\n\tisMultiselectable: boolean;\n\tisGrouped: boolean;\n\tinfiniteScrollEnabled: boolean;\n} ) => (\n\t<DataViewsPickerContent\n\t\tperPageSizes={ perPageSizes }\n\t\tisMultiselectable={ isMultiselectable }\n\t\tisGrouped={ isGrouped }\n\t\tinfiniteScrollEnabled={ infiniteScrollEnabled }\n\t/>\n);"},{"id":"dataviews-dataviewspicker--with-modal","name":"With Modal","snippet":"const WithModal = ( {\n\tperPageSizes = [ 10, 25, 50, 100 ],\n\tisMultiselectable,\n\tisGrouped,\n\tinfiniteScrollEnabled,\n}: {\n\tperPageSizes: number[];\n\tisMultiselectable: boolean;\n\tisGrouped: boolean;\n\tinfiniteScrollEnabled: boolean;\n} ) => {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst [ selectedItems, setSelectedItems ] = useState< SpaceObject[] >( [] );\n\n\tconst modalActions: ActionButton< SpaceObject >[] = [\n\t\t{\n\t\t\tid: 'cancel',\n\t\t\tlabel: 'Cancel',\n\t\t\tsupportsBulk: isMultiselectable,\n\t\t\tcallback() {\n\t\t\t\tsetIsModalOpen( false );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: 'confirm',\n\t\t\tlabel: 'Confirm',\n\t\t\tisPrimary: true,\n\t\t\tsupportsBulk: isMultiselectable,\n\t\t\tcallback( items ) {\n\t\t\t\tsetSelectedItems( items );\n\t\t\t\tsetIsModalOpen( false );\n\t\t\t},\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Stack direction=\"row\" justify=\"left\" gap=\"sm\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t>\n\t\t\t\t\tOpen Picker Modal\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => setSelectedItems( [] ) }\n\t\t\t\t\tdisabled={ ! selectedItems.length }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t>\n\t\t\t\t\tClear Selection\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t<p>\n\t\t\t\t\tSelected:{ ' ' }\n\t\t\t\t\t{ selectedItems\n\t\t\t\t\t\t.map( ( item ) => item.name.title )\n\t\t\t\t\t\t.join( ', ' ) }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t\t{ isModalOpen && (\n\t\t\t\t<>\n\t\t\t\t\t<style>{ `\n\t\t\t\t\t\t.components-modal__content {\n\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t.components-modal__frame.is-full-screen .components-modal__content {\n\t\t\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t` }</style>\n\t\t\t\t\t<Modal\n\t\t\t\t\t\ttitle=\"Select Items\"\n\t\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\t\tisFullScreen={ false }\n\t\t\t\t\t\tsize=\"fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsPickerContent\n\t\t\t\t\t\t\tperPageSizes={ perPageSizes }\n\t\t\t\t\t\t\tisMultiselectable={ isMultiselectable }\n\t\t\t\t\t\t\tisGrouped={ isGrouped }\n\t\t\t\t\t\t\tinfiniteScrollEnabled={ infiniteScrollEnabled }\n\t\t\t\t\t\t\tactions={ modalActions }\n\t\t\t\t\t\t\tselection={ selectedItems.map( ( item ) =>\n\t\t\t\t\t\t\t\tString( item.id )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Modal>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n};"}],"import":"import { Button, Modal } from \"@wordpress/components\";\nimport { DataViewsPicker } from \"@wordpress/dataviews\";\nimport { Stack } from \"@wordpress/ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DataViewsPicker","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/dataviews/src/dataviews-picker/index.tsx","actualName":"DataViewsPicker","props":{"view":{"required":true,"tsType":{"name":"union","raw":"| ViewList\n| ViewGrid\n| ViewTable\n| ViewPickerGrid\n| ViewPickerTable\n| ViewActivity","elements":[{"name":"ViewList"},{"name":"ViewGrid"},{"name":"ViewTable"},{"name":"ViewPickerGrid"},{"name":"ViewPickerTable"},{"name":"ViewActivity"}]},"description":""},"onChangeView":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( view: View ) => void","signature":{"arguments":[{"type":{"name":"union","raw":"| ViewList\n| ViewGrid\n| ViewTable\n| ViewPickerGrid\n| ViewPickerTable\n| ViewActivity","elements":[{"name":"ViewList"},{"name":"ViewGrid"},{"name":"ViewTable"},{"name":"ViewPickerGrid"},{"name":"ViewPickerTable"},{"name":"ViewActivity"}]},"name":"view"}],"return":{"name":"void"}}},"description":""},"fields":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldTypeName;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string | ReactElement;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether a field should be disabled.\n\t * Can be a boolean or a callback receiving the current item and field.\n\t * Defaults to false.\n\t */\n\tisDisabled?:\n\t\t| boolean\n\t\t| ( ( args: {\n\t\t\t\titem: Item;\n\t\t\t\tfield: NormalizedField< Item >;\n\t\t } ) => boolean );\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field can be hidden in the UI.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Retrieval function for elements.\n\t */\n\tgetElements?: () => Promise< Option[] >;\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n\n\t/**\n\t * Callback used to set the value of the field on the item.\n\t * Used for editing operations to update field values.\n\t */\n\tsetValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\n\t/**\n\t * Display format configuration for fields.\n\t */\n\tformat?: FormatDatetime | FormatDate | FormatNumber | FormatInteger;\n\n\t/**\n\t * Callback used to format the value of the field for display.\n\t */\n\tgetValueFormatted?: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},"description":"Type of the fields."},{"key":"id","value":{"name":"string","required":true},"description":"The unique identifier of the field."},{"key":"label","value":{"name":"string","required":false},"description":"The label of the field. Defaults to the id."},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"The header of the field. Defaults to the label.\nIt allows the usage of a React Element to render the field labels."},{"key":"description","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"A description of the field."},{"key":"placeholder","value":{"name":"string","required":false},"description":"Placeholder for the field."},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tsizes: string;\n}","signature":{"properties":[{"key":"sizes","value":{"name":"string","required":true}}]},"required":false}}]}}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":false},"description":"Callback used to render the field. Defaults to `field.getValue`."},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | string | EditConfig","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"string"},{"name":"union","raw":"| EditConfigTextarea\n| EditConfigText\n| EditConfigDatetime\n| EditConfigGeneric","elements":[{"name":"signature","type":"object","raw":"{\n\tcontrol: 'textarea';\n\t/**\n\t * Number of rows for the textarea.\n\t */\n\trows?: number;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'textarea'","required":true}},{"key":"rows","value":{"name":"number","required":false},"description":"Number of rows for the textarea."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'text';\n\t/**\n\t * Prefix component to display before the input.\n\t */\n\tprefix?: React.ComponentType;\n\t/**\n\t * Suffix component to display after the input.\n\t */\n\tsuffix?: React.ComponentType;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'text'","required":true}},{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Prefix component to display before the input."},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Suffix component to display after the input."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'datetime';\n\t/**\n\t * Whether to render a compact version without the calendar widget.\n\t */\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'datetime'","required":true}},{"key":"compact","value":{"name":"boolean","required":false},"description":"Whether to render a compact version without the calendar widget."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;\n}","signature":{"properties":[{"key":"control","value":{"name":"Exclude","elements":[{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},{"name":"union","raw":"'text' | 'textarea' | 'datetime'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'textarea'"},{"name":"literal","value":"'datetime'"}]}],"raw":"Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >","required":true}}]}}]}],"required":false},"description":"Callback used to render an edit control for the field."},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":false},"description":"Callback used to sort the field."},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: boolean;\n\telements?: boolean;\n\tpattern?: string;\n\tminLength?: number;\n\tmaxLength?: number;\n\tmin?: number;\n\tmax?: number;\n\tcustom?:\n\t\t| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n\t\t| ( (\n\t\t\t\titem: Item,\n\t\t\t\tfield: NormalizedField< Item >\n\t\t ) => Promise< null | string > );\n}","signature":{"properties":[{"key":"required","value":{"name":"boolean","required":false}},{"key":"elements","value":{"name":"boolean","required":false}},{"key":"pattern","value":{"name":"string","required":false}},{"key":"minLength","value":{"name":"number","required":false}},{"key":"maxLength","value":{"name":"number","required":false}},{"key":"min","value":{"name":"number","required":false}},{"key":"max","value":{"name":"number","required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":false},"description":"Callback used to validate the field."},{"key":"isVisible","value":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}},"required":false},"description":"Callback used to decide if a field should be displayed."},{"key":"isDisabled","value":{"name":"union","raw":"| boolean\n| ( ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n } ) => boolean )","elements":[{"name":"boolean"},{"name":"unknown"}],"required":false},"description":"Whether a field should be disabled.\nCan be a boolean or a callback receiving the current item and field.\nDefaults to false."},{"key":"enableSorting","value":{"name":"boolean","required":false},"description":"Whether the field is sortable."},{"key":"enableGlobalSearch","value":{"name":"boolean","required":false},"description":"Whether the field is searchable."},{"key":"enableHiding","value":{"name":"boolean","required":false},"description":"Whether the field can be hidden in the UI."},{"key":"elements","value":{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]","required":false},"description":"The list of options to pick from when using the field as a filter."},{"key":"getElements","value":{"name":"signature","type":"function","raw":"() => Promise< Option[] >","signature":{"arguments":[],"return":{"name":"Promise","elements":[{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]"}],"raw":"Promise< Option[] >"}},"required":false},"description":"Retrieval function for elements."},{"key":"filterBy","value":{"name":"union","raw":"FilterByConfig | false","elements":[{"name":"FilterByConfig"},{"name":"literal","value":"false"}],"required":false},"description":"Filter config for the field."},{"key":"readOnly","value":{"name":"boolean","required":false},"description":"Whether the field is readOnly.\nIf `true`, the value will be rendered using the `render` callback."},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":false},"description":"Callback used to retrieve the value of the field from the item.\nDefaults to `item[ field.id ]`."},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":false},"description":"Callback used to set the value of the field on the item.\nUsed for editing operations to update field values."},{"key":"format","value":{"name":"union","raw":"FormatDatetime | FormatDate | FormatNumber | FormatInteger","elements":[{"name":"signature","type":"object","raw":"{\n\tdatetime?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"datetime","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"required":false},"description":"Display format configuration for fields."},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}}]}},"name":""}],"return":{"name":"string"}},"required":false},"description":"Callback used to format the value of the field for display."}]}}],"raw":"Field< Item >[]"},"description":""},"actions":{"required":false,"tsType":{"name":"Array","elements":[{"name":"ActionButton","elements":[{"name":"Item"}],"raw":"ActionButton< Item >"}],"raw":"ActionButton< Item >[]"},"description":"","defaultValue":{"value":"[]","computed":false}},"search":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"true","computed":false}},"searchLabel":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"undefined","computed":true}},"data":{"required":true,"tsType":{"name":"Array","elements":[{"name":"Item"}],"raw":"Item[]"},"description":""},"isLoading":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"paginationInfo":{"required":true,"tsType":{"name":"signature","type":"object","raw":"{\n\ttotalItems: number;\n\ttotalPages: number;\n}","signature":{"properties":[{"key":"totalItems","value":{"name":"number","required":true}},{"key":"totalPages","value":{"name":"number","required":true}}]}},"description":""},"defaultLayouts":{"required":true,"tsType":{"name":"SupportedLayouts"},"description":""},"selection":{"required":true,"tsType":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"description":""},"onChangeSelection":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( items: string[] ) => void","signature":{"arguments":[{"type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"},"name":"items"}],"return":{"name":"void"}}},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"config":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\n\tperPageSizes: number[];\n}","signature":{"properties":[{"key":"perPageSizes","value":{"name":"Array","elements":[{"name":"number"}],"raw":"number[]","required":true}}]}},"description":"","defaultValue":{"value":"{ perPageSizes: [ 10, 20, 50, 100 ] }","computed":false}},"itemListLabel":{"required":false,"tsType":{"name":"string"},"description":""},"empty":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"getItemId":{"defaultValue":{"value":"( item: ItemWithId ) => item.id","computed":false},"required":false}}}},"dataviews-fieldtypes":{"id":"dataviews-fieldtypes","name":"DataForm","path":"../packages/dataviews/src/field-types/stories/index.story.tsx","stories":[{"id":"dataviews-fieldtypes--all-component","name":"All types","snippet":"const AllComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ fields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--text-component","name":"text","snippet":"const TextComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst textFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'text' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ textFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--integer-component","name":"integer","snippet":"const IntegerComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tformatSeparatorThousand,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tformatSeparatorThousand?: string;\n\tdisabled: boolean;\n} ) => {\n\tconst integerFields = useMemo(\n\t\t() =>\n\t\t\tfields\n\t\t\t\t.filter( ( field ) => field.type === 'integer' )\n\t\t\t\t.map( ( field ) => {\n\t\t\t\t\tif ( formatSeparatorThousand !== undefined ) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...field,\n\t\t\t\t\t\t\tformat: {\n\t\t\t\t\t\t\t\tseparatorThousand: formatSeparatorThousand,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn field;\n\t\t\t\t} ),\n\t\t[ formatSeparatorThousand ]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ integerFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--number-component","name":"number","snippet":"const NumberComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tformatSeparatorThousand,\n\tformatSeparatorDecimal,\n\tformatDecimals,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tformatSeparatorThousand?: string;\n\tformatSeparatorDecimal?: string;\n\tformatDecimals?: number;\n\tdisabled: boolean;\n} ) => {\n\tconst numberFields = useMemo(\n\t\t() =>\n\t\t\tfields\n\t\t\t\t.filter( ( field ) => field.type === 'number' )\n\t\t\t\t.map( ( field ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tformatSeparatorThousand !== undefined ||\n\t\t\t\t\t\tformatSeparatorDecimal !== undefined ||\n\t\t\t\t\t\tformatDecimals !== undefined\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst format: {\n\t\t\t\t\t\t\tseparatorThousand?: string;\n\t\t\t\t\t\t\tseparatorDecimal?: string;\n\t\t\t\t\t\t\tdecimals?: number;\n\t\t\t\t\t\t} = {};\n\t\t\t\t\t\tif ( formatSeparatorThousand !== undefined ) {\n\t\t\t\t\t\t\tformat.separatorThousand = formatSeparatorThousand;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( formatSeparatorDecimal !== undefined ) {\n\t\t\t\t\t\t\tformat.separatorDecimal = formatSeparatorDecimal;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( formatDecimals !== undefined ) {\n\t\t\t\t\t\t\tformat.decimals = formatDecimals;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...field,\n\t\t\t\t\t\t\tformat,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn field;\n\t\t\t\t} ),\n\t\t[ formatSeparatorThousand, formatSeparatorDecimal, formatDecimals ]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ numberFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--boolean-component","name":"boolean","snippet":"const BooleanComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst booleanFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'boolean' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ booleanFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--date-time-component","name":"datetime","snippet":"const DateTimeComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tformatDatetime,\n\tformatWeekStartsOn,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tformatDatetime?: string;\n\tformatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\tdisabled: boolean;\n} ) => {\n\tconst datetimeFields = useMemo(\n\t\t() =>\n\t\t\tfields\n\t\t\t\t.filter( ( field ) => field.id.startsWith( 'datetime' ) )\n\t\t\t\t.map( ( field ) => {\n\t\t\t\t\tif ( formatDatetime || formatWeekStartsOn !== undefined ) {\n\t\t\t\t\t\tconst format: {\n\t\t\t\t\t\t\tdatetime?: string;\n\t\t\t\t\t\t\tweekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\t\t\t\t\t\t} = {};\n\t\t\t\t\t\tif ( formatDatetime ) {\n\t\t\t\t\t\t\tformat.datetime = formatDatetime;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( formatWeekStartsOn !== undefined ) {\n\t\t\t\t\t\t\tformat.weekStartsOn = formatWeekStartsOn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...field,\n\t\t\t\t\t\t\tformat,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn field;\n\t\t\t\t} ),\n\t\t[ formatDatetime, formatWeekStartsOn ]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ datetimeFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--date-component","name":"date","snippet":"const DateComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tformatDate,\n\tformatWeekStartsOn,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tformatDate?: string;\n\tformatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\tdisabled: boolean;\n} ) => {\n\tconst dateFields = useMemo(\n\t\t() =>\n\t\t\tfields\n\t\t\t\t.filter( ( field ) => field.type === 'date' )\n\t\t\t\t.map( ( field ) => {\n\t\t\t\t\tif ( formatDate || formatWeekStartsOn !== undefined ) {\n\t\t\t\t\t\tconst format: {\n\t\t\t\t\t\t\tdate?: string;\n\t\t\t\t\t\t\tweekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\t\t\t\t\t\t} = {};\n\t\t\t\t\t\tif ( formatDate ) {\n\t\t\t\t\t\t\tformat.date = formatDate;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( formatWeekStartsOn !== undefined ) {\n\t\t\t\t\t\t\tformat.weekStartsOn = formatWeekStartsOn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...field,\n\t\t\t\t\t\t\tformat,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn field;\n\t\t\t\t} ),\n\t\t[ formatDate, formatWeekStartsOn ]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ dateFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--email-component","name":"email","snippet":"const EmailComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst emailFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'email' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ emailFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--telephone-component","name":"telephone","snippet":"const TelephoneComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst telephoneFields = fields.filter( ( field ) =>\n\t\tfield.id.startsWith( 'telephone' )\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ telephoneFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--url-component","name":"url","snippet":"const UrlComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst urlFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'url' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ urlFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--color-component","name":"color","snippet":"const ColorComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst colorFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'color' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ colorFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--media-component","name":"media","snippet":"const MediaComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst mediaFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'media' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ mediaFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--array-component","name":"array","snippet":"const ArrayComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst arrayTextFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === 'array' ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ arrayTextFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--password-component","name":"password","snippet":"const PasswordComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst passwordFields = fields.filter( ( field ) =>\n\t\tfield.id.startsWith( 'password' )\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ passwordFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"},{"id":"dataviews-fieldtypes--no-type-component","name":"No type","snippet":"const NoTypeComponent = ( {\n\ttype,\n\tEdit,\n\tasyncElements,\n\tmanyElements,\n\tdisabled,\n}: {\n\ttype: PanelTypes;\n\tEdit: ControlTypes;\n\tasyncElements: boolean;\n\tmanyElements: boolean;\n\tdisabled: boolean;\n} ) => {\n\tconst noTypeFields = useMemo(\n\t\t() => fields.filter( ( field ) => field.type === undefined ),\n\t\t[]\n\t);\n\n\treturn (\n\t\t<FieldTypeStory\n\t\t\tfields={ noTypeFields }\n\t\t\ttype={ type }\n\t\t\tEdit={ Edit }\n\t\t\tasyncElements={ asyncElements }\n\t\t\tmanyElements={ manyElements }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n};"}],"import":"import { DataForm, DataViews } from \"@wordpress/dataviews\";\nimport {\n Icon,\n __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from \"@wordpress/components\";\nimport { Stack } from \"@wordpress/ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DataForm","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/dataviews/src/dataform/index.tsx","actualName":"DataForm","exportName":"default","props":{"data":{"required":true,"tsType":{"name":"Item"},"description":""},"fields":{"required":true,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldTypeName;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string | ReactElement;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string | EditConfig;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether a field should be disabled.\n\t * Can be a boolean or a callback receiving the current item and field.\n\t * Defaults to false.\n\t */\n\tisDisabled?:\n\t\t| boolean\n\t\t| ( ( args: {\n\t\t\t\titem: Item;\n\t\t\t\tfield: NormalizedField< Item >;\n\t\t } ) => boolean );\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field can be hidden in the UI.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Retrieval function for elements.\n\t */\n\tgetElements?: () => Promise< Option[] >;\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n\n\t/**\n\t * Callback used to set the value of the field on the item.\n\t * Used for editing operations to update field values.\n\t */\n\tsetValue?: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\n\t/**\n\t * Display format configuration for fields.\n\t */\n\tformat?: FormatDatetime | FormatDate | FormatNumber | FormatInteger;\n\n\t/**\n\t * Callback used to format the value of the field for display.\n\t */\n\tgetValueFormatted?: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},"description":"Type of the fields."},{"key":"id","value":{"name":"string","required":true},"description":"The unique identifier of the field."},{"key":"label","value":{"name":"string","required":false},"description":"The label of the field. Defaults to the id."},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"The header of the field. Defaults to the label.\nIt allows the usage of a React Element to render the field labels."},{"key":"description","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":false},"description":"A description of the field."},{"key":"placeholder","value":{"name":"string","required":false},"description":"Placeholder for the field."},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tsizes: string;\n}","signature":{"properties":[{"key":"sizes","value":{"name":"string","required":true}}]},"required":false}}]}}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":false},"description":"Callback used to render the field. Defaults to `field.getValue`."},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | string | EditConfig","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"string"},{"name":"union","raw":"| EditConfigTextarea\n| EditConfigText\n| EditConfigDatetime\n| EditConfigGeneric","elements":[{"name":"signature","type":"object","raw":"{\n\tcontrol: 'textarea';\n\t/**\n\t * Number of rows for the textarea.\n\t */\n\trows?: number;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'textarea'","required":true}},{"key":"rows","value":{"name":"number","required":false},"description":"Number of rows for the textarea."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'text';\n\t/**\n\t * Prefix component to display before the input.\n\t */\n\tprefix?: React.ComponentType;\n\t/**\n\t * Suffix component to display after the input.\n\t */\n\tsuffix?: React.ComponentType;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'text'","required":true}},{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Prefix component to display before the input."},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false},"description":"Suffix component to display after the input."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: 'datetime';\n\t/**\n\t * Whether to render a compact version without the calendar widget.\n\t */\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"control","value":{"name":"literal","value":"'datetime'","required":true}},{"key":"compact","value":{"name":"boolean","required":false},"description":"Whether to render a compact version without the calendar widget."}]}},{"name":"signature","type":"object","raw":"{\n\tcontrol: Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >;\n}","signature":{"properties":[{"key":"control","value":{"name":"Exclude","elements":[{"name":"union","raw":"| 'text'\n| 'integer'\n| 'number'\n| 'datetime'\n| 'date'\n| 'media'\n| 'boolean'\n| 'email'\n| 'password'\n| 'telephone'\n| 'color'\n| 'url'\n| 'array'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'integer'"},{"name":"literal","value":"'number'"},{"name":"literal","value":"'datetime'"},{"name":"literal","value":"'date'"},{"name":"literal","value":"'media'"},{"name":"literal","value":"'boolean'"},{"name":"literal","value":"'email'"},{"name":"literal","value":"'password'"},{"name":"literal","value":"'telephone'"},{"name":"literal","value":"'color'"},{"name":"literal","value":"'url'"},{"name":"literal","value":"'array'"}],"required":false},{"name":"union","raw":"'text' | 'textarea' | 'datetime'","elements":[{"name":"literal","value":"'text'"},{"name":"literal","value":"'textarea'"},{"name":"literal","value":"'datetime'"}]}],"raw":"Exclude< FieldTypeName, 'text' | 'textarea' | 'datetime' >","required":true}}]}}]}],"required":false},"description":"Callback used to render an edit control for the field."},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":false},"description":"Callback used to sort the field."},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: boolean;\n\telements?: boolean;\n\tpattern?: string;\n\tminLength?: number;\n\tmaxLength?: number;\n\tmin?: number;\n\tmax?: number;\n\tcustom?:\n\t\t| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n\t\t| ( (\n\t\t\t\titem: Item,\n\t\t\t\tfield: NormalizedField< Item >\n\t\t ) => Promise< null | string > );\n}","signature":{"properties":[{"key":"required","value":{"name":"boolean","required":false}},{"key":"elements","value":{"name":"boolean","required":false}},{"key":"pattern","value":{"name":"string","required":false}},{"key":"minLength","value":{"name":"number","required":false}},{"key":"maxLength","value":{"name":"number","required":false}},{"key":"min","value":{"name":"number","required":false}},{"key":"max","value":{"name":"number","required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":false},"description":"Callback used to validate the field."},{"key":"isVisible","value":{"name":"signature","type":"function","raw":"( item: Item ) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"}],"return":{"name":"boolean"}},"required":false},"description":"Callback used to decide if a field should be displayed."},{"key":"isDisabled","value":{"name":"union","raw":"| boolean\n| ( ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n } ) => boolean )","elements":[{"name":"boolean"},{"name":"unknown"}],"required":false},"description":"Whether a field should be disabled.\nCan be a boolean or a callback receiving the current item and field.\nDefaults to false."},{"key":"enableSorting","value":{"name":"boolean","required":false},"description":"Whether the field is sortable."},{"key":"enableGlobalSearch","value":{"name":"boolean","required":false},"description":"Whether the field is searchable."},{"key":"enableHiding","value":{"name":"boolean","required":false},"description":"Whether the field can be hidden in the UI."},{"key":"elements","value":{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]","required":false},"description":"The list of options to pick from when using the field as a filter."},{"key":"getElements","value":{"name":"signature","type":"function","raw":"() => Promise< Option[] >","signature":{"arguments":[],"return":{"name":"Promise","elements":[{"name":"Array","elements":[{"name":"Option"}],"raw":"Option[]"}],"raw":"Promise< Option[] >"}},"required":false},"description":"Retrieval function for elements."},{"key":"filterBy","value":{"name":"union","raw":"FilterByConfig | false","elements":[{"name":"FilterByConfig"},{"name":"literal","value":"false"}],"required":false},"description":"Filter config for the field."},{"key":"readOnly","value":{"name":"boolean","required":false},"description":"Whether the field is readOnly.\nIf `true`, the value will be rendered using the `render` callback."},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":false},"description":"Callback used to retrieve the value of the field from the item.\nDefaults to `item[ field.id ]`."},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":false},"description":"Callback used to set the value of the field on the item.\nUsed for editing operations to update field values."},{"key":"format","value":{"name":"union","raw":"FormatDatetime | FormatDate | FormatNumber | FormatInteger","elements":[{"name":"signature","type":"object","raw":"{\n\tdatetime?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"datetime","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"required":false},"description":"Display format configuration for fields."},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"intersection","raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n> & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","elements":[{"name":"Omit","elements":[{"name":"Field"},{"name":"union","raw":"'Edit' | 'isValid'","elements":[{"name":"literal","value":"'Edit'"},{"name":"literal","value":"'isValid'"}]}],"raw":"Omit<\n\tField< Item >,\n\t'Edit' | 'isValid'\n>"},{"name":"signature","type":"object","raw":"{\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\tsetValue: ( args: { item: Item; value: any } ) => DeepPartial< Item >;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\thasElements: boolean;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: NormalizedRules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: Required< FilterByConfig > | false;\n\tfilter: FilterOperatorMap< Item >;\n\treadOnly: boolean;\n\tisDisabled: ( args: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => boolean;\n\tformat:\n\t\t| {}\n\t\t| Required< FormatDate >\n\t\t| Required< FormatInteger >\n\t\t| Required< FormatNumber >;\n\tgetValueFormatted: ( {\n\t\titem,\n\t\tfield,\n\t}: {\n\t\titem: Item;\n\t\tfield: NormalizedField< Item >;\n\t} ) => string;\n}","signature":{"properties":[{"key":"label","value":{"name":"string","required":true}},{"key":"header","value":{"name":"union","raw":"string | ReactElement","elements":[{"name":"string"},{"name":"ReactElement"}],"required":true}},{"key":"getValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item } ) => any","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}}]}},"name":"args"}],"return":{"name":"any"}},"required":true}},{"key":"setValue","value":{"name":"signature","type":"function","raw":"( args: { item: Item; value: any } ) => DeepPartial< Item >","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{ item: Item; value: any }","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"value","value":{"name":"any","required":true}}]}},"name":"args"}],"return":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}}},"required":true}},{"key":"render","value":{"name":"ComponentType","elements":[{"name":"DataViewRenderFieldProps"}],"raw":"ComponentType< DataViewRenderFieldProps< Item > >","required":true}},{"key":"Edit","value":{"name":"union","raw":"ComponentType< DataFormControlProps< Item > > | null","elements":[{"name":"ComponentType","elements":[{"name":"signature","type":"object","raw":"{\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: DeepPartial< Item > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ required, instead of showing \"required\".\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n\t/**\n\t * Validity information for the field, if any.\n\t */\n\tvalidity?: FieldValidity;\n\t/**\n\t * Configuration object for the control.\n\t */\n\tconfig?: {\n\t\tprefix?: React.ComponentType;\n\t\tsuffix?: React.ComponentType;\n\t\trows?: number;\n\t\tcompact?: boolean;\n\t};\n}","signature":{"properties":[{"key":"data","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}},{"key":"onChange","value":{"name":"signature","type":"function","raw":"( value: DeepPartial< Item > ) => void","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n}","signature":{"properties":[{"key":{"name":"Item","required":false},"value":{"name":"unknown"}}]}},"name":"value"}],"return":{"name":"void"}},"required":true}},{"key":"hideLabelFromVision","value":{"name":"boolean","required":false}},{"key":"markWhenOptional","value":{"name":"boolean","required":false},"description":"Label the control as \"optional\" when _not_ required, instead of showing \"required\"."},{"key":"operator","value":{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},"description":"The currently selected filter operator for this field.\n\nUsed by DataViews filters to determine which control to render based on the operator type."},{"key":"validity","value":{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]},"required":false},"description":"Validity information for the field, if any."},{"key":"config","value":{"name":"signature","type":"object","raw":"{\n\tprefix?: React.ComponentType;\n\tsuffix?: React.ComponentType;\n\trows?: number;\n\tcompact?: boolean;\n}","signature":{"properties":[{"key":"prefix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"suffix","value":{"name":"ReactComponentType","raw":"React.ComponentType","required":false}},{"key":"rows","value":{"name":"number","required":false}},{"key":"compact","value":{"name":"boolean","required":false}}]},"required":false},"description":"Configuration object for the control."}]}}],"raw":"ComponentType< DataFormControlProps< Item > >"},{"name":"null"}],"required":true}},{"key":"hasElements","value":{"name":"boolean","required":true}},{"key":"sort","value":{"name":"signature","type":"function","raw":"( a: Item, b: Item, direction: SortDirection ) => number","signature":{"arguments":[{"type":{"name":"Item"},"name":"a"},{"type":{"name":"Item"},"name":"b"},{"type":{"name":"union","raw":"'asc' | 'desc'","elements":[{"name":"literal","value":"'asc'"},{"name":"literal","value":"'desc'"}]},"name":"direction"}],"return":{"name":"number"}},"required":true}},{"key":"isValid","value":{"name":"signature","type":"object","raw":"{\n\trequired?: NormalizedRule< Item, boolean >;\n\telements?: NormalizedRule< Item, boolean >;\n\tpattern?: NormalizedRule< Item, string >;\n\tminLength?: NormalizedRule< Item, number >;\n\tmaxLength?: NormalizedRule< Item, number >;\n\tmin?: NormalizedRule< Item, number >;\n\tmax?: NormalizedRule< Item, number >;\n\tcustom?: CustomValidator< Item >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\tconstraint: ConstraintType;\n\tvalidate: Validator< Item >;\n}","signature":{"properties":[{"key":"constraint","value":{"name":"boolean","required":true}},{"key":"validate","value":{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"}],"return":{"name":"boolean"}},"required":true}}]},"required":false}},{"key":"custom","value":{"name":"union","raw":"| ( ( item: Item, field: NormalizedField< Item > ) => null | string )\n| ( (\n\t\titem: Item,\n\t\tfield: NormalizedField< Item >\n ) => Promise< null | string > )","elements":[{"name":"unknown"},{"name":"unknown"}],"required":false}}]},"required":true}},{"key":"enableHiding","value":{"name":"boolean","required":true}},{"key":"enableSorting","value":{"name":"boolean","required":true}},{"key":"filterBy","value":{"name":"union","raw":"Required< FilterByConfig > | false","elements":[{"name":"Required","elements":[{"name":"FilterByConfig"}],"raw":"Required< FilterByConfig >"},{"name":"literal","value":"false"}],"required":true}},{"key":"filter","value":{"name":"Partial","elements":[{"name":"Record","elements":[{"name":"union","raw":"| 'is'\n| 'isNot'\n| 'isAny'\n| 'isNone'\n| 'isAll'\n| 'isNotAll'\n| 'lessThan'\n| 'greaterThan'\n| 'lessThanOrEqual'\n| 'greaterThanOrEqual'\n| 'before'\n| 'after'\n| 'beforeInc'\n| 'afterInc'\n| 'contains'\n| 'notContains'\n| 'startsWith'\n| 'between'\n| 'on'\n| 'notOn'\n| 'inThePast'\n| 'over'","elements":[{"name":"literal","value":"'is'"},{"name":"literal","value":"'isNot'"},{"name":"literal","value":"'isAny'"},{"name":"literal","value":"'isNone'"},{"name":"literal","value":"'isAll'"},{"name":"literal","value":"'isNotAll'"},{"name":"literal","value":"'lessThan'"},{"name":"literal","value":"'greaterThan'"},{"name":"literal","value":"'lessThanOrEqual'"},{"name":"literal","value":"'greaterThanOrEqual'"},{"name":"literal","value":"'before'"},{"name":"literal","value":"'after'"},{"name":"literal","value":"'beforeInc'"},{"name":"literal","value":"'afterInc'"},{"name":"literal","value":"'contains'"},{"name":"literal","value":"'notContains'"},{"name":"literal","value":"'startsWith'"},{"name":"literal","value":"'between'"},{"name":"literal","value":"'on'"},{"name":"literal","value":"'notOn'"},{"name":"literal","value":"'inThePast'"},{"name":"literal","value":"'over'"}],"required":false},{"name":"signature","type":"function","raw":"(\n\titem: Item,\n\tfield: NormalizedField< Item >,\n\tfilterValue: any\n) => boolean","signature":{"arguments":[{"type":{"name":"Item"},"name":"item"},{"type":{"name":"NormalizedField"},"name":"field"},{"type":{"name":"any"},"name":"filterValue"}],"return":{"name":"boolean"}}}],"raw":"Record< Operator, FilterOperator< Item > >"}],"raw":"Partial<\n\tRecord< Operator, FilterOperator< Item > >\n>","required":true}},{"key":"readOnly","value":{"name":"boolean","required":true}},{"key":"isDisabled","value":{"name":"signature","type":"function","raw":"( args: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => boolean","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":"args"}],"return":{"name":"boolean"}},"required":true}},{"key":"format","value":{"name":"union","raw":"| {}\n| Required< FormatDate >\n| Required< FormatInteger >\n| Required< FormatNumber >","elements":[{"name":"signature","type":"object","raw":"{}","signature":{"properties":[]}},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tdate?: string;\n\tweekStartsOn?: DayNumber;\n}","signature":{"properties":[{"key":"date","value":{"name":"string","required":false}},{"key":"weekStartsOn","value":{"name":"union","raw":"0 | 1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"0"},{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}],"required":false}}]}}],"raw":"Required< FormatDate >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}}]}}],"raw":"Required< FormatInteger >"},{"name":"Required","elements":[{"name":"signature","type":"object","raw":"{\n\tseparatorThousand?: string;\n\tseparatorDecimal?: string;\n\tdecimals?: number;\n}","signature":{"properties":[{"key":"separatorThousand","value":{"name":"string","required":false}},{"key":"separatorDecimal","value":{"name":"string","required":false}},{"key":"decimals","value":{"name":"number","required":false}}]}}],"raw":"Required< FormatNumber >"}],"required":true}},{"key":"getValueFormatted","value":{"name":"signature","type":"function","raw":"( {\n\titem,\n\tfield,\n}: {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n} ) => string","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n\titem: Item;\n\tfield: NormalizedField< Item >;\n}","signature":{"properties":[{"key":"item","value":{"name":"Item","required":true}},{"key":"field","value":{"name":"NormalizedField","required":true}}]}},"name":""}],"return":{"name":"string"}},"required":true}}]}}],"required":true}}]}},"name":""}],"return":{"name":"string"}},"required":false},"description":"Callback used to format the value of the field for display."}]}}],"raw":"Field< Item >[]"},"description":""},"form":{"required":true,"tsType":{"name":"signature","type":"object","raw":"{\n\tlayout?: Layout;\n\tfields?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"fields","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"signature","type":"object","raw":"{\n\tid: string;\n\tlabel?: string;\n\tdescription?: string;\n\tlayout?: Layout;\n\tchildren?: Array< FormField | string >;\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"label","value":{"name":"string","required":false}},{"key":"description","value":{"name":"string","required":false}},{"key":"layout","value":{"name":"union","raw":"| RegularLayout\n| PanelLayout\n| CardLayout\n| RowLayout\n| DetailsLayout","elements":[{"name":"signature","type":"object","raw":"{\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'regular'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?:\n\t\t| 'dropdown'\n\t\t| 'modal'\n\t\t| { type: 'dropdown' }\n\t\t| { type: 'modal'; applyLabel?: string; cancelLabel?: string };\n\tsummary?: PanelSummaryField;\n\teditVisibility?: EditVisibility;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'panel'","required":true}},{"key":"labelPosition","value":{"name":"union","raw":"'top' | 'side' | 'none'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'side'"},{"name":"literal","value":"'none'"}],"required":false}},{"key":"openAs","value":{"name":"union","raw":"| 'dropdown'\n| 'modal'\n| { type: 'dropdown' }\n| { type: 'modal'; applyLabel?: string; cancelLabel?: string }","elements":[{"name":"literal","value":"'dropdown'"},{"name":"literal","value":"'modal'"},{"name":"signature","type":"object","raw":"{ type: 'dropdown' }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'dropdown'","required":true}}]}},{"name":"signature","type":"object","raw":"{ type: 'modal'; applyLabel?: string; cancelLabel?: string }","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'modal'","required":true}},{"key":"applyLabel","value":{"name":"string","required":false}},{"key":"cancelLabel","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"summary","value":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false}},{"key":"editVisibility","value":{"name":"union","raw":"'always' | 'on-hover'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'on-hover'"}],"required":false}}]}},{"name":"union","raw":"| {\n\t\ttype: 'card';\n\t\twithHeader: false;\n\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t// Otherwise, the card would not be visible.\n\t\tisOpened?: true;\n\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\tisCollapsible?: false;\n }\n| {\n\t\ttype: 'card';\n\t\twithHeader?: true | undefined;\n\t\tisOpened?: boolean;\n\t\tsummary?: CardSummaryField;\n\t\tisCollapsible?: boolean | undefined;\n }","elements":[{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader: false;\n// isOpened cannot be false if withHeader is false as well.\n// Otherwise, the card would not be visible.\nisOpened?: true;\n// isCollapsible cannot be true if withHeader is false as well.\nisCollapsible?: false;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"literal","value":"false","required":true}},{"key":"isOpened","value":{"name":"literal","value":"true","required":false}},{"key":"isCollapsible","value":{"name":"literal","value":"false","required":false}}]}},{"name":"signature","type":"object","raw":"{\ntype: 'card';\nwithHeader?: true | undefined;\nisOpened?: boolean;\nsummary?: CardSummaryField;\nisCollapsible?: boolean | undefined;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'card'","required":true}},{"key":"withHeader","value":{"name":"union","raw":"true | undefined","elements":[{"name":"literal","value":"true"},{"name":"undefined"}],"required":false}},{"key":"isOpened","value":{"name":"boolean","required":false}},{"key":"summary","value":{"name":"union","raw":"| PanelSummaryField // Basic usage: string or string[]\n| Array<\n\t\t| string\n\t\t| {\n\t\t\t\tid: string;\n\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t }\n >","elements":[{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}],"required":false},{"name":"Array","elements":[{"name":"union","raw":"| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\nid: string;\nvisibility: 'always' | 'when-collapsed';\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"visibility","value":{"name":"union","raw":"'always' | 'when-collapsed'","elements":[{"name":"literal","value":"'always'"},{"name":"literal","value":"'when-collapsed'"}],"required":true}}]}}]}],"raw":"Array<\n| string\n| {\n\t\tid: string;\n\t\tvisibility: 'always' | 'when-collapsed';\n }\n>"}],"required":false}},{"key":"isCollapsible","value":{"name":"union","raw":"boolean | undefined","elements":[{"name":"boolean"},{"name":"undefined"}],"required":false}}]}}]},{"name":"signature","type":"object","raw":"{\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'row'","required":true}},{"key":"alignment","value":{"name":"union","raw":"'start' | 'center' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'center'"},{"name":"literal","value":"'end'"}],"required":false}},{"key":"styles","value":{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{ flex?: React.CSSProperties[ 'flex' ] }","signature":{"properties":[{"key":"flex","value":{"name":"ReactCSSProperties['flex']","raw":"React.CSSProperties[ 'flex' ]","required":false}}]}}],"raw":"Record< string, { flex?: React.CSSProperties[ 'flex' ] } >","required":false}}]}},{"name":"signature","type":"object","raw":"{\n\ttype: 'details';\n\tsummary?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"literal","value":"'details'","required":true}},{"key":"summary","value":{"name":"string","required":false}}]}}],"required":false}},{"key":"children","value":{"name":"Array","elements":[{"name":"union","raw":"FormField | string","elements":[{"name":"FormField"},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},{"name":"string"}]}],"raw":"Array< FormField | string >","required":false}}]}},"description":""},"onChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"( value: Record< string, any > ) => void","signature":{"arguments":[{"type":{"name":"Record","elements":[{"name":"string"},{"name":"any"}],"raw":"Record< string, any >"},"name":"value"}],"return":{"name":"void"}}},"description":""},"validity":{"required":false,"tsType":{"name":"union","raw":"Record< string, FieldValidity > | undefined","elements":[{"name":"Record","elements":[{"name":"string"},{"name":"signature","type":"object","raw":"{\n\trequired?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage?: string;\n\t};\n\tpattern?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmin?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmax?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tminLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tmaxLength?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\telements?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tcustom?: {\n\t\ttype: 'valid' | 'invalid' | 'validating';\n\t\tmessage: string;\n\t};\n\tchildren?: Record< string, FieldValidity >;\n}","signature":{"properties":[{"key":"required","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage?: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":false}}]},"required":false}},{"key":"pattern","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"min","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"max","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"minLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"maxLength","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"elements","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"custom","value":{"name":"signature","type":"object","raw":"{\n\ttype: 'valid' | 'invalid' | 'validating';\n\tmessage: string;\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"'valid' | 'invalid' | 'validating'","elements":[{"name":"literal","value":"'valid'"},{"name":"literal","value":"'invalid'"},{"name":"literal","value":"'validating'"}],"required":true}},{"key":"message","value":{"name":"string","required":true}}]},"required":false}},{"key":"children","value":{"name":"Record","elements":[{"name":"string"},{"name":"FieldValidity"}],"raw":"Record< string, FieldValidity >","required":false}}]}}],"raw":"Record< string, FieldValidity >"},{"name":"undefined"}]},"description":""}}}},"fields-base-fields":{"id":"fields-base-fields","name":"DataForm","path":"../packages/fields/src/stories/index.story.tsx","stories":[{"id":"fields-base-fields--data-forms-preview","name":"Data Forms Preview","snippet":"const DataFormsPreview = ( { type }: { type: 'regular' | 'panel' } ) => {\n\tconst [ data, setData ] = useState( samplePostWithAuthor );\n\n\tconst handleChange = ( updates: Partial< BasePostWithEmbeddedAuthor > ) => {\n\t\tsetData( ( prev ) => ( { ...prev, ...updates } ) );\n\t};\n\n\t// Form configuration for the showcase.\n\tconst showcaseForm: Form = {\n\t\tlayout: {\n\t\t\ttype,\n\t\t},\n\t\tfields: [\n\t\t\t'title',\n\t\t\t'slug',\n\t\t\t'status',\n\t\t\t'date',\n\t\t\t'author',\n\t\t\t'comment_status',\n\t\t\t'password',\n\t\t\t'menu_order',\n\t\t],\n\t};\n\n\treturn (\n\t\t<div style={ { padding: '20px' } }>\n\t\t\t<h2>Base Fields</h2>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates all the base fields from the\n\t\t\t\t@wordpress/fields package within a DataForm.\n\t\t\t</p>\n\n\t\t\t<DataForm\n\t\t\t\tdata={ data }\n\t\t\t\tfields={ showcaseFields }\n\t\t\t\tform={ showcaseForm }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t</div>\n\t);\n};"},{"id":"fields-base-fields--data-views-preview","name":"Data Views Preview","snippet":"const DataViewsPreview = () => {\n\tconst [ view, setView ] = useState< View >( {\n\t\ttype: 'table',\n\t\tfields: showcaseFields.map( ( f ) => f.id ),\n\t\ttitleField: 'title',\n\t\tdescriptionField: undefined,\n\t\tmediaField: undefined,\n\t} );\n\tconst [ data ] = useState( [ samplePostWithAuthor ] );\n\n\tconst paginationInfo = {\n\t\ttotalItems: 1,\n\t\ttotalPages: 1,\n\t};\n\n\tconst defaultLayouts = {\n\t\ttable: {},\n\t\tlist: {},\n\t\tgrid: {},\n\t};\n\n\treturn (\n\t\t<div style={ { padding: '20px' } }>\n\t\t\t<h2>Fields Package DataViews Preview</h2>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates all the base fields from the\n\t\t\t\t@wordpress/fields package, rendered in a DataViews component,\n\t\t\t\tallowing preview of view state and layout switching.\n\t\t\t</p>\n\t\t\t<DataViews\n\t\t\t\tdata={ data }\n\t\t\t\tfields={ showcaseFields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ ( nextView: View ) => setView( nextView ) }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t/>\n\t\t</div>\n\t);\n};"}],"import":"import { DataForm, DataViews } from \"@wordpress/dataviews\";","jsDocTags":{},"error":{"name":"Component file in node_modules","message":"File: /home/runner/work/gutenberg/gutenberg/node_modules/@wordpress/dataviews/build-module/index.mjs\nError:\nComponent files in node_modules are not supported.\nThe distributed files in node_modules usually don't contain the necessary comments or types needed to analyze component information.\nConfigure TypeScript path aliases to map your package name to the source file instead.\n\nExample (tsconfig.json):\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@design-system/button\": [\"src/components/Button.tsx\"],\n \"@design-system/*\": [\"src/components/*\"]\n }\n }\n}\n\nThen import using:\nimport { Button } from '@design-system/button'\n\nStorybook resolves tsconfig paths automatically.\nCode:\n/* File in node_modules */"}},"imagecropper-imagecropper":{"id":"imagecropper-imagecropper","name":"ImageCropper","path":"../packages/image-cropper/src/stories/index.story.tsx","stories":[{"id":"imagecropper-imagecropper--default","name":"Default","snippet":"const Default = () => {\n return (\n <ImageCropperProvider>\n <div className=\"image-cropper__container-wrapper-story\">\n <div className=\"image-cropper__container-story\">\n <ImageCropper\n src=\"https://s.w.org/images/core/5.3/MtBlanc1.jpg\"\n minZoom={1}\n maxZoom={5} />\n </div>\n </div>\n </ImageCropperProvider>\n );\n};"},{"id":"imagecropper-imagecropper--with-controls","name":"With Controls","snippet":"const WithControls = () => {\n return (\n <ImageCropperProvider>\n <WithControlsContent\n src=\"https://s.w.org/images/core/5.3/MtBlanc1.jpg\"\n minZoom={1}\n maxZoom={5} />\n </ImageCropperProvider>\n );\n};"}],"import":"import {\n __experimentalHeading as Heading,\n __experimentalHStack as HStack,\n SelectControl,\n __experimentalVStack as VStack,\n} from \"@wordpress/components\";\nimport { ImageCropper, ImageCropperProvider } from \"@wordpress/image-cropper\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ImageCropper","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/image-cropper/src/components/image-cropper/index.tsx","actualName":"ImageCropper","exportName":"default","props":{"src":{"required":true,"tsType":{"name":"string"},"description":""},"onLoad":{"required":false,"tsType":{"name":"signature","type":"function","raw":"( mediaSize: MediaSize ) => void","signature":{"arguments":[{"type":{"name":"MediaSize"},"name":"mediaSize"}],"return":{"name":"void"}}},"description":""},"minZoom":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"1","computed":false}},"maxZoom":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"5","computed":false}}}}},"fields-media-fields":{"id":"fields-media-fields","name":"DataForm","path":"../packages/media-fields/src/stories/index.story.tsx","stories":[{"id":"fields-media-fields--data-forms-preview","name":"Data Forms Preview","snippet":"const DataFormsPreview = ( { type }: { type: 'regular' | 'panel' } ) => {\n\tconst [ data, setData ] = useState< MediaItem >( sampleMediaItem );\n\n\tconst handleChange = ( updates: Partial< MediaItem > ) => {\n\t\tsetData( ( prev: MediaItem ) => ( { ...prev, ...updates } ) );\n\t};\n\n\t// Form configuration for the media fields showcase.\n\tconst showcaseForm: Form = {\n\t\tlayout: {\n\t\t\ttype,\n\t\t},\n\t\tfields: [\n\t\t\t'media_thumbnail',\n\t\t\t'alt_text',\n\t\t\t'caption',\n\t\t\t'description',\n\t\t\t'filename',\n\t\t\t'mime_type',\n\t\t\t'media_dimensions',\n\t\t\t'filesize',\n\t\t\t'author',\n\t\t\t'date',\n\t\t\t'modified',\n\t\t\t'attached_to',\n\t\t],\n\t};\n\n\treturn (\n\t\t<div style={ { padding: '20px' } }>\n\t\t\t<h2>Media Fields</h2>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates all the media fields from the\n\t\t\t\t@wordpress/media-fields package within a DataForm.\n\t\t\t</p>\n\n\t\t\t<DataForm\n\t\t\t\tdata={ data }\n\t\t\t\tfields={ showcaseFields }\n\t\t\t\tform={ showcaseForm }\n\t\t\t\tonChange={ handleChange }\n\t\t\t/>\n\t\t</div>\n\t);\n};"},{"id":"fields-media-fields--data-views-preview","name":"Data Views Preview","snippet":"const DataViewsPreview = () => {\n\tconst [ view, setView ] = useState< View >( {\n\t\ttype: 'table',\n\t\tfields: showcaseFields\n\t\t\t.map( ( f ) => f.id )\n\t\t\t.filter( ( id ) => id !== 'media_thumbnail' ),\n\t\tdescriptionField: undefined,\n\t\tmediaField: 'media_thumbnail',\n\t\tshowTitle: false,\n\t} );\n\tconst [ data ] = useState< MediaItem[] >( [\n\t\tsampleMediaItem,\n\t\tsampleMediaItemZip,\n\t\tsampleMediaItemBrokenImage,\n\t] );\n\n\tconst paginationInfo = {\n\t\ttotalItems: 3,\n\t\ttotalPages: 1,\n\t};\n\n\tconst defaultLayouts = {\n\t\ttable: {},\n\t\tlist: {},\n\t\tgrid: {},\n\t};\n\n\treturn (\n\t\t<div style={ { padding: '20px' } }>\n\t\t\t<h2>Media Fields DataViews Preview</h2>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates all the media fields from the\n\t\t\t\t@wordpress/media-fields package, rendered in a DataViews\n\t\t\t\tcomponent, allowing preview of view state and layout switching.\n\t\t\t</p>\n\t\t\t<DataViews\n\t\t\t\tdata={ data }\n\t\t\t\tfields={ showcaseFields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ ( nextView: View ) => setView( nextView ) }\n\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t/>\n\t\t</div>\n\t);\n};"}],"import":"import { DataForm, DataViews } from \"@wordpress/dataviews\";","jsDocTags":{},"error":{"name":"Component file in node_modules","message":"File: /home/runner/work/gutenberg/gutenberg/node_modules/@wordpress/dataviews/build-module/index.mjs\nError:\nComponent files in node_modules are not supported.\nThe distributed files in node_modules usually don't contain the necessary comments or types needed to analyze component information.\nConfigure TypeScript path aliases to map your package name to the source file instead.\n\nExample (tsconfig.json):\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@design-system/button\": [\"src/components/Button.tsx\"],\n \"@design-system/*\": [\"src/components/*\"]\n }\n }\n}\n\nThen import using:\nimport { Button } from '@design-system/button'\n\nStorybook resolves tsconfig paths automatically.\nCode:\n/* File in node_modules */"}},"admin-ui-breadcrumbs":{"id":"admin-ui-breadcrumbs","name":"Breadcrumbs","path":"../packages/admin-ui/src/breadcrumbs/stories/index.story.tsx","stories":[{"id":"admin-ui-breadcrumbs--single-item","name":"Single Item","snippet":"const SingleItem = () => <Breadcrumbs items={[ { label: 'Root breadcrumb' } ]} />;"},{"id":"admin-ui-breadcrumbs--two-levels","name":"Two Levels","snippet":"const TwoLevels = () => <Breadcrumbs\n items={[\n { label: 'Root breadcrumb', to: '/settings' },\n { label: 'Level 1 breadcrumb' },\n ]} />;"},{"id":"admin-ui-breadcrumbs--three-levels","name":"Three Levels","snippet":"const ThreeLevels = () => <Breadcrumbs\n items={[\n { label: 'Root breadcrumb', to: '/settings' },\n { label: 'Level 1 breadcrumb', to: '/settings/connectors' },\n { label: 'Level 2 breadcrumb' },\n ]} />;"}],"import":"import { Breadcrumbs } from \"@wordpress/admin-ui\";","jsDocTags":{"param":["props ","props.items The breadcrumb items to display."],"example":[" ```jsx <Breadcrumbs items={ [ { label: 'Home', to: '/' }, { label: 'Settings', to: '/settings' }, { label: 'General' }, ] } /> ```"]},"description":"Renders a breadcrumb navigation trail. All items except the last one must provide a `to` prop for navigation. In development mode, an error is thrown when a non-last item is missing `to`. The last item represents the current page and its `to` prop is optional. Only the last item (when it has no `to` prop) is rendered as an `h1`.","reactDocgen":{"description":"Renders a breadcrumb navigation trail.\n\nAll items except the last one must provide a `to` prop for navigation.\nIn development mode, an error is thrown when a non-last item is missing `to`.\nThe last item represents the current page and its `to` prop is optional.\nOnly the last item (when it has no `to` prop) is rendered as an `h1`.\n\n@param props\n@param props.items The breadcrumb items to display.\n\n@example\n```jsx\n<Breadcrumbs\n items={ [\n { label: 'Home', to: '/' },\n { label: 'Settings', to: '/settings' },\n { label: 'General' },\n ] }\n/>\n```","methods":[],"displayName":"Breadcrumbs","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/admin-ui/src/breadcrumbs/index.tsx","actualName":"Breadcrumbs","exportName":"Breadcrumbs","props":{"items":{"required":true,"tsType":{"name":"Array","elements":[{"name":"BreadcrumbItem"}],"raw":"BreadcrumbItem[]"},"description":"An array of items to display in the breadcrumb trail.\nThe last item is considered the current item and has an optional `to` prop.\nAll preceding items must have a `to` prop — in development mode,\nan error is thrown when this requirement is not met."},"showCurrentItem":{"required":false,"tsType":{"name":"boolean"},"description":"A boolean to show/hide the current item in the trail.\nNote that when `false` the current item is only visually hidden."}}}},"admin-ui-page":{"id":"admin-ui-page","name":"Page","path":"../packages/admin-ui/src/page/stories/index.story.tsx","stories":[{"id":"admin-ui-page--default","name":"Default","snippet":"const Default = () => <Page title=\"Page title\" showSidebarToggle={false} hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-subtitle","name":"With Subtitle","snippet":"const WithSubtitle = () => <Page\n title=\"Page title\"\n subTitle=\"All of the subtitle text you need goes here.\"\n showSidebarToggle={false}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-breadcrumbs","name":"With Breadcrumbs","snippet":"const WithBreadcrumbs = () => <Page\n showSidebarToggle={false}\n breadcrumbs={(<Breadcrumbs\n items={ [\n { label: 'Root breadcrumb', to: '/connectors' },\n { label: 'Level 1 breadcrumb' },\n ] }\n />)}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-breadcrumbs-and-subtitle","name":"With Breadcrumbs And Subtitle","snippet":"const WithBreadcrumbsAndSubtitle = () => <Page\n showSidebarToggle={false}\n subTitle=\"All of the subtitle text you need goes here.\"\n breadcrumbs={(<Breadcrumbs\n items={ [\n { label: 'Root breadcrumb', to: '/connectors' },\n { label: 'Level 1 breadcrumb' },\n ] }\n />)}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--without-header","name":"Without Header","snippet":"const WithoutHeader = () => <Page showSidebarToggle={false} hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-title-and-badges","name":"With Title And Badges","snippet":"const WithTitleAndBadges = () => <Page\n title=\"Page title\"\n badges={<Badge intent=\"informational\">Status</Badge>}\n showSidebarToggle={false}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-breadcrumbs-and-badges","name":"With Breadcrumbs And Badges","snippet":"const WithBreadcrumbsAndBadges = () => <Page\n showSidebarToggle={false}\n breadcrumbs={(<Breadcrumbs\n items={ [\n { label: 'Root breadcrumb', to: '/connectors' },\n { label: 'Level 1 breadcrumb' },\n ] }\n />)}\n badges={<Badge intent=\"none\">Published</Badge>}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--with-actions","name":"With Actions","snippet":"const WithActions = () => <Page\n title=\"Page title\"\n actions={(<>\n <Button size=\"compact\" variant=\"outline\">\n Cancel\n </Button>\n <Button size=\"compact\" variant=\"solid\">\n Save\n </Button>\n </>)}\n showSidebarToggle={false}\n hasPadding><Text>Page content here</Text></Page>;"},{"id":"admin-ui-page--full-header","name":"Full Header","snippet":"const FullHeader = () => <Page\n subTitle=\"All of the subtitle text you need goes here.\"\n breadcrumbs={(<Breadcrumbs\n items={ [\n { label: 'Root breadcrumb', to: '/connectors' },\n { label: 'Level 1 breadcrumb' },\n ] }\n />)}\n badges={<Badge intent=\"informational\">Status</Badge>}\n actions={(<>\n <Button size=\"compact\" variant=\"outline\">\n Cancel\n </Button>\n <Button size=\"compact\" variant=\"solid\">\n Save\n </Button>\n </>)}\n showSidebarToggle={false}\n hasPadding><Text>Page content here</Text></Page>;"}],"import":"import { Badge, Button, Text } from \"@wordpress/ui\";\nimport { Breadcrumbs, Page } from \"@wordpress/admin-ui\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Page","definedInFile":"/home/runner/work/gutenberg/gutenberg/packages/admin-ui/src/page/index.tsx","actualName":"Page","exportName":"default","props":{"headingLevel":{"required":false,"tsType":{"name":"union","raw":"1 | 2 | 3 | 4 | 5 | 6","elements":[{"name":"literal","value":"1"},{"name":"literal","value":"2"},{"name":"literal","value":"3"},{"name":"literal","value":"4"},{"name":"literal","value":"5"},{"name":"literal","value":"6"}]},"description":""},"breadcrumbs":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"badges":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"title":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"subTitle":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"children":{"required":true,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"actions":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"ariaLabel":{"required":false,"tsType":{"name":"string"},"description":""},"hasPadding":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"showSidebarToggle":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"true","computed":false}}}}}}}