@wordpress/components 25.7.0 → 25.8.0

package/build-module/circular-option-picker/index.js

@@ -1,137 +1,9 @@
-import { createElement } from "@wordpress/element";
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import Dropdown from '../dropdown';
-import Tooltip from '../tooltip';
-export function Option({
-  className,
-  isSelected,
-  selectedIconProps,
-  tooltipText,
-  ...additionalProps
-}) {
-  const optionButton = createElement(Button, {
-    isPressed: isSelected,
-    className: "components-circular-option-picker__option",
-    ...additionalProps
-  });
-  return createElement("div", {
-    className: classnames(className, 'components-circular-option-picker__option-wrapper')
-  }, tooltipText ? createElement(Tooltip, {
-    text: tooltipText
-  }, optionButton) : optionButton, isSelected && createElement(Icon, {
-    icon: check,
-    ...(selectedIconProps ? selectedIconProps : {})
-  }));
-}
-export function DropdownLinkAction({
-  buttonProps,
-  className,
-  dropdownProps,
-  linkText
-}) {
-  return createElement(Dropdown, {
-    className: classnames('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(Button, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      variant: "link",
-      ...buttonProps
-    }, linkText),
-    ...dropdownProps
-  });
-}
-export function ButtonAction({
-  className,
-  children,
-  ...additionalProps
-}) {
-  return createElement(Button, {
-    className: classnames('components-circular-option-picker__clear', className),
-    variant: "tertiary",
-    ...additionalProps
-  }, children);
-}
-
-/**
- *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
- *
- * ```jsx
- * import { CircularOptionPicker } from '../circular-option-picker';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ currentColor, setCurrentColor ] = useState();
- * 	const colors = [
- * 		{ color: '#f00', name: 'Red' },
- * 		{ color: '#0f0', name: 'Green' },
- * 		{ color: '#00f', name: 'Blue' },
- * 	];
- * 	const colorOptions = (
- * 		<>
- * 			{ colors.map( ( { color, name }, index ) => {
- * 				return (
- * 					<CircularOptionPicker.Option
- * 						key={ `${ color }-${ index }` }
- * 						tooltipText={ name }
- * 						style={ { backgroundColor: color, color } }
- * 						isSelected={ index === currentColor }
- * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
- * 					/>
- * 				);
- * 			} ) }
- * 		</>
- * 	);
- * 	return (
- * 		<CircularOptionPicker
- * 				options={ colorOptions }
- * 				actions={
- * 					<CircularOptionPicker.ButtonAction
- * 						onClick={ () => setCurrentColor( undefined ) }
- * 					>
- * 						{ 'Clear' }
- * 					</CircularOptionPicker.ButtonAction>
- * 				}
- * 			/>
- * 	);
- * };
- * ```
- */
-
-function CircularOptionPicker(props) {
-  const {
-    actions,
-    className,
-    options,
-    children
-  } = props;
-  return createElement("div", {
-    className: classnames('components-circular-option-picker', className)
-  }, createElement("div", {
-    className: "components-circular-option-picker__swatches"
-  }, options), children, actions && createElement("div", {
-    className: "components-circular-option-picker__custom-clear-wrapper"
-  }, actions));
-}
-CircularOptionPicker.Option = Option;
-CircularOptionPicker.ButtonAction = ButtonAction;
-CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+import CircularOptionPicker from './circular-option-picker';
+export { Option } from './circular-option-picker-option';
+export { OptionGroup } from './circular-option-picker-option-group';
+export { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';
 export default CircularOptionPicker;
 //# sourceMappingURL=index.js.map

package/build-module/circular-option-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","createElement","isPressed","text","icon","DropdownLinkAction","buttonProps","dropdownProps","linkText","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","CircularOptionPicker","props","actions","options"],"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,OAAO,MAAM,YAAY;AAShC,OAAO,SAASC,MAAMA,CAAE;EACvBC,SAAS;EACTC,UAAU;EACVC,iBAAiB;EACjBC,WAAW;EACX,GAAGC;AACS,CAAC,EAAG;EAChB,MAAMC,YAAY,GACjBC,aAAA,CAACV,MAAM;IACNW,SAAS,EAAGN,UAAY;IACxBD,SAAS,EAAC,2CAA2C;IAAA,GAChDI;EAAe,CACpB,CACD;EACD,OACCE,aAAA;IACCN,SAAS,EAAGP,UAAU,CACrBO,SAAS,EACT,mDACD;EAAG,GAEDG,WAAW,GACZG,aAAA,CAACR,OAAO;IAACU,IAAI,EAAGL;EAAa,GAAGE,YAAuB,CAAC,GAExDA,YACA,EACCJ,UAAU,IACXK,aAAA,CAACZ,IAAI;IACJe,IAAI,EAAGd,KAAO;IAAA,IACPO,iBAAiB,GAAGA,iBAAiB,GAAG,CAAC,CAAC;EAAA,CACjD,CAEE,CAAC;AAER;AAEA,OAAO,SAASQ,kBAAkBA,CAAE;EACnCC,WAAW;EACXX,SAAS;EACTY,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,OACCP,aAAA,CAACT,QAAQ;IACRG,SAAS,EAAGP,UAAU,CACrB,yDAAyD,EACzDO,SACD,CAAG;IACHc,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpCV,aAAA,CAACV,MAAM;MACN,iBAAgBmB,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTP;IAAW,GAEdE,QACK,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEA,OAAO,SAASO,YAAYA,CAAE;EAC7BnB,SAAS;EACToB,QAAQ;EACR,GAAGhB;AAC6D,CAAC,EAAG;EACpE,OACCE,aAAA,CAACV,MAAM;IACNI,SAAS,EAAGP,UAAU,CACrB,0CAA0C,EAC1CO,SACD,CAAG;IACHkB,OAAO,EAAC,UAAU;IAAA,GACbd;EAAe,GAElBgB,QACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASC,oBAAoBA,CAAEC,KAAgC,EAAG;EACjE,MAAM;IAAEC,OAAO;IAAEvB,SAAS;IAAEwB,OAAO;IAAEJ;EAAS,CAAC,GAAGE,KAAK;EACvD,OACChB,aAAA;IACCN,SAAS,EAAGP,UAAU,CACrB,mCAAmC,EACnCO,SACD;EAAG,GAEHM,aAAA;IAAKN,SAAS,EAAC;EAA6C,GACzDwB,OACE,CAAC,EACJJ,QAAQ,EACRG,OAAO,IACRjB,aAAA;IAAKN,SAAS,EAAC;EAAyD,GACrEuB,OACE,CAEF,CAAC;AAER;AAEAF,oBAAoB,CAACtB,MAAM,GAAGA,MAAM;AACpCsB,oBAAoB,CAACF,YAAY,GAAGA,YAAY;AAChDE,oBAAoB,CAACX,kBAAkB,GAAGA,kBAAkB;AAE5D,eAAeW,oBAAoB"}
+{"version":3,"names":["CircularOptionPicker","Option","OptionGroup","ButtonAction","DropdownLinkAction"],"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport CircularOptionPicker from './circular-option-picker';\n\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\nexport default CircularOptionPicker;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,oBAAoB,MAAM,0BAA0B;AAE3D,SAASC,MAAM,QAAQ,iCAAiC;AACxD,SAASC,WAAW,QAAQ,uCAAuC;AACnE,SACCC,YAAY,EACZC,kBAAkB,QACZ,kCAAkC;AAEzC,eAAeJ,oBAAoB"}

package/build-module/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport type CircularOptionPickerProps = {\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { CompositeState } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}

package/build-module/color-palette/index.js

@@ -11,6 +11,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
 
@@ -32,7 +33,7 @@ function SinglePalette({
   colors,
   onChange,
   value,
-  actions
+  ...additionalProps
 }) {
   const colorOptions = useMemo(() => {
     return colors.map(({
@@ -63,10 +64,10 @@ function SinglePalette({
       });
     });
   }, [colors, value, onChange, clearColor]);
-  return createElement(CircularOptionPicker, {
+  return createElement(CircularOptionPicker.OptionGroup, {
     className: className,
     options: colorOptions,
-    actions: actions
+    ...additionalProps
   });
 }
 function MultiplePalettes({
@@ -75,9 +76,9 @@ function MultiplePalettes({
   colors,
   onChange,
   value,
-  actions,
   headingLevel
 }) {
+  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');
   if (colors.length === 0) {
     return null;
   }
@@ -88,17 +89,19 @@ function MultiplePalettes({
     name,
     colors: colorPalette
   }, index) => {
+    const id = `${instanceId}-${index}`;
     return createElement(VStack, {
       spacing: 2,
       key: index
     }, createElement(ColorHeading, {
+      id: id,
       level: headingLevel
     }, name), createElement(SinglePalette, {
       clearColor: clearColor,
       colors: colorPalette,
       onChange: newColor => onChange(newColor, index),
       value: value,
-      actions: colors.length === index + 1 ? actions : null
+      "aria-labelledby": id
     }));
   }));
 }
@@ -129,6 +132,8 @@ export function CustomColorPickerDropdown({
 }
 function UnforwardedColorPalette(props, forwardedRef) {
   const {
+    asButtons,
+    loop,
     clearable = true,
     colors = [],
     disableCustomColors = false,
@@ -137,7 +142,9 @@ function UnforwardedColorPalette(props, forwardedRef) {
     value,
     __experimentalIsRenderedInSidebar = false,
     headingLevel = 2,
-    ...otherProps
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    ...additionalProps
   } = props;
   const [normalizedColorValue, setNormalizedColorValue] = useState(value);
   const clearColor = useCallback(() => onChange(undefined), [onChange]);
@@ -161,19 +168,44 @@ function UnforwardedColorPalette(props, forwardedRef) {
   // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
   __('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : __('Custom color picker.');
   const paletteCommonProps = {
-    clearable,
     clearColor,
     onChange,
-    value,
-    actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
-      onClick: clearColor
-    }, __('Clear')),
-    headingLevel
+    value
   };
+  const actions = !!clearable && createElement(CircularOptionPicker.ButtonAction, {
+    onClick: clearColor
+  }, __('Clear'));
+  let metaProps;
+  if (asButtons) {
+    metaProps = {
+      asButtons: true
+    };
+  } else {
+    const _metaProps = {
+      asButtons: false,
+      loop
+    };
+    if (ariaLabel) {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': ariaLabel
+      };
+    } else if (ariaLabelledby) {
+      metaProps = {
+        ..._metaProps,
+        'aria-labelledby': ariaLabelledby
+      };
+    } else {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': __('Custom color picker.')
+      };
+    }
+  }
   return createElement(VStack, {
     spacing: 3,
     ref: forwardedRef,
-    ...otherProps
+    ...additionalProps
   }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
@@ -203,12 +235,19 @@ function UnforwardedColorPalette(props, forwardedRef) {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), hasMultipleColorOrigins ? createElement(MultiplePalettes, {
-    ...paletteCommonProps,
-    colors: colors
-  }) : createElement(SinglePalette, {
-    ...paletteCommonProps,
-    colors: colors
+  }), createElement(CircularOptionPicker, {
+    ...metaProps,
+    actions: actions,
+    options: hasMultipleColorOrigins ? createElement(MultiplePalettes, {
+      ...paletteCommonProps,
+      headingLevel: headingLevel,
+      colors: colors,
+      value: value
+    }) : createElement(SinglePalette, {
+      ...paletteCommonProps,
+      colors: colors,
+      value: value
+    })
   }));
 }
 

package/build-module/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","options","MultiplePalettes","headingLevel","length","spacing","colorPalette","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","ButtonAction","ref","renderContent","renderToggle","isOpen","onToggle","background","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: 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\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: 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\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\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</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}

package/build-module/color-palette/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A label to identify the purpose of the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t\t */\n\t\t\t\t'aria-label'?: string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t\t */\n\t\t\t\t'aria-labelledby'?: string;\n\t\t\t\t'aria-label'?: never;\n\t\t  }\n\t);\n"],"mappings":""}

package/build-module/combobox-control/index.js

@@ -28,13 +28,10 @@ import { normalizeTextString } from '../utils/strings';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 const noop = () => {};
 const DetectOutside = withFocusOutside(class extends Component {
-  // @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
   handleFocusOutside(event) {
-    // @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
     this.props.onFocusOutside(event);
   }
   render() {
-    // @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
     return this.props.children;
   }
 });

package/build-module/combobox-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","normalizeTextString","useDeprecated36pxDefaultSizeProp","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","setValue","currentOption","find","option","currentLabel","instanceId","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","startsWithMatch","containsMatch","match","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","createElement","id","tabIndex","ref","selectedSuggestionIndex","icon","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component {\n\t\t// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript\n\t\thandleFocusOutside( event ) {\n\t\t\t// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\t// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(\n\t\tprops,\n\t\t'wp.components.ComboboxControl'\n\t);\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\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</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","normalizeTextString","useDeprecated36pxDefaultSizeProp","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","setValue","currentOption","find","option","currentLabel","instanceId","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","startsWithMatch","containsMatch","match","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","createElement","id","tabIndex","ref","selectedSuggestionIndex","icon","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\ninterface DetectOutsideComponentProps {\n\tonFocusOutside: ( event: React.FocusEvent ) => void;\n\tchildren?: React.ReactNode;\n}\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component< DetectOutsideComponentProps > {\n\t\thandleFocusOutside( event: React.FocusEvent ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(\n\t\tprops,\n\t\t'wp.components.ComboboxControl'\n\t);\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\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</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":"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"}

package/build-module/composite/index.js

@@ -12,4 +12,6 @@
  */
 /* eslint-disable-next-line no-restricted-imports */
 export { Composite, CompositeGroup, CompositeItem, useCompositeState } from 'reakit';
+
+/* eslint-disable-next-line no-restricted-imports */
 //# sourceMappingURL=index.js.map

package/build-module/composite/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Composite","CompositeGroup","CompositeItem","useCompositeState"],"sources":["@wordpress/components/src/composite/index.js"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://reakit.io/docs/composite/\n *\n * The plan is to build own API that accounts for future breaking changes\n * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).\n */\n/* eslint-disable-next-line no-restricted-imports */\nexport {\n\tComposite,\n\tCompositeGroup,\n\tCompositeItem,\n\tuseCompositeState,\n} from 'reakit';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACCA,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,iBAAiB,QACX,QAAQ"}
+{"version":3,"names":["Composite","CompositeGroup","CompositeItem","useCompositeState"],"sources":["@wordpress/components/src/composite/index.ts"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://reakit.io/docs/composite/\n *\n * The plan is to build own API that accounts for future breaking changes\n * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).\n */\n/* eslint-disable-next-line no-restricted-imports */\nexport {\n\tComposite,\n\tCompositeGroup,\n\tCompositeItem,\n\tuseCompositeState,\n} from 'reakit';\n\n/* eslint-disable-next-line no-restricted-imports */\nexport type { CompositeStateReturn as CompositeState } from 'reakit';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACCA,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,iBAAiB,QACX,QAAQ;;AAEf"}