@wordpress/components 27.5.0 → 27.6.0

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_animation","backdrop","hidden","opacity","show","transition","type","duration","delay","delayChildren","exit","foreground","scale","DropIndicator","label","disableMotion","useReducedMotion","children","_react","createElement","__unstableMotion","div","variants","initial","animate","className","style","pointerEvents","Icon","icon","upload","__","__unstableAnimatePresence","DropZoneComponent","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","classnames","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport {\n\t__experimentalUseDropZone as useDropZone,\n\tuseReducedMotion,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst backdrop = {\n\thidden: { opacity: 0 },\n\tshow: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\ttype: 'tween',\n\t\t\tduration: 0.2,\n\t\t\tdelay: 0,\n\t\t\tdelayChildren: 0.1,\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.2,\n\t\t\tdelayChildren: 0,\n\t\t},\n\t},\n};\n\nconst foreground = {\n\thidden: { opacity: 0, scale: 0.9 },\n\tshow: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\ttransition: {\n\t\t\tduration: 0.1,\n\t\t},\n\t},\n\texit: { opacity: 0, scale: 0.9 },\n};\n\nfunction DropIndicator( { label }: { label?: string } ) {\n\tconst disableMotion = useReducedMotion();\n\tconst children = (\n\t\t<motion.div\n\t\t\tvariants={ backdrop }\n\t\t\tinitial={ disableMotion ? 'show' : 'hidden' }\n\t\t\tanimate=\"show\"\n\t\t\texit={ disableMotion ? 'show' : 'exit' }\n\t\t\tclassName=\"components-drop-zone__content\"\n\t\t\t// Without this, when this div is shown,\n\t\t\t// Safari calls a onDropZoneLeave causing a loop because of this bug\n\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\tstyle={ { pointerEvents: 'none' } }\n\t\t>\n\t\t\t<motion.div variants={ foreground }>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ upload }\n\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t/>\n\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t</span>\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n\n\tif ( disableMotion ) {\n\t\treturn children;\n\t}\n\n\treturn <AnimatePresence>{ children }</AnimatePresence>;\n}\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\tconst classes = classnames( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t{ isDraggingOverElement && <DropIndicator label={ label } /> }\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_animation","backdrop","hidden","opacity","show","transition","type","duration","delay","delayChildren","exit","foreground","scale","DropIndicator","label","disableMotion","useReducedMotion","children","_react","createElement","__unstableMotion","div","variants","initial","animate","className","style","pointerEvents","Icon","icon","upload","__","__unstableAnimatePresence","DropZoneComponent","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport {\n\t__experimentalUseDropZone as useDropZone,\n\tuseReducedMotion,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst backdrop = {\n\thidden: { opacity: 0 },\n\tshow: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\ttype: 'tween',\n\t\t\tduration: 0.2,\n\t\t\tdelay: 0,\n\t\t\tdelayChildren: 0.1,\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.2,\n\t\t\tdelayChildren: 0,\n\t\t},\n\t},\n};\n\nconst foreground = {\n\thidden: { opacity: 0, scale: 0.9 },\n\tshow: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\ttransition: {\n\t\t\tduration: 0.1,\n\t\t},\n\t},\n\texit: { opacity: 0, scale: 0.9 },\n};\n\nfunction DropIndicator( { label }: { label?: string } ) {\n\tconst disableMotion = useReducedMotion();\n\tconst children = (\n\t\t<motion.div\n\t\t\tvariants={ backdrop }\n\t\t\tinitial={ disableMotion ? 'show' : 'hidden' }\n\t\t\tanimate=\"show\"\n\t\t\texit={ disableMotion ? 'show' : 'exit' }\n\t\t\tclassName=\"components-drop-zone__content\"\n\t\t\t// Without this, when this div is shown,\n\t\t\t// Safari calls a onDropZoneLeave causing a loop because of this bug\n\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\tstyle={ { pointerEvents: 'none' } }\n\t\t>\n\t\t\t<motion.div variants={ foreground }>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ upload }\n\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t/>\n\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t</span>\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n\n\tif ( disableMotion ) {\n\t\treturn children;\n\t}\n\n\treturn <AnimatePresence>{ children }</AnimatePresence>;\n}\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t{ isDraggingOverElement && <DropIndicator label={ label } /> }\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}

package/build/dropdown/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Dropdown = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
@@ -117,7 +117,7 @@ const UnconnectedDropdown = (props, forwardedRef) => {
     anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,
     variant: variant,
     ...popoverProps,
-    className: (0, _classnames.default)('components-dropdown__content', popoverProps?.className, contentClassName)
+    className: (0, _clsx.default)('components-dropdown__content', popoverProps?.className, contentClassName)
   }, renderContent(args)));
 };
 

package/build/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_compose","_deprecated","_context","_hooks","_popover","UnconnectedDropdown","props","forwardedRef","renderContent","renderToggle","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","popoverProps","onClose","onToggle","style","open","defaultOpen","position","variant","useContextSystem","undefined","deprecated","since","alternative","hint","fallbackPopoverAnchor","setFallbackPopoverAnchor","useState","containerRef","useRef","isOpen","setIsOpen","useControlledValue","defaultValue","value","onChange","closeIfFocusOutside","current","ownerDocument","dialog","activeElement","closest","contains","close","args","popoverPropsHaveAnchor","anchor","anchorRef","getAnchorRect","anchorRect","_react","createElement","ref","useMergeRefs","tabIndex","default","onFocusOutside","offset","classnames","Dropdown","exports","contextConnect","_default"],"sources":["@wordpress/components/src/dropdown/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { useControlledValue } from '../utils/hooks';\nimport Popover from '../popover';\nimport type { DropdownProps, DropdownInternalContext } from './types';\n\nconst UnconnectedDropdown = (\n\tprops: DropdownProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t\tstyle,\n\n\t\topen,\n\t\tdefaultOpen,\n\n\t\t// Deprecated props\n\t\tposition,\n\n\t\t// From context system\n\t\tvariant,\n\t} = useContextSystem< DropdownProps & DropdownInternalContext >(\n\t\tprops,\n\t\t'Dropdown'\n\t);\n\n\tif ( position !== undefined ) {\n\t\tdeprecated( '`position` prop in wp.components.Dropdown', {\n\t\t\tsince: '6.2',\n\t\t\talternative: '`popoverProps.placement` prop',\n\t\t\thint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.',\n\t\t} );\n\t}\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =\n\t\tuseState< HTMLDivElement | null >( null );\n\tconst containerRef = useRef< HTMLDivElement >();\n\n\tconst [ isOpen, setIsOpen ] = useControlledValue( {\n\t\tdefaultValue: defaultOpen,\n\t\tvalue: open,\n\t\tonChange: onToggle,\n\t} );\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tif ( ! containerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog =\n\t\t\townerDocument?.activeElement?.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tonClose?.();\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = {\n\t\tisOpen: !! isOpen,\n\t\tonToggle: () => setIsOpen( ! isOpen ),\n\t\tonClose: close,\n\t};\n\tconst popoverPropsHaveAnchor =\n\t\t!! popoverProps?.anchor ||\n\t\t// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and\n\t\t// be removed from `Popover` from WordPress 6.3\n\t\t!! popoverProps?.anchorRef ||\n\t\t!! popoverProps?.getAnchorRect ||\n\t\t!! popoverProps?.anchorRect;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ className }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tcontainerRef,\n\t\t\t\tforwardedRef,\n\t\t\t\tsetFallbackPopoverAnchor,\n\t\t\t] ) }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex={ -1 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t// This value is used to ensure that the dropdowns\n\t\t\t\t\t// align with the editor header by default.\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t\tanchor={\n\t\t\t\t\t\t! popoverPropsHaveAnchor\n\t\t\t\t\t\t\t? fallbackPopoverAnchor\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps?.className,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\n/**\n * Renders a button that opens a floating content modal when clicked.\n *\n * ```jsx\n * import { Button, Dropdown } from '@wordpress/components';\n *\n * const MyDropdown = () => (\n *   <Dropdown\n *     className=\"my-container-class-name\"\n *     contentClassName=\"my-dropdown-content-classname\"\n *     popoverProps={ { placement: 'bottom-start' } }\n *     renderToggle={ ( { isOpen, onToggle } ) => (\n *       <Button\n *         variant=\"primary\"\n *         onClick={ onToggle }\n *         aria-expanded={ isOpen }\n *       >\n *         Toggle Dropdown!\n *       </Button>\n *     ) }\n *     renderContent={ () => <div>This is the content of the dropdown.</div> }\n *   />\n * );\n * ```\n */\nexport const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_deprecated","_context","_hooks","_popover","UnconnectedDropdown","props","forwardedRef","renderContent","renderToggle","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","popoverProps","onClose","onToggle","style","open","defaultOpen","position","variant","useContextSystem","undefined","deprecated","since","alternative","hint","fallbackPopoverAnchor","setFallbackPopoverAnchor","useState","containerRef","useRef","isOpen","setIsOpen","useControlledValue","defaultValue","value","onChange","closeIfFocusOutside","current","ownerDocument","dialog","activeElement","closest","contains","close","args","popoverPropsHaveAnchor","anchor","anchorRef","getAnchorRect","anchorRect","_react","createElement","ref","useMergeRefs","tabIndex","default","onFocusOutside","offset","clsx","Dropdown","exports","contextConnect","_default"],"sources":["@wordpress/components/src/dropdown/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { useControlledValue } from '../utils/hooks';\nimport Popover from '../popover';\nimport type { DropdownProps, DropdownInternalContext } from './types';\n\nconst UnconnectedDropdown = (\n\tprops: DropdownProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t\tstyle,\n\n\t\topen,\n\t\tdefaultOpen,\n\n\t\t// Deprecated props\n\t\tposition,\n\n\t\t// From context system\n\t\tvariant,\n\t} = useContextSystem< DropdownProps & DropdownInternalContext >(\n\t\tprops,\n\t\t'Dropdown'\n\t);\n\n\tif ( position !== undefined ) {\n\t\tdeprecated( '`position` prop in wp.components.Dropdown', {\n\t\t\tsince: '6.2',\n\t\t\talternative: '`popoverProps.placement` prop',\n\t\t\thint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.',\n\t\t} );\n\t}\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =\n\t\tuseState< HTMLDivElement | null >( null );\n\tconst containerRef = useRef< HTMLDivElement >();\n\n\tconst [ isOpen, setIsOpen ] = useControlledValue( {\n\t\tdefaultValue: defaultOpen,\n\t\tvalue: open,\n\t\tonChange: onToggle,\n\t} );\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tif ( ! containerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog =\n\t\t\townerDocument?.activeElement?.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tonClose?.();\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = {\n\t\tisOpen: !! isOpen,\n\t\tonToggle: () => setIsOpen( ! isOpen ),\n\t\tonClose: close,\n\t};\n\tconst popoverPropsHaveAnchor =\n\t\t!! popoverProps?.anchor ||\n\t\t// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and\n\t\t// be removed from `Popover` from WordPress 6.3\n\t\t!! popoverProps?.anchorRef ||\n\t\t!! popoverProps?.getAnchorRect ||\n\t\t!! popoverProps?.anchorRect;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ className }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tcontainerRef,\n\t\t\t\tforwardedRef,\n\t\t\t\tsetFallbackPopoverAnchor,\n\t\t\t] ) }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex={ -1 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t// This value is used to ensure that the dropdowns\n\t\t\t\t\t// align with the editor header by default.\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t\tanchor={\n\t\t\t\t\t\t! popoverPropsHaveAnchor\n\t\t\t\t\t\t\t? fallbackPopoverAnchor\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps?.className,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\n/**\n * Renders a button that opens a floating content modal when clicked.\n *\n * ```jsx\n * import { Button, Dropdown } from '@wordpress/components';\n *\n * const MyDropdown = () => (\n *   <Dropdown\n *     className=\"my-container-class-name\"\n *     contentClassName=\"my-dropdown-content-classname\"\n *     popoverProps={ { placement: 'bottom-start' } }\n *     renderToggle={ ( { isOpen, onToggle } ) => (\n *       <Button\n *         variant=\"primary\"\n *         onClick={ onToggle }\n *         aria-expanded={ isOpen }\n *       >\n *         Toggle Dropdown!\n *       </Button>\n *     ) }\n *     renderContent={ () => <div>This is the content of the dropdown.</div> }\n *   />\n * );\n * ```\n */\nexport const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}

package/build/dropdown-menu/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DropdownMenu = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@wordpress/icons");
 var _context = require("../context");
 var _button = _interopRequireDefault(require("../button"));
@@ -30,7 +30,7 @@ function mergeProps(defaultProps = {}, props = {}) {
     ...props
   };
   if (props.className && defaultProps.className) {
-    mergedProps.className = (0, _classnames.default)(props.className, defaultProps.className);
+    mergedProps.className = (0, _clsx.default)(props.className, defaultProps.className);
   }
   return mergedProps;
 }
@@ -98,7 +98,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
         ...restToggleProps
       } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
       const mergedToggleProps = mergeProps({
-        className: (0, _classnames.default)('components-dropdown-menu__toggle', {
+        className: (0, _clsx.default)('components-dropdown-menu__toggle', {
           'is-opened': isOpen
         })
       }, restToggleProps);
@@ -127,7 +127,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
     renderContent: props => {
       const mergedMenuProps = mergeProps({
         'aria-label': label,
-        className: (0, _classnames.default)('components-dropdown-menu__menu', {
+        className: (0, _clsx.default)('components-dropdown-menu__menu', {
           'no-icons': noIcons
         })
       }, menuProps);
@@ -143,7 +143,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
             control.onClick();
           }
         },
-        className: (0, _classnames.default)('components-dropdown-menu__menu-item', {
+        className: (0, _clsx.default)('components-dropdown-menu__menu-item', {
           'has-separator': indexOfSet > 0 && indexOfControl === 0,
           'is-active': control.isActive,
           'is-icon-only': !control.title

package/build/dropdown-menu/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_icons","_context","_button","_dropdown","_navigableContainer","mergeProps","defaultProps","props","mergedProps","className","classnames","isFunction","maybeFunc","UnconnectedDropdownMenu","dropdownMenuProps","children","controls","icon","menu","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","open","defaultOpen","onToggle","onToggleProp","variant","useContextSystem","length","controlSets","Array","isArray","mergedPopoverProps","_react","createElement","default","renderToggle","isOpen","_toggleProps$showTool","openOnArrowDown","event","code","preventDefault","as","Toggle","Button","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","renderContent","mergedMenuProps","NavigableMenu","role","flatMap","controlSet","indexOfSet","map","control","indexOfControl","key","join","stopPropagation","onClose","isActive","title","undefined","disabled","isDisabled","DropdownMenu","exports","contextConnectWithoutRef","_default"],"sources":["@wordpress/components/src/dropdown-menu/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport type {\n\tDropdownMenuProps,\n\tDropdownOption,\n\tDropdownMenuInternalContext,\n} from './types';\n\nfunction mergeProps<\n\tT extends { className?: string; [ key: string ]: unknown },\n>( defaultProps: Partial< T > = {}, props: T = {} as T ) {\n\tconst mergedProps: T = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\nfunction isFunction( maybeFunc: unknown ): maybeFunc is () => void {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\n\t\topen,\n\t\tdefaultOpen,\n\t\tonToggle: onToggleProp,\n\n\t\t// Context\n\t\tvariant,\n\t} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(\n\t\tdropdownMenuProps,\n\t\t'DropdownMenu'\n\t);\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: DropdownOption[][];\n\tif ( controls?.length ) {\n\t\t// @ts-expect-error The check below is needed because `DropdownMenus`\n\t\t// rendered by `ToolBarGroup` receive controls as a nested array.\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\t// This is not ideal, but at this point we know that `controls` is\n\t\t\t// not a nested array, even if TypeScript doesn't.\n\t\t\tcontrolSets = [ controls as DropdownOption[] ];\n\t\t}\n\t}\n\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t\tvariant,\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ className }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\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\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.MouseEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.KeyboardEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__menu',\n\t\t\t\t\t\t\t{ 'no-icons': noIcons }\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t\topen={ open }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\tonToggle={ onToggleProp }\n\t\t/>\n\t);\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(\n\tUnconnectedDropdownMenu,\n\t'DropdownMenu'\n);\n\nexport default DropdownMenu;\n"],"mappings":"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ACnCK,OAAO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACM,QAAQ,GAChBE,SACH;QACDb,IAAI,EACHK,OAAO,CAACL,IAAI,KAAK,kBAAkB,IACnCK,OAAO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACL,IAAI,GACZ,UACH;QACDc,QAAQ,EAAGT,OAAO,CAACU;MAAY,GAE7BV,OAAO,CAACO,KACH,CACP,CACH,CACc,CAAC;IAElB,CAAG;IACH5C,IAAI,EAAGA,IAAM;IACbC,WAAW,EAAGA,WAAa;IAC3BC,QAAQ,EAAGC;EAAc,CACzB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM6C,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,iCAAwB,EACnD/D,uBAAuB,EACvB,cACD,CAAC;AAAC,IAAAgE,QAAA,GAAAF,OAAA,CAAApC,OAAA,GAEamC,YAAY","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_context","_button","_dropdown","_navigableContainer","mergeProps","defaultProps","props","mergedProps","className","clsx","isFunction","maybeFunc","UnconnectedDropdownMenu","dropdownMenuProps","children","controls","icon","menu","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","open","defaultOpen","onToggle","onToggleProp","variant","useContextSystem","length","controlSets","Array","isArray","mergedPopoverProps","_react","createElement","default","renderToggle","isOpen","_toggleProps$showTool","openOnArrowDown","event","code","preventDefault","as","Toggle","Button","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","renderContent","mergedMenuProps","NavigableMenu","role","flatMap","controlSet","indexOfSet","map","control","indexOfControl","key","join","stopPropagation","onClose","isActive","title","undefined","disabled","isDisabled","DropdownMenu","exports","contextConnectWithoutRef","_default"],"sources":["@wordpress/components/src/dropdown-menu/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport type {\n\tDropdownMenuProps,\n\tDropdownOption,\n\tDropdownMenuInternalContext,\n} from './types';\n\nfunction mergeProps<\n\tT extends { className?: string; [ key: string ]: unknown },\n>( defaultProps: Partial< T > = {}, props: T = {} as T ) {\n\tconst mergedProps: T = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = clsx( props.className, defaultProps.className );\n\t}\n\n\treturn mergedProps;\n}\n\nfunction isFunction( maybeFunc: unknown ): maybeFunc is () => void {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\n\t\topen,\n\t\tdefaultOpen,\n\t\tonToggle: onToggleProp,\n\n\t\t// Context\n\t\tvariant,\n\t} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(\n\t\tdropdownMenuProps,\n\t\t'DropdownMenu'\n\t);\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: DropdownOption[][];\n\tif ( controls?.length ) {\n\t\t// @ts-expect-error The check below is needed because `DropdownMenus`\n\t\t// rendered by `ToolBarGroup` receive controls as a nested array.\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\t// This is not ideal, but at this point we know that `controls` is\n\t\t\t// not a nested array, even if TypeScript doesn't.\n\t\t\tcontrolSets = [ controls as DropdownOption[] ];\n\t\t}\n\t}\n\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t\tvariant,\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ className }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: clsx( 'components-dropdown-menu__toggle', {\n\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.MouseEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.KeyboardEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: clsx( 'components-dropdown-menu__menu', {\n\t\t\t\t\t\t\t'no-icons': noIcons,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t\topen={ open }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\tonToggle={ onToggleProp }\n\t\t/>\n\t);\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\nexport const DropdownMenu = contextConnectWithoutRef(\n\tUnconnectedDropdownMenu,\n\t'DropdownMenu'\n);\n\nexport default DropdownMenu;\n"],"mappings":"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AO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACM,QAAQ,GAChBE,SACH;QACDb,IAAI,EACHK,OAAO,CAACL,IAAI,KAAK,kBAAkB,IACnCK,OAAO,CAACL,IAAI,KAAK,eAAe,GAC7BK,OAAO,CAACL,IAAI,GACZ,UACH;QACDc,QAAQ,EAAGT,OAAO,CAACU;MAAY,GAE7BV,OAAO,CAACO,KACH,CACP,CACH,CACc,CAAC;IAElB,CAAG;IACH5C,IAAI,EAAGA,IAAM;IACbC,WAAW,EAAGA,WAAa;IAC3BC,QAAQ,EAAGC;EAAc,CACzB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM6C,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,iCAAwB,EACnD/D,uBAAuB,EACvB,cACD,CAAC;AAAC,IAAAgE,QAAA,GAAAF,OAAA,CAAApC,OAAA,GAEamC,YAAY","ignoreList":[]}

package/build/dropdown-menu/index.native.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _reactNative = require("react-native");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -31,7 +31,7 @@ function mergeProps(defaultProps = {}, props = {}) {
     ...props
   };
   if (props.className && defaultProps.className) {
-    mergedProps.className = (0, _classnames.default)(props.className, defaultProps.className);
+    mergedProps.className = (0, _clsx.default)(props.className, defaultProps.className);
   }
   return mergedProps;
 }
@@ -70,14 +70,14 @@ function DropdownMenu({
     className: 'components-dropdown-menu__popover'
   }, popoverProps);
   return (0, _react.createElement)(_dropdown.default, {
-    className: (0, _classnames.default)('components-dropdown-menu', className),
+    className: (0, _clsx.default)('components-dropdown-menu', className),
     popoverProps: mergedPopoverProps,
     renderToggle: ({
       isOpen,
       onToggle
     }) => {
       const mergedToggleProps = mergeProps({
-        className: (0, _classnames.default)('components-dropdown-menu__toggle', {
+        className: (0, _clsx.default)('components-dropdown-menu__toggle', {
           'is-opened': isOpen
         })
       }, toggleProps);

package/build/dropdown-menu/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_reactNative","_components","_compose","_icons","_button","_dropdown","mergeProps","defaultProps","props","mergedProps","className","classnames","isFunction","maybeFunc","DropdownMenu","children","controls","icon","menu","label","popoverProps","toggleProps","length","controlSets","Array","isArray","mergedPopoverProps","_react","createElement","default","renderToggle","isOpen","onToggle","mergedToggleProps","onClick","event","renderContent","onClose","BottomSheet","hideHeader","isVisible","PanelBody","title","style","paddingLeft","paddingRight","flatMap","controlSet","indexOfSet","map","control","indexOfControl","Cell","key","join","onPress","editable","leftAlign","isSelected","isActive","separatorType","Platform","OS","_default","exports","withPreferredColorScheme"],"sources":["@wordpress/components/src/dropdown-menu/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { Platform } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { BottomSheet, PanelBody } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\n\nfunction mergeProps( defaultProps = {}, props = {} ) {\n\tconst mergedProps = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction DropdownMenu( {\n\tchildren,\n\tclassName,\n\tcontrols,\n\ticon = menu,\n\tlabel,\n\tpopoverProps,\n\ttoggleProps,\n} ) {\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets;\n\tif ( controls?.length ) {\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\tcontrolSets = [ controlSets ];\n\t\t}\n\t}\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\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\ttoggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tonToggle( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( { isOpen, onClose, ...props } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<BottomSheet\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\tisVisible={ isOpen }\n\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t<PanelBody\n\t\t\t\t\t\t\ttitle={ label }\n\t\t\t\t\t\t\tstyle={ { paddingLeft: 0, paddingRight: 0 } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ controlSets?.flatMap(\n\t\t\t\t\t\t\t\t( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\t\t\tcontrolSet.map(\n\t\t\t\t\t\t\t\t\t\t( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ control.title }\n\t\t\t\t\t\t\t\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\teditable={ false }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected={ control.isActive }\n\t\t\t\t\t\t\t\t\t\t\t\tseparatorType={\n\t\t\t\t\t\t\t\t\t\t\t\t\tPlatform.OS === 'android'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'leftMargin'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t</BottomSheet>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( DropdownMenu );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_reactNative","_components","_compose","_icons","_button","_dropdown","mergeProps","defaultProps","props","mergedProps","className","clsx","isFunction","maybeFunc","DropdownMenu","children","controls","icon","menu","label","popoverProps","toggleProps","length","controlSets","Array","isArray","mergedPopoverProps","_react","createElement","default","renderToggle","isOpen","onToggle","mergedToggleProps","onClick","event","renderContent","onClose","BottomSheet","hideHeader","isVisible","PanelBody","title","style","paddingLeft","paddingRight","flatMap","controlSet","indexOfSet","map","control","indexOfControl","Cell","key","join","onPress","editable","leftAlign","isSelected","isActive","separatorType","Platform","OS","_default","exports","withPreferredColorScheme"],"sources":["@wordpress/components/src/dropdown-menu/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { Platform } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { BottomSheet, PanelBody } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\n\nfunction mergeProps( defaultProps = {}, props = {} ) {\n\tconst mergedProps = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = clsx( props.className, defaultProps.className );\n\t}\n\n\treturn mergedProps;\n}\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction DropdownMenu( {\n\tchildren,\n\tclassName,\n\tcontrols,\n\ticon = menu,\n\tlabel,\n\tpopoverProps,\n\ttoggleProps,\n} ) {\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets;\n\tif ( controls?.length ) {\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\tcontrolSets = [ controlSets ];\n\t\t}\n\t}\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: clsx( 'components-dropdown-menu__toggle', {\n\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t\ttoggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tonToggle( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( { isOpen, onClose, ...props } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<BottomSheet\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\tisVisible={ isOpen }\n\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t<PanelBody\n\t\t\t\t\t\t\ttitle={ label }\n\t\t\t\t\t\t\tstyle={ { paddingLeft: 0, paddingRight: 0 } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ controlSets?.flatMap(\n\t\t\t\t\t\t\t\t( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\t\t\tcontrolSet.map(\n\t\t\t\t\t\t\t\t\t\t( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ control.title }\n\t\t\t\t\t\t\t\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\teditable={ false }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected={ control.isActive }\n\t\t\t\t\t\t\t\t\t\t\t\tseparatorType={\n\t\t\t\t\t\t\t\t\t\t\t\t\tPlatform.OS === 'android'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'leftMargin'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t</BottomSheet>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( DropdownMenu );\n"],"mappings":"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","ignoreList":[]}

package/build/external-link/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ExternalLink = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 /**
@@ -30,7 +30,7 @@ function UnforwardedExternalLink(props, ref) {
     ...additionalProps
   } = props;
   const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');
-  const classes = (0, _classnames.default)('components-external-link', className);
+  const classes = (0, _clsx.default)('components-external-link', className);
   /* Anchor links are perceived as external links.
   This constant helps check for on page anchor links,
   to prevent them from being opened in the editor. */

package/build/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","classnames","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","_react","createElement","target","__","ExternalLink","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t&#8599;\n\t\t\t</span>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASG,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,0BAA0B,EAAEV,SAAU,CAAC;EACnE;AACD;AACA;EACC,MAAMW,gBAAgB,GAAG,CAAC,CAAEb,IAAI,EAAEc,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKnB,KAAK,CAACoB,OAAO,EAAG;MACpBpB,KAAK,CAACoB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED,OACC;IACA,IAAAG,MAAA,CAAAC,aAAA;MAAA,GACMhB,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbkB,OAAO,EAAGH,cAAgB;MAC1BM,MAAM,EAAC,QAAQ;MACflB,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA;IAAK,GAEX,IAAAoB,MAAA,CAAAC,aAAA;MAAMlB,SAAS,EAAC;IAAoC,GACjDD,QACG,CAAC,EACP,IAAAkB,MAAA,CAAAC,aAAA;MACClB,SAAS,EAAC,gCAAgC;MAC1C,cACC;MACA,IAAAoB,QAAE,EAAE,sBAAuB;IAC3B,GACD,QAEK,CACJ;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,mBAAU,EAAE5B,uBAAwB,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEnDJ,YAAY","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","clsx","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","_react","createElement","target","__","ExternalLink","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/external-link/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = clsx( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<span className=\"components-external-link__contents\">\n\t\t\t\t{ children }\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t\taria-label={\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t&#8599;\n\t\t\t</span>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASG,uBAAuBA,CAC/BC,KAGC,EACDC,GAAsC,EACrC;EACD,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGN,KAAK;EACzE,MAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAG,CACT,CACC,GAAGH,GAAG,CAACI,KAAK,CAAE,GAAI,CAAC,EACnB,UAAU,EACV,YAAY,EACZ,UAAU,CACV,CAACC,MAAM,CAAEC,OAAQ,CACnB,CAAC,CACD,CAACC,IAAI,CAAE,GAAI,CAAC;EACb,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,0BAA0B,EAAEV,SAAU,CAAC;EAC7D;AACD;AACA;EACC,MAAMW,gBAAgB,GAAG,CAAC,CAAEb,IAAI,EAAEc,UAAU,CAAE,GAAI,CAAC;EAEnD,MAAMC,cAAc,GACnBC,KAAwD,IACpD;IACJ,IAAKH,gBAAgB,EAAG;MACvBG,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB;IAEA,IAAKnB,KAAK,CAACoB,OAAO,EAAG;MACpBpB,KAAK,CAACoB,OAAO,CAAEF,KAAM,CAAC;IACvB;EACD,CAAC;EAED,OACC;IACA,IAAAG,MAAA,CAAAC,aAAA;MAAA,GACMhB,eAAe;MACpBF,SAAS,EAAGS,OAAS;MACrBX,IAAI,EAAGA,IAAM;MACbkB,OAAO,EAAGH,cAAgB;MAC1BM,MAAM,EAAC,QAAQ;MACflB,GAAG,EAAGE,YAAc;MACpBN,GAAG,EAAGA;IAAK,GAEX,IAAAoB,MAAA,CAAAC,aAAA;MAAMlB,SAAS,EAAC;IAAoC,GACjDD,QACG,CAAC,EACP,IAAAkB,MAAA,CAAAC,aAAA;MACClB,SAAS,EAAC,gCAAgC;MAC1C,cACC;MACA,IAAAoB,QAAE,EAAE,sBAAuB;IAC3B,GACD,QAEK,CACJ;IACH;EAAA;AAEF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,mBAAU,EAAE5B,uBAAwB,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEnDJ,YAAY","ignoreList":[]}

package/build/focal-point-picker/focal-point.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = FocalPoint;
 var _react = require("react");
 var _focalPointStyle = require("./styles/focal-point-style");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 /**
  * Internal dependencies
  */
@@ -21,7 +21,7 @@ function FocalPoint({
   top = '50%',
   ...props
 }) {
-  const classes = (0, _classnames.default)('components-focal-point-picker__icon_container');
+  const classes = (0, _clsx.default)('components-focal-point-picker__icon_container');
   const style = {
     left,
     top

package/build/focal-point-picker/focal-point.js.map

@@ -1 +1 @@
-{"version":3,"names":["_focalPointStyle","require","_classnames","_interopRequireDefault","FocalPoint","left","top","props","classes","classnames","style","_react","createElement","PointerCircle","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,gBAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASG,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,+CACD,CAAC;EAED,MAAMC,KAAK,GAAG;IAAEL,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAO,IAAAK,MAAA,CAAAC,aAAA,EAACZ,gBAAA,CAAAa,aAAa;IAAA,GAAMN,KAAK;IAAGO,SAAS,EAAGN,OAAS;IAACE,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E","ignoreList":[]}
+{"version":3,"names":["_focalPointStyle","require","_clsx","_interopRequireDefault","FocalPoint","left","top","props","classes","clsx","style","_react","createElement","PointerCircle","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = clsx( 'components-focal-point-picker__icon_container' );\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,gBAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASG,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,+CAAgD,CAAC;EAEvE,MAAMC,KAAK,GAAG;IAAEL,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAO,IAAAK,MAAA,CAAAC,aAAA,EAACZ,gBAAA,CAAAa,aAAa;IAAA,GAAMN,KAAK;IAAGO,SAAS,EAAGN,OAAS;IAACE,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E","ignoreList":[]}

package/build/focal-point-picker/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FocalPointPicker = FocalPointPicker;
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -232,7 +232,7 @@ function FocalPointPicker({
     left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
     top: y !== undefined ? y * bounds.height : 0.5 * bounds.height
   };
-  const classes = (0, _classnames.default)('components-focal-point-picker-control', className);
+  const classes = (0, _clsx.default)('components-focal-point-picker-control', className);
   const instanceId = (0, _compose.useInstanceId)(FocalPointPicker);
   const id = `inspector-focal-point-picker-control-${instanceId}`;
   (0, _hooks.useUpdateEffect)(() => {

package/build/focal-point-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","classnames","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","_react","createElement","default","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","clsx","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","_react","createElement","default","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = clsx( 'components-focal-point-picker-control', className );\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/form-toggle/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormToggle = FormToggle;
 exports.noop = exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 /**
  * External dependencies
@@ -52,7 +52,7 @@ function FormToggle(props, ref) {
     onChange = noop,
     ...additionalProps
   } = props;
-  const wrapperClasses = (0, _classnames.default)('components-form-toggle', className, {
+  const wrapperClasses = (0, _clsx.default)('components-form-toggle', className, {
     'is-checked': checked,
     'is-disabled': disabled
   });

package/build/form-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","noop","exports","FormToggle","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","classnames","_react","createElement","type","_default","default","forwardRef"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function FormToggle(\n\tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = classnames( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport default forwardRef( FormToggle );\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBAC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AAmBO,SAASE,UAAUA,CACzBC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGT,IAAI;IACf,GAAGU;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAG,IAAAC,mBAAU,EAAE,wBAAwB,EAAEP,SAAS,EAAE;IACvE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,OACC,IAAAK,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAGM;EAAgB,GACjC,IAAAE,MAAA,CAAAC,aAAA;IACCT,SAAS,EAAC,+BAA+B;IACzCE,EAAE,EAAGA,EAAI;IACTQ,IAAI,EAAC,UAAU;IACfT,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGA,QAAU;IACrBD,QAAQ,EAAGA,QAAU;IAAA,GAChBE,eAAe;IACpBN,GAAG,EAAGA;EAAK,CACX,CAAC,EACF,IAAAS,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAC;EAA+B,CAAO,CAAC,EACvD,IAAAQ,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAC;EAA+B,CAAO,CACjD,CAAC;AAET;AAAC,IAAAW,QAAA,GAAAf,OAAA,CAAAgB,OAAA,GAEc,IAAAC,mBAAU,EAAEhB,UAAW,CAAC","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","noop","exports","FormToggle","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","clsx","_react","createElement","type","_default","default","forwardRef"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function FormToggle(\n\tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = clsx( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport default forwardRef( FormToggle );\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBAC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AAmBO,SAASE,UAAUA,CACzBC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGT,IAAI;IACf,GAAGU;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAG,IAAAC,aAAI,EAAE,wBAAwB,EAAEP,SAAS,EAAE;IACjE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,OACC,IAAAK,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAGM;EAAgB,GACjC,IAAAE,MAAA,CAAAC,aAAA;IACCT,SAAS,EAAC,+BAA+B;IACzCE,EAAE,EAAGA,EAAI;IACTQ,IAAI,EAAC,UAAU;IACfT,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGA,QAAU;IACrBD,QAAQ,EAAGA,QAAU;IAAA,GAChBE,eAAe;IACpBN,GAAG,EAAGA;EAAK,CACX,CAAC,EACF,IAAAS,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAC;EAA+B,CAAO,CAAC,EACvD,IAAAQ,MAAA,CAAAC,aAAA;IAAMT,SAAS,EAAC;EAA+B,CAAO,CACjD,CAAC;AAET;AAAC,IAAAW,QAAA,GAAAf,OAAA,CAAAgB,OAAA,GAEc,IAAAC,mBAAU,EAAEhB,UAAW,CAAC","ignoreList":[]}

package/build/form-token-field/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormTokenField = FormTokenField;
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
@@ -499,7 +499,7 @@ function FormTokenField(props) {
       ref: input
     });
   }
-  const classes = (0, _classnames.default)(className, 'components-form-token-field__input-container', {
+  const classes = (0, _clsx.default)(className, 'components-form-token-field__input-container', {
     'is-active': isActive,
     'is-disabled': disabled
   });
@@ -522,7 +522,7 @@ function FormTokenField(props) {
   /* eslint-disable jsx-a11y/no-static-element-interactions */
   return (0, _react.createElement)("div", {
     ...tokenFieldProps
-  }, (0, _react.createElement)(_baseControlStyles.StyledLabel, {
+  }, label && (0, _react.createElement)(_baseControlStyles.StyledLabel, {
     htmlFor: `components-form-token-input-${instanceId}`,
     className: "components-form-token-field__label"
   }, label), (0, _react.createElement)("div", {