@wordpress/components 28.8.4 → 28.8.6

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","isRTL","useMemo","forwardRef","CompositeContext","CompositeGroup","CompositeGroupLabel","CompositeHover","CompositeItem","CompositeRow","CompositeTypeahead","jsx","_jsx","Composite","Object","assign","activeId","defaultActiveId","setActiveId","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","children","disabled","props","ref","store","useCompositeStore","contextValue","Provider","value","Group","displayName","GroupLabel","Item","Row","Hover","Typeahead","Context"],"sources":["@wordpress/components/src/composite/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. 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://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport type { CompositeProps } from './types';\n\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n *   <Composite.Item>Item 1</Composite.Item>\n *   <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(\n\tforwardRef<\n\t\tHTMLDivElement,\n\t\tWordPressComponentProps< CompositeProps, 'div', false >\n\t>( function Composite(\n\t\t{\n\t\t\t// Composite store props\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop = false,\n\t\t\tfocusWrap = false,\n\t\t\tfocusShift = false,\n\t\t\tvirtualFocus = false,\n\t\t\torientation = 'both',\n\t\t\trtl = isRTL(),\n\n\t\t\t// Composite component props\n\t\t\tchildren,\n\t\t\tdisabled = false,\n\n\t\t\t// Rest props\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst store = Ariakit.useCompositeStore( {\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop,\n\t\t\tfocusWrap,\n\t\t\tfocusShift,\n\t\t\tvirtualFocus,\n\t\t\torientation,\n\t\t\trtl,\n\t\t} );\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( {\n\t\t\t\tstore,\n\t\t\t} ),\n\t\t\t[ store ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Ariakit.Composite\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tstore={ store }\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<CompositeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CompositeContext.Provider>\n\t\t\t</Ariakit.Composite>\n\t\t);\n\t} ),\n\t{\n\t\t/**\n\t\t * Renders a group element for composite items.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroup: Object.assign( CompositeGroup, {\n\t\t\tdisplayName: 'Composite.Group',\n\t\t} ),\n\t\t/**\n\t\t * Renders a label in a composite group. This component must be wrapped with\n\t\t * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n\t\t * composite group element.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroupLabel: Object.assign( CompositeGroupLabel, {\n\t\t\tdisplayName: 'Composite.GroupLabel',\n\t\t} ),\n\t\t/**\n\t\t * Renders a composite item.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t *   <Composite.Item>Item 3</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tItem: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),\n\t\t/**\n\t\t * Renders a composite row. Wrapping `Composite.Item` elements within\n\t\t * `Composite.Row` will create a two-dimensional composite widget, such as a\n\t\t * grid.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 1.1</Composite.Item>\n\t\t *     <Composite.Item>Item 1.2</Composite.Item>\n\t\t *     <Composite.Item>Item 1.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 2.1</Composite.Item>\n\t\t *     <Composite.Item>Item 2.2</Composite.Item>\n\t\t *     <Composite.Item>Item 2.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tRow: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),\n\t\t/**\n\t\t * Renders an element in a composite widget that receives focus on mouse move\n\t\t * and loses focus to the composite base element on mouse leave. This should\n\t\t * be combined with the `Composite.Item` component.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 1\n\t\t *   </Composite.Hover>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 2\n\t\t *   </Composite.Hover>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tHover: Object.assign( CompositeHover, {\n\t\t\tdisplayName: 'Composite.Hover',\n\t\t} ),\n\t\t/**\n\t\t * Renders a component that adds typeahead functionality to composite\n\t\t * components. Hitting printable character keys will move focus to the next\n\t\t * composite item that begins with the input characters.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite render={ <CompositeTypeahead /> }>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tTypeahead: Object.assign( CompositeTypeahead, {\n\t\t\tdisplayName: 'Composite.Typeahead',\n\t\t} ),\n\t\t/**\n\t\t * The React context used by the composite components. It can be used by\n\t\t * to access the composite store, and to forward the context when composite\n\t\t * sub-components are rendered across portals (ie. `SlotFill` components)\n\t\t * that would not otherwise forward the context to the `Fill` children.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t * import { useContext } from '@wordpress/element';\n\t\t *\n\t\t * const compositeContext = useContext( Composite.Context );\n\t\t * ```\n\t\t */\n\t\tContext: Object.assign( CompositeContext, {\n\t\t\tdisplayName: 'Composite.Context',\n\t\t} ),\n\t}\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,OAAO,EAAEC,UAAU,QAAQ,oBAAoB;;AAExD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,kBAAkB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGC,MAAM,CAACC,MAAM,CACrCZ,UAAU,CAGP,SAASU,SAASA,CACpB;EACC;EACAG,QAAQ;EACRC,eAAe;EACfC,WAAW;EACXC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAGvB,KAAK,CAAC,CAAC;EAEb;EACAwB,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAEhB;EACA,GAAGC;AACJ,CAAC,EACDC,GAAG,EACF;EACD,MAAMC,KAAK,GAAG7B,OAAO,CAAC8B,iBAAiB,CAAE;IACxCd,QAAQ;IACRC,eAAe;IACfC,WAAW;IACXC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC;EACD,CAAE,CAAC;EAEH,MAAMO,YAAY,GAAG7B,OAAO,CAC3B,OAAQ;IACP2B;EACD,CAAC,CAAE,EACH,CAAEA,KAAK,CACR,CAAC;EAED,oBACCjB,IAAA,CAACZ,OAAO,CAACa,SAAS;IACjBa,QAAQ,EAAGA,QAAU;IACrBG,KAAK,EAAGA,KAAO;IAAA,GACVF,KAAK;IACVC,GAAG,EAAGA,GAAK;IAAAH,QAAA,eAEXb,IAAA,CAACR,gBAAgB,CAAC4B,QAAQ;MAACC,KAAK,EAAGF,YAAc;MAAAN,QAAA,EAC9CA;IAAQ,CACgB;EAAC,CACV,CAAC;AAEtB,CAAE,CAAC,EACH;EACC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACES,KAAK,EAAEpB,MAAM,CAACC,MAAM,CAAEV,cAAc,EAAE;IACrC8B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAU,EAAEtB,MAAM,CAACC,MAAM,CAAET,mBAAmB,EAAE;IAC/C6B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,IAAI,EAAEvB,MAAM,CAACC,MAAM,CAAEP,aAAa,EAAE;IAAE2B,WAAW,EAAE;EAAiB,CAAE,CAAC;EACvE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEG,GAAG,EAAExB,MAAM,CAACC,MAAM,CAAEN,YAAY,EAAE;IAAE0B,WAAW,EAAE;EAAgB,CAAE,CAAC;EACpE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEI,KAAK,EAAEzB,MAAM,CAACC,MAAM,CAAER,cAAc,EAAE;IACrC4B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEK,SAAS,EAAE1B,MAAM,CAACC,MAAM,CAAEL,kBAAkB,EAAE;IAC7CyB,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,OAAO,EAAE3B,MAAM,CAACC,MAAM,CAAEX,gBAAgB,EAAE;IACzC+B,WAAW,EAAE;EACd,CAAE;AACH,CACD,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","isRTL","useMemo","forwardRef","CompositeContext","CompositeGroup","CompositeGroupLabel","CompositeHover","CompositeItem","CompositeRow","CompositeTypeahead","jsx","_jsx","Composite","Object","assign","activeId","defaultActiveId","setActiveId","focusLoop","focusWrap","focusShift","virtualFocus","orientation","rtl","children","disabled","props","ref","storeProp","store","internalStore","useCompositeStore","contextValue","Provider","value","Group","displayName","GroupLabel","Item","Row","Hover","Typeahead","Context"],"sources":["@wordpress/components/src/composite/index.tsx"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * Composite.Item. 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://ariakit.org/components/composite\n */\n\n/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { CompositeContext } from './context';\nimport { CompositeGroup } from './group';\nimport { CompositeGroupLabel } from './group-label';\nimport { CompositeHover } from './hover';\nimport { CompositeItem } from './item';\nimport { CompositeRow } from './row';\nimport { CompositeTypeahead } from './typeahead';\nimport type { CompositeProps } from './types';\n\n/**\n * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)\n * role, which provides a single tab stop on the page and arrow key navigation\n * through the focusable descendants.\n *\n * @example\n * ```jsx\n * import { Composite } from '@wordpress/components';\n *\n * <Composite>\n *   <Composite.Item>Item 1</Composite.Item>\n *   <Composite.Item>Item 2</Composite.Item>\n * </Composite>\n * ```\n */\nexport const Composite = Object.assign(\n\tforwardRef<\n\t\tHTMLDivElement,\n\t\tWordPressComponentProps< CompositeProps, 'div', false >\n\t>( function Composite(\n\t\t{\n\t\t\t// Composite store props\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop = false,\n\t\t\tfocusWrap = false,\n\t\t\tfocusShift = false,\n\t\t\tvirtualFocus = false,\n\t\t\torientation = 'both',\n\t\t\trtl = isRTL(),\n\n\t\t\t// Composite component props\n\t\t\tchildren,\n\t\t\tdisabled = false,\n\n\t\t\t// Rest props\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\t// @ts-expect-error The store prop is undocumented and only used by the\n\t\t// legacy compat layer.\n\t\tconst storeProp = props.store as Ariakit.CompositeStore;\n\t\tconst internalStore = Ariakit.useCompositeStore( {\n\t\t\tactiveId,\n\t\t\tdefaultActiveId,\n\t\t\tsetActiveId,\n\t\t\tfocusLoop,\n\t\t\tfocusWrap,\n\t\t\tfocusShift,\n\t\t\tvirtualFocus,\n\t\t\torientation,\n\t\t\trtl,\n\t\t} );\n\n\t\tconst store = storeProp ?? internalStore;\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( {\n\t\t\t\tstore,\n\t\t\t} ),\n\t\t\t[ store ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Ariakit.Composite\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tstore={ store }\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<CompositeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CompositeContext.Provider>\n\t\t\t</Ariakit.Composite>\n\t\t);\n\t} ),\n\t{\n\t\t/**\n\t\t * Renders a group element for composite items.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroup: Object.assign( CompositeGroup, {\n\t\t\tdisplayName: 'Composite.Group',\n\t\t} ),\n\t\t/**\n\t\t * Renders a label in a composite group. This component must be wrapped with\n\t\t * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n\t\t * composite group element.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Group>\n\t\t *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n\t\t *     <Composite.Item>Item 1</Composite.Item>\n\t\t *     <Composite.Item>Item 2</Composite.Item>\n\t\t *   </CompositeGroup>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tGroupLabel: Object.assign( CompositeGroupLabel, {\n\t\t\tdisplayName: 'Composite.GroupLabel',\n\t\t} ),\n\t\t/**\n\t\t * Renders a composite item.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t *   <Composite.Item>Item 3</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tItem: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),\n\t\t/**\n\t\t * Renders a composite row. Wrapping `Composite.Item` elements within\n\t\t * `Composite.Row` will create a two-dimensional composite widget, such as a\n\t\t * grid.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 1.1</Composite.Item>\n\t\t *     <Composite.Item>Item 1.2</Composite.Item>\n\t\t *     <Composite.Item>Item 1.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t *   <Composite.Row>\n\t\t *     <Composite.Item>Item 2.1</Composite.Item>\n\t\t *     <Composite.Item>Item 2.2</Composite.Item>\n\t\t *     <Composite.Item>Item 2.3</Composite.Item>\n\t\t *   </Composite.Row>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tRow: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),\n\t\t/**\n\t\t * Renders an element in a composite widget that receives focus on mouse move\n\t\t * and loses focus to the composite base element on mouse leave. This should\n\t\t * be combined with the `Composite.Item` component.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 1\n\t\t *   </Composite.Hover>\n\t\t *   <Composite.Hover render={ <Composite.Item /> }>\n\t\t *     Item 2\n\t\t *   </Composite.Hover>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tHover: Object.assign( CompositeHover, {\n\t\t\tdisplayName: 'Composite.Hover',\n\t\t} ),\n\t\t/**\n\t\t * Renders a component that adds typeahead functionality to composite\n\t\t * components. Hitting printable character keys will move focus to the next\n\t\t * composite item that begins with the input characters.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t *\n\t\t * <Composite render={ <CompositeTypeahead /> }>\n\t\t *   <Composite.Item>Item 1</Composite.Item>\n\t\t *   <Composite.Item>Item 2</Composite.Item>\n\t\t * </Composite>\n\t\t * ```\n\t\t */\n\t\tTypeahead: Object.assign( CompositeTypeahead, {\n\t\t\tdisplayName: 'Composite.Typeahead',\n\t\t} ),\n\t\t/**\n\t\t * The React context used by the composite components. It can be used by\n\t\t * to access the composite store, and to forward the context when composite\n\t\t * sub-components are rendered across portals (ie. `SlotFill` components)\n\t\t * that would not otherwise forward the context to the `Fill` children.\n\t\t *\n\t\t * @example\n\t\t * ```jsx\n\t\t * import { Composite } from '@wordpress/components';\n\t\t * import { useContext } from '@wordpress/element';\n\t\t *\n\t\t * const compositeContext = useContext( Composite.Context );\n\t\t * ```\n\t\t */\n\t\tContext: Object.assign( CompositeContext, {\n\t\t\tdisplayName: 'Composite.Context',\n\t\t} ),\n\t}\n);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,OAAO,EAAEC,UAAU,QAAQ,oBAAoB;;AAExD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,aAAa,QAAQ,QAAQ;AACtC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,kBAAkB,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGC,MAAM,CAACC,MAAM,CACrCZ,UAAU,CAGP,SAASU,SAASA,CACpB;EACC;EACAG,QAAQ;EACRC,eAAe;EACfC,WAAW;EACXC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,KAAK;EACjBC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,KAAK;EACpBC,WAAW,GAAG,MAAM;EACpBC,GAAG,GAAGvB,KAAK,CAAC,CAAC;EAEb;EACAwB,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAEhB;EACA,GAAGC;AACJ,CAAC,EACDC,GAAG,EACF;EACD;EACA;EACA,MAAMC,SAAS,GAAGF,KAAK,CAACG,KAA+B;EACvD,MAAMC,aAAa,GAAG/B,OAAO,CAACgC,iBAAiB,CAAE;IAChDhB,QAAQ;IACRC,eAAe;IACfC,WAAW;IACXC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC;EACD,CAAE,CAAC;EAEH,MAAMM,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIE,aAAa;EAExC,MAAME,YAAY,GAAG/B,OAAO,CAC3B,OAAQ;IACP4B;EACD,CAAC,CAAE,EACH,CAAEA,KAAK,CACR,CAAC;EAED,oBACClB,IAAA,CAACZ,OAAO,CAACa,SAAS;IACjBa,QAAQ,EAAGA,QAAU;IACrBI,KAAK,EAAGA,KAAO;IAAA,GACVH,KAAK;IACVC,GAAG,EAAGA,GAAK;IAAAH,QAAA,eAEXb,IAAA,CAACR,gBAAgB,CAAC8B,QAAQ;MAACC,KAAK,EAAGF,YAAc;MAAAR,QAAA,EAC9CA;IAAQ,CACgB;EAAC,CACV,CAAC;AAEtB,CAAE,CAAC,EACH;EACC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEW,KAAK,EAAEtB,MAAM,CAACC,MAAM,CAAEV,cAAc,EAAE;IACrCgC,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAU,EAAExB,MAAM,CAACC,MAAM,CAAET,mBAAmB,EAAE;IAC/C+B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,IAAI,EAAEzB,MAAM,CAACC,MAAM,CAAEP,aAAa,EAAE;IAAE6B,WAAW,EAAE;EAAiB,CAAE,CAAC;EACvE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEG,GAAG,EAAE1B,MAAM,CAACC,MAAM,CAAEN,YAAY,EAAE;IAAE4B,WAAW,EAAE;EAAgB,CAAE,CAAC;EACpE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEI,KAAK,EAAE3B,MAAM,CAACC,MAAM,CAAER,cAAc,EAAE;IACrC8B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEK,SAAS,EAAE5B,MAAM,CAACC,MAAM,CAAEL,kBAAkB,EAAE;IAC7C2B,WAAW,EAAE;EACd,CAAE,CAAC;EACH;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,OAAO,EAAE7B,MAAM,CAACC,MAAM,CAAEX,gBAAgB,EAAE;IACzCiC,WAAW,EAAE;EACd,CAAE;AACH,CACD,CAAC","ignoreList":[]}

package/build-module/composite/item.js

@@ -15,9 +15,24 @@ import { forwardRef } from '@wordpress/element';
 import { useCompositeContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CompositeItem = forwardRef(function CompositeItem(props, ref) {
+  var _props$store;
   const context = useCompositeContext();
+
+  // @ts-expect-error The store prop is undocumented and only used by the
+  // legacy compat layer. The `store` prop is documented, but its type is
+  // obfuscated to discourage its use outside of the component's internals.
+  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+
+  // If the active item is not connected, Composite may end up in a state
+  // where none of the items are tabbable. In this case, we force all items to
+  // be tabbable, so that as soon as an item received focus, it becomes active
+  // and Composite goes back to working as expected.
+  const tabbable = Ariakit.useStoreState(store, state => {
+    return state?.activeId !== null && !store?.item(state?.activeId)?.element?.isConnected;
+  });
   return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {
-    store: context.store,
+    store: store,
+    tabbable: tabbable,
     ...props,
     ref: ref
   });

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeItem","props","ref","context","store"],"sources":["@wordpress/components/src/composite/item.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeItemProps } from './types';\n\nexport const CompositeItem = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< CompositeItemProps, 'button', false >\n>( function CompositeItem( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeItem\n\t\t\tstore={ context.store as Ariakit.CompositeStore }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,aAAa,GAAGJ,UAAU,CAGpC,SAASI,aAAaA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACvC,MAAMC,OAAO,GAAGN,mBAAmB,CAAC,CAAC;EACrC,oBACCE,IAAA,CAACJ,OAAO,CAACK,aAAa;IACrBI,KAAK,EAAGD,OAAO,CAACC,KAAiC;IAAA,GAC5CH,KAAK;IACVC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeItem","props","ref","_props$store","context","store","tabbable","useStoreState","state","activeId","item","element","isConnected"],"sources":["@wordpress/components/src/composite/item.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeItemProps } from './types';\n\nexport const CompositeItem = forwardRef<\n\tHTMLButtonElement,\n\tWordPressComponentProps< CompositeItemProps, 'button', false >\n>( function CompositeItem( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\t// If the active item is not connected, Composite may end up in a state\n\t// where none of the items are tabbable. In this case, we force all items to\n\t// be tabbable, so that as soon as an item received focus, it becomes active\n\t// and Composite goes back to working as expected.\n\tconst tabbable = Ariakit.useStoreState( store, ( state ) => {\n\t\treturn (\n\t\t\tstate?.activeId !== null &&\n\t\t\t! store?.item( state?.activeId )?.element?.isConnected\n\t\t);\n\t} );\n\n\treturn (\n\t\t<Ariakit.CompositeItem\n\t\t\tstore={ store }\n\t\t\ttabbable={ tabbable }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,aAAa,GAAGJ,UAAU,CAGpC,SAASI,aAAaA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EACvC,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;;EAExE;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGX,OAAO,CAACY,aAAa,CAAEF,KAAK,EAAIG,KAAK,IAAM;IAC3D,OACCA,KAAK,EAAEC,QAAQ,KAAK,IAAI,IACxB,CAAEJ,KAAK,EAAEK,IAAI,CAAEF,KAAK,EAAEC,QAAS,CAAC,EAAEE,OAAO,EAAEC,WAAW;EAExD,CAAE,CAAC;EAEH,oBACCb,IAAA,CAACJ,OAAO,CAACK,aAAa;IACrBK,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IAAA,GAChBL,KAAK;IACVC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}

package/build-module/composite/row.js

@@ -15,9 +15,15 @@ import { forwardRef } from '@wordpress/element';
 import { useCompositeContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CompositeRow = forwardRef(function CompositeRow(props, ref) {
+  var _props$store;
   const context = useCompositeContext();
+
+  // @ts-expect-error The store prop is undocumented and only used by the
+  // legacy compat layer. The `store` prop is documented, but its type is
+  // obfuscated to discourage its use outside of the component's internals.
+  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
   return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {
-    store: context.store,
+    store: store,
     ...props,
     ref: ref
   });

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeRow","props","ref","context","store"],"sources":["@wordpress/components/src/composite/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeRowProps } from './types';\n\nexport const CompositeRow = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeRowProps, 'div', false >\n>( function CompositeRow( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeRow\n\t\t\tstore={ context.store as Ariakit.CompositeStore }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,YAAY,GAAGJ,UAAU,CAGnC,SAASI,YAAYA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EACtC,MAAMC,OAAO,GAAGN,mBAAmB,CAAC,CAAC;EACrC,oBACCE,IAAA,CAACJ,OAAO,CAACK,YAAY;IACpBI,KAAK,EAAGD,OAAO,CAACC,KAAiC;IAAA,GAC5CH,KAAK;IACVC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeRow","props","ref","_props$store","context","store"],"sources":["@wordpress/components/src/composite/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeRowProps } from './types';\n\nexport const CompositeRow = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeRowProps, 'div', false >\n>( function CompositeRow( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\treturn <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,YAAY,GAAGJ,UAAU,CAGnC,SAASI,YAAYA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EACtC,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;EAExE,oBAAON,IAAA,CAACJ,OAAO,CAACK,YAAY;IAACK,KAAK,EAAGA,KAAO;IAAA,GAAMJ,KAAK;IAAGC,GAAG,EAAGA;EAAK,CAAE,CAAC;AACzE,CAAE,CAAC","ignoreList":[]}

package/build-module/composite/typeahead.js

@@ -15,9 +15,15 @@ import { forwardRef } from '@wordpress/element';
 import { useCompositeContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CompositeTypeahead = forwardRef(function CompositeTypeahead(props, ref) {
+  var _props$store;
   const context = useCompositeContext();
-  return /*#__PURE__*/_jsx(Ariakit.CompositeTypeahead, {
-    store: context.store,
+
+  // @ts-expect-error The store prop is undocumented and only used by the
+  // legacy compat layer. The `store` prop is documented, but its type is
+  // obfuscated to discourage its use outside of the component's internals.
+  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+  return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {
+    store: store,
     ...props,
     ref: ref
   });

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeTypeahead","props","ref","context","store"],"sources":["@wordpress/components/src/composite/typeahead.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeTypeaheadProps } from './types';\n\nexport const CompositeTypeahead = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeTypeaheadProps, 'div', false >\n>( function CompositeTypeahead( props, ref ) {\n\tconst context = useCompositeContext();\n\treturn (\n\t\t<Ariakit.CompositeTypeahead\n\t\t\tstore={ context.store as Ariakit.CompositeStore }\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,kBAAkB,GAAGJ,UAAU,CAGzC,SAASI,kBAAkBA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAC5C,MAAMC,OAAO,GAAGN,mBAAmB,CAAC,CAAC;EACrC,oBACCE,IAAA,CAACJ,OAAO,CAACK,kBAAkB;IAC1BI,KAAK,EAAGD,OAAO,CAACC,KAAiC;IAAA,GAC5CH,KAAK;IACVC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","forwardRef","useCompositeContext","jsx","_jsx","CompositeTypeahead","props","ref","_props$store","context","store","CompositeRow"],"sources":["@wordpress/components/src/composite/typeahead.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useCompositeContext } from './context';\nimport type { CompositeTypeaheadProps } from './types';\n\nexport const CompositeTypeahead = forwardRef<\n\tHTMLDivElement,\n\tWordPressComponentProps< CompositeTypeaheadProps, 'div', false >\n>( function CompositeTypeahead( props, ref ) {\n\tconst context = useCompositeContext();\n\n\t// @ts-expect-error The store prop is undocumented and only used by the\n\t// legacy compat layer. The `store` prop is documented, but its type is\n\t// obfuscated to discourage its use outside of the component's internals.\n\tconst store = ( props.store ?? context.store ) as Ariakit.CompositeStore;\n\n\treturn <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhD,OAAO,MAAMC,kBAAkB,GAAGJ,UAAU,CAGzC,SAASI,kBAAkBA,CAAEC,KAAK,EAAEC,GAAG,EAAG;EAAA,IAAAC,YAAA;EAC5C,MAAMC,OAAO,GAAGP,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA;EACA,MAAMQ,KAAK,IAAAF,YAAA,GAAKF,KAAK,CAACI,KAAK,cAAAF,YAAA,cAAAA,YAAA,GAAIC,OAAO,CAACC,KAAiC;EAExE,oBAAON,IAAA,CAACJ,OAAO,CAACW,YAAY;IAACD,KAAK,EAAGA,KAAO;IAAA,GAAMJ,KAAK;IAAGC,GAAG,EAAGA;EAAK,CAAE,CAAC;AACzE,CAAE,CAAC","ignoreList":[]}

package/build-module/date-time/date/index.js

@@ -93,7 +93,8 @@ export function DatePicker({
           viewPreviousMonth();
           setFocusable(subMonths(focusable, 1));
           onMonthPreviewed?.(format(subMonths(viewing, 1), TIMEZONELESS_FORMAT));
-        }
+        },
+        size: "compact"
       }), /*#__PURE__*/_jsxs(NavigatorHeading, {
         level: 3,
         children: [/*#__PURE__*/_jsx("strong", {
@@ -107,7 +108,8 @@ export function DatePicker({
           viewNextMonth();
           setFocusable(addMonths(focusable, 1));
           onMonthPreviewed?.(format(addMonths(viewing, 1), TIMEZONELESS_FORMAT));
-        }
+        },
+        size: "compact"
       })]
     }), /*#__PURE__*/_jsxs(Calendar, {
       onFocus: () => setIsFocusWithinCalendar(true),

package/build-module/date-time/date/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","Button","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport Button from '../../button';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\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\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\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\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\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\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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);\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);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["format","isSameDay","subMonths","addMonths","startOfDay","isEqual","addDays","subWeeks","addWeeks","isSameMonth","startOfWeek","endOfWeek","__","_n","sprintf","isRTL","arrowLeft","arrowRight","dateI18n","getSettings","useState","useRef","useEffect","useLilius","Wrapper","Navigator","NavigatorHeading","Calendar","DayOfWeek","DayButton","inputToDate","Button","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","DatePicker","currentDate","onChange","events","isInvalidDate","onMonthPreviewed","weekStartsOn","date","Date","calendar","viewing","setSelected","setViewing","isSelected","viewPreviousMonth","viewNextMonth","selected","focusable","setFocusable","isFocusWithinCalendar","setIsFocusWithinCalendar","prevCurrentDate","setPrevCurrentDate","className","role","children","icon","variant","onClick","size","level","getTimezoneOffset","onFocus","onBlur","map","day","toString","week","index","Day","column","isFocusable","isFocusAllowed","isToday","isInvalid","numEvents","filter","event","length","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","getMilliseconds","onKeyDown","nextFocusable","key","preventDefault","ref","current","focus","disabled","tabIndex","getDayLabel","hasEvents","formats","localizedDate"],"sources":["@wordpress/components/src/date-time/date/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tformat,\n\tisSameDay,\n\tsubMonths,\n\taddMonths,\n\tstartOfDay,\n\tisEqual,\n\taddDays,\n\tsubWeeks,\n\taddWeeks,\n\tisSameMonth,\n\tstartOfWeek,\n\tendOfWeek,\n} from 'date-fns';\nimport type { KeyboardEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport type { DatePickerProps } from '../types';\nimport {\n\tWrapper,\n\tNavigator,\n\tNavigatorHeading,\n\tCalendar,\n\tDayOfWeek,\n\tDayButton,\n} from './styles';\nimport { inputToDate } from '../utils';\nimport Button from '../../button';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents = [],\n\tisInvalidDate,\n\tonMonthPreviewed,\n\tstartOfWeek: weekStartsOn = 0,\n}: DatePickerProps ) {\n\tconst date = currentDate ? inputToDate( currentDate ) : new Date();\n\n\tconst {\n\t\tcalendar,\n\t\tviewing,\n\t\tsetSelected,\n\t\tsetViewing,\n\t\tisSelected,\n\t\tviewPreviousMonth,\n\t\tviewNextMonth,\n\t} = useLilius( {\n\t\tselected: [ startOfDay( date ) ],\n\t\tviewing: startOfDay( date ),\n\t\tweekStartsOn,\n\t} );\n\n\t// Used to implement a roving tab index. Tracks the day that receives focus\n\t// when the user tabs into the calendar.\n\tconst [ focusable, setFocusable ] = useState( startOfDay( date ) );\n\n\t// Allows us to only programmatically focus() a day when focus was already\n\t// within the calendar. This stops us stealing focus from e.g. a TimePicker\n\t// input.\n\tconst [ isFocusWithinCalendar, setIsFocusWithinCalendar ] =\n\t\tuseState( false );\n\n\t// Update internal state when currentDate prop changes.\n\tconst [ prevCurrentDate, setPrevCurrentDate ] = useState( currentDate );\n\tif ( currentDate !== prevCurrentDate ) {\n\t\tsetPrevCurrentDate( currentDate );\n\t\tsetSelected( [ startOfDay( date ) ] );\n\t\tsetViewing( startOfDay( date ) );\n\t\tsetFocusable( startOfDay( date ) );\n\t}\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__date\"\n\t\t\trole=\"application\"\n\t\t\taria-label={ __( 'Calendar' ) }\n\t\t>\n\t\t\t<Navigator>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowRight : arrowLeft }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View previous month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewPreviousMonth();\n\t\t\t\t\t\tsetFocusable( subMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\tsubMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<NavigatorHeading level={ 3 }>\n\t\t\t\t\t<strong>\n\t\t\t\t\t\t{ dateI18n(\n\t\t\t\t\t\t\t'F',\n\t\t\t\t\t\t\tviewing,\n\t\t\t\t\t\t\t-viewing.getTimezoneOffset()\n\t\t\t\t\t\t) }\n\t\t\t\t\t</strong>{ ' ' }\n\t\t\t\t\t{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }\n\t\t\t\t</NavigatorHeading>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\taria-label={ __( 'View next month' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tviewNextMonth();\n\t\t\t\t\t\tsetFocusable( addMonths( focusable, 1 ) );\n\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\taddMonths( viewing, 1 ),\n\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</Navigator>\n\t\t\t<Calendar\n\t\t\t\tonFocus={ () => setIsFocusWithinCalendar( true ) }\n\t\t\t\tonBlur={ () => setIsFocusWithinCalendar( false ) }\n\t\t\t>\n\t\t\t\t{ calendar[ 0 ][ 0 ].map( ( day ) => (\n\t\t\t\t\t<DayOfWeek key={ day.toString() }>\n\t\t\t\t\t\t{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }\n\t\t\t\t\t</DayOfWeek>\n\t\t\t\t) ) }\n\t\t\t\t{ calendar[ 0 ].map( ( week ) =>\n\t\t\t\t\tweek.map( ( day, index ) => {\n\t\t\t\t\t\tif ( ! isSameMonth( day, viewing ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tkey={ day.toString() }\n\t\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\t\tcolumn={ index + 1 }\n\t\t\t\t\t\t\t\tisSelected={ isSelected( day ) }\n\t\t\t\t\t\t\t\tisFocusable={ isEqual( day, focusable ) }\n\t\t\t\t\t\t\t\tisFocusAllowed={ isFocusWithinCalendar }\n\t\t\t\t\t\t\t\tisToday={ isSameDay( day, new Date() ) }\n\t\t\t\t\t\t\t\tisInvalid={\n\t\t\t\t\t\t\t\t\tisInvalidDate ? isInvalidDate( day ) : false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tnumEvents={\n\t\t\t\t\t\t\t\t\tevents.filter( ( event ) =>\n\t\t\t\t\t\t\t\t\t\tisSameDay( event.date, day )\n\t\t\t\t\t\t\t\t\t).length\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetSelected( [ day ] );\n\t\t\t\t\t\t\t\t\tsetFocusable( day );\n\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t// Don't change the selected date's time fields.\n\t\t\t\t\t\t\t\t\t\t\tnew Date(\n\t\t\t\t\t\t\t\t\t\t\t\tday.getFullYear(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getMonth(),\n\t\t\t\t\t\t\t\t\t\t\t\tday.getDate(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getHours(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMinutes(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getSeconds(),\n\t\t\t\t\t\t\t\t\t\t\t\tdate.getMilliseconds()\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tlet nextFocusable;\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? 1 : -1\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\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addDays(\n\t\t\t\t\t\t\t\t\t\t\tday,\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? -1 : 1\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\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addWeeks( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageUp' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = subMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'PageDown' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = addMonths( day, 1 );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Home' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfWeek( day );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif ( event.key === 'End' ) {\n\t\t\t\t\t\t\t\t\t\tnextFocusable = startOfDay(\n\t\t\t\t\t\t\t\t\t\t\tendOfWeek( day )\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\tif ( nextFocusable ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tsetFocusable( nextFocusable );\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t! isSameMonth(\n\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\tviewing\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tsetViewing( nextFocusable );\n\t\t\t\t\t\t\t\t\t\t\tonMonthPreviewed?.(\n\t\t\t\t\t\t\t\t\t\t\t\tformat(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextFocusable,\n\t\t\t\t\t\t\t\t\t\t\t\t\tTIMEZONELESS_FORMAT\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);\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);\n\t\t\t\t\t} )\n\t\t\t\t) }\n\t\t\t</Calendar>\n\t\t</Wrapper>\n\t);\n}\n\ntype DayProps = {\n\tday: Date;\n\tcolumn: number;\n\tisSelected: boolean;\n\tisFocusable: boolean;\n\tisFocusAllowed: boolean;\n\tisToday: boolean;\n\tnumEvents: number;\n\tisInvalid: boolean;\n\tonClick: () => void;\n\tonKeyDown: KeyboardEventHandler;\n};\n\nfunction Day( {\n\tday,\n\tcolumn,\n\tisSelected,\n\tisFocusable,\n\tisFocusAllowed,\n\tisToday,\n\tisInvalid,\n\tnumEvents,\n\tonClick,\n\tonKeyDown,\n}: DayProps ) {\n\tconst ref = useRef< HTMLButtonElement >();\n\n\t// Focus the day when it becomes focusable, e.g. because an arrow key is\n\t// pressed. Only do this if focus is allowed - this stops us stealing focus\n\t// from e.g. a TimePicker input.\n\tuseEffect( () => {\n\t\tif ( ref.current && isFocusable && isFocusAllowed ) {\n\t\t\tref.current.focus();\n\t\t}\n\t\t// isFocusAllowed is not a dep as there is no point calling focus() on\n\t\t// an already focused element.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ isFocusable ] );\n\n\treturn (\n\t\t<DayButton\n\t\t\tref={ ref }\n\t\t\tclassName=\"components-datetime__date__day\" // Unused, for backwards compatibility.\n\t\t\tdisabled={ isInvalid }\n\t\t\ttabIndex={ isFocusable ? 0 : -1 }\n\t\t\taria-label={ getDayLabel( day, isSelected, numEvents ) }\n\t\t\tcolumn={ column }\n\t\t\tisSelected={ isSelected }\n\t\t\tisToday={ isToday }\n\t\t\thasEvents={ numEvents > 0 }\n\t\t\tonClick={ onClick }\n\t\t\tonKeyDown={ onKeyDown }\n\t\t>\n\t\t\t{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }\n\t\t</DayButton>\n\t);\n}\n\nfunction getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {\n\tconst { formats } = getSettings();\n\tconst localizedDate = dateI18n(\n\t\tformats.date,\n\t\tdate,\n\t\t-date.getTimezoneOffset()\n\t);\n\tif ( isSelected && numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. Selected. There is %2$d event',\n\t\t\t\t'%1$s. Selected. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t} else if ( isSelected ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The calendar date.\n\t\t\t__( '%1$s. Selected' ),\n\t\t\tlocalizedDate\n\t\t);\n\t} else if ( numEvents > 0 ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The calendar date. 2: Number of events on the calendar date.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event',\n\t\t\t\t'%1$s. There are %2$d events',\n\t\t\t\tnumEvents\n\t\t\t),\n\t\t\tlocalizedDate,\n\t\t\tnumEvents\n\t\t);\n\t}\n\treturn localizedDate;\n}\n\nexport default DatePicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/drop-zone/index.js

@@ -87,6 +87,7 @@ export function DropZoneComponent({
       setType(_type);
     },
     onDragEnd() {
+      setIsDraggingOverElement(false);
       setIsDraggingOverDocument(false);
       setType(undefined);
     },
@@ -99,8 +100,6 @@ export function DropZoneComponent({
   });
   const classes = clsx('components-drop-zone', className, {
     'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
-    'has-dragged-out': !isDraggingOverElement,
-    // Keeping the following classnames for legacy purposes
     'is-dragging-over-document': isDraggingOverDocument,
     'is-dragging-over-element': isDraggingOverElement,
     [`is-dragging-${type}`]: !!type

package/build-module/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","useState","upload","Icon","getFilesFromDataTransfer","__experimentalUseDropZone","useDropZone","jsx","_jsx","jsxs","_jsxs","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","event","files","dataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","children","icon"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'has-dragged-out': ! isDraggingOverElement,\n\t\t// Keeping the following classnames for legacy purposes\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","useState","upload","Icon","getFilesFromDataTransfer","__experimentalUseDropZone","useDropZone","jsx","_jsx","jsxs","_jsxs","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","event","files","dataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","children","icon"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}

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

@@ -46,6 +46,28 @@ function NameInput({
   });
 }
 
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+export function deduplicateElementSlugs(elements) {
+  const slugCounts = {};
+  return elements.map(element => {
+    var _newSlug;
+    let newSlug;
+    const {
+      slug
+    } = element;
+    slugCounts[slug] = (slugCounts[slug] || 0) + 1;
+    if (slugCounts[slug] > 1) {
+      newSlug = `${slug}-${slugCounts[slug] - 1}`;
+    }
+    return {
+      ...element,
+      slug: (_newSlug = newSlug) !== null && _newSlug !== void 0 ? _newSlug : slug
+    };
+  });
+}
+
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
@@ -206,7 +228,7 @@ function PaletteEditListView({
   useEffect(() => {
     elementsReferenceRef.current = elements;
   }, [elements]);
-  const debounceOnChange = useDebounce(onChange, 100);
+  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);
   return /*#__PURE__*/_jsx(VStack, {
     spacing: 3,
     children: /*#__PURE__*/_jsx(ItemGroup, {

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","PaletteEditContents","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","kebabCase","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_COLOR","NameInput","value","onChange","label","hideLabelFromVision","getNameAndSlugForPosition","elements","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","name","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","children","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","popoverAnchor","setPopoverAnchor","anchor","ref","as","justify","onClick","trim","length","style","padding","colorValue","nextName","size","icon","PaletteEditListView","addColorRef","elementsReferenceRef","current","debounceOnChange","spacing","isRounded","map","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","level","isPressed","toggleProps","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 { useDebounce } 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\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\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 name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\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 name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = 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( nameRegex );\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 {\n\t\tname: sprintf(\n\t\t\t/* translators: %s: is an id for a custom color */\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\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: clsx(\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__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\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\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 ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! 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>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: /* Fall back to non-breaking space to maintain height */\n\t\t\t\t\t\t\t\t  '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\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{ isEditingColor && (\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\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\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 elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\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\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\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\taddColorRef.current?.focus();\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\tconst addColorRef = useRef< HTMLButtonElement | null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\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\tsize=\"small\"\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\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\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 { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\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,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsize: 'small',\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</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\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\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\taddColorRef={ addColorRef }\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\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\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\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","useRef","useEffect","useCallback","useMemo","__","sprintf","lineSolid","moreVertical","plus","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","PaletteEditContents","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","kebabCase","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_COLOR","NameInput","value","onChange","label","hideLabelFromVision","deduplicateElementSlugs","elements","slugCounts","map","element","_newSlug","newSlug","slug","getNameAndSlugForPosition","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","matches","match","id","parseInt","name","ColorPickerPopover","isGradient","popoverProps","receivedPopoverProps","onClose","shift","offset","resize","placement","className","children","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","popoverAnchor","setPopoverAnchor","anchor","ref","as","justify","onClick","trim","length","style","padding","colorValue","nextName","size","icon","PaletteEditListView","addColorRef","elementsReferenceRef","current","debounceOnChange","updatedElements","spacing","isRounded","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","level","isPressed","toggleProps","role","variant","clearable","disableCustomGradients","disableCustomColors"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 { useDebounce } 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\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\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 * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs< T extends PaletteElement >(\n\telements: T[]\n) {\n\tconst slugCounts: { [ slug: string ]: number } = {};\n\n\treturn elements.map( ( element ) => {\n\t\tlet newSlug: string | undefined;\n\n\t\tconst { slug } = element;\n\t\tslugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;\n\n\t\tif ( slugCounts[ slug ] > 1 ) {\n\t\t\tnewSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;\n\t\t}\n\n\t\treturn { ...element, slug: newSlug ?? slug };\n\t} );\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\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 name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = 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( nameRegex );\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 {\n\t\tname: sprintf(\n\t\t\t/* translators: %s: is an id for a custom color */\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends PaletteElement >( {\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: clsx(\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__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 PaletteElement >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\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 ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! 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>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: /* Fall back to non-breaking space to maintain height */\n\t\t\t\t\t\t\t\t  '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\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{ isEditingColor && (\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\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends PaletteElement >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\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 elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce(\n\t\t( updatedElements: T[] ) =>\n\t\t\tonChange( deduplicateElementSlugs( updatedElements ) ),\n\t\t100\n\t);\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\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\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\taddColorRef.current?.focus();\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\tconst addColorRef = useRef< HTMLButtonElement | null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\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\tsize=\"small\"\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\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\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 { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\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,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsize: 'small',\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</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\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\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\taddColorRef={ addColorRef }\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\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\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\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js

@@ -55,12 +55,13 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   const selectedValue = useStoreState(radio, 'value');
   const setValue = radio.setValue;
   const groupContextValue = useMemo(() => ({
+    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
     baseId,
     isBlock: !isAdaptiveWidth,
     size,
     value: selectedValue,
     setValue
-  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
+  }), [baseId, isAdaptiveWidth, radio, size, selectedValue, setValue]);
   return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {
     value: groupContextValue,
     children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","groupContextValue","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGtB,aAAa,CAChCuB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG/B,OAAO,CAACgC,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE7B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM8B,aAAa,GAAGlC,aAAa,CAAE8B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGhC,OAAO,CAChC,OACG;IACDsB,MAAM;IACNW,OAAO,EAAE,CAAExB,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEiB,aAAa;IACpBF;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEI,IAAI,EAAEkB,aAAa,EAAEF,QAAQ,CACzD,CAAC;EAED,oBACCvB,IAAA,CAACH,yBAAyB,CAAC+B,QAAQ;IAACpB,KAAK,EAAGkB,iBAAmB;IAAAxB,QAAA,eAC9DF,IAAA,CAACV,OAAO,CAACuC,UAAU;MAClBC,KAAK,EAAGT,KAAO;MACf,cAAajB,KAAO;MACpB2B,MAAM,eAAG/B,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdgB,UAAU;MACfF,EAAE,EAAGM,MAAQ;MACbgB,GAAG,EAAGnB,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGtB,UAAU,CACvDQ,yCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","useStoreState","useInstanceId","forwardRef","useMemo","isRTL","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","selectedValue","groupContextValue","activeItemIsNotFirstItem","getState","activeId","first","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, radio, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC,SAASC,aAAa,QAAQ,gBAAgB;;AAE9C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGtB,aAAa,CAChCuB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG/B,OAAO,CAACgC,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE7B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM8B,aAAa,GAAGlC,aAAa,CAAE8B,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAGhC,OAAO,CAChC,OACG;IACDiC,wBAAwB,EAAEA,CAAA,KACzBN,KAAK,CAACO,QAAQ,CAAC,CAAC,CAACC,QAAQ,KAAKR,KAAK,CAACS,KAAK,CAAC,CAAC;IAC5Cd,MAAM;IACNe,OAAO,EAAE,CAAE5B,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEiB,aAAa;IACpBF;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEkB,KAAK,EAAEd,IAAI,EAAEkB,aAAa,EAAEF,QAAQ,CAChE,CAAC;EAED,oBACCvB,IAAA,CAACH,yBAAyB,CAACmC,QAAQ;IAACxB,KAAK,EAAGkB,iBAAmB;IAAAxB,QAAA,eAC9DF,IAAA,CAACV,OAAO,CAAC2C,UAAU;MAClBC,KAAK,EAAGb,KAAO;MACf,cAAajB,KAAO;MACpB+B,MAAM,eAAGnC,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdgB,UAAU;MACfF,EAAE,EAAGM,MAAQ;MACboB,GAAG,EAAGvB,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGtB,UAAU,CACvDQ,yCACD,CAAC","ignoreList":[]}