npm - @wordpress/components - Versions diffs - 32.0.2-next.v.0 → 32.1.0 - Mend

@wordpress/components 32.0.2-next.v.0 → 32.1.0

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

Files changed (304) hide show

package/build/composite/hover.cjs CHANGED Viewed

@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeHover2 = (0, import_element.forwardRef)(function CompositeHover3(props, ref) {
-  var _props$store;
   const context = (0, import_context.useCompositeContext)();
-  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+  const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeHover, {
     store,
     ...props,

package/build/composite/hover.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/composite/hover.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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeHover = forwardRef(function CompositeHover(props, ref) {\n  var _props$store;\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeHover, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,MAAI;AACJ,QAAM,cAAU,oCAAoB;AAKpC,QAAM,SAAS,eAAe,MAAM,WAAW,QAAQ,iBAAiB,SAAS,eAAe,QAAQ;AACxG,SAAoB,uCAAAC,KAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeHover = forwardRef(function CompositeHover(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeHover, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["CompositeHover", "_jsx"]
 }

package/build/composite/index.cjs CHANGED Viewed

@@ -73,7 +73,7 @@ var Composite2 = Object.assign((0, import_element.forwardRef)(function Composite
     orientation,
     rtl
   });
-  const store = storeProp !== null && storeProp !== void 0 ? storeProp : internalStore;
+  const store = storeProp ?? internalStore;
   const contextValue = (0, import_element.useMemo)(() => ({
     store
   }), [store]);

package/build/composite/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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 */\n\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 { jsx as _jsx } from \"react/jsx-runtime\";\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(forwardRef(function Composite({\n  // Composite store props\n  activeId,\n  defaultActiveId,\n  setActiveId,\n  focusLoop = false,\n  focusWrap = false,\n  focusShift = false,\n  virtualFocus = false,\n  orientation = 'both',\n  rtl = isRTL(),\n  // Composite component props\n  children,\n  disabled = false,\n  // Rest props\n  ...props\n}, ref) {\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer.\n  const storeProp = props.store;\n  const internalStore = Ariakit.useCompositeStore({\n    activeId,\n    defaultActiveId,\n    setActiveId,\n    focusLoop,\n    focusWrap,\n    focusShift,\n    virtualFocus,\n    orientation,\n    rtl\n  });\n  const store = storeProp !== null && storeProp !== void 0 ? storeProp : internalStore;\n  const contextValue = useMemo(() => ({\n    store\n  }), [store]);\n  return /*#__PURE__*/_jsx(Ariakit.Composite, {\n    disabled: disabled,\n    store: store,\n    ...props,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(CompositeContext.Provider, {\n      value: contextValue,\n      children: children\n    })\n  });\n}), {\n  /**\n   * Renders a group element for composite items.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Group>\n   *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n   *     <Composite.Item>Item 1</Composite.Item>\n   *     <Composite.Item>Item 2</Composite.Item>\n   *   </CompositeGroup>\n   * </Composite>\n   * ```\n   */\n  Group: Object.assign(CompositeGroup, {\n    displayName: 'Composite.Group'\n  }),\n  /**\n   * Renders a label in a composite group. This component must be wrapped with\n   * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n   * composite group element.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Group>\n   *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n   *     <Composite.Item>Item 1</Composite.Item>\n   *     <Composite.Item>Item 2</Composite.Item>\n   *   </CompositeGroup>\n   * </Composite>\n   * ```\n   */\n  GroupLabel: Object.assign(CompositeGroupLabel, {\n    displayName: 'Composite.GroupLabel'\n  }),\n  /**\n   * Renders a composite item.\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.Item>Item 3</Composite.Item>\n   * </Composite>\n   * ```\n   */\n  Item: Object.assign(CompositeItem, {\n    displayName: 'Composite.Item'\n  }),\n  /**\n   * Renders a composite row. Wrapping `Composite.Item` elements within\n   * `Composite.Row` will create a two-dimensional composite widget, such as a\n   * grid.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Row>\n   *     <Composite.Item>Item 1.1</Composite.Item>\n   *     <Composite.Item>Item 1.2</Composite.Item>\n   *     <Composite.Item>Item 1.3</Composite.Item>\n   *   </Composite.Row>\n   *   <Composite.Row>\n   *     <Composite.Item>Item 2.1</Composite.Item>\n   *     <Composite.Item>Item 2.2</Composite.Item>\n   *     <Composite.Item>Item 2.3</Composite.Item>\n   *   </Composite.Row>\n   * </Composite>\n   * ```\n   */\n  Row: Object.assign(CompositeRow, {\n    displayName: 'Composite.Row'\n  }),\n  /**\n   * Renders an element in a composite widget that receives focus on mouse move\n   * and loses focus to the composite base element on mouse leave. This should\n   * be combined with the `Composite.Item` component.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Hover render={ <Composite.Item /> }>\n   *     Item 1\n   *   </Composite.Hover>\n   *   <Composite.Hover render={ <Composite.Item /> }>\n   *     Item 2\n   *   </Composite.Hover>\n   * </Composite>\n   * ```\n   */\n  Hover: Object.assign(CompositeHover, {\n    displayName: 'Composite.Hover'\n  }),\n  /**\n   * Renders a component that adds typeahead functionality to composite\n   * components. Hitting printable character keys will move focus to the next\n   * composite item that begins with the input characters.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite render={ <CompositeTypeahead /> }>\n   *   <Composite.Item>Item 1</Composite.Item>\n   *   <Composite.Item>Item 2</Composite.Item>\n   * </Composite>\n   * ```\n   */\n  Typeahead: Object.assign(CompositeTypeahead, {\n    displayName: 'Composite.Typeahead'\n  }),\n  /**\n   * The React context used by the composite components. It can be used by\n   * to access the composite store, and to forward the context when composite\n   * sub-components are rendered across portals (ie. `SlotFill` components)\n   * that would not otherwise forward the context to the `Fill` children.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   * import { useContext } from '@wordpress/element';\n   *\n   * const compositeContext = useContext( Composite.Context );\n   * ```\n   */\n  Context: Object.assign(CompositeContext, {\n    displayName: 'Composite.Context'\n  })\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,mBAAAA;AAAA;AAAA;AAaA,cAAyB;AAKzB,kBAAsB;AACtB,qBAAoC;AAMpC,qBAAiC;AACjC,mBAA+B;AAC/B,yBAAoC;AACpC,mBAA+B;AAC/B,kBAA8B;AAC9B,iBAA6B;AAC7B,uBAAmC;AACnC,yBAA4B;AAgBrB,IAAMA,aAAY,OAAO,WAAO,2BAAW,SAASA,WAAU;AAAA;AAAA,EAEnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAM,mBAAM;AAAA;AAAA,EAEZ;AAAA,EACA,WAAW;AAAA;AAAA,EAEX,GAAG;AACL,GAAG,KAAK;AAGN,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAwB,0BAAkB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ,cAAc,QAAQ,cAAc,SAAS,YAAY;AACvE,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,KAAK,CAAC;AACX,SAAoB,uCAAAC,KAAa,mBAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA,UAAuB,uCAAAA,KAAK,gCAAiB,UAAU;AAAA,MACrD,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBF,OAAO,OAAO,OAAO,6BAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBD,YAAY,OAAO,OAAO,wCAAqB;AAAA,IAC7C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,MAAM,OAAO,OAAO,2BAAe;AAAA,IACjC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBD,KAAK,OAAO,OAAO,yBAAc;AAAA,IAC/B,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBD,OAAO,OAAO,OAAO,6BAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBD,WAAW,OAAO,OAAO,qCAAoB;AAAA,IAC3C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,SAAS,OAAO,OAAO,iCAAkB;AAAA,IACvC,aAAa;AAAA,EACf,CAAC;AACH,CAAC;",
+  "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 */\n\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 { jsx as _jsx } from \"react/jsx-runtime\";\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(forwardRef(function Composite({\n  // Composite store props\n  activeId,\n  defaultActiveId,\n  setActiveId,\n  focusLoop = false,\n  focusWrap = false,\n  focusShift = false,\n  virtualFocus = false,\n  orientation = 'both',\n  rtl = isRTL(),\n  // Composite component props\n  children,\n  disabled = false,\n  // Rest props\n  ...props\n}, ref) {\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer.\n  const storeProp = props.store;\n  const internalStore = Ariakit.useCompositeStore({\n    activeId,\n    defaultActiveId,\n    setActiveId,\n    focusLoop,\n    focusWrap,\n    focusShift,\n    virtualFocus,\n    orientation,\n    rtl\n  });\n  const store = storeProp ?? internalStore;\n  const contextValue = useMemo(() => ({\n    store\n  }), [store]);\n  return /*#__PURE__*/_jsx(Ariakit.Composite, {\n    disabled: disabled,\n    store: store,\n    ...props,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(CompositeContext.Provider, {\n      value: contextValue,\n      children: children\n    })\n  });\n}), {\n  /**\n   * Renders a group element for composite items.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Group>\n   *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n   *     <Composite.Item>Item 1</Composite.Item>\n   *     <Composite.Item>Item 2</Composite.Item>\n   *   </CompositeGroup>\n   * </Composite>\n   * ```\n   */\n  Group: Object.assign(CompositeGroup, {\n    displayName: 'Composite.Group'\n  }),\n  /**\n   * Renders a label in a composite group. This component must be wrapped with\n   * `Composite.Group` so the `aria-labelledby` prop is properly set on the\n   * composite group element.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Group>\n   *     <Composite.GroupLabel>Label</Composite.GroupLabel>\n   *     <Composite.Item>Item 1</Composite.Item>\n   *     <Composite.Item>Item 2</Composite.Item>\n   *   </CompositeGroup>\n   * </Composite>\n   * ```\n   */\n  GroupLabel: Object.assign(CompositeGroupLabel, {\n    displayName: 'Composite.GroupLabel'\n  }),\n  /**\n   * Renders a composite item.\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.Item>Item 3</Composite.Item>\n   * </Composite>\n   * ```\n   */\n  Item: Object.assign(CompositeItem, {\n    displayName: 'Composite.Item'\n  }),\n  /**\n   * Renders a composite row. Wrapping `Composite.Item` elements within\n   * `Composite.Row` will create a two-dimensional composite widget, such as a\n   * grid.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Row>\n   *     <Composite.Item>Item 1.1</Composite.Item>\n   *     <Composite.Item>Item 1.2</Composite.Item>\n   *     <Composite.Item>Item 1.3</Composite.Item>\n   *   </Composite.Row>\n   *   <Composite.Row>\n   *     <Composite.Item>Item 2.1</Composite.Item>\n   *     <Composite.Item>Item 2.2</Composite.Item>\n   *     <Composite.Item>Item 2.3</Composite.Item>\n   *   </Composite.Row>\n   * </Composite>\n   * ```\n   */\n  Row: Object.assign(CompositeRow, {\n    displayName: 'Composite.Row'\n  }),\n  /**\n   * Renders an element in a composite widget that receives focus on mouse move\n   * and loses focus to the composite base element on mouse leave. This should\n   * be combined with the `Composite.Item` component.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite>\n   *   <Composite.Hover render={ <Composite.Item /> }>\n   *     Item 1\n   *   </Composite.Hover>\n   *   <Composite.Hover render={ <Composite.Item /> }>\n   *     Item 2\n   *   </Composite.Hover>\n   * </Composite>\n   * ```\n   */\n  Hover: Object.assign(CompositeHover, {\n    displayName: 'Composite.Hover'\n  }),\n  /**\n   * Renders a component that adds typeahead functionality to composite\n   * components. Hitting printable character keys will move focus to the next\n   * composite item that begins with the input characters.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   *\n   * <Composite render={ <CompositeTypeahead /> }>\n   *   <Composite.Item>Item 1</Composite.Item>\n   *   <Composite.Item>Item 2</Composite.Item>\n   * </Composite>\n   * ```\n   */\n  Typeahead: Object.assign(CompositeTypeahead, {\n    displayName: 'Composite.Typeahead'\n  }),\n  /**\n   * The React context used by the composite components. It can be used by\n   * to access the composite store, and to forward the context when composite\n   * sub-components are rendered across portals (ie. `SlotFill` components)\n   * that would not otherwise forward the context to the `Fill` children.\n   *\n   * @example\n   * ```jsx\n   * import { Composite } from '@wordpress/components';\n   * import { useContext } from '@wordpress/element';\n   *\n   * const compositeContext = useContext( Composite.Context );\n   * ```\n   */\n  Context: Object.assign(CompositeContext, {\n    displayName: 'Composite.Context'\n  })\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,mBAAAA;AAAA;AAAA;AAaA,cAAyB;AAKzB,kBAAsB;AACtB,qBAAoC;AAMpC,qBAAiC;AACjC,mBAA+B;AAC/B,yBAAoC;AACpC,mBAA+B;AAC/B,kBAA8B;AAC9B,iBAA6B;AAC7B,uBAAmC;AACnC,yBAA4B;AAgBrB,IAAMA,aAAY,OAAO,WAAO,2BAAW,SAASA,WAAU;AAAA;AAAA,EAEnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAM,mBAAM;AAAA;AAAA,EAEZ;AAAA,EACA,WAAW;AAAA;AAAA,EAEX,GAAG;AACL,GAAG,KAAK;AAGN,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAwB,0BAAkB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ,aAAa;AAC3B,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,KAAK,CAAC;AACX,SAAoB,uCAAAC,KAAa,mBAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA,UAAuB,uCAAAA,KAAK,gCAAiB,UAAU;AAAA,MACrD,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBF,OAAO,OAAO,OAAO,6BAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBD,YAAY,OAAO,OAAO,wCAAqB;AAAA,IAC7C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,MAAM,OAAO,OAAO,2BAAe;AAAA,IACjC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBD,KAAK,OAAO,OAAO,yBAAc;AAAA,IAC/B,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBD,OAAO,OAAO,OAAO,6BAAgB;AAAA,IACnC,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBD,WAAW,OAAO,OAAO,qCAAoB;AAAA,IAC3C,aAAa;AAAA,EACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeD,SAAS,OAAO,OAAO,iCAAkB;AAAA,IACvC,aAAa;AAAA,EACf,CAAC;AACH,CAAC;",
   "names": ["Composite", "_jsx"]
 }

package/build/composite/item.cjs CHANGED Viewed

@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeItem2 = (0, import_element.forwardRef)(function CompositeItem3(props, ref) {
-  var _props$store;
   const context = (0, import_context.useCompositeContext)();
-  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+  const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeItem, {
     store,
     ...props,

package/build/composite/item.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n  var _props$store;\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,uBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,qBAAgB,2BAAW,SAASA,eAAc,OAAO,KAAK;AACzE,MAAI;AACJ,QAAM,cAAU,oCAAoB;AAKpC,QAAM,SAAS,eAAe,MAAM,WAAW,QAAQ,iBAAiB,SAAS,eAAe,QAAQ;AACxG,SAAoB,uCAAAC,KAAa,uBAAe;AAAA,IAC9C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,uBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,qBAAgB,2BAAW,SAASA,eAAc,OAAO,KAAK;AACzE,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,uBAAe;AAAA,IAC9C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["CompositeItem", "_jsx"]
 }

package/build/composite/legacy/index.cjs CHANGED Viewed

@@ -67,8 +67,7 @@ var LEGACY_TO_NEW_DISPLAY_NAME = {
   __unstableUseCompositeState: "Composite"
 };
 function proxyComposite(ProxiedComponent, propMap = {}) {
-  var _ProxiedComponent$dis;
-  const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : "";
+  const displayName = ProxiedComponent.displayName ?? "";
   const Component = (legacyProps) => {
     (0, import_deprecated.default)(`wp.components.${displayName}`, {
       since: "6.7",

package/build/composite/legacy/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/composite/legacy/index.tsx"],
-  "sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * This file aims at providing components that are as close as possible to the\n * original `reakit`-based implementation (which was removed from the codebase),\n * although it is recommended that consumers of the package switch to the stable,\n * un-prefixed, `ariakit`-based version of `Composite`.\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 { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Composite as Current } from '..';\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction mapLegacyStatePropsToComponentProps(legacyProps) {\n  // If a `state` prop is provided, we unpack that; otherwise,\n  // the necessary props are provided directly in `legacyProps`.\n  if (legacyProps.state) {\n    const {\n      state,\n      ...rest\n    } = legacyProps;\n    const {\n      store,\n      ...props\n    } = mapLegacyStatePropsToComponentProps(state);\n    return {\n      ...rest,\n      ...props,\n      store\n    };\n  }\n  return legacyProps;\n}\nconst LEGACY_TO_NEW_DISPLAY_NAME = {\n  __unstableComposite: 'Composite',\n  __unstableCompositeGroup: 'Composite.Group or Composite.Row',\n  __unstableCompositeItem: 'Composite.Item',\n  __unstableUseCompositeState: 'Composite'\n};\nfunction proxyComposite(ProxiedComponent, propMap = {}) {\n  var _ProxiedComponent$dis;\n  const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : '';\n  const Component = legacyProps => {\n    deprecated(`wp.components.${displayName}`, {\n      since: '6.7',\n      alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined\n    });\n    const {\n      store,\n      ...rest\n    } = mapLegacyStatePropsToComponentProps(legacyProps);\n    let props = rest;\n    props = {\n      ...props,\n      id: useInstanceId(store, props.baseId, props.id)\n    };\n    Object.entries(propMap).forEach(([from, to]) => {\n      if (props.hasOwnProperty(from)) {\n        Object.assign(props, {\n          [to]: props[from]\n        });\n        delete props[from];\n      }\n    });\n    delete props.baseId;\n    return /*#__PURE__*/_jsx(ProxiedComponent, {\n      ...props,\n      store: store\n    });\n  };\n  Component.displayName = displayName;\n  return Component;\n}\n\n// The old `CompositeGroup` used to behave more like the current\n// `CompositeRow`, but this has been split into two different\n// components. We handle that difference by checking on the\n// provided role, and returning the appropriate component.\nconst UnproxiedCompositeGroup = forwardRef(({\n  role,\n  ...props\n}, ref) => {\n  const Component = role === 'row' ? Current.Row : Current.Group;\n  return /*#__PURE__*/_jsx(Component, {\n    ref: ref,\n    role: role,\n    ...props\n  });\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport const Composite = proxyComposite(Object.assign(Current, {\n  displayName: '__unstableComposite'\n}), {\n  baseId: 'id'\n});\n/**\n * _Note: please use the `Composite.Row` or `Composite.Group` components instead._\n *\n * @deprecated\n */\nexport const CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {\n  displayName: '__unstableCompositeGroup'\n}));\n/**\n * _Note: please use the `Composite.Item` component instead._\n *\n * @deprecated\n */\nexport const CompositeItem = proxyComposite(Object.assign(Current.Item, {\n  displayName: '__unstableCompositeItem'\n}), {\n  focusable: 'accessibleWhenDisabled'\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport function useCompositeState(legacyStateOptions = {}) {\n  deprecated(`wp.components.__unstableUseCompositeState`, {\n    since: '6.7',\n    alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState\n  });\n  const {\n    baseId,\n    currentId: defaultActiveId,\n    orientation,\n    rtl = false,\n    loop: focusLoop = false,\n    wrap: focusWrap = false,\n    shift: focusShift = false,\n    unstable_virtual: virtualFocus\n  } = legacyStateOptions;\n  return {\n    baseId: useInstanceId(Composite, 'composite', baseId),\n    store: Ariakit.useCompositeStore({\n      defaultActiveId,\n      rtl,\n      orientation,\n      focusLoop,\n      focusShift,\n      focusWrap,\n      virtualFocus\n    })\n  };\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * This file aims at providing components that are as close as possible to the\n * original `reakit`-based implementation (which was removed from the codebase),\n * although it is recommended that consumers of the package switch to the stable,\n * un-prefixed, `ariakit`-based version of `Composite`.\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 { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Composite as Current } from '..';\n\n// Legacy composite components can either provide state through a\n// single `state` prop, or via individual props, usually through\n// spreading the state generated by `useCompositeState`.\n// That is, `<Composite* { ...state }>`.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction mapLegacyStatePropsToComponentProps(legacyProps) {\n  // If a `state` prop is provided, we unpack that; otherwise,\n  // the necessary props are provided directly in `legacyProps`.\n  if (legacyProps.state) {\n    const {\n      state,\n      ...rest\n    } = legacyProps;\n    const {\n      store,\n      ...props\n    } = mapLegacyStatePropsToComponentProps(state);\n    return {\n      ...rest,\n      ...props,\n      store\n    };\n  }\n  return legacyProps;\n}\nconst LEGACY_TO_NEW_DISPLAY_NAME = {\n  __unstableComposite: 'Composite',\n  __unstableCompositeGroup: 'Composite.Group or Composite.Row',\n  __unstableCompositeItem: 'Composite.Item',\n  __unstableUseCompositeState: 'Composite'\n};\nfunction proxyComposite(ProxiedComponent, propMap = {}) {\n  const displayName = ProxiedComponent.displayName ?? '';\n  const Component = legacyProps => {\n    deprecated(`wp.components.${displayName}`, {\n      since: '6.7',\n      alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined\n    });\n    const {\n      store,\n      ...rest\n    } = mapLegacyStatePropsToComponentProps(legacyProps);\n    let props = rest;\n    props = {\n      ...props,\n      id: useInstanceId(store, props.baseId, props.id)\n    };\n    Object.entries(propMap).forEach(([from, to]) => {\n      if (props.hasOwnProperty(from)) {\n        Object.assign(props, {\n          [to]: props[from]\n        });\n        delete props[from];\n      }\n    });\n    delete props.baseId;\n    return /*#__PURE__*/_jsx(ProxiedComponent, {\n      ...props,\n      store: store\n    });\n  };\n  Component.displayName = displayName;\n  return Component;\n}\n\n// The old `CompositeGroup` used to behave more like the current\n// `CompositeRow`, but this has been split into two different\n// components. We handle that difference by checking on the\n// provided role, and returning the appropriate component.\nconst UnproxiedCompositeGroup = forwardRef(({\n  role,\n  ...props\n}, ref) => {\n  const Component = role === 'row' ? Current.Row : Current.Group;\n  return /*#__PURE__*/_jsx(Component, {\n    ref: ref,\n    role: role,\n    ...props\n  });\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport const Composite = proxyComposite(Object.assign(Current, {\n  displayName: '__unstableComposite'\n}), {\n  baseId: 'id'\n});\n/**\n * _Note: please use the `Composite.Row` or `Composite.Group` components instead._\n *\n * @deprecated\n */\nexport const CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {\n  displayName: '__unstableCompositeGroup'\n}));\n/**\n * _Note: please use the `Composite.Item` component instead._\n *\n * @deprecated\n */\nexport const CompositeItem = proxyComposite(Object.assign(Current.Item, {\n  displayName: '__unstableCompositeItem'\n}), {\n  focusable: 'accessibleWhenDisabled'\n});\n\n/**\n * _Note: please use the `Composite` component instead._\n *\n * @deprecated\n */\nexport function useCompositeState(legacyStateOptions = {}) {\n  deprecated(`wp.components.__unstableUseCompositeState`, {\n    since: '6.7',\n    alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState\n  });\n  const {\n    baseId,\n    currentId: defaultActiveId,\n    orientation,\n    rtl = false,\n    loop: focusLoop = false,\n    wrap: focusWrap = false,\n    shift: focusShift = false,\n    unstable_virtual: virtualFocus\n  } = legacyStateOptions;\n  return {\n    baseId: useInstanceId(Composite, 'composite', baseId),\n    store: Ariakit.useCompositeStore({\n      defaultActiveId,\n      rtl,\n      orientation,\n      focusLoop,\n      focusShift,\n      focusWrap,\n      virtualFocus\n    })\n  };\n}"],
+  "mappings": "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",
   "names": ["deprecated", "_jsx", "Current"]
 }

package/build/composite/row.cjs CHANGED Viewed

@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeRow2 = (0, import_element.forwardRef)(function CompositeRow3(props, ref) {
-  var _props$store;
   const context = (0, import_context.useCompositeContext)();
-  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+  const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeRow, {
     store,
     ...props,

package/build/composite/row.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeRow = forwardRef(function CompositeRow(props, ref) {\n  var _props$store;\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,oBAAe,2BAAW,SAASA,cAAa,OAAO,KAAK;AACvE,MAAI;AACJ,QAAM,cAAU,oCAAoB;AAKpC,QAAM,SAAS,eAAe,MAAM,WAAW,QAAQ,iBAAiB,SAAS,eAAe,QAAQ;AACxG,SAAoB,uCAAAC,KAAa,sBAAc;AAAA,IAC7C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeRow = forwardRef(function CompositeRow(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeRow, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,sBAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,oBAAe,2BAAW,SAASA,cAAa,OAAO,KAAK;AACvE,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,sBAAc;AAAA,IAC7C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["CompositeRow", "_jsx"]
 }

package/build/composite/typeahead.cjs CHANGED Viewed

@@ -38,9 +38,8 @@ var import_element = require("@wordpress/element");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeTypeahead2 = (0, import_element.forwardRef)(function CompositeTypeahead3(props, ref) {
-  var _props$store;
   const context = (0, import_context.useCompositeContext)();
-  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;
+  const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeTypeahead, {
     store,
     ...props,

package/build/composite/typeahead.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeTypeahead = forwardRef(function CompositeTypeahead(props, ref) {\n  var _props$store;\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeTypeahead, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,0BAAqB,2BAAW,SAASA,oBAAmB,OAAO,KAAK;AACnF,MAAI;AACJ,QAAM,cAAU,oCAAoB;AAKpC,QAAM,SAAS,eAAe,MAAM,WAAW,QAAQ,iBAAiB,SAAS,eAAe,QAAQ;AACxG,SAAoB,uCAAAC,KAAa,4BAAoB;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "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 */\n\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeTypeahead = forwardRef(function CompositeTypeahead(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeTypeahead, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAA2B;AAM3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,0BAAqB,2BAAW,SAASA,oBAAmB,OAAO,KAAK;AACnF,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,4BAAoB;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["CompositeTypeahead", "_jsx"]
 }

package/build/confirm-dialog/component.cjs CHANGED Viewed

@@ -79,8 +79,8 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
       handleEvent(onConfirm)(event);
     }
   }, [handleEvent, onConfirm]);
-  const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0, import_i18n.__)("Cancel");
-  const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0, import_i18n.__)("OK");
+  const cancelLabel = cancelButtonText ?? (0, import_i18n.__)("Cancel");
+  const confirmLabel = confirmButtonText ?? (0, import_i18n.__)("OK");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modal.default, {
       onRequestClose: handleEvent(onCancel),

package/build/confirm-dialog/component.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/confirm-dialog/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef();\n  const confirmButtonRef = useRef();\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : __('Cancel');\n  const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyD;AAKzD,mBAAkB;AAClB,qBAAiD;AACjD,kBAAqB;AACrB,oBAAmB;AACnB,kBAAqB;AACrB,qBAAuB;AACvB,aAAwB;AACxB,oBAAsB;AACtB,yBAAkE;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,QAAM,SAAK,qBAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,sBAAkB,uBAAO;AAC/B,QAAM,uBAAmB,uBAAO;AAChC,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,gCAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,kBAAc,4BAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,kBAAc,4BAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,qBAAqB,QAAQ,qBAAqB,SAAS,uBAAmB,gBAAG,QAAQ;AAC7G,QAAM,eAAe,sBAAsB,QAAQ,sBAAsB,SAAS,wBAAoB,gBAAG,IAAI;AAC7G,SAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,UAAuB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAH,KAAK,kBAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,uCAAAG,MAAM,kBAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,uCAAAH,KAAK,cAAAI,SAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,uCAAAJ,KAAK,cAAAI,SAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,oBAAgB,+BAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef();\n  const confirmButtonRef = useRef();\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyD;AAKzD,mBAAkB;AAClB,qBAAiD;AACjD,kBAAqB;AACrB,oBAAmB;AACnB,kBAAqB;AACrB,qBAAuB;AACvB,aAAwB;AACxB,oBAAsB;AACtB,yBAAkE;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,QAAM,SAAK,qBAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,sBAAkB,uBAAO;AAC/B,QAAM,uBAAmB,uBAAO;AAChC,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,gCAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,kBAAc,4BAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,kBAAc,4BAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,wBAAoB,gBAAG,QAAQ;AACnD,QAAM,eAAe,yBAAqB,gBAAG,IAAI;AACjD,SAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,UAAuB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAH,KAAK,kBAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,uCAAAG,MAAM,kBAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,uCAAAH,KAAK,cAAAI,SAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,uCAAAJ,KAAK,cAAAI,SAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,oBAAgB,+BAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
   "names": ["_jsx", "_Fragment", "Modal", "_jsxs", "Button"]
 }

package/build/context/context-system-provider.cjs CHANGED Viewed

@@ -63,7 +63,7 @@ function useContextSystemBridge({
     }
   }, [value]);
   const config = (0, import_element.useMemo)(() => {
-    return (0, import_deepmerge.default)(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {
+    return (0, import_deepmerge.default)(parentContext ?? {}, value ?? {}, {
       isMergeableObject: import_is_plain_object.isPlainObject
     });
   }, [parentContext, value]);

package/build/context/context-system-provider.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/context-system-provider.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAK9B,qBAAiE;AACjE,qBAAiB;AAKjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,kBAAkB,QAAQ,kBAAkB,SAAS,gBAAgB,CAAC,GAAG,UAAU,QAAQ,UAAU,SAAS,QAAQ,CAAC,GAAG;AAAA,MACzI,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext ?? {}, value ?? {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAK9B,qBAAiE;AACjE,qBAAiB;AAKjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,iBAAiB,CAAC,GAAG,SAAS,CAAC,GAAG;AAAA,MACjD,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
   "names": ["fastDeepEqual", "warn", "deepmerge", "_jsx"]
 }

package/build/custom-gradient-picker/index.cjs CHANGED Viewed

@@ -50,8 +50,7 @@ var GradientAnglePicker = ({
   hasGradient,
   onChange
 }) => {
-  var _gradientAST$orientat;
-  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : import_constants.DEFAULT_LINEAR_GRADIENT_ANGLE;
+  const angle = gradientAST?.orientation?.value ?? import_constants.DEFAULT_LINEAR_GRADIENT_ANGLE;
   const onAngleChange = (newAngle) => {
     onChange((0, import_serializer.serializeGradient)({
       ...gradientAST,

package/build/custom-gradient-picker/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  var _gradientAST$orientat;\n  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": "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",
   "names": ["_jsx", "AnglePickerControl", "SelectControl", "_jsxs", "CustomGradientBar"]
 }

package/build/custom-gradient-picker/utils.cjs CHANGED Viewed

@@ -55,7 +55,7 @@ function hasUnsupportedLength(item) {
 function getGradientAstWithDefault(value) {
   let gradientAST;
   let hasGradient = !!value;
-  const valueToParse = value !== null && value !== void 0 ? value : import_constants.DEFAULT_GRADIENT;
+  const valueToParse = value ?? import_constants.DEFAULT_GRADIENT;
   try {
     gradientAST = import_gradient_parser.default.parse(valueToParse)[0];
   } catch (error) {

package/build/custom-gradient-picker/utils.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from './constants';\nimport { serializeGradient } from './serializer';\nextend([namesPlugin]);\nexport function getLinearGradientRepresentation(gradientAST) {\n  return serializeGradient({\n    type: 'linear-gradient',\n    orientation: HORIZONTAL_GRADIENT_ORIENTATION,\n    colorStops: gradientAST.colorStops\n  });\n}\nfunction hasUnsupportedLength(item) {\n  return item.length === undefined || item.length.type !== '%';\n}\nexport function getGradientAstWithDefault(value) {\n  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n  let gradientAST;\n  let hasGradient = !!value;\n  const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT;\n  try {\n    gradientAST = gradientParser.parse(valueToParse)[0];\n  } catch (error) {\n    // eslint-disable-next-line no-console\n    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);\n    gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];\n    hasGradient = false;\n  }\n  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {\n    gradientAST.orientation = {\n      type: 'angular',\n      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()\n    };\n  }\n  if (gradientAST.colorStops.some(hasUnsupportedLength)) {\n    const {\n      colorStops\n    } = gradientAST;\n    const step = 100 / (colorStops.length - 1);\n    colorStops.forEach((stop, index) => {\n      stop.length = {\n        value: `${step * index}`,\n        type: '%'\n      };\n    });\n  }\n  return {\n    gradientAST,\n    hasGradient\n  };\n}\nexport function getGradientAstWithControlPoints(gradientAST, newControlPoints) {\n  return {\n    ...gradientAST,\n    colorStops: newControlPoints.map(({\n      position,\n      color\n    }) => {\n      const {\n        r,\n        g,\n        b,\n        a\n      } = colord(color).toRgb();\n      return {\n        length: {\n          type: '%',\n          value: position?.toString()\n        },\n        type: a < 1 ? 'rgba' : 'rgb',\n        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]\n      };\n    })\n  };\n}\nexport function getStopCssColor(colorStop) {\n  switch (colorStop.type) {\n    case 'hex':\n      return `#${colorStop.value}`;\n    case 'literal':\n      return colorStop.value;\n    case 'var':\n      return `${colorStop.type}(${colorStop.value})`;\n    case 'rgb':\n    case 'rgba':\n      return `${colorStop.type}(${colorStop.value.join(',')})`;\n    case 'hsl':\n      {\n        const [hue, saturation, lightness] = colorStop.value;\n        return `hsl(${hue},${saturation}%,${lightness}%)`;\n      }\n    case 'hsla':\n      {\n        const [hue, saturation, lightness, alpha] = colorStop.value;\n        return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n      }\n    default:\n      // Should be unreachable if passing an AST from gradient-parser.\n      // See https://github.com/rafaelcaricio/gradient-parser#ast.\n      return 'transparent';\n  }\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAA2B;AAC3B,oBAA+B;AAC/B,mBAAwB;AAKxB,uBAAqG;AACrG,wBAAkC;AAAA,IAClC,sBAAO,CAAC,aAAAA,OAAW,CAAC;AACb,SAAS,gCAAgC,aAAa;AAC3D,aAAO,qCAAkB;AAAA,IACvB,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,YAAY;AAAA,EAC1B,CAAC;AACH;AACA,SAAS,qBAAqB,MAAM;AAClC,SAAO,KAAK,WAAW,UAAa,KAAK,OAAO,SAAS;AAC3D;AACO,SAAS,0BAA0B,OAAO;AAG/C,MAAI;AACJ,MAAI,cAAc,CAAC,CAAC;AACpB,QAAM,eAAe,UAAU,QAAQ,UAAU,SAAS,QAAQ;AAClE,MAAI;AACF,kBAAc,uBAAAC,QAAe,MAAM,YAAY,EAAE,CAAC;AAAA,EACpD,SAAS,OAAO;AAEd,YAAQ,KAAK,8EAA8E,KAAK;AAChG,kBAAc,uBAAAA,QAAe,MAAM,iCAAgB,EAAE,CAAC;AACtD,kBAAc;AAAA,EAChB;AACA,MAAI,CAAC,MAAM,QAAQ,YAAY,WAAW,KAAK,YAAY,aAAa,SAAS,eAAe;AAC9F,gBAAY,cAAc;AAAA,MACxB,MAAM;AAAA,MACN,OAAO,mDAAkC,YAAY,YAAY,KAAK,EAAE,SAAS;AAAA,IACnF;AAAA,EACF;AACA,MAAI,YAAY,WAAW,KAAK,oBAAoB,GAAG;AACrD,UAAM;AAAA,MACJ;AAAA,IACF,IAAI;AACJ,UAAM,OAAO,OAAO,WAAW,SAAS;AACxC,eAAW,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,SAAS;AAAA,QACZ,OAAO,GAAG,OAAO,KAAK;AAAA,QACtB,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AACO,SAAS,gCAAgC,aAAa,kBAAkB;AAC7E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,iBAAiB,IAAI,CAAC;AAAA,MAChC;AAAA,MACA;AAAA,IACF,MAAM;AACJ,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,QAAI,sBAAO,KAAK,EAAE,MAAM;AACxB,aAAO;AAAA,QACL,QAAQ;AAAA,UACN,MAAM;AAAA,UACN,OAAO,UAAU,SAAS;AAAA,QAC5B;AAAA,QACA,MAAM,IAAI,IAAI,SAAS;AAAA,QACvB,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE;AAAA,MAC3E;AAAA,IACF,CAAC;AAAA,EACH;AACF;AACO,SAAS,gBAAgB,WAAW;AACzC,UAAQ,UAAU,MAAM;AAAA,IACtB,KAAK;AACH,aAAO,IAAI,UAAU,KAAK;AAAA,IAC5B,KAAK;AACH,aAAO,UAAU;AAAA,IACnB,KAAK;AACH,aAAO,GAAG,UAAU,IAAI,IAAI,UAAU,KAAK;AAAA,IAC7C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,GAAG,UAAU,IAAI,IAAI,UAAU,MAAM,KAAK,GAAG,CAAC;AAAA,IACvD,KAAK,OACH;AACE,YAAM,CAAC,KAAK,YAAY,SAAS,IAAI,UAAU;AAC/C,aAAO,OAAO,GAAG,IAAI,UAAU,KAAK,SAAS;AAAA,IAC/C;AAAA,IACF,KAAK,QACH;AACE,YAAM,CAAC,KAAK,YAAY,WAAW,KAAK,IAAI,UAAU;AACtD,aAAO,QAAQ,GAAG,IAAI,UAAU,KAAK,SAAS,KAAK,KAAK;AAAA,IAC1D;AAAA,IACF;AAGE,aAAO;AAAA,EACX;AACF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_GRADIENT, HORIZONTAL_GRADIENT_ORIENTATION, DIRECTIONAL_ORIENTATION_ANGLE_MAP } from './constants';\nimport { serializeGradient } from './serializer';\nextend([namesPlugin]);\nexport function getLinearGradientRepresentation(gradientAST) {\n  return serializeGradient({\n    type: 'linear-gradient',\n    orientation: HORIZONTAL_GRADIENT_ORIENTATION,\n    colorStops: gradientAST.colorStops\n  });\n}\nfunction hasUnsupportedLength(item) {\n  return item.length === undefined || item.length.type !== '%';\n}\nexport function getGradientAstWithDefault(value) {\n  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n  let gradientAST;\n  let hasGradient = !!value;\n  const valueToParse = value ?? DEFAULT_GRADIENT;\n  try {\n    gradientAST = gradientParser.parse(valueToParse)[0];\n  } catch (error) {\n    // eslint-disable-next-line no-console\n    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);\n    gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];\n    hasGradient = false;\n  }\n  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {\n    gradientAST.orientation = {\n      type: 'angular',\n      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()\n    };\n  }\n  if (gradientAST.colorStops.some(hasUnsupportedLength)) {\n    const {\n      colorStops\n    } = gradientAST;\n    const step = 100 / (colorStops.length - 1);\n    colorStops.forEach((stop, index) => {\n      stop.length = {\n        value: `${step * index}`,\n        type: '%'\n      };\n    });\n  }\n  return {\n    gradientAST,\n    hasGradient\n  };\n}\nexport function getGradientAstWithControlPoints(gradientAST, newControlPoints) {\n  return {\n    ...gradientAST,\n    colorStops: newControlPoints.map(({\n      position,\n      color\n    }) => {\n      const {\n        r,\n        g,\n        b,\n        a\n      } = colord(color).toRgb();\n      return {\n        length: {\n          type: '%',\n          value: position?.toString()\n        },\n        type: a < 1 ? 'rgba' : 'rgb',\n        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]\n      };\n    })\n  };\n}\nexport function getStopCssColor(colorStop) {\n  switch (colorStop.type) {\n    case 'hex':\n      return `#${colorStop.value}`;\n    case 'literal':\n      return colorStop.value;\n    case 'var':\n      return `${colorStop.type}(${colorStop.value})`;\n    case 'rgb':\n    case 'rgba':\n      return `${colorStop.type}(${colorStop.value.join(',')})`;\n    case 'hsl':\n      {\n        const [hue, saturation, lightness] = colorStop.value;\n        return `hsl(${hue},${saturation}%,${lightness}%)`;\n      }\n    case 'hsla':\n      {\n        const [hue, saturation, lightness, alpha] = colorStop.value;\n        return `hsla(${hue},${saturation}%,${lightness}%,${alpha})`;\n      }\n    default:\n      // Should be unreachable if passing an AST from gradient-parser.\n      // See https://github.com/rafaelcaricio/gradient-parser#ast.\n      return 'transparent';\n  }\n}"],
+  "mappings": "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",
   "names": ["namesPlugin", "gradientParser"]
 }

package/build/custom-select-control/index.cjs CHANGED Viewed

@@ -68,7 +68,6 @@ function getDescribedBy(currentName, describedBy) {
   return (0, import_i18n.sprintf)((0, import_i18n.__)("Currently selected: %s"), currentName);
 }
 function CustomSelectControl(props) {
-  var _options$map$find;
   const {
     __next40pxDefaultSize = false,
     __shouldNotWarnDeprecated36pxSize,
@@ -143,9 +142,9 @@ function CustomSelectControl(props) {
     }, key);
   });
   const currentValue = Ariakit.useStoreState(store, "value");
-  const selectedOption = (_options$map$find = options?.map(applyOptionDeprecations)?.find(({
+  const selectedOption = options?.map(applyOptionDeprecations)?.find(({
     key
-  }) => currentValue === key)) !== null && _options$map$find !== void 0 ? _options$map$find : options[0];
+  }) => currentValue === key) ?? options[0];
   const renderSelectedValue = () => {
     if (!showSelectedHint || !selectedOption.hint) {
       return selectedOption?.name;

package/build/custom-select-control/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\nfunction CustomSelectControl(props) {\n  var _options$map$find;\n  const {\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'CustomSelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = (_options$map$find = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key)) !== null && _options$map$find !== void 0 ? _options$map$find : options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  const translatedSize = (() => {\n    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {\n      return 'default';\n    }\n    if (!__next40pxDefaultSize && size === 'default') {\n      return 'compact';\n    }\n    return size;\n  })();\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(_CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: translatedSize,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\nfunction CustomSelectControl(props) {\n  const {\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'CustomSelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key) ?? options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  const translatedSize = (() => {\n    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {\n      return 'default';\n    }\n    if (!__next40pxDefaultSize && size === 'default') {\n      return 'compact';\n    }\n    return size;\n  })();\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(_CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: translatedSize,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
+  "mappings": "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",
   "names": ["_jsxs", "_jsx", "CustomSelectItem", "clsx", "_Fragment", "_CustomSelect"]
 }

package/build/custom-select-control-v2/custom-select.cjs CHANGED Viewed

@@ -68,7 +68,7 @@ var CustomSelectButton = ({
   const {
     value: currentValue
   } = Ariakit.useStoreState(store);
-  const computedRenderSelectedValue = (0, import_element.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
+  const computedRenderSelectedValue = (0, import_element.useMemo)(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.Select, {
     ...restProps,
     size,

package/build/custom-select-control-v2/custom-select.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/custom-select.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction _CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default _CustomSelect;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAAoD;AACpD,kBAAgC;AAKhC,6BAA+B;AAC/B,aAAwB;AACxB,wBAAsB;AACtB,0BAAqC;AACrC,0BAAwB;AACxB,yBAA2C;AACpC,IAAM,0BAAsB,8BAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,eAAO,gBAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,QAAI;AAAA;AAAA,UAEvC,gBAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,kCAA8B,wBAAQ,MAAM,wBAAwB,QAAQ,wBAAwB,SAAS,sBAAsB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1L,SAAoB,uCAAAA,KAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,cAAc,OAAO;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,6BAAyB,4BAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,uCAAAC,MAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,uCAAAD,KAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,uCAAAA,KAAK,uCAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,uCAAAA,KAAK,oBAAAE,QAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAD,MAAM,kBAAAE,SAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,uCAAAH,KAAK,oBAAAI,SAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,uCAAAJ,KAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,uCAAAA,KAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,uCAAAA,KAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction _CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default _CustomSelect;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,cAAyB;AAKzB,qBAAoD;AACpD,kBAAgC;AAKhC,6BAA+B;AAC/B,aAAwB;AACxB,wBAAsB;AACtB,0BAAqC;AACrC,0BAAwB;AACxB,yBAA2C;AACpC,IAAM,0BAAsB,8BAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,eAAO,gBAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,QAAI;AAAA;AAAA,UAEvC,gBAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,kCAA8B,wBAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,uCAAAA,KAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,cAAc,OAAO;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,6BAAyB,4BAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,uCAAAC,MAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,uCAAAD,KAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,uCAAAA,KAAK,uCAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,uCAAAA,KAAK,oBAAAE,QAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAD,MAAM,kBAAAE,SAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,uCAAAH,KAAK,oBAAAI,SAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,uCAAAJ,KAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,uCAAAA,KAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,uCAAAA,KAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
   "names": ["_jsx", "_jsxs", "BaseControl", "InputBase", "SelectControlChevronDown"]
 }

package/build/custom-select-control-v2/item.cjs CHANGED Viewed

@@ -43,13 +43,12 @@ function CustomSelectItem({
   children,
   ...props
 }) {
-  var _customSelectContext$;
   const customSelectContext = (0, import_element.useContext)(import_custom_select.CustomSelectContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Styled.SelectItem, {
     store: customSelectContext?.store,
-    size: (_customSelectContext$ = customSelectContext?.size) !== null && _customSelectContext$ !== void 0 ? _customSelectContext$ : "default",
+    size: customSelectContext?.size ?? "default",
     ...props,
-    children: [children !== null && children !== void 0 ? children : props.value, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.SelectedItemCheck, {
+    children: [children ?? props.value, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Styled.SelectedItemCheck, {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, {
         icon: import_icons.check
       })