npm - @wordpress/components - Versions diffs - 25.13.0 → 25.14.0 - Mend

@wordpress/components 25.13.0 → 25.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

package/build-module/palette-edit/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["classnames","paramCase","kebabCase","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","createElement","hideLabelFromVision","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","color","enableAlpha","newColor","__nextHasNoMargin","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","popoverAnchor","setPopoverAnchor","anchor","undefined","as","onClick","ref","style","cursor","justify","background","name","nextName","isSmall","icon","isTemporaryElement","regex","test","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","spacing","isRounded","map","index","key","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","level","isPressed","tempOptionName","toggleProps","Fragment","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { paramCase as kebabCase } from 'change-case';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A unique name for a palette item.\n /\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/ translators: %s: is a temporary id for a custom color /\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color \| Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\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\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\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</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color \| Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\tref={ setPopoverAnchor }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\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\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color \| Gradient\n) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) \|\|\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView< T extends Color \| Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\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);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const 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 * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\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{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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\tclassName=\"components-palette-edit__menu-button\"\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{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\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\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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\tclassName=\"components-palette-edit__menu-button\"\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{ isGradient\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\t\t'Remove all gradients'\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: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\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</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\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\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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"}
1	+ {"version":3,"names":["classnames","paramCase","kebabCase","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","createElement","hideLabelFromVision","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","color","enableAlpha","newColor","__nextHasNoMargin","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","popoverAnchor","setPopoverAnchor","anchor","undefined","as","onClick","ref","style","cursor","justify","background","name","nextName","isSmall","icon","isTemporaryElement","regex","test","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","spacing","isRounded","map","index","key","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","level","isPressed","tempOptionName","toggleProps","Fragment","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { paramCase as kebabCase } from 'change-case';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nexport const DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A unique name for a palette item.\n /\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/ translators: %s: is a temporary id for a custom color /\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color \| Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\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\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\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</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color \| Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\tref={ setPopoverAnchor }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\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\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\n/\n Checks if a color or gradient is a temporary element by testing against default values.\n /\nexport function isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color \| Gradient\n): Boolean {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\n\t// If the slug matches the temporary name regex,\n\t// check if the color or gradient matches the default value.\n\tif ( regex.test( slug ) ) {\n\t\t// The order is important as gradient elements\n\t\t// contain a color property.\n\t\tif ( !! gradient ) {\n\t\t\treturn gradient === DEFAULT_GRADIENT;\n\t\t}\n\n\t\tif ( !! color ) {\n\t\t\treturn color === DEFAULT_COLOR;\n\t\t}\n\t}\n\n\treturn false;\n}\n\nfunction PaletteEditListView< T extends Color \| Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\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);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const 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 * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\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{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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\tclassName=\"components-palette-edit__menu-button\"\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{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\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\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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\tclassName=\"components-palette-edit__menu-button\"\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{ isGradient\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\t\t'Remove all gradients'\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: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\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</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\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\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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"}

package/build-module/query-controls/author-select.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { createElement } from "react";
 import { buildTermsTree } from './terms';
 import TreeSelect from '../tree-select';
 export default function AuthorSelect({
+  __next40pxDefaultSize,
   label,
   noOptionLabel,
   authorList,
@@ -19,7 +20,8 @@ export default function AuthorSelect({
     onChange: onChangeProp,
     tree: termsTree,
     selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined,
-    __nextHasNoMarginBottom: true
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize
   });
 }
 //# sourceMappingURL=author-select.js.map

package/build-module/query-controls/author-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["buildTermsTree","TreeSelect","AuthorSelect","label","noOptionLabel","authorList","selectedAuthorId","onChange","onChangeProp","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/author-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n */\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\nimport type { AuthorSelectProps } from './types';\n\nexport default function AuthorSelect( {\n\tlabel,\n\tnoOptionLabel,\n\tauthorList,\n\tselectedAuthorId,\n\tonChange: onChangeProp,\n}: AuthorSelectProps ) {\n\tif ( ! authorList ) return null;\n\tconst termsTree = buildTermsTree( authorList );\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedAuthorId !== undefined\n\t\t\t\t\t? String( selectedAuthorId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;AAGvC,eAAe,SAASC,YAAYA,CAAE;EACrCC,KAAK;EACLC,aAAa;EACbC,UAAU;EACVC,gBAAgB;EAChBC,QAAQ,EAAEC;AACQ,CAAC,EAAG;EACtB,IAAK,CAAEH,UAAU,EAAG,OAAO,IAAI;EAC/B,MAAMI,SAAS,~~GAAGT~~,cAAc,~~CAAEK~~,UAAW,CAAC;EAC9C,OACCK,aAAA,~~CAACT~~,UAAU;~~IAETE~~,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBG,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTN,gBAAgB,KAAKO,SAAS,GAC3BC,MAAM,CAAER,gBAAiB,CAAC,GAC1BO,SACH;IACDE,uBAAuB;~~EAAA~~,~~CACvB~~,CAAC;AAEJ"}
1	+ {"version":3,"names":["buildTermsTree","TreeSelect","AuthorSelect","__next40pxDefaultSize","label","noOptionLabel","authorList","selectedAuthorId","onChange","onChangeProp","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/author-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n */\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\nimport type { AuthorSelectProps } from './types';\n\nexport default function AuthorSelect( {\n\t__next40pxDefaultSize,\n\tlabel,\n\tnoOptionLabel,\n\tauthorList,\n\tselectedAuthorId,\n\tonChange: onChangeProp,\n}: AuthorSelectProps ) {\n\tif ( ! authorList ) return null;\n\tconst termsTree = buildTermsTree( authorList );\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedAuthorId !== undefined\n\t\t\t\t\t? String( selectedAuthorId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;AAGvC,eAAe,SAASC,YAAYA,CAAE;EACrCC,qBAAqB;EACrBC,KAAK;EACLC,aAAa;EACbC,UAAU;EACVC,gBAAgB;EAChBC,QAAQ,EAAEC;AACQ,CAAC,EAAG;EACtB,IAAK,CAAEH,UAAU,EAAG,OAAO,IAAI;EAC/B,MAAMI,SAAS,GAAGV,cAAc,CAAEM,UAAW,CAAC;EAC9C,OACCK,aAAA,CAACV,UAAU;IAETG,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBG,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTN,gBAAgB,KAAKO,SAAS,GAC3BC,MAAM,CAAER,gBAAiB,CAAC,GAC1BO,SACH;IACDE,uBAAuB;IACvBb,qBAAqB,EAAGA;EAAuB,CAC/C,CAAC;AAEJ"}

package/build-module/query-controls/category-select.js CHANGED Viewed

@@ -10,6 +10,7 @@ import TreeSelect from '../tree-select';
  */
 import { useMemo } from '@wordpress/element';
 export default function CategorySelect({
+  __next40pxDefaultSize,
   label,
   noOptionLabel,
   categoriesList,
@@ -27,7 +28,8 @@ export default function CategorySelect({
     tree: termsTree,
     selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,
     ...props,
-    __nextHasNoMarginBottom: true
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize
   });
 }
 //# sourceMappingURL=category-select.js.map

package/build-module/query-controls/category-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["buildTermsTree","TreeSelect","useMemo","CategorySelect","label","noOptionLabel","categoriesList","selectedCategoryId","onChange","onChangeProp","props","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/category-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n /\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\n\n/\n WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { CategorySelectProps } from './types';\n\nexport default function CategorySelect( {\n\tlabel,\n\tnoOptionLabel,\n\tcategoriesList,\n\tselectedCategoryId,\n\tonChange: onChangeProp,\n\t...props\n}: CategorySelectProps ) {\n\tconst termsTree = useMemo( () => {\n\t\treturn buildTermsTree( categoriesList );\n\t}, [ categoriesList ] );\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedCategoryId !== undefined\n\t\t\t\t\t? String( selectedCategoryId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;;AAEvC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,eAAe,SAASC,cAAcA,CAAE;EACvCC,KAAK;EACLC,aAAa;EACbC,cAAc;EACdC,kBAAkB;EAClBC,QAAQ,EAAEC,YAAY;EACtB,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,SAAS,~~GAAGT~~,OAAO,CAAE,MAAM;IAChC,OAAOF,cAAc,~~CAAEM~~,cAAe,CAAC;EACxC,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,OACCM,aAAA,~~CAACX~~,UAAU;~~IAETG~~,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBI,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTP,kBAAkB,KAAKQ,SAAS,GAC7BC,MAAM,CAAET,kBAAmB,CAAC,GAC5BQ,SACH;IAAA,GACIL,KAAK;IACVO,uBAAuB;~~EAAA~~,~~CACvB~~,CAAC;AAEJ"}
1	+ {"version":3,"names":["buildTermsTree","TreeSelect","useMemo","CategorySelect","__next40pxDefaultSize","label","noOptionLabel","categoriesList","selectedCategoryId","onChange","onChangeProp","props","termsTree","createElement","tree","selectedId","undefined","String","__nextHasNoMarginBottom"],"sources":["@wordpress/components/src/query-controls/category-select.tsx"],"sourcesContent":["/*\n Internal dependencies\n /\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\n\n/\n WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { CategorySelectProps } from './types';\n\nexport default function CategorySelect( {\n\t__next40pxDefaultSize,\n\tlabel,\n\tnoOptionLabel,\n\tcategoriesList,\n\tselectedCategoryId,\n\tonChange: onChangeProp,\n\t...props\n}: CategorySelectProps ) {\n\tconst termsTree = useMemo( () => {\n\t\treturn buildTermsTree( categoriesList );\n\t}, [ categoriesList ] );\n\n\treturn (\n\t\t<TreeSelect\n\t\t\t{ ...{\n\t\t\t\tlabel,\n\t\t\t\tnoOptionLabel,\n\t\t\t\tonChange: onChangeProp,\n\t\t\t} }\n\t\t\ttree={ termsTree }\n\t\t\tselectedId={\n\t\t\t\tselectedCategoryId !== undefined\n\t\t\t\t\t? String( selectedCategoryId )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,SAAS;AACxC,OAAOC,UAAU,MAAM,gBAAgB;;AAEvC;AACA;AACA;AACA,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,eAAe,SAASC,cAAcA,CAAE;EACvCC,qBAAqB;EACrBC,KAAK;EACLC,aAAa;EACbC,cAAc;EACdC,kBAAkB;EAClBC,QAAQ,EAAEC,YAAY;EACtB,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,SAAS,GAAGV,OAAO,CAAE,MAAM;IAChC,OAAOF,cAAc,CAAEO,cAAe,CAAC;EACxC,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,OACCM,aAAA,CAACZ,UAAU;IAETI,KAAK;IACLC,aAAa;IACbG,QAAQ,EAAEC,YAAY;IAEvBI,IAAI,EAAGF,SAAW;IAClBG,UAAU,EACTP,kBAAkB,KAAKQ,SAAS,GAC7BC,MAAM,CAAET,kBAAmB,CAAC,GAC5BQ,SACH;IAAA,GACIL,KAAK;IACVO,uBAAuB;IACvBd,qBAAqB,EAAGA;EAAuB,CAC/C,CAAC;AAEJ"}

package/build-module/query-controls/index.js CHANGED Viewed

@@ -49,6 +49,7 @@ function isMultipleCategorySelection(props) {
  * ```
  */
 export function QueryControls({
+  __next40pxDefaultSize = false,
   authorList,
   selectedAuthorId,
   numberOfItems,
@@ -69,6 +70,7 @@ export function QueryControls({
     className: "components-query-controls"
   }, [onOrderChange && onOrderByChange && createElement(SelectControl, {
     __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-order-select",
     label: __('Order by'),
     value: `${orderBy}/${order}`,
@@ -100,6 +102,7 @@ export function QueryControls({
       }
     }
   }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && createElement(CategorySelect, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-category-select",
     categoriesList: props.categoriesList,
     label: __('Category'),
@@ -107,6 +110,7 @@ export function QueryControls({
     selectedCategoryId: props.selectedCategoryId,
     onChange: props.onCategoryChange
   }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && createElement(FormTokenField, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     __nextHasNoMarginBottom: true,
     key: "query-controls-categories-select",
     label: __('Categories'),
@@ -122,6 +126,7 @@ export function QueryControls({
     onChange: props.onCategoryChange,
     maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
   }), onAuthorChange && createElement(AuthorSelect, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-author-select",
     authorList: authorList,
     label: __('Author'),
@@ -130,7 +135,7 @@ export function QueryControls({
     onChange: onAuthorChange
   }), onNumberOfItemsChange && createElement(RangeControl, {
     __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     key: "query-controls-range-control",
     label: __('Number of items'),
     value: numberOfItems,

package/build-module/query-controls/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","createElement","spacing","className","__nextHasNoMarginBottom","key","label","value","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","__next40pxDefaultSize","min","max","required"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/\n Controls to query for posts.\n \n ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\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 * ```\n /\nexport function QueryControls( {\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in ascending order /\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\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}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\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}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name \|\| item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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"}
1	+ {"version":3,"names":["__","AuthorSelect","CategorySelect","FormTokenField","RangeControl","SelectControl","VStack","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","__next40pxDefaultSize","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","createElement","spacing","className","__nextHasNoMarginBottom","key","label","value","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","min","max","required"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/\n Controls to query for posts.\n \n ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\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 * ```\n /\nexport function QueryControls( {\n\t__next40pxDefaultSize = false,\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in ascending order /\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/ translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\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}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\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}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name \|\| item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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"}

package/build-module/query-controls/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number \| null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n};\n\ntype Order = 'asc' \| 'desc';\ntype OrderBy = 'date' \| 'title';\n\ntype BaseQueryControlsProps = {\n\t/\n\t An array of the authors to select from.\n\t /\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/\n\t The maximum number of items.\n\t \n\t @default 100\n\t /\n\tmaxItems?: number;\n\t/\n\t The minimum number of items.\n\t \n\t @default 1\n\t /\n\tminItems?: number;\n\t/\n\t The selected number of items to retrieve via the query.\n\t /\n\tnumberOfItems?: number;\n\t/\n\t A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t /\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/\n\t A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t /\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/\n\t A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/\n\t A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/\n\t The order in which to retrieve posts.\n\t /\n\torder?: Order;\n\t/\n\t The meta key by which to order posts.\n\t /\n\torderBy?: OrderBy;\n\t/\n\t The selected author ID.\n\t /\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\n};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t /\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/\n\t\t The selected category for the `categoriesList` prop.\n\t\t /\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t /\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t /\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/\n\t\t The selected categories for the `categorySuggestions` prop.\n\t\t /\n\t\tselectedCategories?: Category[];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t\| QueryControlsWithSingleCategorySelectionProps\n\t\| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number \| null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' \| 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\ntype Order = 'asc' \| 'desc';\ntype OrderBy = 'date' \| 'title';\n\ntype BaseQueryControlsProps = {\n\t/\n\t An array of the authors to select from.\n\t /\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/\n\t The maximum number of items.\n\t \n\t @default 100\n\t /\n\tmaxItems?: number;\n\t/\n\t The minimum number of items.\n\t \n\t @default 1\n\t /\n\tminItems?: number;\n\t/\n\t The selected number of items to retrieve via the query.\n\t /\n\tnumberOfItems?: number;\n\t/\n\t A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t /\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/\n\t A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t /\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/\n\t A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/\n\t A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t /\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/\n\t The order in which to retrieve posts.\n\t /\n\torder?: Order;\n\t/\n\t The meta key by which to order posts.\n\t /\n\torderBy?: OrderBy;\n\t/\n\t The selected author ID.\n\t /\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\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};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t /\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/\n\t\t The selected category for the `categoriesList` prop.\n\t\t /\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t /\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/\n\t\t An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t /\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/\n\t\t The selected categories for the `categorySuggestions` prop.\n\t\t /\n\t\tselectedCategories?: Category[];\n\t\t/\n\t\t A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t\| QueryControlsWithSingleCategorySelectionProps\n\t\| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":""}

package/build-module/tabs/index.js CHANGED Viewed

@@ -44,7 +44,8 @@ function Tabs({
     selectedId
   } = store.useState();
   const {
-    setSelectedId
+    setSelectedId,
+    move
   } = store;
   // Keep track of whether tabs have been populated. This is used to prevent
@@ -128,6 +129,22 @@ function Tabs({
       setSelectedId(null);
     }
   }, [isControlled, selectedId, selectedTab, selectedTabId, setSelectedId]);
+  // In controlled mode, make sure browser focus follows the selected tab if
+  // the selection is changed while a tab is already being focused.
+  useLayoutEffect(() => {
+    if (!isControlled || !selectOnMove) {
+      return;
+    }
+    const currentItem = items.find(item => item.id === selectedId);
+    const activeElement = currentItem?.element?.ownerDocument.activeElement;
+    const tabsHasFocus = items.some(item => {
+      return activeElement && activeElement === item.element;
+    });
+    if (activeElement && tabsHasFocus && selectedId !== activeElement.id) {
+      move(selectedId);
+    }
+  }, [isControlled, items, move, selectOnMove, selectedId]);
   const contextValue = useMemo(() => ({
     store,
     instanceId

package/build-module/tabs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","contextValue","createElement","Provider","value","Context"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tstore,\n\t\t\tinstanceId,\n\t\t} ),\n\t\t[ store, instanceId ]\n\t);\n\n\treturn (\n\t\t<TabsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nTabs.Context = TabsContext;\n\nexport default Tabs;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAQ,oBAAoB;;AAErE;AACA;AACA;;AAEA,SAASC,WAAW,QAAQ,WAAW;AACvC,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,IAAIA,CAAE;EACdC,YAAY,GAAG,IAAI;EACnBC,YAAY;EACZC,WAAW,GAAG,YAAY;EAC1BC,QAAQ;EACRC,QAAQ;EACRC;AACU,CAAC,EAAG;EACd,MAAMC,UAAU,GAAGf,aAAa,CAAEQ,IAAI,EAAE,MAAO,CAAC;EAChD,MAAMQ,KAAK,GAAGjB,OAAO,CAACkB,WAAW,CAAE;IAClCR,YAAY;IACZE,WAAW;IACXO,iBAAiB,EAAER,YAAY,IAAK,GAAGK,UAAY,IAAIL,YAAc,EAAC;IACtES,aAAa,EAAIC,UAAU,IAAM;MAChC,MAAMC,cAAc,GACnB,OAAOD,UAAU,KAAK,QAAQ,GAC3BA,UAAU,CAACE,OAAO,CAAG,GAAGP,UAAY,GAAE,EAAE,EAAG,CAAC,GAC5CK,UAAU;MACdR,QAAQ,GAAIS,cAAe,CAAC;IAC7B,CAAC;IACDD,UAAU,EAAEN,aAAa,IAAK,GAAGC,UAAY,IAAID,aAAe;EACjE,CAAE,CAAC;EAEH,MAAMS,YAAY,GAAGT,aAAa,KAAKU,SAAS;EAEhD,MAAM;IAAEC,KAAK;IAAEL;EAAW,CAAC,GAAGJ,KAAK,CAACU,QAAQ,CAAC,CAAC;EAC9C,MAAM;IAAEP;~~EAAc~~,CAAC,~~GAAGH~~,KAAK;;~~EAE/B~~;EACA;EACA;EACA,~~MAAMW~~,iBAAiB,~~GAAGxB~~,MAAM,CAAE,KAAM,CAAC;EACzC,IAAKsB,KAAK,~~CAACG~~,MAAM,GAAG,CAAC,EAAG;IACvBD,iBAAiB,CAACE,OAAO,GAAG,IAAI;EACjC;EAEA,MAAMC,WAAW,~~GAAGL~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,~~KAAKb~~,UAAW,CAAC;EACpE,~~MAAMc~~,eAAe,~~GAAGT~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAM;IAC/C;IACA,OAAO,CAAEA,IAAI,CAACG,MAAM;EACrB,CAAE,CAAC;EACH,MAAMC,UAAU,~~GAAGX~~,KAAK,~~CAACM~~,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACC,EAAE,KAAM,~~GAAGlB~~,UAAY,IAAIL,YAAc,EAC3D,CAAC;;EAED;EACAT,eAAe,CAAE,MAAM;IACtB,IAAKsB,YAAY,EAAG;MACnB;IACD;;IAEA;IACA;IACA;IACA;IACA,IAAKb,YAAY,IAAI,~~CAAE0B~~,UAAU,EAAG;MACnC;IACD;;IAEA;IACA;IACA;IACA,IAAK,~~CAAEX~~,KAAK,~~CAACM~~,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE,~~KAAKb~~,UAAW,CAAC,EAAG;MACzD,~~IAAKgB~~,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;~~QACxChB~~,aAAa,~~CAAEiB~~,UAAU,EAAEH,EAAG,CAAC;QAC/B;MACD;MAEA,IAAKC,eAAe,EAAG;~~QACtBf~~,aAAa,~~CAAEe~~,eAAe,CAACD,EAAG,CAAC;MACpC,CAAC,MAAM,IAAKN,iBAAiB,CAACE,OAAO,EAAG;~~QACvCV~~,aAAa,CAAE,IAAK,CAAC;MACtB;IACD;EACD,CAAC,EAAE,~~CACFe~~,eAAe,EACfE,UAAU,~~EACV1B~~,YAAY,EACZa,YAAY,EACZE,KAAK,EACLL,UAAU,EACVD,aAAa,CACZ,CAAC;;EAEH;EACAlB,eAAe,CAAE,MAAM;IACtB,IAAK,~~CAAE6B~~,WAAW,EAAEK,MAAM,EAAG;MAC5B;IACD;;IAEA;IACA;IACA,~~IAAKZ~~,YAAY,EAAG;MACnBJ,aAAa,CAAE,IAAK,CAAC;MACrB;IACD;;IAEA;IACA;IACA;IACA,~~IAAKiB~~,UAAU,IAAI,CAAEA,UAAU,CAACD,MAAM,EAAG;~~MACxChB~~,aAAa,~~CAAEiB~~,UAAU,CAACH,EAAG,CAAC;MAC9B;IACD;IAEA,IAAKC,eAAe,EAAG;~~MACtBf~~,aAAa,~~CAAEe~~,eAAe,CAACD,EAAG,CAAC;IACpC;EACD,CAAC,EAAE,CACFC,eAAe,EACfE,UAAU,~~EACVb~~,YAAY,~~EACZO~~,WAAW,EAAEK,MAAM,~~EACnBhB~~,aAAa,CACZ,CAAC;;EAEH;EACAlB,eAAe,CAAE,MAAM;IACtB,IAAK,CAAEsB,YAAY,EAAG;MACrB;IACD;;IAEA;IACA;IACA,~~IAAKI~~,iBAAiB,CAACE,OAAO,IAAI,CAAC,~~CAAEf~~,aAAa,IAAI,~~CAAEgB~~,WAAW,EAAG;~~MACrEX~~,aAAa,CAAE,IAAK,CAAC;IACtB;EACD,CAAC,EAAE,CACFI,YAAY,EACZH,UAAU,~~EACVU~~,WAAW,~~EACXhB~~,aAAa,EACbK,aAAa,CACZ,CAAC;~~EAEH~~,~~MAAMkB~~,YAAY,~~GAAGnC~~,OAAO,CAC3B,OAAQ;IACPc,KAAK;IACLD;EACD,CAAC,CAAE,EACH,CAAEC,KAAK,EAAED,UAAU,CACpB,CAAC;EAED,~~OACCuB~~,aAAA,~~CAAClC~~,WAAW,~~CAACmC~~,QAAQ;IAACC,KAAK,EAAGH;EAAc,~~GACzCxB~~,QACmB,CAAC;AAEzB;AAEAL,IAAI,CAACF,OAAO,GAAGA,OAAO;AACtBE,IAAI,CAACH,GAAG,GAAGA,GAAG;AACdG,IAAI,CAACD,QAAQ,GAAGA,QAAQ;AACxBC,IAAI,~~CAACiC~~,OAAO,~~GAAGrC~~,WAAW;AAE1B,eAAeI,IAAI"}
1	+ {"version":3,"names":["Ariakit","useInstanceId","useLayoutEffect","useMemo","useRef","TabsContext","Tab","TabList","TabPanel","Tabs","selectOnMove","initialTabId","orientation","onSelect","children","selectedTabId","instanceId","store","useTabStore","defaultSelectedId","setSelectedId","selectedId","strippedDownId","replace","isControlled","undefined","items","useState","move","tabsHavePopulated","length","current","selectedTab","find","item","id","firstEnabledTab","dimmed","initialTab","currentItem","activeElement","element","ownerDocument","tabsHasFocus","some","contextValue","createElement","Provider","value","Context"],"sources":["@wordpress/components/src/tabs/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport as Ariakit from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabsProps } from './types';\nimport { TabsContext } from './context';\nimport { Tab } from './tab';\nimport { TabList } from './tablist';\nimport { TabPanel } from './tabpanel';\n\nfunction Tabs( {\n\tselectOnMove = true,\n\tinitialTabId,\n\torientation = 'horizontal',\n\tonSelect,\n\tchildren,\n\tselectedTabId,\n}: TabsProps ) {\n\tconst instanceId = useInstanceId( Tabs, 'tabs' );\n\tconst store = Ariakit.useTabStore( {\n\t\tselectOnMove,\n\t\torientation,\n\t\tdefaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,\n\t\tsetSelectedId: ( selectedId ) => {\n\t\t\tconst strippedDownId =\n\t\t\t\ttypeof selectedId === 'string'\n\t\t\t\t\t? selectedId.replace( `${ instanceId }-`, '' )\n\t\t\t\t\t: selectedId;\n\t\t\tonSelect?.( strippedDownId );\n\t\t},\n\t\tselectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,\n\t} );\n\n\tconst isControlled = selectedTabId !== undefined;\n\n\tconst { items, selectedId } = store.useState();\n\tconst { setSelectedId, move } = store;\n\n\t// Keep track of whether tabs have been populated. This is used to prevent\n\t// certain effects from firing too early while tab data and relevant\n\t// variables are undefined during the initial render.\n\tconst tabsHavePopulated = useRef( false );\n\tif ( items.length > 0 ) {\n\t\ttabsHavePopulated.current = true;\n\t}\n\n\tconst selectedTab = items.find( ( item ) => item.id === selectedId );\n\tconst firstEnabledTab = items.find( ( item ) => {\n\t\t// Ariakit internally refers to disabled tabs as `dimmed`.\n\t\treturn ! item.dimmed;\n\t} );\n\tconst initialTab = items.find(\n\t\t( item ) => item.id === `${ instanceId }-${ initialTabId }`\n\t);\n\n\t// Handle selecting the initial tab.\n\tuseLayoutEffect( () => {\n\t\tif ( isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection, as well as ensuring no tab is\n\t\t// selected if an invalid `initialTabId` is provided.\n\t\tif ( initialTabId && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab is missing (i.e. removed from the DOM),\n\t\t// fall back to the initial tab or the first enabled tab if there is\n\t\t// one. Otherwise, no tab should be selected.\n\t\tif ( ! items.find( ( item ) => item.id === selectedId ) ) {\n\t\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\t\tsetSelectedId( initialTab?.id );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( firstEnabledTab ) {\n\t\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t\t} else if ( tabsHavePopulated.current ) {\n\t\t\t\tsetSelectedId( null );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tinitialTabId,\n\t\tisControlled,\n\t\titems,\n\t\tselectedId,\n\t\tsetSelectedId,\n\t] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseLayoutEffect( () => {\n\t\tif ( ! selectedTab?.dimmed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// In controlled mode, we trust that disabling tabs is done\n\t\t// intentionally, and don't select a new tab automatically.\n\t\tif ( isControlled ) {\n\t\t\tsetSelectedId( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// If the currently selected tab becomes disabled, fall back to the\n\t\t// `initialTabId` if possible. Otherwise select the first\n\t\t// enabled tab (if there is one).\n\t\tif ( initialTab && ! initialTab.dimmed ) {\n\t\t\tsetSelectedId( initialTab.id );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( firstEnabledTab ) {\n\t\t\tsetSelectedId( firstEnabledTab.id );\n\t\t}\n\t}, [\n\t\tfirstEnabledTab,\n\t\tinitialTab,\n\t\tisControlled,\n\t\tselectedTab?.dimmed,\n\t\tsetSelectedId,\n\t] );\n\n\t// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Once the tabs have populated, if the `selectedTabId` still can't be\n\t\t// found, clear the selection.\n\t\tif ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {\n\t\t\tsetSelectedId( null );\n\t\t}\n\t}, [\n\t\tisControlled,\n\t\tselectedId,\n\t\tselectedTab,\n\t\tselectedTabId,\n\t\tsetSelectedId,\n\t] );\n\n\t// In controlled mode, make sure browser focus follows the selected tab if\n\t// the selection is changed while a tab is already being focused.\n\tuseLayoutEffect( () => {\n\t\tif ( ! isControlled \|\| ! selectOnMove ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentItem = items.find( ( item ) => item.id === selectedId );\n\t\tconst activeElement = currentItem?.element?.ownerDocument.activeElement;\n\t\tconst tabsHasFocus = items.some( ( item ) => {\n\t\t\treturn activeElement && activeElement === item.element;\n\t\t} );\n\n\t\tif (\n\t\t\tactiveElement &&\n\t\t\ttabsHasFocus &&\n\t\t\tselectedId !== activeElement.id\n\t\t) {\n\t\t\tmove( selectedId );\n\t\t}\n\t}, [ isControlled, items, move, selectOnMove, selectedId ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tstore,\n\t\t\tinstanceId,\n\t\t} ),\n\t\t[ store, instanceId ]\n\t);\n\n\treturn (\n\t\t<TabsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsContext.Provider>\n\t);\n}\n\nTabs.TabList = TabList;\nTabs.Tab = Tab;\nTabs.TabPanel = TabPanel;\nTabs.Context = TabsContext;\n\nexport default Tabs;\n"],"mappings":"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"}

package/build-module/tabs/tab.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { useTabsContext } from './context';
 import { Tab as StyledTab } from './styles';
 export const Tab = forwardRef(function Tab({
   children,
-  id,
+  tabId,
   disabled,
   render,
   ...otherProps
@@ -28,7 +28,7 @@ export const Tab = forwardRef(function Tab({
     store,
     instanceId
   } = context;
-  const instancedTabId = `${instanceId}-${id}`;
+  const instancedTabId = `${instanceId}-${tabId}`;
   return createElement(StyledTab, {
     ref: ref,
     store: store,

package/build-module/tabs/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["forwardRef","warning","useTabsContext","Tab","StyledTab","children","id","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\n\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\~~tWordPressComponentProps~~< TabProps, 'button', false >\n>( function Tab( { children, id, disabled, render, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ id }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,~~EAAE~~;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;~~EACzE~~,MAAMC,OAAO,GAAGT,cAAc,CAAC,CAAC;EAChC,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,~~EAAI~~,EAAC;~~EAChD~~,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;~~IACfP~~,EAAE,~~EAAGS~~,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}
1	+ {"version":3,"names":["forwardRef","warning","useTabsContext","Tab","StyledTab","children","tabId","disabled","render","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement","id"],"sources":["@wordpress/components/src/tabs/tab.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\n\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabProps } from './types';\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport { Tab as StyledTab } from './styles';\nimport type { WordPressComponentProps } from '../context';\n\nexport const Tab = forwardRef<\n\tHTMLButtonElement,\n\tOmit< WordPressComponentProps< TabProps, 'button', false >, 'id' >\n>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\treturn (\n\t\t<StyledTab\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tdisabled={ disabled }\n\t\t\trender={ render }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTab>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,GAAG,IAAIC,SAAS,QAAQ,UAAU;AAG3C,OAAO,MAAMD,GAAG,GAAGH,UAAU,CAG1B,SAASG,GAAGA,CAAE;EAAEE,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAW,CAAC,EAAEC,GAAG,EAAG;EAC5E,MAAMC,OAAO,GAAGT,cAAc,CAAC,CAAC;EAChC,IAAK,CAAES,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAX,OAAO,CAAE,mDAAoD,CAAC;IAC9D,OAAO,IAAI;EACZ;EACA,MAAM;IAAEY,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIR,KAAO,EAAC;EACnD,OACCU,aAAA,CAACZ,SAAS;IACTM,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfI,EAAE,EAAGF,cAAgB;IACrBR,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IAAA,GACZC;EAAU,GAEbJ,QACQ,CAAC;AAEd,CAAE,CAAC"}

package/build-module/tabs/tabpanel.js CHANGED Viewed

@@ -18,7 +18,7 @@ import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
 export const TabPanel = forwardRef(function TabPanel({
   children,
-  id,
+  tabId,
   focusable = true,
   ...otherProps
 }, ref) {
@@ -31,10 +31,11 @@ export const TabPanel = forwardRef(function TabPanel({
     store,
     instanceId
   } = context;
+  const instancedTabId = `${instanceId}-${tabId}`;
   return createElement(StyledTabPanel, {
     ref: ref,
     store: store,
-    id: `${instanceId}-${id}-view`,
+    id: instancedTabId,
     focusable: focusable,
     ...otherProps
   }, children);

package/build-module/tabs/tabpanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["forwardRef","TabPanel","StyledTabPanel","warning","useTabsContext","children","id","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","createElement"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/*\n External dependencies\n /\n\n/\n WordPress dependencies\n /\n\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\~~tWordPressComponentProps~~< TabPanelProps, 'div', false >\n>( function TabPanel( { children, id, focusable = true, ...otherProps }~~, ref~~ ) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ ~~`${~~ ~~instanceId~~ }~~-${ id }-view` }~~\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAG1C,OAAO,MAAMH,QAAQ,GAAGD,UAAU,CAG/B,SAASC,QAAQA,~~CAAE~~;EAAEI,QAAQ;EAAEC,~~EAAE~~;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,~~EAAEC~~,GAAG,~~EAAG~~;~~EAC9E~~,MAAMC,OAAO,GAAGN,cAAc,CAAC,CAAC;EAChC,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;~~EAErC~~,~~OACCI~~,aAAA,~~CAACZ~~,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;~~IACfN~~,EAAE,~~EAAI~~,~~GAAGO,UAAY,IAAIP,EAAI,OAAQ~~;~~IACrCC~~,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}
1	+ {"version":3,"names":["forwardRef","TabPanel","StyledTabPanel","warning","useTabsContext","children","tabId","focusable","otherProps","ref","context","SCRIPT_DEBUG","store","instanceId","instancedTabId","createElement","id"],"sources":["@wordpress/components/src/tabs/tabpanel.tsx"],"sourcesContent":["/*\n External dependencies\n /\n\n/\n WordPress dependencies\n /\n\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport type { TabPanelProps } from './types';\nimport { TabPanel as StyledTabPanel } from './styles';\n\nimport warning from '@wordpress/warning';\nimport { useTabsContext } from './context';\nimport type { WordPressComponentProps } from '../context';\n\nexport const TabPanel = forwardRef<\n\tHTMLDivElement,\n\tOmit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >\n>( function TabPanel(\n\t{ children, tabId, focusable = true, ...otherProps },\n\tref\n) {\n\tconst context = useTabsContext();\n\tif ( ! context ) {\n\t\twarning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );\n\t\treturn null;\n\t}\n\tconst { store, instanceId } = context;\n\tconst instancedTabId = `${ instanceId }-${ tabId }`;\n\n\treturn (\n\t\t<StyledTabPanel\n\t\t\tref={ ref }\n\t\t\tstore={ store }\n\t\t\tid={ instancedTabId }\n\t\t\tfocusable={ focusable }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledTabPanel>\n\t);\n} );\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,QAAQ,IAAIC,cAAc,QAAQ,UAAU;AAErD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,cAAc,QAAQ,WAAW;AAG1C,OAAO,MAAMH,QAAQ,GAAGD,UAAU,CAG/B,SAASC,QAAQA,CACnB;EAAEI,QAAQ;EAAEC,KAAK;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAW,CAAC,EACpDC,GAAG,EACF;EACD,MAAMC,OAAO,GAAGN,cAAc,CAAC,CAAC;EAChC,IAAK,CAAEM,OAAO,EAAG;IAChB,OAAAC,YAAA,oBAAAA,YAAA,YAAAR,OAAO,CAAE,wDAAyD,CAAC;IACnE,OAAO,IAAI;EACZ;EACA,MAAM;IAAES,KAAK;IAAEC;EAAW,CAAC,GAAGH,OAAO;EACrC,MAAMI,cAAc,GAAI,GAAGD,UAAY,IAAIP,KAAO,EAAC;EAEnD,OACCS,aAAA,CAACb,cAAc;IACdO,GAAG,EAAGA,GAAK;IACXG,KAAK,EAAGA,KAAO;IACfI,EAAE,EAAGF,cAAgB;IACrBP,SAAS,EAAGA,SAAW;IAAA,GAClBC;EAAU,GAEbH,QACa,CAAC;AAEnB,CAAE,CAAC"}

package/build-module/tabs/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport type as Ariakit from '@ariakit/react';\n\nexport type TabsContextProps =\n\t\| {\n\t\t\t/*\n\t\t\t The tabStore object returned by Ariakit's `useTabStore` hook.\n\t\t\t /\n\t\t\tstore: Ariakit.TabStore;\n\t\t\t/\n\t\t\t The unique id string for this instance of the Tabs component.\n\t\t\t /\n\t\t\tinstanceId: string;\n\t }\n\t\| undefined;\n\nexport type TabsProps = {\n\t/\n\t The children elements, which should be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t \n\t @default true\n\t \n\t @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t /\n\tselectOnMove?: boolean;\n\t/\n\t The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t \n\t Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t /\n\tinitialTabId?: string;\n\t/\n\t The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t /\n\tonSelect?: ( selectedId: string \| null \| undefined ) => void;\n\n\t/\n\t The orientation of the tablist.\n\t \n\t @default `horizontal`\n\t /\n\torientation?: 'horizontal' \| 'vertical';\n\t/\n\t The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t \n\t If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t /\n\tselectedTabId?: string \| null;\n};\n\nexport type TabListProps = {\n\t/\n\t The children elements, which should be a series of `Tabs.TabPanel` components.\n\t /\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/\n\t The id of the tab, which is prepended with the `Tabs` instanceId.\n\t /\n\~~tid~~: string;\n\t/\n\t The children elements, generally the text to display on the tab.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t Determines if the tab button should be disabled.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t /\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/\n\t The children elements, generally the content to display on the tabpanel.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t A unique identifier for the tabpanel, which is used to generate a ~~unique~~ `id` for the underlying element.\n\t /\n\~~tid~~: string;\n\t/\n\t Determines whether or not the tabpanel element should be focusable.\n\t * If `false`, pressing the tab key will skip over the tabpanel, and instead\n\t * focus on the first focusable element in the panel (if there is one).\n\t \n\t @default true\n\t */\n\tfocusable?: boolean;\n};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/tabs/types.ts"],"sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport type as Ariakit from '@ariakit/react';\n\nexport type TabsContextProps =\n\t\| {\n\t\t\t/*\n\t\t\t The tabStore object returned by Ariakit's `useTabStore` hook.\n\t\t\t /\n\t\t\tstore: Ariakit.TabStore;\n\t\t\t/\n\t\t\t The unique id string for this instance of the Tabs component.\n\t\t\t /\n\t\t\tinstanceId: string;\n\t }\n\t\| undefined;\n\nexport type TabsProps = {\n\t/\n\t The children elements, which should be at least a\n\t * `Tabs.Tablist` component and a series of `Tabs.TabPanel`\n\t * components.\n\t /\n\tchildren: React.ReactNode;\n\t/\n\t When `true`, the tab will be selected when receiving focus (automatic tab\n\t * activation). When `false`, the tab will be selected only when clicked\n\t * (manual tab activation). See the official W3C docs for more info.\n\t \n\t @default true\n\t \n\t @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n\t /\n\tselectOnMove?: boolean;\n\t/\n\t The id of the tab to be selected upon mounting of component.\n\t * If this prop is not set, the first tab will be selected by default.\n\t * The id provided will be internally prefixed with the\n\t * `TabsContextProps.instanceId`.\n\t \n\t Note: this prop will be overridden by the `selectedTabId` prop if it is\n\t * provided. (Controlled Mode)\n\t /\n\tinitialTabId?: string;\n\t/\n\t The function called when a tab has been selected.\n\t * It is passed the id of the newly selected tab as an argument.\n\t /\n\tonSelect?: ( selectedId: string \| null \| undefined ) => void;\n\n\t/\n\t The orientation of the tablist.\n\t \n\t @default `horizontal`\n\t /\n\torientation?: 'horizontal' \| 'vertical';\n\t/\n\t The Id of the tab to display. This id is prepended with the `Tabs`\n\t * instanceId internally.\n\t \n\t If left `undefined`, the component assumes it is being used in\n\t * uncontrolled mode. Consequently, any value different than `undefined`\n\t * will set the component in `controlled` mode.\n\t * When in controlled mode, the `null` value will result in no tab being selected.\n\t /\n\tselectedTabId?: string \| null;\n};\n\nexport type TabListProps = {\n\t/\n\t The children elements, which should be a series of `Tabs.TabPanel` components.\n\t /\n\tchildren?: React.ReactNode;\n};\n\nexport type TabProps = {\n\t/\n\t The id of the tab, which is prepended with the `Tabs` instanceId.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.TabPanel` component.\n\t /\n\ttabId: string;\n\t/\n\t The children elements, generally the text to display on the tab.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t Determines if the tab button should be disabled.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t The type of component to render the tab button as. If this prop is not\n\t * provided, the tab button will be rendered as a `button` element.\n\t /\n\trender?: React.ReactElement;\n};\n\nexport type TabPanelProps = {\n\t/\n\t The children elements, generally the content to display on the tabpanel.\n\t /\n\tchildren?: React.ReactNode;\n\t/\n\t A unique identifier for the tabpanel, which is used to generate an\n\t * instanced id for the underlying element.\n\t * The value of this prop should match with the value of the `tabId` prop on\n\t * the corresponding `Tabs.Tab` component.\n\t /\n\ttabId: string;\n\t/\n\t Determines whether or not the tabpanel element should be focusable.\n\t * If `false`, pressing the tab key will skip over the tabpanel, and instead\n\t * focus on the first focusable element in the panel (if there is one).\n\t \n\t @default true\n\t */\n\tfocusable?: boolean;\n};\n"],"mappings":""}

package/build-module/toggle-group-control/toggle-group-control/utils.js CHANGED Viewed

@@ -16,27 +16,27 @@ import { useEffect, useRef } from '@wordpress/element';
  * @param valueProp The received `value`
  */
 export function useComputeControlledOrUncontrolledValue(valueProp) {
-  const hasEverBeenUsedInControlledMode = useRef(false);
-  const previousValueProp = usePrevious(valueProp);
+  const prevValueProp = usePrevious(valueProp);
+  const prevIsControlled = useRef(false);
+  // Assume the component is being used in controlled mode on the first re-render
+  // that has a different `valueProp` from the previous render.
+  const isControlled = prevIsControlled.current || prevValueProp !== undefined && valueProp !== undefined && prevValueProp !== valueProp;
   useEffect(() => {
-    if (!hasEverBeenUsedInControlledMode.current) {
-      // Assume the component is being used in controlled mode if:
-      // - the `value` prop is not `undefined`
-      // - the `value` prop was not previously `undefined` and was given a new value
-      hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp;
-    }
-  }, [valueProp, previousValueProp]);
-  let value, defaultValue;
-  if (hasEverBeenUsedInControlledMode.current) {
+    prevIsControlled.current = isControlled;
+  }, [isControlled]);
+  if (isControlled) {
     // When in controlled mode, use `''` instead of `undefined`
-    value = valueProp !== null && valueProp !== void 0 ? valueProp : '';
-  } else {
-    // When in uncontrolled mode, the `value` should be intended as the initial value
-    defaultValue = valueProp;
+    return {
+      value: valueProp !== null && valueProp !== void 0 ? valueProp : '',
+      defaultValue: undefined
+    };
   }
+  // When in uncontrolled mode, the `value` should be intended as the initial value
   return {
-    value,
-    defaultValue
+    value: undefined,
+    defaultValue: valueProp
   };
 }
 //# sourceMappingURL=utils.js.map