@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

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

@@ -0,0 +1,117 @@
+import { createElement } from "react";
+/**
+ * Composite is a component that may contain navigable items represented by
+ * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as Current from '../current';
+import { useInstanceId } from '@wordpress/compose';
+function mapLegacyStatePropsToComponentProps(legacyProps) {
+  // If a `state` prop is provided, we unpack that; otherwise,
+  // the necessary props are provided directly in `legacyProps`.
+  if (legacyProps.state) {
+    const {
+      state,
+      ...rest
+    } = legacyProps;
+    const {
+      store,
+      ...props
+    } = mapLegacyStatePropsToComponentProps(state);
+    return {
+      ...rest,
+      ...props,
+      store
+    };
+  }
+  return legacyProps;
+}
+function proxyComposite(ProxiedComponent, propMap = {}) {
+  const displayName = ProxiedComponent.displayName;
+  const Component = legacyProps => {
+    const {
+      store,
+      ...rest
+    } = mapLegacyStatePropsToComponentProps(legacyProps);
+    const props = rest;
+    props.id = useInstanceId(store, props.baseId, props.id);
+    Object.entries(propMap).forEach(([from, to]) => {
+      if (props.hasOwnProperty(from)) {
+        Object.assign(props, {
+          [to]: props[from]
+        });
+        delete props[from];
+      }
+    });
+    delete props.baseId;
+    return createElement(ProxiedComponent, {
+      ...props,
+      store: store
+    });
+  };
+  Component.displayName = displayName;
+  return Component;
+}
+
+// The old `CompositeGroup` used to behave more like the current
+// `CompositeRow`, but this has been split into two different
+// components. We handle that difference by checking on the
+// provided role, and returning the appropriate component.
+const unproxiedCompositeGroup = forwardRef(({
+  role,
+  ...props
+}, ref) => {
+  const Component = role === 'row' ? Current.CompositeRow : Current.CompositeGroup;
+  return createElement(Component, {
+    ref: ref,
+    role: role,
+    ...props
+  });
+});
+unproxiedCompositeGroup.displayName = 'CompositeGroup';
+export const Composite = proxyComposite(Current.Composite, {
+  baseId: 'id'
+});
+export const CompositeGroup = proxyComposite(unproxiedCompositeGroup);
+export const CompositeItem = proxyComposite(Current.CompositeItem, {
+  focusable: 'accessibleWhenDisabled'
+});
+export function useCompositeState(legacyStateOptions = {}) {
+  const {
+    baseId,
+    currentId: defaultActiveId,
+    orientation,
+    rtl = false,
+    loop: focusLoop = false,
+    wrap: focusWrap = false,
+    shift: focusShift = false,
+    // eslint-disable-next-line camelcase
+    unstable_virtual: virtualFocus
+  } = legacyStateOptions;
+  return {
+    baseId: useInstanceId(Composite, 'composite', baseId),
+    store: Current.useCompositeStore({
+      defaultActiveId,
+      rtl,
+      orientation,
+      focusLoop,
+      focusShift,
+      focusWrap,
+      virtualFocus
+    })
+  };
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Current","useInstanceId","mapLegacyStatePropsToComponentProps","legacyProps","state","rest","store","props","proxyComposite","ProxiedComponent","propMap","displayName","Component","id","baseId","Object","entries","forEach","from","to","hasOwnProperty","assign","createElement","unproxiedCompositeGroup","role","ref","CompositeRow","CompositeGroup","Composite","CompositeItem","focusable","useCompositeState","legacyStateOptions","currentId","defaultActiveId","orientation","rtl","loop","focusLoop","wrap","focusWrap","shift","focusShift","unstable_virtual","virtualFocus","useCompositeStore"],"sources":["@wordpress/components/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 * @see https://ariakit.org/components/composite\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as Current from '../current';\nimport { useInstanceId } from '@wordpress/compose';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport interface LegacyStateOptions {\n\t/**\n\t * ID that will serve as a base for all the items IDs.\n\t */\n\tbaseId?: string;\n\t/**\n\t * Determines how next and previous functions will behave. If `rtl` is set\n\t * to `true`, they will be inverted. This only affects the composite widget\n\t * behavior. You still need to set `dir=\"rtl\"` on HTML/CSS.\n\t *\n\t * @default false\n\t */\n\trtl?: boolean;\n\t/**\n\t * Defines the orientation of the composite widget. If the composite has a\n\t * single row or column (one-dimensional), the orientation value determines\n\t * which arrow keys can be used to move focus.\n\t */\n\torientation?: Orientation;\n\t/**\n\t * The current focused item `id`.\n\t */\n\tcurrentId?: string;\n\t/**\n\t * Determines how focus moves from the start and end of rows and columns.\n\t *\n\t * @default false\n\t */\n\tloop?: boolean | Orientation;\n\t/**\n\t * If enabled, moving to the next item from the last one in a row or column\n\t * will focus the first item in the next row or column and vice-versa.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\twrap?: boolean | Orientation;\n\t/**\n\t * If enabled, moving up or down when there's no next item or the next item\n\t * is disabled will shift to the item right before it.\n\t *\n\t * ** Has effect only on two-dimensional composites. **\n\t *\n\t * @default false\n\t */\n\tshift?: boolean;\n\tunstable_virtual?: boolean;\n}\n\ntype Component = React.FunctionComponent< any >;\n\ntype CompositeStore = ReturnType< typeof Current.useCompositeStore >;\ntype CompositeStoreState = { store: CompositeStore };\nexport type CompositeState = CompositeStoreState &\n\tRequired< Pick< LegacyStateOptions, 'baseId' > >;\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 }>`.\nexport type CompositeStateProps =\n\t| { state: CompositeState }\n\t| ( CompositeState & { state?: never } );\ntype ComponentProps< C extends Component > = React.ComponentPropsWithRef< C >;\nexport type CompositeProps< C extends Component > = ComponentProps< C > &\n\tCompositeStateProps;\ntype CompositeComponent< C extends Component > = (\n\tprops: CompositeProps< C >\n) => React.ReactElement;\ntype CompositeComponentProps = CompositeState &\n\t(\n\t\t| ComponentProps< typeof Current.CompositeGroup >\n\t\t| ComponentProps< typeof Current.CompositeItem >\n\t\t| ComponentProps< typeof Current.CompositeRow >\n\t);\n\nfunction mapLegacyStatePropsToComponentProps(\n\tlegacyProps: CompositeStateProps\n): CompositeComponentProps {\n\t// If a `state` prop is provided, we unpack that; otherwise,\n\t// the necessary props are provided directly in `legacyProps`.\n\tif ( legacyProps.state ) {\n\t\tconst { state, ...rest } = legacyProps;\n\t\tconst { store, ...props } =\n\t\t\tmapLegacyStatePropsToComponentProps( state );\n\t\treturn { ...rest, ...props, store };\n\t}\n\n\treturn legacyProps;\n}\n\nfunction proxyComposite< C extends Component >(\n\tProxiedComponent: C | React.ForwardRefExoticComponent< C >,\n\tpropMap: Record< string, string > = {}\n): CompositeComponent< C > {\n\tconst displayName = ProxiedComponent.displayName;\n\tconst Component = ( legacyProps: CompositeStateProps ) => {\n\t\tconst { store, ...rest } =\n\t\t\tmapLegacyStatePropsToComponentProps( legacyProps );\n\t\tconst props = rest as ComponentProps< C >;\n\t\tprops.id = useInstanceId( store, props.baseId, props.id );\n\n\t\tObject.entries( propMap ).forEach( ( [ from, to ] ) => {\n\t\t\tif ( props.hasOwnProperty( from ) ) {\n\t\t\t\tObject.assign( props, { [ to ]: props[ from ] } );\n\t\t\t\tdelete props[ from ];\n\t\t\t}\n\t\t} );\n\n\t\tdelete props.baseId;\n\n\t\treturn <ProxiedComponent { ...props } store={ store } />;\n\t};\n\tComponent.displayName = displayName;\n\treturn 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\tany,\n\tReact.ComponentPropsWithoutRef<\n\t\ttypeof Current.CompositeGroup | typeof Current.CompositeRow\n\t>\n>( ( { role, ...props }, ref ) => {\n\tconst Component =\n\t\trole === 'row' ? Current.CompositeRow : Current.CompositeGroup;\n\treturn <Component ref={ ref } role={ role } { ...props } />;\n} );\nunproxiedCompositeGroup.displayName = 'CompositeGroup';\n\nexport const Composite = proxyComposite( Current.Composite, { baseId: 'id' } );\nexport const CompositeGroup = proxyComposite( unproxiedCompositeGroup );\nexport const CompositeItem = proxyComposite( Current.CompositeItem, {\n\tfocusable: 'accessibleWhenDisabled',\n} );\n\nexport function useCompositeState(\n\tlegacyStateOptions: LegacyStateOptions = {}\n): CompositeState {\n\tconst {\n\t\tbaseId,\n\t\tcurrentId: defaultActiveId,\n\t\torientation,\n\t\trtl = false,\n\t\tloop: focusLoop = false,\n\t\twrap: focusWrap = false,\n\t\tshift: focusShift = false,\n\t\t// eslint-disable-next-line camelcase\n\t\tunstable_virtual: virtualFocus,\n\t} = legacyStateOptions;\n\n\treturn {\n\t\tbaseId: useInstanceId( Composite, 'composite', baseId ),\n\t\tstore: Current.useCompositeStore( {\n\t\t\tdefaultActiveId,\n\t\t\trtl,\n\t\t\torientation,\n\t\t\tfocusLoop,\n\t\t\tfocusShift,\n\t\t\tfocusWrap,\n\t\t\tvirtualFocus,\n\t\t} ),\n\t};\n}\n"],"mappings":"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"}

package/build-module/composite/v2.js

@@ -1,15 +1,5 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://ariakit.org/components/composite
- */
+// Although we have migrated away from Reakit, the 'current'
+// Ariakit implementation is still considered a v2.
 
-/* eslint-disable-next-line no-restricted-imports */
-export { Composite, CompositeGroup, CompositeGroupLabel, CompositeItem, CompositeRow, useCompositeStore } from '@ariakit/react';
-
-/* eslint-disable-next-line no-restricted-imports */
+export * from './current';
 //# sourceMappingURL=v2.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Composite","CompositeGroup","CompositeGroupLabel","CompositeItem","CompositeRow","useCompositeStore"],"sources":["@wordpress/components/src/composite/v2.ts"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/* eslint-disable-next-line no-restricted-imports */\nexport {\n\tComposite,\n\tCompositeGroup,\n\tCompositeGroupLabel,\n\tCompositeItem,\n\tCompositeRow,\n\tuseCompositeStore,\n} from '@ariakit/react';\n\n/* eslint-disable-next-line no-restricted-imports */\nexport type { CompositeStore } from '@ariakit/react';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SACCA,SAAS,EACTC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,YAAY,EACZC,iBAAiB,QACX,gBAAgB;;AAEvB"}
+{"version":3,"names":[],"sources":["@wordpress/components/src/composite/v2.ts"],"sourcesContent":["// Although we have migrated away from Reakit, the 'current'\n// Ariakit implementation is still considered a v2.\n\nexport * from './current';\n"],"mappings":"AAAA;AACA;;AAEA,cAAc,WAAW"}

package/build-module/confirm-dialog/component.js

@@ -72,10 +72,12 @@ const UnconnectedConfirmDialog = (props, forwardedRef) => {
     direction: "row",
     justify: "flex-end"
   }, createElement(Button, {
+    __next40pxDefaultSize: true,
     ref: cancelButtonRef,
     variant: "tertiary",
     onClick: handleEvent(onCancel)
   }, cancelLabel), createElement(Button, {
+    __next40pxDefaultSize: true,
     ref: confirmButtonRef,
     variant: "primary",
     onClick: handleEvent(onConfirm)

package/build-module/confirm-dialog/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","useCallback","useEffect","useRef","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","cancelButtonRef","confirmButtonRef","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","confirmLabel","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","spacing","direction","justify","variant","onClick","ConfirmDialog"],"sources":["@wordpress/components/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 type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\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';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\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(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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"}
+{"version":3,"names":["__","useCallback","useEffect","useRef","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","cancelButtonRef","confirmButtonRef","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","confirmLabel","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","spacing","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog"],"sources":["@wordpress/components/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 type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\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';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\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(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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"}

package/build-module/context/wordpress-component.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/context/wordpress-component.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as React from 'react';\n\n// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts\nexport type WordPressComponentProps<\n\t/** Prop types. */\n\tP,\n\t/** The HTML element to inherit props from. */\n\tT extends React.ElementType | null,\n\t/** Supports polymorphism through the `as` prop. */\n\tIsPolymorphic extends boolean = true,\n> = P &\n\t( T extends React.ElementType\n\t\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t\t  // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t\t  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t\t  Omit<\n\t\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t\t'as' | keyof P | 'children'\n\t\t  >\n\t\t: {} ) &\n\t( IsPolymorphic extends true\n\t\t? {\n\t\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\t\tas?: T | keyof JSX.IntrinsicElements;\n\t\t  }\n\t\t: {} );\n\nexport type WordPressComponent<\n\tT extends React.ElementType | null,\n\tO,\n\tIsPolymorphic extends boolean,\n> = {\n\t< TT extends React.ElementType >(\n\t\tprops: WordPressComponentProps< O, TT, IsPolymorphic > &\n\t\t\t( IsPolymorphic extends true ? { as: TT } : {} )\n\t): JSX.Element | null;\n\t(\n\t\tprops: WordPressComponentProps< O, T, IsPolymorphic >\n\t): JSX.Element | null;\n\tdisplayName?: string;\n\t/**\n\t * A CSS selector used to fake component interpolation in styled components\n\t * for components not generated by `styled`. Anything passed to `contextConnect`\n\t * will get this property.\n\t *\n\t * We restrict it to a class to align with the already existing class names that\n\t * are generated by the context system.\n\t */\n\tselector?: `.${ string }`;\n};\n\nexport type WordPressComponentFromProps<\n\tProps,\n\tForwardsRef extends boolean = true,\n> = Props extends WordPressComponentProps< infer P, infer T, infer I >\n\t? WordPressComponent<\n\t\t\tT,\n\t\t\tP & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),\n\t\t\tI\n\t  >\n\t: never;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/context/wordpress-component.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as React from 'react';\n\n// Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts\nexport type WordPressComponentProps<\n\t/** Prop types. */\n\tP,\n\t/** The HTML element to inherit props from. */\n\tT extends React.ElementType | null,\n\t/** Supports polymorphism through the `as` prop. */\n\tIsPolymorphic extends boolean = true,\n> = P &\n\t( T extends React.ElementType\n\t\t? // The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t\t  // by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t\t  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\t\t  Omit<\n\t\t\t\tReact.ComponentPropsWithoutRef< T >,\n\t\t\t\t'as' | keyof P | 'children'\n\t\t  >\n\t\t: {} ) &\n\t( IsPolymorphic extends true\n\t\t? {\n\t\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\t\tas?: T | keyof JSX.IntrinsicElements;\n\t\t  }\n\t\t: {} );\n\nexport type WordPressComponent<\n\tT extends React.ElementType | null,\n\tO,\n\tIsPolymorphic extends boolean,\n> = {\n\t< TT extends React.ElementType >(\n\t\tprops: WordPressComponentProps< O, TT, IsPolymorphic > &\n\t\t\t( IsPolymorphic extends true ? { as: TT } : {} )\n\t): JSX.Element | null;\n\t(\n\t\tprops: WordPressComponentProps< O, T, IsPolymorphic >\n\t): JSX.Element | null;\n\tdisplayName?: string;\n\t/**\n\t * A CSS selector used to fake component interpolation in styled components\n\t * for components not generated by `styled`. Anything passed to `contextConnect`\n\t * will get this property.\n\t *\n\t * We restrict it to a class to align with the already existing class names that\n\t * are generated by the context system.\n\t */\n\tselector?: `.${ string }`;\n};\n\nexport type WordPressComponentFromProps<\n\tProps,\n\tForwardsRef extends boolean = true,\n> = Props extends WordPressComponentProps< infer P, infer T, infer I >\n\t? WordPressComponent<\n\t\t\tT,\n\t\t\tP & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),\n\t\t\tI\n\t  >\n\t: never;\n"],"mappings":""}

package/build-module/custom-gradient-picker/index.js

@@ -2,11 +2,10 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -38,7 +37,6 @@ const GradientAnglePicker = ({
     }));
   };
   return createElement(AnglePickerControl, {
-    __nextHasNoMarginBottom: true,
     onChange: onAngleChange,
     value: hasGradient ? angle : ''
   });
@@ -110,8 +108,6 @@ const GradientTypePicker = ({
  * ```
  */
 export function CustomGradientPicker({
-  /** Start opting into the new margin-free styles that will become the default in a future version. */
-  __nextHasNoMargin = false,
   value,
   onChange,
   __experimentalIsRenderedInSidebar = false
@@ -137,18 +133,9 @@ export function CustomGradientPicker({
       position: parseInt(colorStop.length.value)
     };
   });
-  if (!__nextHasNoMargin) {
-    deprecated('Outer margin styles for wp.components.CustomGradientPicker', {
-      since: '6.1',
-      version: '6.4',
-      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
-    });
-  }
   return createElement(VStack, {
     spacing: 4,
-    className: classnames('components-custom-gradient-picker', {
-      'is-next-has-no-margin': __nextHasNoMargin
-    })
+    className: "components-custom-gradient-picker"
   }, createElement(CustomGradientBar, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,

package/build-module/custom-gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","deprecated","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","onAngleChange","newAngle","type","createElement","__nextHasNoMarginBottom","GradientTypePicker","onSetLinearGradient","undefined","onSetRadialGradient","restGradientAST","handleOnChange","next","className","label","labelPosition","options","size","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","since","version","hint","spacing","newControlPoints","gap"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type gradientParser from 'gradient-parser';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\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 {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} as gradientParser.LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\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\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated(\n\t\t\t'Outer margin styles for wp.components.CustomGradientPicker',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":"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"}
+{"version":3,"names":["__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","onAngleChange","newAngle","type","createElement","GradientTypePicker","onSetLinearGradient","undefined","onSetRadialGradient","restGradientAST","handleOnChange","next","__nextHasNoMarginBottom","className","label","labelPosition","options","size","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","spacing","newControlPoints","gap"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\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 {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} as gradientParser.LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\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\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":"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"}

package/build-module/custom-gradient-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/custom-gradient-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport type CustomGradientPickerProps = {\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: string | null;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string ) => void;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type GradientAnglePickerProps = {\n\tgradientAST:\n\t\t| gradientParser.LinearGradientNode\n\t\t| gradientParser.RepeatingLinearGradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type GradientTypePickerProps = {\n\tgradientAST: gradientParser.GradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type ControlPoint = { color: string; position: number };\n\nexport type CustomGradientBarProps = {\n\tbackground: React.CSSProperties[ 'background' ];\n\thasGradient: boolean;\n\tvalue: ControlPoint[];\n\tonChange: ( newControlPoints: ControlPoint[] ) => void;\n\tdisableInserter?: boolean;\n\tdisableAlpha?: boolean;\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type CustomGradientBarIdleState = { id: 'IDLE' };\ntype CustomGradientBarMovingInserterState = {\n\tid: 'MOVING_INSERTER';\n\tinsertPosition: number;\n};\ntype CustomGradientBarInsertingControlPointState = {\n\tid: 'INSERTING_CONTROL_POINT';\n\tinsertPosition: number;\n};\ntype CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };\n\nexport type CustomGradientBarReducerState =\n\t| CustomGradientBarIdleState\n\t| CustomGradientBarMovingInserterState\n\t| CustomGradientBarInsertingControlPointState\n\t| CustomGradientBarMovingControlPointState;\n\nexport type CustomGradientBarReducerAction =\n\t| { type: 'MOVE_INSERTER'; insertPosition: number }\n\t| { type: 'STOP_INSERTER_MOVE' }\n\t| { type: 'OPEN_INSERTER' }\n\t| { type: 'CLOSE_INSERTER' }\n\t| { type: 'START_CONTROL_CHANGE' }\n\t| { type: 'STOP_CONTROL_CHANGE' };\n\nexport type ControlPointButtonProps = {\n\tisOpen: boolean;\n\tposition: ControlPoint[ 'position' ];\n\tcolor: string;\n};\n\nexport type ControlPointsProps = {\n\tdisableRemove: boolean;\n\tdisableAlpha: boolean;\n\tgradientPickerDomRef: React.RefObject< HTMLDivElement >;\n\tignoreMarkerPosition?: number;\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonStartControlPointChange: () => void;\n\tonStopControlPointChange: () => void;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n\nexport type ControlPointMoveState = {\n\tinitialPosition: number;\n\tindex: number;\n\tsignificantMoveHappened: boolean;\n\tlistenersActivated: boolean;\n};\n\nexport type InsertPointProps = {\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonOpenInserter: () => void;\n\tonCloseInserter: () => void;\n\tinsertPosition: number;\n\tdisableAlpha: boolean;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-gradient-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport type CustomGradientPickerProps = {\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: string | null;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string ) => void;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type GradientAnglePickerProps = {\n\tgradientAST:\n\t\t| gradientParser.LinearGradientNode\n\t\t| gradientParser.RepeatingLinearGradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type GradientTypePickerProps = {\n\tgradientAST: gradientParser.GradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type ControlPoint = { color: string; position: number };\n\nexport type CustomGradientBarProps = {\n\tbackground: React.CSSProperties[ 'background' ];\n\thasGradient: boolean;\n\tvalue: ControlPoint[];\n\tonChange: ( newControlPoints: ControlPoint[] ) => void;\n\tdisableInserter?: boolean;\n\tdisableAlpha?: boolean;\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type CustomGradientBarIdleState = { id: 'IDLE' };\ntype CustomGradientBarMovingInserterState = {\n\tid: 'MOVING_INSERTER';\n\tinsertPosition: number;\n};\ntype CustomGradientBarInsertingControlPointState = {\n\tid: 'INSERTING_CONTROL_POINT';\n\tinsertPosition: number;\n};\ntype CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };\n\nexport type CustomGradientBarReducerState =\n\t| CustomGradientBarIdleState\n\t| CustomGradientBarMovingInserterState\n\t| CustomGradientBarInsertingControlPointState\n\t| CustomGradientBarMovingControlPointState;\n\nexport type CustomGradientBarReducerAction =\n\t| { type: 'MOVE_INSERTER'; insertPosition: number }\n\t| { type: 'STOP_INSERTER_MOVE' }\n\t| { type: 'OPEN_INSERTER' }\n\t| { type: 'CLOSE_INSERTER' }\n\t| { type: 'START_CONTROL_CHANGE' }\n\t| { type: 'STOP_CONTROL_CHANGE' };\n\nexport type ControlPointButtonProps = {\n\tisOpen: boolean;\n\tposition: ControlPoint[ 'position' ];\n\tcolor: string;\n};\n\nexport type ControlPointsProps = {\n\tdisableRemove: boolean;\n\tdisableAlpha: boolean;\n\tgradientPickerDomRef: React.RefObject< HTMLDivElement >;\n\tignoreMarkerPosition?: number;\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonStartControlPointChange: () => void;\n\tonStopControlPointChange: () => void;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n\nexport type ControlPointMoveState = {\n\tinitialPosition: number;\n\tindex: number;\n\tsignificantMoveHappened: boolean;\n\tlistenersActivated: boolean;\n};\n\nexport type InsertPointProps = {\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonOpenInserter: () => void;\n\tonCloseInserter: () => void;\n\tinsertPosition: number;\n\tdisableAlpha: boolean;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n"],"mappings":""}

package/build-module/custom-select-control/index.js

@@ -74,7 +74,7 @@ export default function CustomSelectControl(props) {
     onFocus,
     onBlur,
     __experimentalShowSelectedHint = false
-  } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.CustomSelectControl', '6.4');
+  } = useDeprecated36pxDefaultSizeProp(props);
   const {
     getLabelProps,
     getToggleButtonProps,

package/build-module/custom-select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","classnames","Icon","check","__","sprintf","useCallback","useState","deprecated","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","InputBaseWithBackCompatMinWidth","StyledLabel","useDeprecated36pxDefaultSizeProp","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","handleOnFocus","e","handleOnBlur","since","version","hint","getDescribedBy","menuProps","onKeyDownHandler","stopPropagation","onKeyDown","startsWith","createElement","as","__unstableInputWidth","labelPosition","suffix","selectSize","__experimentalHint","map","index","key","style","icon","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t\t__nextUnconstrainedWidth = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp(\n\t\tprops,\n\t\t'wp.components.CustomSelectControl',\n\t\t'6.4'\n\t);\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBaseWithBackCompatMinWidth>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useSelect","classnames","Icon","check","__","sprintf","useCallback","useState","deprecated","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","InputBaseWithBackCompatMinWidth","StyledLabel","useDeprecated36pxDefaultSizeProp","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","handleOnFocus","e","handleOnBlur","since","version","hint","getDescribedBy","menuProps","onKeyDownHandler","stopPropagation","onKeyDown","startsWith","createElement","as","__unstableInputWidth","labelPosition","suffix","selectSize","__experimentalHint","map","index","key","style","icon","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t\t__nextUnconstrainedWidth = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBaseWithBackCompatMinWidth>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/build-module/custom-select-control-v2/index.js

@@ -34,17 +34,20 @@ export function CustomSelect({
   onChange,
   size = 'default',
   value,
-  renderSelectedValue = defaultRenderSelectedValue,
+  renderSelectedValue,
   ...props
 }) {
   const store = Ariakit.useSelectStore({
     setValue: nextValue => onChange?.(nextValue),
     defaultValue,
-    value
+    value,
+    // fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
+    virtualFocus: false
   });
   const {
     value: currentValue
   } = store.useState();
+  const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
   return createElement(Fragment, null, createElement(Styled.CustomSelectLabel, {
     store: store
   }, label), createElement(Styled.CustomSelectButton, {
@@ -52,7 +55,7 @@ export function CustomSelect({
     size: size,
     hasCustomRenderProp: !!renderSelectedValue,
     store: store
-  }, renderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
+  }, computedRenderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
     gutter: 12,
     store: store,
     sameWidth: true

package/build-module/custom-select-control-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","createContext","useContext","__","sprintf","Styled","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelect","children","defaultValue","label","onChange","size","renderSelectedValue","props","store","useSelectStore","setValue","nextValue","currentValue","useState","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nexport function CustomSelect( {\n\tchildren,\n\tdefaultValue,\n\tlabel,\n\tonChange,\n\tsize = 'default',\n\tvalue,\n\trenderSelectedValue = defaultRenderSelectedValue,\n\t...props\n}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\t{ ...props }\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ renderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;AAC9D,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,UAAU;AAQlC,OAAO,MAAMC,mBAAmB,GAC/BL,aAAa,CAA6BM,SAAU,CAAC;AAEtD,SAASC,0BAA0BA,CAAEC,KAAmC,EAAG;EAC1E,MAAMC,YAAY,GAAGC,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,GACxCA,KAAK,CAACI,MAAM,KAAK,CAAC,GAClBJ,KAAK,KAAKF,SAAS,IAAIE,KAAK,KAAK,IAAI;EAExC,IAAKC,YAAY,EAAG;IACnB,OAAOP,EAAE,CAAE,gBAAiB,CAAC;EAC9B;EAEA,IAAKQ,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACI,MAAM,KAAK,CAAC,GACtBJ,KAAK,CAAE,CAAC,CAAE;IACV;IACAL,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAEM,KAAK,CAACI,MAAO,CAAC;EACtD;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,YAAYA,CAAE;EAC7BC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBV,KAAK;EACLW,mBAAmB,GAAGZ,0BAA0B;EAChD,GAAGa;AAC2D,CAAC,EAAG;EAClE,MAAMC,KAAK,GAAGtB,OAAO,CAACuB,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMP,QAAQ,GAAIO,SAAU,CAAC;IAClDT,YAAY;IACZP;EACD,CAAE,CAAC;EAEH,MAAM;IAAEA,KAAK,EAAEiB;EAAa,CAAC,GAAGJ,KAAK,CAACK,QAAQ,CAAC,CAAC;EAEhD,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACvB,MAAM,CAACyB,iBAAiB;IAACR,KAAK,EAAGA;EAAO,GACtCL,KACuB,CAAC,EAC3BW,aAAA,CAACvB,MAAM,CAAC0B,kBAAkB;IAAA,GACpBV,KAAK;IACVF,IAAI,EAAGA,IAAM;IACba,mBAAmB,EAAG,CAAC,CAAEZ,mBAAqB;IAC9CE,KAAK,EAAGA;EAAO,GAEbF,mBAAmB,CAAEM,YAAa,CAAC,EACrCE,aAAA,CAAC5B,OAAO,CAACiC,WAAW,MAAE,CACI,CAAC,EAC5BL,aAAA,CAACvB,MAAM,CAAC6B,mBAAmB;IAACC,MAAM,EAAG,EAAI;IAACb,KAAK,EAAGA,KAAO;IAACc,SAAS;EAAA,GAClER,aAAA,CAACtB,mBAAmB,CAAC+B,QAAQ;IAAC5B,KAAK,EAAG;MAAEa;IAAM;EAAG,GAC9CP,QAC2B,CACH,CAC3B,CAAC;AAEL;AAEA,OAAO,SAASuB,gBAAgBA,CAAE;EACjCvB,QAAQ;EACR,GAAGM;AAC4D,CAAC,EAAG;EACnE,MAAMkB,mBAAmB,GAAGrC,UAAU,CAAEI,mBAAoB,CAAC;EAC7D,OACCsB,aAAA,CAACvB,MAAM,CAACiC,gBAAgB;IACvBhB,KAAK,EAAGiB,mBAAmB,EAAEjB,KAAO;IAAA,GAC/BD;EAAK,GAERN,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIM,KAAK,CAACZ,KAAK,EACzBmB,aAAA,CAAC5B,OAAO,CAACwC,eAAe,MAAE,CACF,CAAC;AAE5B"}
+{"version":3,"names":["Ariakit","createContext","useContext","__","sprintf","Styled","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelect","children","defaultValue","label","onChange","size","renderSelectedValue","props","store","useSelectStore","setValue","nextValue","virtualFocus","currentValue","useState","computedRenderSelectedValue","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nexport function CustomSelect( {\n\tchildren,\n\tdefaultValue,\n\tlabel,\n\tonChange,\n\tsize = 'default',\n\tvalue,\n\trenderSelectedValue,\n\t...props\n}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t\t// fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917\n\t\tvirtualFocus: false,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue =\n\t\trenderSelectedValue ?? defaultRenderSelectedValue;\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\t{ ...props }\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;AAC9D,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,UAAU;AAQlC,OAAO,MAAMC,mBAAmB,GAC/BL,aAAa,CAA6BM,SAAU,CAAC;AAEtD,SAASC,0BAA0BA,CAAEC,KAAmC,EAAG;EAC1E,MAAMC,YAAY,GAAGC,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,GACxCA,KAAK,CAACI,MAAM,KAAK,CAAC,GAClBJ,KAAK,KAAKF,SAAS,IAAIE,KAAK,KAAK,IAAI;EAExC,IAAKC,YAAY,EAAG;IACnB,OAAOP,EAAE,CAAE,gBAAiB,CAAC;EAC9B;EAEA,IAAKQ,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACI,MAAM,KAAK,CAAC,GACtBJ,KAAK,CAAE,CAAC,CAAE;IACV;IACAL,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAEM,KAAK,CAACI,MAAO,CAAC;EACtD;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,YAAYA,CAAE;EAC7BC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBV,KAAK;EACLW,mBAAmB;EACnB,GAAGC;AAC2D,CAAC,EAAG;EAClE,MAAMC,KAAK,GAAGtB,OAAO,CAACuB,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMP,QAAQ,GAAIO,SAAU,CAAC;IAClDT,YAAY;IACZP,KAAK;IACL;IACAiB,YAAY,EAAE;EACf,CAAE,CAAC;EAEH,MAAM;IAAEjB,KAAK,EAAEkB;EAAa,CAAC,GAAGL,KAAK,CAACM,QAAQ,CAAC,CAAC;EAEhD,MAAMC,2BAA2B,GAChCT,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAIZ,0BAA0B;EAElD,OACCsB,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACzB,MAAM,CAAC2B,iBAAiB;IAACV,KAAK,EAAGA;EAAO,GACtCL,KACuB,CAAC,EAC3Ba,aAAA,CAACzB,MAAM,CAAC4B,kBAAkB;IAAA,GACpBZ,KAAK;IACVF,IAAI,EAAGA,IAAM;IACbe,mBAAmB,EAAG,CAAC,CAAEd,mBAAqB;IAC9CE,KAAK,EAAGA;EAAO,GAEbO,2BAA2B,CAAEF,YAAa,CAAC,EAC7CG,aAAA,CAAC9B,OAAO,CAACmC,WAAW,MAAE,CACI,CAAC,EAC5BL,aAAA,CAACzB,MAAM,CAAC+B,mBAAmB;IAACC,MAAM,EAAG,EAAI;IAACf,KAAK,EAAGA,KAAO;IAACgB,SAAS;EAAA,GAClER,aAAA,CAACxB,mBAAmB,CAACiC,QAAQ;IAAC9B,KAAK,EAAG;MAAEa;IAAM;EAAG,GAC9CP,QAC2B,CACH,CAC3B,CAAC;AAEL;AAEA,OAAO,SAASyB,gBAAgBA,CAAE;EACjCzB,QAAQ;EACR,GAAGM;AAC4D,CAAC,EAAG;EACnE,MAAMoB,mBAAmB,GAAGvC,UAAU,CAAEI,mBAAoB,CAAC;EAC7D,OACCwB,aAAA,CAACzB,MAAM,CAACmC,gBAAgB;IACvBlB,KAAK,EAAGmB,mBAAmB,EAAEnB,KAAO;IAAA,GAC/BD;EAAK,GAERN,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIM,KAAK,CAACZ,KAAK,EACzBqB,aAAA,CAAC9B,OAAO,CAAC0C,eAAe,MAAE,CACF,CAAC;AAE5B"}

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

@@ -29,7 +29,7 @@ const TimeZone = () => {
     return null;
   }
   const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
-  const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
+  const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offsetFormatted}`;
 
   // Replace underscore with space in strings like `America/Costa_Rica`.
   const prettyTimezoneString = timezone.string.replace('_', ' ');

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

@@ -1 +1 @@
-{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","prettyTimezoneString","string","replace","timezoneDetail","hasNoAdditionalTimezoneDetail","trim","length","createElement","className","placement","text"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAAC;;EAE9C;EACA,MAAMK,oBAAoB,GAAGV,QAAQ,CAACW,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAEhE,MAAMC,cAAc,GACnB,KAAK,KAAKb,QAAQ,CAACW,MAAM,GACtBjB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKG,oBAAsB,EAAC;;EAE/C;EACA;EACA,MAAMI,6BAA6B,GAClCJ,oBAAoB,CAACK,IAAI,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;EAEzC,OAAOF,6BAA6B,GACnCG,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CAAC,GAElBU,aAAA,CAACpB,OAAO;IAACsB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGP;EAAgB,GAC/CI,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CACT,CACT;AACF,CAAC;AAED,eAAeT,QAAQ"}
+{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","offsetFormatted","prettyTimezoneString","string","replace","timezoneDetail","hasNoAdditionalTimezoneDetail","trim","length","createElement","className","placement","text"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACU,eAAiB,EAAC;;EAEvD;EACA,MAAMC,oBAAoB,GAAGX,QAAQ,CAACY,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAEhE,MAAMC,cAAc,GACnB,KAAK,KAAKd,QAAQ,CAACY,MAAM,GACtBlB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKI,oBAAsB,EAAC;;EAE/C;EACA;EACA,MAAMI,6BAA6B,GAClCJ,oBAAoB,CAACK,IAAI,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;EAEzC,OAAOF,6BAA6B,GACnCG,aAAA,CAACnB,eAAe;IAACoB,SAAS,EAAC;EAA+B,GACvDZ,QACc,CAAC,GAElBW,aAAA,CAACrB,OAAO;IAACuB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGP;EAAgB,GAC/CI,aAAA,CAACnB,eAAe;IAACoB,SAAS,EAAC;EAA+B,GACvDZ,QACc,CACT,CACT;AACF,CAAC;AAED,eAAeT,QAAQ"}