@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.2

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","cancelLabel","__","confirmLabel","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","variant","onClick","_default","contextConnect","exports"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\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 { OwnProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem, contextConnect } from '../ui/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\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: 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: 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\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"],"mappings":"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"}
+{"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","__","confirmLabel","_react","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog","exports","contextConnect","_default"],"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/confirm-dialog/styles.js

@@ -14,7 +14,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * ConfirmDialog needs this higher z-index to ensure it renders on top of
  * any parent Popover component.
  */
-const wrapper = process.env.NODE_ENV === "production" ? {
+const wrapper = exports.wrapper = process.env.NODE_ENV === "production" ? {
   name: "7g5ii0",
   styles: "&&{z-index:1000001;}"
 } : {
@@ -23,5 +23,4 @@ const wrapper = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29uZmlybS1kaWFsb2cvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWEwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2NvbmZpcm0tZGlhbG9nL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBUaGUgei1pbmRleCBmb3IgQ29uZmlybURpYWxvZyBpcyBiZWluZyBzZXQgaGVyZSBpbnN0ZWFkIG9mIGluXG4gKiBwYWNrYWdlcy9iYXNlLXN0eWxlcy9fei1pbmRleC5zY3NzLCBiZWNhdXNlIHRoaXMgY29tcG9uZW50IHVzZXNcbiAqIGVtb3Rpb24gaW5zdGVhZCBvZiBzYXNzLlxuICpcbiAqIENvbmZpcm1EaWFsb2cgbmVlZHMgdGhpcyBoaWdoZXIgei1pbmRleCB0byBlbnN1cmUgaXQgcmVuZGVycyBvbiB0b3Agb2ZcbiAqIGFueSBwYXJlbnQgUG9wb3ZlciBjb21wb25lbnQuXG4gKi9cbmV4cG9ydCBjb25zdCB3cmFwcGVyID0gY3NzYFxuXHQmJiB7XG5cdFx0ei1pbmRleDogMTAwMDAwMTtcblx0fVxuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-exports.wrapper = wrapper;
 //# sourceMappingURL=styles.js.map

package/build/confirm-dialog/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","wrapper","process","env","NODE_ENV","name","styles","map","toString","exports"],"sources":["@wordpress/components/src/confirm-dialog/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * The z-index for ConfirmDialog is being set here instead of in\n * packages/base-styles/_z-index.scss, because this component uses\n * emotion instead of sass.\n *\n * ConfirmDialog needs this higher z-index to ensure it renders on top of\n * any parent Popover component.\n */\nexport const wrapper = css`\n\t&& {\n\t\tz-index: 1000001;\n\t}\n`;\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,SAAAC,iCAAA;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAR;AAAA,CAInB;AAACS,OAAA,CAAAR,OAAA,GAAAA,OAAA"}
+{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","wrapper","exports","process","env","NODE_ENV","name","styles","map","toString"],"sources":["@wordpress/components/src/confirm-dialog/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * The z-index for ConfirmDialog is being set here instead of in\n * packages/base-styles/_z-index.scss, because this component uses\n * emotion instead of sass.\n *\n * ConfirmDialog needs this higher z-index to ensure it renders on top of\n * any parent Popover component.\n */\nexport const wrapper = css`\n\t&& {\n\t\tz-index: 1000001;\n\t}\n`;\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,SAAAC,iCAAA;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAT;AAAA,CAInB"}

package/build/confirm-dialog/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/confirm-dialog/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { MouseEvent, KeyboardEvent, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ModalProps } from '../modal/types';\n\nexport type DialogInputEvent =\n\t| Parameters< ModalProps[ 'onRequestClose' ] >[ 0 ]\n\t| KeyboardEvent< HTMLDivElement >\n\t| MouseEvent< HTMLButtonElement >;\n\ntype BaseProps = {\n\tchildren: ReactNode;\n\tonConfirm: ( event: DialogInputEvent ) => void;\n\tconfirmButtonText?: string;\n\tcancelButtonText?: string;\n};\n\ntype ControlledProps = BaseProps & {\n\tonCancel: ( event: DialogInputEvent ) => void;\n\tisOpen: boolean;\n};\n\ntype UncontrolledProps = BaseProps & {\n\tonCancel?: ( event: DialogInputEvent ) => void;\n\tisOpen?: never;\n};\n\nexport type OwnProps = ControlledProps | UncontrolledProps;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/confirm-dialog/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { MouseEvent, KeyboardEvent, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ModalProps } from '../modal/types';\n\nexport type DialogInputEvent =\n\t| Parameters< ModalProps[ 'onRequestClose' ] >[ 0 ]\n\t| KeyboardEvent< HTMLDivElement >\n\t| MouseEvent< HTMLButtonElement >;\n\nexport type ConfirmDialogProps = {\n\t/**\n\t * The actual message for the dialog. It's passed as children and any valid `ReactNode` is accepted.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The callback that's called when the user confirms.\n\t * A confirmation can happen when the `OK` button is clicked or when `Enter` is pressed.\n\t */\n\tonConfirm: ( event: DialogInputEvent ) => void;\n\t/**\n\t * The optional custom text to display as the confirmation button's label.\n\t */\n\tconfirmButtonText?: string;\n\t/**\n\t * The optional custom text to display as the cancellation button's label.\n\t */\n\tcancelButtonText?: string;\n\t/**\n\t * The callback that's called when the user cancels. A cancellation can happen\n\t * when the `Cancel` button is clicked, when the `ESC` key is pressed, or when\n\t * a click outside of the dialog focus is detected (i.e. in the overlay).\n\t *\n\t * It's not required if `isOpen` is not set (uncontrolled mode), as the component\n\t * will take care of closing itself, but you can still pass a callback if something\n\t * must be done upon cancelling (the component will still close itself in this case).\n\t *\n\t * If `isOpen` is set (controlled mode), then it's required, and you need to set\n\t * the state that defines `isOpen` to `false` as part of this callback if you want the\n\t * dialog to close when the user cancels.\n\t */\n\tonCancel?: ( event: DialogInputEvent ) => void;\n\t/**\n\t * Defines if the dialog is open (displayed) or closed (not rendered/displayed).\n\t * It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.\n\t */\n\tisOpen?: boolean;\n};\n"],"mappings":""}

package/build/context/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CONNECT_STATIC_NAMESPACE = exports.CONNECTED_NAMESPACE = exports.COMPONENT_NAMESPACE = void 0;
+const COMPONENT_NAMESPACE = exports.COMPONENT_NAMESPACE = 'data-wp-component';
+const CONNECTED_NAMESPACE = exports.CONNECTED_NAMESPACE = 'data-wp-c16t';
+
+/**
+ * Special key where the connected namespaces are stored.
+ * This is attached to Context connected components as a static property.
+ */
+const CONNECT_STATIC_NAMESPACE = exports.CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
+//# sourceMappingURL=constants.js.map

package/build/context/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["COMPONENT_NAMESPACE","exports","CONNECTED_NAMESPACE","CONNECT_STATIC_NAMESPACE"],"sources":["@wordpress/components/src/context/constants.js"],"sourcesContent":["export const COMPONENT_NAMESPACE = 'data-wp-component';\nexport const CONNECTED_NAMESPACE = 'data-wp-c16t';\n\n/**\n * Special key where the connected namespaces are stored.\n * This is attached to Context connected components as a static property.\n */\nexport const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,mBAAmB;AAC/C,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,cAAc;;AAEjD;AACA;AACA;AACA;AACO,MAAMC,wBAAwB,GAAAF,OAAA,CAAAE,wBAAA,GAAG,sBAAsB"}

package/build/{ui/context → context}/context-connect.js

@@ -73,7 +73,7 @@ function _contextConnect(Component, namespace, options) {
   }
 
   // @ts-expect-error We can't rely on inferred types here because of the
-  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
   return Object.assign(WrappedComponent, {
     [_constants.CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
     displayName: namespace,

package/build/context/context-connect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","SCRIPT_DEBUG","warn","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getStyledClassNameFromKey","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"sources":["@wordpress/components/src/context/context-connect.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never,\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions,\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) return [];\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) return false;\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"],"mappings":";;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,0BAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,cAAcA,CAG7BC,SAIE,EACFC,SAAiB,EAChB;EACD,OAAOC,eAAe,CAAEF,SAAS,EAAEC,SAAS,EAAE;IAAEE,WAAW,EAAE;EAAK,CAAE,CAAC;AACtE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,wBAAwBA,CACvCJ,SAA6C,EAC7CC,SAAiB,EAChB;EACD,OAAOC,eAAe,CAAEF,SAAS,EAAEC,SAAU,CAAC;AAC/C;;AAEA;AACA;AACA;AACA,SAASC,eAAeA,CAIvBF,SAAY,EACZC,SAAiB,EACjBI,OAAW,EAIV;EACD,MAAMC,gBAAgB,GAAGD,OAAO,EAAEF,WAAW,GAC1C,IAAAI,mBAAU,EAA+BP,SAAU,CAAC,GACpDA,SAAS;EAEZ,IAAK,OAAOC,SAAS,KAAK,WAAW,EAAG;IACvC,OAAAO,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAE,4CAA6C,CAAC;EACrD;;EAEA;EACA,IAAIC,eAAe,GAAGJ,gBAAgB,CAAEK,mCAAwB,CAAE,IAAI,CACrEV,SAAS,CACT;;EAED;AACD;AACA;EACC,IAAKW,KAAK,CAACC,OAAO,CAAEZ,SAAU,CAAC,EAAG;IACjCS,eAAe,GAAG,CAAE,GAAGA,eAAe,EAAE,GAAGT,SAAS,CAAE;EACvD;EACA,IAAK,OAAOA,SAAS,KAAK,QAAQ,EAAG;IACpCS,eAAe,GAAG,CAAE,GAAGA,eAAe,EAAET,SAAS,CAAE;EACpD;;EAEA;EACA;EACA,OAAOa,MAAM,CAACC,MAAM,CAAET,gBAAgB,EAAE;IACvC,CAAEK,mCAAwB,GAAI,CAAE,GAAG,IAAIK,GAAG,CAAEN,eAAgB,CAAC,CAAE;IAC/DO,WAAW,EAAEhB,SAAS;IACtBiB,QAAQ,EAAG,IAAI,IAAAC,oDAAyB,EAAElB,SAAU,CAAG;EACxD,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASmB,mBAAmBA,CAClCpB,SAAsC,EAC3B;EACX,IAAK,CAAEA,SAAS,EAAG,OAAO,EAAE;EAE5B,IAAIqB,UAAU,GAAG,EAAE;;EAEnB;EACA,IAAKrB,SAAS,CAAEW,mCAAwB,CAAE,EAAG;IAC5C;IACAU,UAAU,GAAGrB,SAAS,CAAEW,mCAAwB,CAAE;EACnD;;EAEA;EACA,IAAKX,SAAS,CAACsB,IAAI,IAAItB,SAAS,CAACsB,IAAI,CAAEX,mCAAwB,CAAE,EAAG;IACnE;IACAU,UAAU,GAAGrB,SAAS,CAACsB,IAAI,CAAEX,mCAAwB,CAAE;EACxD;EAEA,OAAOU,UAAU;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,mBAAmBA,CAClCvB,SAAoB,EACpBwB,KAAwB,EACd;EACV,IAAK,CAAExB,SAAS,EAAG,OAAO,KAAK;EAE/B,IAAK,OAAOwB,KAAK,KAAK,QAAQ,EAAG;IAChC,OAAOJ,mBAAmB,CAAEpB,SAAU,CAAC,CAACyB,QAAQ,CAAED,KAAM,CAAC;EAC1D;EACA,IAAKZ,KAAK,CAACC,OAAO,CAAEW,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACE,IAAI,CAAIC,MAAM,IAC1BP,mBAAmB,CAAEpB,SAAU,CAAC,CAACyB,QAAQ,CAAEE,MAAO,CACnD,CAAC;EACF;EAEA,OAAO,KAAK;AACb"}

package/build/{ui/context → context}/context-system-provider.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComponentsContext = exports.ContextSystemProvider = exports.ComponentsContext = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _isPlainObject = require("is-plain-object");
+var _element = require("@wordpress/element");
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _utils = require("../../utils");
+var _utils = require("../utils");
 /**
  * External dependencies
  */
@@ -23,8 +24,7 @@ var _utils = require("../../utils");
  * Internal dependencies
  */
 
-const ComponentsContext = (0, _element.createContext)( /** @type {Record<string, any>} */{});
-exports.ComponentsContext = ComponentsContext;
+const ComponentsContext = exports.ComponentsContext = (0, _element.createContext)( /** @type {Record<string, any>} */{});
 const useComponentsContext = () => (0, _element.useContext)(ComponentsContext);
 
 /**
@@ -97,10 +97,9 @@ const BaseContextSystemProvider = ({
   const contextValue = useContextSystemBridge({
     value
   });
-  return (0, _element.createElement)(ComponentsContext.Provider, {
+  return (0, _react.createElement)(ComponentsContext.Provider, {
     value: contextValue
   }, children);
 };
-const ContextSystemProvider = (0, _element.memo)(BaseContextSystemProvider);
-exports.ContextSystemProvider = ContextSystemProvider;
+const ContextSystemProvider = exports.ContextSystemProvider = (0, _element.memo)(BaseContextSystemProvider);
 //# sourceMappingURL=context-system-provider.js.map

package/build/context/context-system-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_deepmerge","_interopRequireDefault","require","_es","_isPlainObject","_element","_warning","_utils","ComponentsContext","exports","createContext","useComponentsContext","useContext","useContextSystemBridge","value","parentContext","valueRef","useRef","useUpdateEffect","fastDeepEqual","current","SCRIPT_DEBUG","warn","JSON","stringify","config","useMemo","deepmerge","isMergeableObject","isPlainObject","BaseContextSystemProvider","children","contextValue","_react","createElement","Provider","ContextSystemProvider","memo"],"sources":["@wordpress/components/src/context/context-system-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAOA,IAAAI,QAAA,GAAAL,sBAAA,CAAAC,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAtBA;AACA;AACA;;AAKA;AACA;AACA;;AAUA;AACA;AACA;;AAGO,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,sBAAa,GAC7C,kCAAqC,CAAC,CACvC,CAAC;AACM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM,IAAAC,mBAAU,EAAEJ,iBAAkB,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAC,OAAA,CAAAE,oBAAA,GAAAA,oBAAA;AASA,SAASE,sBAAsBA,CAAE;EAAEC;AAAM,CAAC,EAAG;EAC5C,MAAMC,aAAa,GAAGJ,oBAAoB,CAAC,CAAC;EAE5C,MAAMK,QAAQ,GAAG,IAAAC,eAAM,EAAEH,KAAM,CAAC;EAEhC,IAAAI,sBAAe,EAAE,MAAM;IACtB;IACC;IACA,IAAAC,WAAa,EAAEH,QAAQ,CAACI,OAAO,EAAEN,KAAM,CAAC;IACxC;IACAE,QAAQ,CAACI,OAAO,KAAKN,KAAK,EACzB;MACD,OAAAO,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAG,gCAAgCC,IAAI,CAACC,SAAS,CAAEV,KAAM,CAAG,EAAE,CAAC;IACpE;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;;EAEd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMW,MAAM,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC7B;IACA,OAAO,IAAAC,kBAAS,EAAEZ,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAAC,CAAC,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAAE;MACnDc,iBAAiB,EAAEC;IACpB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEd,aAAa,EAAED,KAAK,CAAG,CAAC;EAE7B,OAAOW,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,yBAAyB,GAAGA,CAAE;EAAEC,QAAQ;EAAEjB;AAAM,CAAC,KAAM;EAC5D,MAAMkB,YAAY,GAAGnB,sBAAsB,CAAE;IAAEC;EAAM,CAAE,CAAC;EAExD,OACC,IAAAmB,MAAA,CAAAC,aAAA,EAAC1B,iBAAiB,CAAC2B,QAAQ;IAACrB,KAAK,EAAGkB;EAAc,GAC/CD,QACyB,CAAC;AAE/B,CAAC;AAEM,MAAMK,qBAAqB,GAAA3B,OAAA,CAAA2B,qBAAA,GAAG,IAAAC,aAAI,EAAEP,yBAA0B,CAAC"}

package/build/{ui/context → context}/get-styled-class-name-from-key.js

@@ -21,6 +21,5 @@ function getStyledClassName(namespace) {
   const kebab = (0, _changeCase.paramCase)(namespace);
   return `components-${kebab}`;
 }
-const getStyledClassNameFromKey = (0, _memize.default)(getStyledClassName);
-exports.getStyledClassNameFromKey = getStyledClassNameFromKey;
+const getStyledClassNameFromKey = exports.getStyledClassNameFromKey = (0, _memize.default)(getStyledClassName);
 //# sourceMappingURL=get-styled-class-name-from-key.js.map

package/build/context/get-styled-class-name-from-key.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_changeCase","require","_memize","_interopRequireDefault","getStyledClassName","namespace","kebab","kebabCase","getStyledClassNameFromKey","exports","memoize"],"sources":["@wordpress/components/src/context/get-styled-class-name-from-key.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,kBAAkBA,CAAEC,SAAiB,EAAW;EACxD,MAAMC,KAAK,GAAG,IAAAC,qBAAS,EAAEF,SAAU,CAAC;EACpC,OAAQ,cAAcC,KAAO,EAAC;AAC/B;AAEO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,eAAO,EAAEN,kBAAmB,CAAC"}

package/build/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_contextSystemProvider","require","_contextConnect","_useContextSystem","_wordpressComponent","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["@wordpress/components/src/context/index.ts"],"sourcesContent":["export {\n\tContextSystemProvider,\n\tuseComponentsContext,\n} from './context-system-provider';\nexport {\n\tcontextConnect,\n\tcontextConnectWithoutRef,\n\thasConnectNamespace,\n\tgetConnectNamespace,\n} from './context-connect';\nexport { useContextSystem } from './use-context-system';\nexport * from './wordpress-component';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAF,mBAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,mBAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,mBAAA,CAAAI,GAAA;IAAA;EAAA;AAAA"}

package/build/{ui/context → context}/use-context-system.js

@@ -9,7 +9,7 @@ var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _contextSystemProvider = require("./context-system-provider");
 var _utils = require("./utils");
 var _getStyledClassNameFromKey = require("./get-styled-class-name-from-key");
-var _useCx = require("../../utils/hooks/use-cx");
+var _useCx = require("../utils/hooks/use-cx");
 /**
  * WordPress dependencies
  */

package/build/context/use-context-system.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_warning","_interopRequireDefault","require","_contextSystemProvider","_utils","_getStyledClassNameFromKey","_useCx","useContextSystem","props","namespace","contextSystemProps","useComponentsContext","SCRIPT_DEBUG","warn","contextProps","finalComponentProps","getConnectedNamespace","getNamespace","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","useCx","classes","getStyledClassNameFromKey","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAG,IAAAC,2CAAoB,EAAC,CAAC;EACjD,IAAK,OAAOF,SAAS,KAAK,WAAW,EAAG;IACvC,OAAAG,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMC,YAAY,GAAGJ,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMM,mBAAmB,GAAG;IAC3B,GAAG,IAAAC,4BAAqB,EAAC,CAAC;IAC1B,GAAG,IAAAC,mBAAY,EAAER,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAES,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGN,YAAY;EAExE,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAEZ,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMkB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAGF,EAAE,CACjB,IAAAG,oDAAyB,EAAEpB,SAAU,CAAC,EACtCD,KAAK,CAACsB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOV,kBAAkB,CAACW,cAAc,KAAK,UAAU,GACpDX,kBAAkB,CAACW,cAAc,CAAEX,kBAAmB,CAAC,GACvDA,kBAAkB,CAACY,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIb,kBAAkB,EAAG;IACvC;IACAN,mBAAmB,CAAEmB,GAAG,CAAE,GAAGb,kBAAkB,CAAEa,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIf,aAAa,EAAG;IAClC;IACAJ,mBAAmB,CAAEmB,GAAG,CAAE,GAAGf,aAAa,CAAEe,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACApB,mBAAmB,CAACkB,QAAQ,GAAGF,QAAQ;EACxC;EAEAhB,mBAAmB,CAACe,SAAS,GAAGF,OAAO;EAEvC,OAAOb,mBAAmB;AAC3B"}

package/build/context/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_constants","require","getNamespace","componentName","COMPONENT_NAMESPACE","getConnectedNamespace","CONNECTED_NAMESPACE"],"sources":["@wordpress/components/src/context/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace( componentName ) {\n\treturn { [ COMPONENT_NAMESPACE ]: componentName };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n\treturn { [ CONNECTED_NAMESPACE ]: true };\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAAEC,aAAa,EAAG;EAC7C,OAAO;IAAE,CAAEC,8BAAmB,GAAID;EAAc,CAAC;AAClD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,qBAAqBA,CAAA,EAAG;EACvC,OAAO;IAAE,CAAEC,8BAAmB,GAAI;EAAK,CAAC;AACzC"}

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

@@ -0,0 +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/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/custom-gradient-picker/constants.js

@@ -9,24 +9,20 @@ var _i18n = require("@wordpress/i18n");
  * WordPress dependencies
  */
 
-const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
-exports.DEFAULT_GRADIENT = DEFAULT_GRADIENT;
-const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
-exports.DEFAULT_LINEAR_GRADIENT_ANGLE = DEFAULT_LINEAR_GRADIENT_ANGLE;
-const HORIZONTAL_GRADIENT_ORIENTATION = {
+const DEFAULT_GRADIENT = exports.DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
+const DEFAULT_LINEAR_GRADIENT_ANGLE = exports.DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
+const HORIZONTAL_GRADIENT_ORIENTATION = exports.HORIZONTAL_GRADIENT_ORIENTATION = {
   type: 'angular',
   value: '90'
 };
-exports.HORIZONTAL_GRADIENT_ORIENTATION = HORIZONTAL_GRADIENT_ORIENTATION;
-const GRADIENT_OPTIONS = [{
+const GRADIENT_OPTIONS = exports.GRADIENT_OPTIONS = [{
   value: 'linear-gradient',
   label: (0, _i18n.__)('Linear')
 }, {
   value: 'radial-gradient',
   label: (0, _i18n.__)('Radial')
 }];
-exports.GRADIENT_OPTIONS = GRADIENT_OPTIONS;
-const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
+const DIRECTIONAL_ORIENTATION_ANGLE_MAP = exports.DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
   top: 0,
   'top right': 45,
   'right top': 45,
@@ -40,5 +36,4 @@ const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
   'top left': 315,
   'left top': 315
 };
-exports.DIRECTIONAL_ORIENTATION_ANGLE_MAP = DIRECTIONAL_ORIENTATION_ANGLE_MAP;
 //# sourceMappingURL=constants.js.map

package/build/custom-gradient-picker/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","DEFAULT_GRADIENT","exports","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","type","value","GRADIENT_OPTIONS","label","__","DIRECTIONAL_ORIENTATION_ANGLE_MAP","top","right","bottom","left"],"sources":["@wordpress/components/src/custom-gradient-picker/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const DEFAULT_GRADIENT =\n\t'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\n\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\n\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n\ttype: 'angular',\n\tvalue: '90',\n} as const;\n\nexport const GRADIENT_OPTIONS = [\n\t{ value: 'linear-gradient', label: __( 'Linear' ) },\n\t{ value: 'radial-gradient', label: __( 'Radial' ) },\n];\n\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n\ttop: 0,\n\t'top right': 45,\n\t'right top': 45,\n\tright: 90,\n\t'right bottom': 135,\n\t'bottom right': 135,\n\tbottom: 180,\n\t'bottom left': 225,\n\t'left bottom': 225,\n\tleft: 270,\n\t'top left': 315,\n\t'left top': 315,\n};\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,gBAAgB,GAC5B,0EAA0E;AAACC,OAAA,CAAAD,gBAAA,GAAAA,gBAAA;AAErE,MAAME,6BAA6B,GAAG,GAAG;AAACD,OAAA,CAAAC,6BAAA,GAAAA,6BAAA;AAE1C,MAAMC,+BAA+B,GAAG;EAC9CC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;AACR,CAAU;AAACJ,OAAA,CAAAE,+BAAA,GAAAA,+BAAA;AAEJ,MAAMG,gBAAgB,GAAG,CAC/B;EAAED,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,EACnD;EAAEH,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,CACnD;AAACP,OAAA,CAAAK,gBAAA,GAAAA,gBAAA;AAEK,MAAMG,iCAAiC,GAAG;EAChDC,GAAG,EAAE,CAAC;EACN,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE,EAAE;EACT,cAAc,EAAE,GAAG;EACnB,cAAc,EAAE,GAAG;EACnBC,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,GAAG;EAClBC,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,GAAG;EACf,UAAU,EAAE;AACb,CAAC;AAACZ,OAAA,CAAAQ,iCAAA,GAAAA,iCAAA"}
+{"version":3,"names":["_i18n","require","DEFAULT_GRADIENT","exports","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","type","value","GRADIENT_OPTIONS","label","__","DIRECTIONAL_ORIENTATION_ANGLE_MAP","top","right","bottom","left"],"sources":["@wordpress/components/src/custom-gradient-picker/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const DEFAULT_GRADIENT =\n\t'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\n\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\n\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n\ttype: 'angular',\n\tvalue: '90',\n} as const;\n\nexport const GRADIENT_OPTIONS = [\n\t{ value: 'linear-gradient', label: __( 'Linear' ) },\n\t{ value: 'radial-gradient', label: __( 'Radial' ) },\n];\n\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n\ttop: 0,\n\t'top right': 45,\n\t'right top': 45,\n\tright: 90,\n\t'right bottom': 135,\n\t'bottom right': 135,\n\tbottom: 180,\n\t'bottom left': 225,\n\t'left bottom': 225,\n\tleft: 270,\n\t'top left': 315,\n\t'left top': 315,\n};\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAC5B,0EAA0E;AAEpE,MAAME,6BAA6B,GAAAD,OAAA,CAAAC,6BAAA,GAAG,GAAG;AAEzC,MAAMC,+BAA+B,GAAAF,OAAA,CAAAE,+BAAA,GAAG;EAC9CC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;AACR,CAAU;AAEH,MAAMC,gBAAgB,GAAAL,OAAA,CAAAK,gBAAA,GAAG,CAC/B;EAAED,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,EACnD;EAAEH,KAAK,EAAE,iBAAiB;EAAEE,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;AAAE,CAAC,CACnD;AAEM,MAAMC,iCAAiC,GAAAR,OAAA,CAAAQ,iCAAA,GAAG;EAChDC,GAAG,EAAE,CAAC;EACN,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE,EAAE;EACT,cAAc,EAAE,GAAG;EACnB,cAAc,EAAE,GAAG;EACnBC,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,GAAG;EAClBC,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,GAAG;EACf,UAAU,EAAE;AACb,CAAC"}

package/build/custom-gradient-picker/gradient-bar/constants.js

@@ -4,18 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = void 0;
-const GRADIENT_MARKERS_WIDTH = 16;
-exports.GRADIENT_MARKERS_WIDTH = GRADIENT_MARKERS_WIDTH;
-const INSERT_POINT_WIDTH = 16;
-exports.INSERT_POINT_WIDTH = INSERT_POINT_WIDTH;
-const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
-exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
-const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
-exports.MINIMUM_DISTANCE_BETWEEN_POINTS = MINIMUM_DISTANCE_BETWEEN_POINTS;
-const MINIMUM_SIGNIFICANT_MOVE = 5;
-exports.MINIMUM_SIGNIFICANT_MOVE = MINIMUM_SIGNIFICANT_MOVE;
-const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
-exports.KEYBOARD_CONTROL_POINT_VARIATION = KEYBOARD_CONTROL_POINT_VARIATION;
-const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
-exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER;
+const GRADIENT_MARKERS_WIDTH = exports.GRADIENT_MARKERS_WIDTH = 16;
+const INSERT_POINT_WIDTH = exports.INSERT_POINT_WIDTH = 16;
+const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
+const MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
+const MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_SIGNIFICANT_MOVE = 5;
+const KEYBOARD_CONTROL_POINT_VARIATION = exports.KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
 //# sourceMappingURL=constants.js.map

package/build/custom-gradient-picker/gradient-bar/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["GRADIENT_MARKERS_WIDTH","exports","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.ts"],"sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"],"mappings":";;;;;;AAAO,MAAMA,sBAAsB,GAAG,EAAE;AAACC,OAAA,CAAAD,sBAAA,GAAAA,sBAAA;AAClC,MAAME,kBAAkB,GAAG,EAAE;AAACD,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAC9B,MAAMC,2CAA2C,GAAG,EAAE;AAACF,OAAA,CAAAE,2CAAA,GAAAA,2CAAA;AACvD,MAAMC,+BAA+B,GAAG,CAAC;AAACH,OAAA,CAAAG,+BAAA,GAAAA,+BAAA;AAC1C,MAAMC,wBAAwB,GAAG,CAAC;AAACJ,OAAA,CAAAI,wBAAA,GAAAA,wBAAA;AAEnC,MAAMC,gCAAgC,GAC5CH,2CAA2C;AAACF,OAAA,CAAAK,gCAAA,GAAAA,gCAAA;AACtC,MAAMC,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGF,sBAAsB,IAAK,CAAC;AAACC,OAAA,CAAAM,4CAAA,GAAAA,4CAAA"}
+{"version":3,"names":["GRADIENT_MARKERS_WIDTH","exports","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.ts"],"sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"],"mappings":";;;;;;AAAO,MAAMA,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,EAAE;AACjC,MAAME,kBAAkB,GAAAD,OAAA,CAAAC,kBAAA,GAAG,EAAE;AAC7B,MAAMC,2CAA2C,GAAAF,OAAA,CAAAE,2CAAA,GAAG,EAAE;AACtD,MAAMC,+BAA+B,GAAAH,OAAA,CAAAG,+BAAA,GAAG,CAAC;AACzC,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAG,CAAC;AAElC,MAAMC,gCAAgC,GAAAL,OAAA,CAAAK,gCAAA,GAC5CH,2CAA2C;AACrC,MAAMI,4CAA4C,GAAAN,OAAA,CAAAM,4CAAA,GACxD,CAAEL,kBAAkB,GAAGF,sBAAsB,IAAK,CAAC"}

package/build/custom-gradient-picker/gradient-bar/control-points.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _colord = require("colord");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _button = _interopRequireDefault(require("../../button"));
@@ -18,6 +19,7 @@ var _visuallyHidden = require("../../visually-hidden");
 var _colorPalette = require("../../color-palette");
 var _utils = require("./utils");
 var _constants = require("./constants");
+var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
 /**
  * External dependencies
  */
@@ -38,7 +40,7 @@ function ControlPointButton({
 }) {
   const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_button.default, {
     "aria-label": (0, _i18n.sprintf)(
     // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
     (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
@@ -49,7 +51,7 @@ function ControlPointButton({
       'is-active': isOpen
     }),
     ...additionalProps
-  }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+  }), (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
     id: descriptionId
   }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
 }
@@ -61,10 +63,14 @@ function GradientColorPickerDropdown({
   // Open the popover below the gradient control/insertion point
   const popoverProps = (0, _element.useMemo)(() => ({
     placement: 'bottom',
-    offset: 8
+    offset: 8,
+    // Disabling resize as it would otherwise cause the popover to show
+    // scrollbars while dragging the color picker's handle close to the
+    // popover edge.
+    resize: false
   }), []);
   const mergedClassName = (0, _classnames.default)('components-custom-gradient-picker__control-point-dropdown', className);
-  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, {
+  return (0, _react.createElement)(_colorPalette.CustomColorPickerDropdown, {
     isRenderedInSidebar: isRenderedInSidebar,
     popoverProps: popoverProps,
     className: mergedClassName,
@@ -117,16 +123,16 @@ function ControlPoints({
       cleanEventListenersRef.current?.();
     };
   }, []);
-  return (0, _element.createElement)(_element.Fragment, null, controlPoints.map((point, index) => {
+  return (0, _react.createElement)(_react.Fragment, null, controlPoints.map((point, index) => {
     const initialPosition = point?.position;
-    return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(GradientColorPickerDropdown, {
+    return ignoreMarkerPosition !== initialPosition && (0, _react.createElement)(GradientColorPickerDropdown, {
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
       renderToggle: ({
         isOpen,
         onToggle
-      }) => (0, _element.createElement)(ControlPointButton, {
+      }) => (0, _react.createElement)(ControlPointButton, {
         key: index,
         onClick: () => {
           if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
@@ -171,16 +177,18 @@ function ControlPoints({
       }),
       renderContent: ({
         onClose
-      }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.ColorPicker, {
+      }) => (0, _react.createElement)(_dropdownContentWrapper.default, {
+        paddingSize: "none"
+      }, (0, _react.createElement)(_colorPicker.ColorPicker, {
         enableAlpha: !disableAlpha,
         color: point.color,
         onChange: color => {
           onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
         }
-      }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_hStack.HStack, {
+      }), !disableRemove && controlPoints.length > 2 && (0, _react.createElement)(_hStack.HStack, {
         className: "components-custom-gradient-picker__remove-control-point-wrapper",
         alignment: "center"
-      }, (0, _element.createElement)(_button.default, {
+      }, (0, _react.createElement)(_button.default, {
         onClick: () => {
           onChange((0, _utils.removeControlPoint)(controlPoints, index));
           onClose();
@@ -204,7 +212,7 @@ function InsertPoint({
   __experimentalIsRenderedInSidebar
 }) {
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
-  return (0, _element.createElement)(GradientColorPickerDropdown, {
+  return (0, _react.createElement)(GradientColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
@@ -213,7 +221,7 @@ function InsertPoint({
     renderToggle: ({
       isOpen,
       onToggle
-    }) => (0, _element.createElement)(_button.default, {
+    }) => (0, _react.createElement)(_button.default, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: () => {
@@ -228,7 +236,9 @@ function InsertPoint({
       className: "components-custom-gradient-picker__insert-point-dropdown",
       icon: _icons.plus
     }),
-    renderContent: () => (0, _element.createElement)(_colorPicker.ColorPicker, {
+    renderContent: () => (0, _react.createElement)(_dropdownContentWrapper.default, {
+      paddingSize: "none"
+    }, (0, _react.createElement)(_colorPicker.ColorPicker, {
       enableAlpha: !disableAlpha,
       onChange: color => {
         if (!alreadyInsertedPoint) {
@@ -238,7 +248,7 @@ function InsertPoint({
           onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
         }
       }
-    }),
+    })),
     style: insertPosition !== null ? {
       left: `${insertPosition}%`,
       transform: 'translateX( -50% )'
@@ -246,6 +256,5 @@ function InsertPoint({
   });
 }
 ControlPoints.InsertPoint = InsertPoint;
-var _default = ControlPoints;
-exports.default = _default;
+var _default = exports.default = ControlPoints;
 //# sourceMappingURL=control-points.js.map