@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

package/build-module/clipboard-button/index.mjs

@@ -18,7 +18,7 @@ function ClipboardButton({
     since: "5.8",
     alternative: "wp.compose.useCopyToClipboard"
   });
-  const timeoutIdRef = useRef();
+  const timeoutIdRef = useRef(void 0);
   const ref = useCopyToClipboard(text, () => {
     onCopy();
     if (timeoutIdRef.current) {

package/build-module/clipboard-button/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/clipboard-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef();\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO;AAC5B,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef(undefined);\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AAKvB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,aAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,MAAM,mBAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,qBAAK,QAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
   "names": []
 }

package/build-module/color-picker/color-copy-button.mjs

@@ -12,7 +12,7 @@ var ColorCopyButton = (props) => {
     colorType
   } = props;
   const [copiedColor, setCopiedColor] = useState(null);
-  const copyTimerRef = useRef();
+  const copyTimerRef = useRef(void 0);
   const copyRef = useCopyToClipboard(() => {
     switch (colorType) {
       case "hsl": {

package/build-module/color-picker/color-copy-button.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-copy-button.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef();\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
-  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AAKnB,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe,OAAO;AAC5B,QAAM,UAAU,mBAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,YAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,WAAW,GAAG,SAAS,IAAI,GAAG,MAAM;AAClD,SAAoB,qBAAK,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,QAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef(undefined);\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
+  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AAKnB,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM,UAAU,mBAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,YAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,WAAW,GAAG,SAAS,IAAI,GAAG,MAAM;AAClD,SAAoB,qBAAK,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,QAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": []
 }

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

@@ -23,8 +23,8 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
   } = useContextSystem(props, "ConfirmDialog");
   const cx = useCx();
   const wrapperClassName = cx(styles.wrapper);
-  const cancelButtonRef = useRef();
-  const confirmButtonRef = useRef();
+  const cancelButtonRef = useRef(null);
+  const confirmButtonRef = useRef(null);
   const [isOpen, setIsOpen] = useState();
   const [shouldSelfClose, setShouldSelfClose] = useState();
   useEffect(() => {

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

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

package/build-module/context/context-system-provider.mjs.map

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

package/build-module/custom-gradient-picker/gradient-bar/control-points.mjs

@@ -76,7 +76,7 @@ function ControlPoints({
   onStopControlPointChange,
   __experimentalIsRenderedInSidebar
 }) {
-  const controlPointMoveStateRef = useRef();
+  const controlPointMoveStateRef = useRef(void 0);
   const onMouseMove = (event) => {
     if (controlPointMoveStateRef.current === void 0 || gradientPickerDomRef.current === null) {
       return;
@@ -100,7 +100,7 @@ function ControlPoints({
       controlPointMoveStateRef.current.listenersActivated = false;
     }
   };
-  const cleanEventListenersRef = useRef();
+  const cleanEventListenersRef = useRef(void 0);
   cleanEventListenersRef.current = cleanEventListeners;
   useEffect(() => {
     return () => {

package/build-module/custom-gradient-picker/gradient-bar/control-points.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/control-points.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false\n  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef();\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef();\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false\n  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef(undefined);\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef(undefined);\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -157,7 +157,7 @@ function Day({
   onClick,
   onKeyDown
 }) {
-  const ref = useRef();
+  const ref = useRef(null);
   useEffect(() => {
     if (ref.current && isFocusable && isFocusAllowed) {
       ref.current.focus();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/date-time/date/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { isSameDay, subMonths, addMonths, isEqual, addDays, subDays, subWeeks, addWeeks, isSameMonth } from 'date-fns';\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, date as formatDate, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport { Wrapper, Navigator, ViewPreviousMonthButton, ViewNextMonthButton, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';\nimport { inputToDate, setInConfiguredTimezone, startOfDayInConfiguredTimezone } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function DatePicker({\n  currentDate,\n  onChange,\n  events = [],\n  isInvalidDate,\n  onMonthPreviewed,\n  startOfWeek: weekStartsOn = 0\n}) {\n  const date = inputToDate(currentDate ?? new Date());\n  const {\n    calendar,\n    viewing,\n    setSelected,\n    setViewing,\n    isSelected,\n    viewPreviousMonth,\n    viewNextMonth\n  } = useLilius({\n    selected: [startOfDayInConfiguredTimezone(date)],\n    viewing: startOfDayInConfiguredTimezone(date),\n    weekStartsOn\n  });\n\n  // Used to implement a roving tab index. Tracks the day that receives focus\n  // when the user tabs into the calendar.\n  const [focusable, setFocusable] = useState(startOfDayInConfiguredTimezone(date));\n\n  // Allows us to only programmatically focus() a day when focus was already\n  // within the calendar. This stops us stealing focus from e.g. a TimePicker\n  // input.\n  const [isFocusWithinCalendar, setIsFocusWithinCalendar] = useState(false);\n\n  // Update internal state when currentDate prop changes.\n  const [prevCurrentDate, setPrevCurrentDate] = useState(currentDate);\n  if (currentDate !== prevCurrentDate) {\n    setPrevCurrentDate(currentDate);\n    setSelected([startOfDayInConfiguredTimezone(date)]);\n    setViewing(startOfDayInConfiguredTimezone(date));\n    setFocusable(startOfDayInConfiguredTimezone(date));\n  }\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__date\",\n    role: \"application\",\n    \"aria-label\": __('Calendar'),\n    children: [/*#__PURE__*/_jsxs(Navigator, {\n      children: [/*#__PURE__*/_jsx(ViewPreviousMonthButton, {\n        icon: isRTL() ? arrowRight : arrowLeft,\n        variant: \"tertiary\",\n        \"aria-label\": __('View previous month'),\n        onClick: () => {\n          viewPreviousMonth();\n          setFocusable(subMonths(focusable, 1));\n          const prevMonth = subMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, prevMonth, -prevMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      }), /*#__PURE__*/_jsxs(NavigatorHeading, {\n        level: 3,\n        children: [/*#__PURE__*/_jsx(\"strong\", {\n          children: dateI18n('F', viewing, -viewing.getTimezoneOffset())\n        }), ' ', dateI18n('Y', viewing, -viewing.getTimezoneOffset())]\n      }), /*#__PURE__*/_jsx(ViewNextMonthButton, {\n        icon: isRTL() ? arrowLeft : arrowRight,\n        variant: \"tertiary\",\n        \"aria-label\": __('View next month'),\n        onClick: () => {\n          viewNextMonth();\n          setFocusable(addMonths(focusable, 1));\n          const nextMonth = addMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextMonth, -nextMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      })]\n    }), /*#__PURE__*/_jsxs(Calendar, {\n      onFocus: () => setIsFocusWithinCalendar(true),\n      onBlur: () => setIsFocusWithinCalendar(false),\n      children: [calendar[0][0].map(day => /*#__PURE__*/_jsx(DayOfWeek, {\n        children: dateI18n('D', day, -day.getTimezoneOffset())\n      }, day.toString())), calendar[0].map(week => week.map((day, index) => {\n        if (!isSameMonth(day, viewing)) {\n          return null;\n        }\n        return /*#__PURE__*/_jsx(Day, {\n          day: day,\n          column: index + 1,\n          isSelected: isSelected(day),\n          isFocusable: isEqual(day, focusable),\n          isFocusAllowed: isFocusWithinCalendar,\n          isToday: isSameDay(day, startOfDayInConfiguredTimezone(new Date())),\n          isInvalid: isInvalidDate ? isInvalidDate(day) : false,\n          numEvents: events.filter(event => isSameDay(event.date, day)).length,\n          onClick: () => {\n            setSelected([day]);\n            setFocusable(day);\n            const newDate = setInConfiguredTimezone(date, {\n              year: day.getFullYear(),\n              month: day.getMonth(),\n              date: day.getDate()\n            });\n            onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n          },\n          onKeyDown: event => {\n            let nextFocusable;\n            if (event.key === 'ArrowLeft') {\n              nextFocusable = addDays(day, isRTL() ? 1 : -1);\n            }\n            if (event.key === 'ArrowRight') {\n              nextFocusable = addDays(day, isRTL() ? -1 : 1);\n            }\n            if (event.key === 'ArrowUp') {\n              nextFocusable = subWeeks(day, 1);\n            }\n            if (event.key === 'ArrowDown') {\n              nextFocusable = addWeeks(day, 1);\n            }\n            if (event.key === 'PageUp') {\n              nextFocusable = subMonths(day, 1);\n            }\n            if (event.key === 'PageDown') {\n              nextFocusable = addMonths(day, 1);\n            }\n            if (event.key === 'Home') {\n              const dayOfWeek = day.getDay();\n              const daysToSubtract = (dayOfWeek - weekStartsOn + 7) % 7;\n              nextFocusable = subDays(day, daysToSubtract);\n            }\n            if (event.key === 'End') {\n              const dayOfWeek = day.getDay();\n              const daysToAdd = (weekStartsOn + 6 - dayOfWeek) % 7;\n              nextFocusable = addDays(day, daysToAdd);\n            }\n            if (nextFocusable) {\n              event.preventDefault();\n              setFocusable(nextFocusable);\n              if (!isSameMonth(nextFocusable, viewing)) {\n                setViewing(nextFocusable);\n                onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextFocusable, -nextFocusable.getTimezoneOffset()));\n              }\n            }\n          }\n        }, day.toString());\n      }))]\n    })]\n  });\n}\nfunction Day({\n  day,\n  column,\n  isSelected,\n  isFocusable,\n  isFocusAllowed,\n  isToday,\n  isInvalid,\n  numEvents,\n  onClick,\n  onKeyDown\n}) {\n  const ref = useRef();\n\n  // Focus the day when it becomes focusable, e.g. because an arrow key is\n  // pressed. Only do this if focus is allowed - this stops us stealing focus\n  // from e.g. a TimePicker input.\n  useEffect(() => {\n    if (ref.current && isFocusable && isFocusAllowed) {\n      ref.current.focus();\n    }\n    // isFocusAllowed is not a dep as there is no point calling focus() on\n    // an already focused element.\n  }, [isFocusable]);\n  return /*#__PURE__*/_jsx(DayButton, {\n    __next40pxDefaultSize: true,\n    ref: ref,\n    className: \"components-datetime__date__day\" // Unused, for backwards compatibility.\n    ,\n    disabled: isInvalid,\n    tabIndex: isFocusable ? 0 : -1,\n    \"aria-label\": getDayLabel(day, isSelected, isToday, numEvents),\n    column: column,\n    isSelected: isSelected,\n    isToday: isToday,\n    hasEvents: numEvents > 0,\n    onClick: onClick,\n    onKeyDown: onKeyDown,\n    children: dateI18n('j', day, -day.getTimezoneOffset())\n  });\n}\nfunction getDayLabel(date, isSelected, isToday, numEvents) {\n  const {\n    formats\n  } = getSettings();\n  const localizedDate = dateI18n(formats.date, date, -date.getTimezoneOffset());\n  const parts = [localizedDate];\n  if (isSelected) {\n    parts.push(__('Selected'));\n  }\n  if (isToday) {\n    parts.push(__('Today'));\n  }\n  if (numEvents > 0) {\n    parts.push(sprintf(\n    // translators: %d: Number of events on the calendar date.\n    _n('There is %d event', 'There are %d events', numEvents), numEvents));\n  }\n  return parts.join('. ');\n}\nexport default DatePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { isSameDay, subMonths, addMonths, isEqual, addDays, subDays, subWeeks, addWeeks, isSameMonth } from 'date-fns';\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { dateI18n, date as formatDate, getSettings } from '@wordpress/date';\nimport { useState, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLilius } from './use-lilius';\nimport { Wrapper, Navigator, ViewPreviousMonthButton, ViewNextMonthButton, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';\nimport { inputToDate, setInConfiguredTimezone, startOfDayInConfiguredTimezone } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function DatePicker({\n  currentDate,\n  onChange,\n  events = [],\n  isInvalidDate,\n  onMonthPreviewed,\n  startOfWeek: weekStartsOn = 0\n}) {\n  const date = inputToDate(currentDate ?? new Date());\n  const {\n    calendar,\n    viewing,\n    setSelected,\n    setViewing,\n    isSelected,\n    viewPreviousMonth,\n    viewNextMonth\n  } = useLilius({\n    selected: [startOfDayInConfiguredTimezone(date)],\n    viewing: startOfDayInConfiguredTimezone(date),\n    weekStartsOn\n  });\n\n  // Used to implement a roving tab index. Tracks the day that receives focus\n  // when the user tabs into the calendar.\n  const [focusable, setFocusable] = useState(startOfDayInConfiguredTimezone(date));\n\n  // Allows us to only programmatically focus() a day when focus was already\n  // within the calendar. This stops us stealing focus from e.g. a TimePicker\n  // input.\n  const [isFocusWithinCalendar, setIsFocusWithinCalendar] = useState(false);\n\n  // Update internal state when currentDate prop changes.\n  const [prevCurrentDate, setPrevCurrentDate] = useState(currentDate);\n  if (currentDate !== prevCurrentDate) {\n    setPrevCurrentDate(currentDate);\n    setSelected([startOfDayInConfiguredTimezone(date)]);\n    setViewing(startOfDayInConfiguredTimezone(date));\n    setFocusable(startOfDayInConfiguredTimezone(date));\n  }\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__date\",\n    role: \"application\",\n    \"aria-label\": __('Calendar'),\n    children: [/*#__PURE__*/_jsxs(Navigator, {\n      children: [/*#__PURE__*/_jsx(ViewPreviousMonthButton, {\n        icon: isRTL() ? arrowRight : arrowLeft,\n        variant: \"tertiary\",\n        \"aria-label\": __('View previous month'),\n        onClick: () => {\n          viewPreviousMonth();\n          setFocusable(subMonths(focusable, 1));\n          const prevMonth = subMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, prevMonth, -prevMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      }), /*#__PURE__*/_jsxs(NavigatorHeading, {\n        level: 3,\n        children: [/*#__PURE__*/_jsx(\"strong\", {\n          children: dateI18n('F', viewing, -viewing.getTimezoneOffset())\n        }), ' ', dateI18n('Y', viewing, -viewing.getTimezoneOffset())]\n      }), /*#__PURE__*/_jsx(ViewNextMonthButton, {\n        icon: isRTL() ? arrowLeft : arrowRight,\n        variant: \"tertiary\",\n        \"aria-label\": __('View next month'),\n        onClick: () => {\n          viewNextMonth();\n          setFocusable(addMonths(focusable, 1));\n          const nextMonth = addMonths(viewing, 1);\n          onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextMonth, -nextMonth.getTimezoneOffset()));\n        },\n        size: \"compact\"\n      })]\n    }), /*#__PURE__*/_jsxs(Calendar, {\n      onFocus: () => setIsFocusWithinCalendar(true),\n      onBlur: () => setIsFocusWithinCalendar(false),\n      children: [calendar[0][0].map(day => /*#__PURE__*/_jsx(DayOfWeek, {\n        children: dateI18n('D', day, -day.getTimezoneOffset())\n      }, day.toString())), calendar[0].map(week => week.map((day, index) => {\n        if (!isSameMonth(day, viewing)) {\n          return null;\n        }\n        return /*#__PURE__*/_jsx(Day, {\n          day: day,\n          column: index + 1,\n          isSelected: isSelected(day),\n          isFocusable: isEqual(day, focusable),\n          isFocusAllowed: isFocusWithinCalendar,\n          isToday: isSameDay(day, startOfDayInConfiguredTimezone(new Date())),\n          isInvalid: isInvalidDate ? isInvalidDate(day) : false,\n          numEvents: events.filter(event => isSameDay(event.date, day)).length,\n          onClick: () => {\n            setSelected([day]);\n            setFocusable(day);\n            const newDate = setInConfiguredTimezone(date, {\n              year: day.getFullYear(),\n              month: day.getMonth(),\n              date: day.getDate()\n            });\n            onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n          },\n          onKeyDown: event => {\n            let nextFocusable;\n            if (event.key === 'ArrowLeft') {\n              nextFocusable = addDays(day, isRTL() ? 1 : -1);\n            }\n            if (event.key === 'ArrowRight') {\n              nextFocusable = addDays(day, isRTL() ? -1 : 1);\n            }\n            if (event.key === 'ArrowUp') {\n              nextFocusable = subWeeks(day, 1);\n            }\n            if (event.key === 'ArrowDown') {\n              nextFocusable = addWeeks(day, 1);\n            }\n            if (event.key === 'PageUp') {\n              nextFocusable = subMonths(day, 1);\n            }\n            if (event.key === 'PageDown') {\n              nextFocusable = addMonths(day, 1);\n            }\n            if (event.key === 'Home') {\n              const dayOfWeek = day.getDay();\n              const daysToSubtract = (dayOfWeek - weekStartsOn + 7) % 7;\n              nextFocusable = subDays(day, daysToSubtract);\n            }\n            if (event.key === 'End') {\n              const dayOfWeek = day.getDay();\n              const daysToAdd = (weekStartsOn + 6 - dayOfWeek) % 7;\n              nextFocusable = addDays(day, daysToAdd);\n            }\n            if (nextFocusable) {\n              event.preventDefault();\n              setFocusable(nextFocusable);\n              if (!isSameMonth(nextFocusable, viewing)) {\n                setViewing(nextFocusable);\n                onMonthPreviewed?.(dateI18n(TIMEZONELESS_FORMAT, nextFocusable, -nextFocusable.getTimezoneOffset()));\n              }\n            }\n          }\n        }, day.toString());\n      }))]\n    })]\n  });\n}\nfunction Day({\n  day,\n  column,\n  isSelected,\n  isFocusable,\n  isFocusAllowed,\n  isToday,\n  isInvalid,\n  numEvents,\n  onClick,\n  onKeyDown\n}) {\n  const ref = useRef(null);\n\n  // Focus the day when it becomes focusable, e.g. because an arrow key is\n  // pressed. Only do this if focus is allowed - this stops us stealing focus\n  // from e.g. a TimePicker input.\n  useEffect(() => {\n    if (ref.current && isFocusable && isFocusAllowed) {\n      ref.current.focus();\n    }\n    // isFocusAllowed is not a dep as there is no point calling focus() on\n    // an already focused element.\n  }, [isFocusable]);\n  return /*#__PURE__*/_jsx(DayButton, {\n    __next40pxDefaultSize: true,\n    ref: ref,\n    className: \"components-datetime__date__day\" // Unused, for backwards compatibility.\n    ,\n    disabled: isInvalid,\n    tabIndex: isFocusable ? 0 : -1,\n    \"aria-label\": getDayLabel(day, isSelected, isToday, numEvents),\n    column: column,\n    isSelected: isSelected,\n    isToday: isToday,\n    hasEvents: numEvents > 0,\n    onClick: onClick,\n    onKeyDown: onKeyDown,\n    children: dateI18n('j', day, -day.getTimezoneOffset())\n  });\n}\nfunction getDayLabel(date, isSelected, isToday, numEvents) {\n  const {\n    formats\n  } = getSettings();\n  const localizedDate = dateI18n(formats.date, date, -date.getTimezoneOffset());\n  const parts = [localizedDate];\n  if (isSelected) {\n    parts.push(__('Selected'));\n  }\n  if (isToday) {\n    parts.push(__('Today'));\n  }\n  if (numEvents > 0) {\n    parts.push(sprintf(\n    // translators: %d: Number of events on the calendar date.\n    _n('There is %d event', 'There are %d events', numEvents), numEvents));\n  }\n  return parts.join('. ');\n}\nexport default DatePicker;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -10,7 +10,7 @@ import TimeZone from "./timezone.mjs";
 import { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from "./styles.mjs";
 import { HStack } from "../../h-stack/index.mjs";
 import { Spacer } from "../../spacer/index.mjs";
-import { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone } from "../utils.mjs";
+import { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone, getDaysInMonth } from "../utils.mjs";
 import { TIMEZONELESS_FORMAT } from "../constants.mjs";
 import { TimeInput } from "./time-input/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -114,7 +114,7 @@ function TimePicker({
     value: day,
     step: 1,
     min: 1,
-    max: 31,
+    max: getDaysInMonth(Number(year), Number(month) - 1),
     required: true,
     spinControls: "none",
     isPressEnterToChange: true,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/date-time/time/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { startOfMinute } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { date as formatDate } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from './time-input';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker({\n  is12Hour,\n  currentTime,\n  onChange,\n  dateOrder: dateOrderProp,\n  hideLabelFromVision = false\n}) {\n  const [date, setDate] = useState(() =>\n  // Truncate the date at the minutes, see: #15495.\n  startOfMinute(inputToDate(currentTime ?? new Date())));\n\n  // Reset the state when currentTime changed.\n  // TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n  useEffect(() => {\n    setDate(startOfMinute(inputToDate(currentTime ?? new Date())));\n  }, [currentTime]);\n  const monthOptions = [{\n    value: '01',\n    label: __('January')\n  }, {\n    value: '02',\n    label: __('February')\n  }, {\n    value: '03',\n    label: __('March')\n  }, {\n    value: '04',\n    label: __('April')\n  }, {\n    value: '05',\n    label: __('May')\n  }, {\n    value: '06',\n    label: __('June')\n  }, {\n    value: '07',\n    label: __('July')\n  }, {\n    value: '08',\n    label: __('August')\n  }, {\n    value: '09',\n    label: __('September')\n  }, {\n    value: '10',\n    label: __('October')\n  }, {\n    value: '11',\n    label: __('November')\n  }, {\n    value: '12',\n    label: __('December')\n  }];\n  const {\n    day,\n    month,\n    year,\n    minutes,\n    hours\n  } = useMemo(() => ({\n    day: formatDate('d', date),\n    month: formatDate('m', date),\n    year: formatDate('Y', date),\n    minutes: formatDate('i', date),\n    hours: formatDate('H', date)\n  }), [date]);\n  const buildNumberControlChangeCallback = method => {\n    const callback = (value, {\n      event\n    }) => {\n      if (!validateInputElementTarget(event)) {\n        return;\n      }\n\n      // We can safely assume value is a number if target is valid.\n      const numberValue = Number(value);\n\n      // Internal date is UTC-normalized, but the field should be updated\n      // as if in the configured timezone.\n      const newDate = setInConfiguredTimezone(date, {\n        [method]: numberValue\n      });\n      setDate(newDate);\n      onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n    };\n    return callback;\n  };\n  const onTimeInputChangeCallback = ({\n    hours: newHours,\n    minutes: newMinutes\n  }) => {\n    // Internal date is UTC-normalized, but the field should be updated\n    // as if in the configured timezone.\n    const newDate = setInConfiguredTimezone(date, {\n      hours: newHours,\n      minutes: newMinutes\n    });\n    setDate(newDate);\n    onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n  };\n  const dayField = /*#__PURE__*/_jsx(DayInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n    ,\n    label: __('Day'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: day,\n    step: 1,\n    min: 1,\n    max: 31,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('date')\n  }, \"day\");\n  const monthField = /*#__PURE__*/_jsx(MonthSelectWrapper, {\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      className: \"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n      ,\n      label: __('Month'),\n      hideLabelFromVision: true,\n      __next40pxDefaultSize: true,\n      value: month,\n      options: monthOptions,\n      onChange: value => {\n        // Internal date is UTC-normalized, but the field should be updated\n        // as if in the configured timezone.\n        const newDate = setInConfiguredTimezone(date, {\n          month: Number(value) - 1\n        });\n        setDate(newDate);\n        onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n      }\n    })\n  }, \"month\");\n  const yearField = /*#__PURE__*/_jsx(YearInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n    ,\n    label: __('Year'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: year,\n    step: 1,\n    min: 1,\n    max: 9999,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('year'),\n    __unstableStateReducer: buildPadInputStateReducer(4)\n  }, \"year\");\n  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;\n  const fields = dateOrder.split('').map(field => {\n    switch (field) {\n      case 'd':\n        return dayField;\n      case 'm':\n        return monthField;\n      case 'y':\n        return yearField;\n      default:\n        return null;\n    }\n  });\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__time\" // Unused, for backwards compatibility.\n    ,\n    children: [/*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Time')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Time')\n      }), /*#__PURE__*/_jsxs(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: [/*#__PURE__*/_jsx(TimeInput, {\n          value: {\n            hours: Number(hours),\n            minutes: Number(minutes)\n          },\n          is12Hour: is12Hour,\n          onChange: onTimeInputChangeCallback\n        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(TimeZone, {})]\n      })]\n    }), /*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Date')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Date')\n      }), /*#__PURE__*/_jsx(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: fields\n      })]\n    })]\n  });\n}\n\n/**\n * A component to input a time.\n *\n * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimeInput = () => {\n * \tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n *\n * \treturn (\n * \t\t<TimePicker.TimeInput\n * \t\t\tvalue={ time }\n * \t\t\tonChange={ setTime }\n * \t\t\tlabel=\"Time\"\n * \t\t/>\n * \t);\n * };\n * ```\n */\nTimePicker.TimeInput = TimeInput;\nObject.assign(TimePicker.TimeInput, {\n  displayName: 'TimePicker.TimeInput'\n});\nexport default TimePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import { startOfMinute } from 'date-fns';\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { date as formatDate } from '@wordpress/date';\nimport BaseControl from '../../base-control';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone, getDaysInMonth } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from './time-input';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker({\n  is12Hour,\n  currentTime,\n  onChange,\n  dateOrder: dateOrderProp,\n  hideLabelFromVision = false\n}) {\n  const [date, setDate] = useState(() =>\n  // Truncate the date at the minutes, see: #15495.\n  startOfMinute(inputToDate(currentTime ?? new Date())));\n\n  // Reset the state when currentTime changed.\n  // TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n  useEffect(() => {\n    setDate(startOfMinute(inputToDate(currentTime ?? new Date())));\n  }, [currentTime]);\n  const monthOptions = [{\n    value: '01',\n    label: __('January')\n  }, {\n    value: '02',\n    label: __('February')\n  }, {\n    value: '03',\n    label: __('March')\n  }, {\n    value: '04',\n    label: __('April')\n  }, {\n    value: '05',\n    label: __('May')\n  }, {\n    value: '06',\n    label: __('June')\n  }, {\n    value: '07',\n    label: __('July')\n  }, {\n    value: '08',\n    label: __('August')\n  }, {\n    value: '09',\n    label: __('September')\n  }, {\n    value: '10',\n    label: __('October')\n  }, {\n    value: '11',\n    label: __('November')\n  }, {\n    value: '12',\n    label: __('December')\n  }];\n  const {\n    day,\n    month,\n    year,\n    minutes,\n    hours\n  } = useMemo(() => ({\n    day: formatDate('d', date),\n    month: formatDate('m', date),\n    year: formatDate('Y', date),\n    minutes: formatDate('i', date),\n    hours: formatDate('H', date)\n  }), [date]);\n  const buildNumberControlChangeCallback = method => {\n    const callback = (value, {\n      event\n    }) => {\n      if (!validateInputElementTarget(event)) {\n        return;\n      }\n\n      // We can safely assume value is a number if target is valid.\n      const numberValue = Number(value);\n\n      // Internal date is UTC-normalized, but the field should be updated\n      // as if in the configured timezone.\n      const newDate = setInConfiguredTimezone(date, {\n        [method]: numberValue\n      });\n      setDate(newDate);\n      onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n    };\n    return callback;\n  };\n  const onTimeInputChangeCallback = ({\n    hours: newHours,\n    minutes: newMinutes\n  }) => {\n    // Internal date is UTC-normalized, but the field should be updated\n    // as if in the configured timezone.\n    const newDate = setInConfiguredTimezone(date, {\n      hours: newHours,\n      minutes: newMinutes\n    });\n    setDate(newDate);\n    onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n  };\n  const dayField = /*#__PURE__*/_jsx(DayInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n    ,\n    label: __('Day'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: day,\n    step: 1,\n    min: 1,\n    max: getDaysInMonth(Number(year), Number(month) - 1),\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('date')\n  }, \"day\");\n  const monthField = /*#__PURE__*/_jsx(MonthSelectWrapper, {\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      className: \"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n      ,\n      label: __('Month'),\n      hideLabelFromVision: true,\n      __next40pxDefaultSize: true,\n      value: month,\n      options: monthOptions,\n      onChange: value => {\n        // Internal date is UTC-normalized, but the field should be updated\n        // as if in the configured timezone.\n        const newDate = setInConfiguredTimezone(date, {\n          month: Number(value) - 1\n        });\n        setDate(newDate);\n        onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n      }\n    })\n  }, \"month\");\n  const yearField = /*#__PURE__*/_jsx(YearInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n    ,\n    label: __('Year'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: year,\n    step: 1,\n    min: 1,\n    max: 9999,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('year'),\n    __unstableStateReducer: buildPadInputStateReducer(4)\n  }, \"year\");\n  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;\n  const fields = dateOrder.split('').map(field => {\n    switch (field) {\n      case 'd':\n        return dayField;\n      case 'm':\n        return monthField;\n      case 'y':\n        return yearField;\n      default:\n        return null;\n    }\n  });\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__time\" // Unused, for backwards compatibility.\n    ,\n    children: [/*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Time')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Time')\n      }), /*#__PURE__*/_jsxs(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: [/*#__PURE__*/_jsx(TimeInput, {\n          value: {\n            hours: Number(hours),\n            minutes: Number(minutes)\n          },\n          is12Hour: is12Hour,\n          onChange: onTimeInputChangeCallback\n        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(TimeZone, {})]\n      })]\n    }), /*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Date')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Date')\n      }), /*#__PURE__*/_jsx(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: fields\n      })]\n    })]\n  });\n}\n\n/**\n * A component to input a time.\n *\n * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimeInput = () => {\n * \tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n *\n * \treturn (\n * \t\t<TimePicker.TimeInput\n * \t\t\tvalue={ time }\n * \t\t\tonChange={ setTime }\n * \t\t\tlabel=\"Time\"\n * \t\t/>\n * \t);\n * };\n * ```\n */\nTimePicker.TimeInput = TimeInput;\nObject.assign(TimePicker.TimeInput, {\n  displayName: 'TimePicker.TimeInput'\n});\nexport default TimePicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/date-time/utils.mjs

@@ -38,6 +38,11 @@ function buildPadInputStateReducer(pad) {
     return nextState;
   };
 }
+var getDaysInMonth = (year, month) => (
+  // Take advantage of JavaScript's built-in date wrapping logic, where day 0
+  // of the next month is interpreted as the last day of the preceding month.
+  new Date(year, month + 1, 0).getDate()
+);
 function setInConfiguredTimezone(date, updates) {
   const values = {
     year: Number(formatDate("Y", date)),
@@ -48,6 +53,8 @@ function setInConfiguredTimezone(date, updates) {
     seconds: Number(formatDate("s", date)),
     ...updates
   };
+  const daysInMonth = getDaysInMonth(values.year, values.month);
+  values.date = Math.min(values.date, daysInMonth);
   const year = String(values.year).padStart(4, "0");
   const month = String(values.month + 1).padStart(2, "0");
   const day = String(values.date).padStart(2, "0");
@@ -68,6 +75,7 @@ export {
   buildPadInputStateReducer,
   from12hTo24h,
   from24hTo12h,
+  getDaysInMonth,
   inputToDate,
   setInConfiguredTimezone,
   startOfDayInConfiguredTimezone,

package/build-module/date-time/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/date-time/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { UTCDateMini } from '@date-fns/utc';\n\n/**\n * WordPress dependencies\n */\nimport { date as formatDate, getDate } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\n\nimport { COMMIT, PRESS_DOWN, PRESS_UP } from '../input-control/reducer/actions';\n\n/**\n * Converts a date input to a UTC-normalized date for consistent date\n * manipulation. Timezoneless strings are interpreted using the timezone\n * offset from @wordpress/date settings. Date objects and timestamps\n * represent specific UTC instants.\n *\n * @param input Value to turn into a date.\n */\nexport function inputToDate(input) {\n  if (typeof input === 'string') {\n    // Note that JavaScript doesn't fully support ISO-8601 time strings, so\n    // the behavior of passing these through to the Date constructor is\n    // non-deterministic.\n    //\n    // See: https://tc39.es/ecma262/#sec-date-time-string-format\n    const hasTimezone = /Z|[+-]\\d{2}(:?\\d{2})?$/.test(input);\n    if (hasTimezone) {\n      return new UTCDateMini(new Date(input));\n    }\n\n    // Strings without timezone indicators are interpreted using configured\n    // timezone offset, then converted to UTC for internal storage.\n    return new UTCDateMini(getDate(input).getTime());\n  }\n\n  // Date objects and number timestamps represent specific UTC moments.\n  // Convert to milliseconds since epoch for consistent UTC handling.\n  const time = input instanceof Date ? input.getTime() : input;\n  return new UTCDateMini(time);\n}\n\n/**\n * Returns the start of day (midnight) as a browser-local Date for the calendar\n * day in the configured timezone in @wordpress/date settings. This is necessary\n * because date-fns's startOfDay operates in browser local time, which can cause\n * off-by-one-day bugs when browser and configured timezones differ.\n *\n * For example, if the UTC time is Nov 16, 01:00 UTC and configured timezone\n * is UTC-5, the date is Nov 15. This function returns a browser-local Date\n * at Nov 15, 00:00 (browser local midnight) so it matches calendar days.\n *\n * @param date A Date object normalized to UTC\n * @return A browser-local Date at midnight for the configured timezone date\n */\nexport function startOfDayInConfiguredTimezone(date) {\n  // Determine the calendar day in the configured WordPress timezone and\n  // return a browser-local Date at midnight for that calendar day.\n  const year = Number(formatDate('Y', date));\n  const month = Number(formatDate('n', date)) - 1;\n  const day = Number(formatDate('j', date));\n  return new Date(year, month, day, 0, 0, 0, 0);\n}\n\n/**\n * Converts a 12-hour time to a 24-hour time.\n * @param hours\n * @param isPm\n */\nexport function from12hTo24h(hours, isPm) {\n  return isPm ? (hours % 12 + 12) % 24 : hours % 12;\n}\n\n/**\n * Converts a 24-hour time to a 12-hour time.\n * @param hours\n */\nexport function from24hTo12h(hours) {\n  return hours % 12 || 12;\n}\n\n/**\n * Creates an InputControl reducer used to pad an input so that it is always a\n * given width. For example, the hours and minutes inputs are padded to 2 so\n * that '4' appears as '04'.\n *\n * @param pad How many digits the value should be.\n */\nexport function buildPadInputStateReducer(pad) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {\n      if (nextState.value !== undefined) {\n        nextState.value = nextState.value.toString().padStart(pad, '0');\n      }\n    }\n    return nextState;\n  };\n}\n\n/**\n * Updates specific date fields in the configured timezone and returns a new\n * UTC date.\n *\n * @param date    A Date object\n * @param updates Object with fields to update\n * @return A Date object normalized to UTC with the updated values\n */\nexport function setInConfiguredTimezone(date, updates) {\n  const values = {\n    year: Number(formatDate('Y', date)),\n    month: Number(formatDate('n', date)) - 1,\n    date: Number(formatDate('j', date)),\n    hours: Number(formatDate('H', date)),\n    minutes: Number(formatDate('i', date)),\n    seconds: Number(formatDate('s', date)),\n    ...updates\n  };\n  const year = String(values.year).padStart(4, '0');\n  const month = String(values.month + 1).padStart(2, '0');\n  const day = String(values.date).padStart(2, '0');\n  const hours = String(values.hours).padStart(2, '0');\n  const minutes = String(values.minutes).padStart(2, '0');\n  const seconds = String(values.seconds).padStart(2, '0');\n  const timezoneless = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;\n\n  // Parse as WordPress-configured timezone time and convert to a UTC instant.\n  return new UTCDateMini(getDate(timezoneless).getTime());\n}\n\n/**\n * Validates the target of a React event to ensure it is an input element and\n * that the input is valid.\n * @param event\n */\nexport function validateInputElementTarget(event) {\n  // `instanceof` checks need to get the instance definition from the\n  // corresponding window object \u2014 therefore, the following logic makes\n  // the component work correctly even when rendered inside an iframe.\n  const HTMLInputElementInstance = event.target?.ownerDocument.defaultView?.HTMLInputElement ?? HTMLInputElement;\n  if (!(event.target instanceof HTMLInputElementInstance)) {\n    return false;\n  }\n  return event.target.validity.valid;\n}"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAK5B,SAAS,QAAQ,YAAY,eAAe;AAM5C,SAAS,QAAQ,YAAY,gBAAgB;AAUtC,SAAS,YAAY,OAAO;AACjC,MAAI,OAAO,UAAU,UAAU;AAM7B,UAAM,cAAc,yBAAyB,KAAK,KAAK;AACvD,QAAI,aAAa;AACf,aAAO,IAAI,YAAY,IAAI,KAAK,KAAK,CAAC;AAAA,IACxC;AAIA,WAAO,IAAI,YAAY,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,EACjD;AAIA,QAAM,OAAO,iBAAiB,OAAO,MAAM,QAAQ,IAAI;AACvD,SAAO,IAAI,YAAY,IAAI;AAC7B;AAeO,SAAS,+BAA+B,MAAM;AAGnD,QAAM,OAAO,OAAO,WAAW,KAAK,IAAI,CAAC;AACzC,QAAM,QAAQ,OAAO,WAAW,KAAK,IAAI,CAAC,IAAI;AAC9C,QAAM,MAAM,OAAO,WAAW,KAAK,IAAI,CAAC;AACxC,SAAO,IAAI,KAAK,MAAM,OAAO,KAAK,GAAG,GAAG,GAAG,CAAC;AAC9C;AAOO,SAAS,aAAa,OAAO,MAAM;AACxC,SAAO,QAAQ,QAAQ,KAAK,MAAM,KAAK,QAAQ;AACjD;AAMO,SAAS,aAAa,OAAO;AAClC,SAAO,QAAQ,MAAM;AACvB;AASO,SAAS,0BAA0B,KAAK;AAC7C,SAAO,CAAC,OAAO,WAAW;AACxB,UAAM,YAAY;AAAA,MAChB,GAAG;AAAA,IACL;AACA,QAAI,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;AACpF,UAAI,UAAU,UAAU,QAAW;AACjC,kBAAU,QAAQ,UAAU,MAAM,SAAS,EAAE,SAAS,KAAK,GAAG;AAAA,MAChE;AAAA,IACF;AACA,WAAO;AAAA,EACT;AACF;AAUO,SAAS,wBAAwB,MAAM,SAAS;AACrD,QAAM,SAAS;AAAA,IACb,MAAM,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,IAClC,OAAO,OAAO,WAAW,KAAK,IAAI,CAAC,IAAI;AAAA,IACvC,MAAM,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,IAClC,OAAO,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,IACnC,SAAS,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,IACrC,SAAS,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,IACrC,GAAG;AAAA,EACL;AACA,QAAM,OAAO,OAAO,OAAO,IAAI,EAAE,SAAS,GAAG,GAAG;AAChD,QAAM,QAAQ,OAAO,OAAO,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AACtD,QAAM,MAAM,OAAO,OAAO,IAAI,EAAE,SAAS,GAAG,GAAG;AAC/C,QAAM,QAAQ,OAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAClD,QAAM,UAAU,OAAO,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG;AACtD,QAAM,UAAU,OAAO,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG;AACtD,QAAM,eAAe,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAG3E,SAAO,IAAI,YAAY,QAAQ,YAAY,EAAE,QAAQ,CAAC;AACxD;AAOO,SAAS,2BAA2B,OAAO;AAIhD,QAAM,2BAA2B,MAAM,QAAQ,cAAc,aAAa,oBAAoB;AAC9F,MAAI,EAAE,MAAM,kBAAkB,2BAA2B;AACvD,WAAO;AAAA,EACT;AACA,SAAO,MAAM,OAAO,SAAS;AAC/B;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { UTCDateMini } from '@date-fns/utc';\n\n/**\n * WordPress dependencies\n */\nimport { date as formatDate, getDate } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\n\nimport { COMMIT, PRESS_DOWN, PRESS_UP } from '../input-control/reducer/actions';\n\n/**\n * Converts a date input to a UTC-normalized date for consistent date\n * manipulation. Timezoneless strings are interpreted using the timezone\n * offset from @wordpress/date settings. Date objects and timestamps\n * represent specific UTC instants.\n *\n * @param input Value to turn into a date.\n */\nexport function inputToDate(input) {\n  if (typeof input === 'string') {\n    // Note that JavaScript doesn't fully support ISO-8601 time strings, so\n    // the behavior of passing these through to the Date constructor is\n    // non-deterministic.\n    //\n    // See: https://tc39.es/ecma262/#sec-date-time-string-format\n    const hasTimezone = /Z|[+-]\\d{2}(:?\\d{2})?$/.test(input);\n    if (hasTimezone) {\n      return new UTCDateMini(new Date(input));\n    }\n\n    // Strings without timezone indicators are interpreted using configured\n    // timezone offset, then converted to UTC for internal storage.\n    return new UTCDateMini(getDate(input).getTime());\n  }\n\n  // Date objects and number timestamps represent specific UTC moments.\n  // Convert to milliseconds since epoch for consistent UTC handling.\n  const time = input instanceof Date ? input.getTime() : input;\n  return new UTCDateMini(time);\n}\n\n/**\n * Returns the start of day (midnight) as a browser-local Date for the calendar\n * day in the configured timezone in @wordpress/date settings. This is necessary\n * because date-fns's startOfDay operates in browser local time, which can cause\n * off-by-one-day bugs when browser and configured timezones differ.\n *\n * For example, if the UTC time is Nov 16, 01:00 UTC and configured timezone\n * is UTC-5, the date is Nov 15. This function returns a browser-local Date\n * at Nov 15, 00:00 (browser local midnight) so it matches calendar days.\n *\n * @param date A Date object normalized to UTC\n * @return A browser-local Date at midnight for the configured timezone date\n */\nexport function startOfDayInConfiguredTimezone(date) {\n  // Determine the calendar day in the configured WordPress timezone and\n  // return a browser-local Date at midnight for that calendar day.\n  const year = Number(formatDate('Y', date));\n  const month = Number(formatDate('n', date)) - 1;\n  const day = Number(formatDate('j', date));\n  return new Date(year, month, day, 0, 0, 0, 0);\n}\n\n/**\n * Converts a 12-hour time to a 24-hour time.\n * @param hours\n * @param isPm\n */\nexport function from12hTo24h(hours, isPm) {\n  return isPm ? (hours % 12 + 12) % 24 : hours % 12;\n}\n\n/**\n * Converts a 24-hour time to a 12-hour time.\n * @param hours\n */\nexport function from24hTo12h(hours) {\n  return hours % 12 || 12;\n}\n\n/**\n * Creates an InputControl reducer used to pad an input so that it is always a\n * given width. For example, the hours and minutes inputs are padded to 2 so\n * that '4' appears as '04'.\n *\n * @param pad How many digits the value should be.\n */\nexport function buildPadInputStateReducer(pad) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) {\n      if (nextState.value !== undefined) {\n        nextState.value = nextState.value.toString().padStart(pad, '0');\n      }\n    }\n    return nextState;\n  };\n}\n\n/**\n * Returns the number of days in a month.\n *\n * @param year  The year\n * @param month The month, zero-indexed (0-11)\n *\n * @return The number of days in the month\n */\nexport const getDaysInMonth = (year, month) =>\n// Take advantage of JavaScript's built-in date wrapping logic, where day 0\n// of the next month is interpreted as the last day of the preceding month.\nnew Date(year, month + 1, 0).getDate();\n\n/**\n * Updates specific date fields in the configured timezone and returns a new\n * UTC date.\n *\n * @param date    A Date object\n * @param updates Object with fields to update\n * @return A Date object normalized to UTC with the updated values\n */\nexport function setInConfiguredTimezone(date, updates) {\n  const values = {\n    year: Number(formatDate('Y', date)),\n    month: Number(formatDate('n', date)) - 1,\n    date: Number(formatDate('j', date)),\n    hours: Number(formatDate('H', date)),\n    minutes: Number(formatDate('i', date)),\n    seconds: Number(formatDate('s', date)),\n    ...updates\n  };\n\n  // Clamp the day to the last valid day of the month, to avoid producing\n  // invalid date strings (e.g. \"2026-02-31\").\n  const daysInMonth = getDaysInMonth(values.year, values.month);\n  values.date = Math.min(values.date, daysInMonth);\n  const year = String(values.year).padStart(4, '0');\n  const month = String(values.month + 1).padStart(2, '0');\n  const day = String(values.date).padStart(2, '0');\n  const hours = String(values.hours).padStart(2, '0');\n  const minutes = String(values.minutes).padStart(2, '0');\n  const seconds = String(values.seconds).padStart(2, '0');\n  const timezoneless = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;\n\n  // Parse as WordPress-configured timezone time and convert to a UTC instant.\n  return new UTCDateMini(getDate(timezoneless).getTime());\n}\n\n/**\n * Validates the target of a React event to ensure it is an input element and\n * that the input is valid.\n * @param event\n */\nexport function validateInputElementTarget(event) {\n  // `instanceof` checks need to get the instance definition from the\n  // corresponding window object \u2014 therefore, the following logic makes\n  // the component work correctly even when rendered inside an iframe.\n  const HTMLInputElementInstance = event.target?.ownerDocument.defaultView?.HTMLInputElement ?? HTMLInputElement;\n  if (!(event.target instanceof HTMLInputElementInstance)) {\n    return false;\n  }\n  return event.target.validity.valid;\n}"],
+  "mappings": "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",
   "names": []
 }

package/build-module/dropdown/index.mjs

@@ -35,7 +35,7 @@ var UnconnectedDropdown = (props, forwardedRef) => {
     });
   }
   const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = useState(null);
-  const containerRef = useRef();
+  const containerRef = useRef(null);
   const [isOpen, setIsOpen] = useControlledValue({
     defaultValue: defaultOpen,
     value: open,

package/build-module/dropdown/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dropdown/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnconnectedDropdown = (props, forwardedRef) => {\n  const {\n    renderContent,\n    renderToggle,\n    className,\n    contentClassName,\n    expandOnMobile,\n    headerTitle,\n    focusOnMount,\n    popoverProps,\n    onClose,\n    onToggle,\n    style,\n    open,\n    defaultOpen,\n    // Deprecated props\n    position,\n    // From context system\n    variant\n  } = useContextSystem(props, 'Dropdown');\n  if (position !== undefined) {\n    deprecated('`position` prop in wp.components.Dropdown', {\n      since: '6.2',\n      alternative: '`popoverProps.placement` prop',\n      hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'\n    });\n  }\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = useState(null);\n  const containerRef = useRef();\n  const [isOpen, setIsOpen] = useControlledValue({\n    defaultValue: defaultOpen,\n    value: open,\n    onChange: onToggle\n  });\n\n  /**\n   * Closes the popover when focus leaves it unless the toggle was pressed or\n   * focus has moved to a separate dialog. The former is to let the toggle\n   * handle closing the popover and the latter is to preserve presence in\n   * case a dialog has opened, allowing focus to return when it's dismissed.\n   */\n  function closeIfFocusOutside() {\n    if (!containerRef.current) {\n      return;\n    }\n    const {\n      ownerDocument\n    } = containerRef.current;\n    const dialog = ownerDocument?.activeElement?.closest('[role=\"dialog\"]');\n    if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {\n      close();\n    }\n  }\n  function close() {\n    onClose?.();\n    setIsOpen(false);\n  }\n  const args = {\n    isOpen: !!isOpen,\n    onToggle: () => setIsOpen(!isOpen),\n    onClose: close\n  };\n  const popoverPropsHaveAnchor = !!popoverProps?.anchor ||\n  // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and\n  // be removed from `Popover` from WordPress 6.3\n  !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: useMergeRefs([containerRef, forwardedRef, setFallbackPopoverAnchor])\n    // Some UAs focus the closest focusable parent when the toggle is\n    // clicked. Making this div focusable ensures such UAs will focus\n    // it and `closeIfFocusOutside` can tell if the toggle was clicked.\n    ,\n    tabIndex: -1,\n    style: style,\n    children: [renderToggle(args), isOpen && /*#__PURE__*/_jsx(Popover, {\n      position: position,\n      onClose: close,\n      onFocusOutside: closeIfFocusOutside,\n      expandOnMobile: expandOnMobile,\n      headerTitle: headerTitle,\n      focusOnMount: focusOnMount\n      // This value is used to ensure that the dropdowns\n      // align with the editor header by default.\n      ,\n      offset: 13,\n      anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,\n      variant: variant,\n      ...popoverProps,\n      className: clsx('components-dropdown__content', popoverProps?.className, contentClassName),\n      children: renderContent(args)\n    })]\n  });\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');\nexport default Dropdown;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAKvB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,0BAA0B;AACnC,OAAO,aAAa;AACpB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,sBAAsB,CAAC,OAAO,iBAAiB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF,IAAI,iBAAiB,OAAO,UAAU;AACtC,MAAI,aAAa,QAAW;AAC1B,eAAW,6CAA6C;AAAA,MACtD,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAIA,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,IAAI;AACvE,QAAM,eAAe,OAAO;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,mBAAmB;AAAA,IAC7C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAQD,WAAS,sBAAsB;AAC7B,QAAI,CAAC,aAAa,SAAS;AACzB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,aAAa;AACjB,UAAM,SAAS,eAAe,eAAe,QAAQ,iBAAiB;AACtE,QAAI,CAAC,aAAa,QAAQ,SAAS,cAAc,aAAa,MAAM,CAAC,UAAU,OAAO,SAAS,aAAa,OAAO,IAAI;AACrH,YAAM;AAAA,IACR;AAAA,EACF;AACA,WAAS,QAAQ;AACf,cAAU;AACV,cAAU,KAAK;AAAA,EACjB;AACA,QAAM,OAAO;AAAA,IACX,QAAQ,CAAC,CAAC;AAAA,IACV,UAAU,MAAM,UAAU,CAAC,MAAM;AAAA,IACjC,SAAS;AAAA,EACX;AACA,QAAM,yBAAyB,CAAC,CAAC,cAAc;AAAA;AAAA,EAG/C,CAAC,CAAC,cAAc,aAAa,CAAC,CAAC,cAAc,iBAAiB,CAAC,CAAC,cAAc;AAC9E,SAAoB,sBAAM,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK,aAAa,CAAC,cAAc,cAAc,wBAAwB,CAAC;AAAA,IAKxE,UAAU;AAAA,IACV;AAAA,IACA,UAAU,CAAC,aAAa,IAAI,GAAG,UAAuB,qBAAK,SAAS;AAAA,MAClE;AAAA,MACA,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAIA,QAAQ;AAAA,MACR,QAAQ,CAAC,yBAAyB,wBAAwB;AAAA,MAC1D;AAAA,MACA,GAAG;AAAA,MACH,WAAW,KAAK,gCAAgC,cAAc,WAAW,gBAAgB;AAAA,MACzF,UAAU,cAAc,IAAI;AAAA,IAC9B,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AA2BO,IAAM,WAAW,eAAe,qBAAqB,UAAU;AACtE,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnconnectedDropdown = (props, forwardedRef) => {\n  const {\n    renderContent,\n    renderToggle,\n    className,\n    contentClassName,\n    expandOnMobile,\n    headerTitle,\n    focusOnMount,\n    popoverProps,\n    onClose,\n    onToggle,\n    style,\n    open,\n    defaultOpen,\n    // Deprecated props\n    position,\n    // From context system\n    variant\n  } = useContextSystem(props, 'Dropdown');\n  if (position !== undefined) {\n    deprecated('`position` prop in wp.components.Dropdown', {\n      since: '6.2',\n      alternative: '`popoverProps.placement` prop',\n      hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'\n    });\n  }\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = useState(null);\n  const containerRef = useRef(null);\n  const [isOpen, setIsOpen] = useControlledValue({\n    defaultValue: defaultOpen,\n    value: open,\n    onChange: onToggle\n  });\n\n  /**\n   * Closes the popover when focus leaves it unless the toggle was pressed or\n   * focus has moved to a separate dialog. The former is to let the toggle\n   * handle closing the popover and the latter is to preserve presence in\n   * case a dialog has opened, allowing focus to return when it's dismissed.\n   */\n  function closeIfFocusOutside() {\n    if (!containerRef.current) {\n      return;\n    }\n    const {\n      ownerDocument\n    } = containerRef.current;\n    const dialog = ownerDocument?.activeElement?.closest('[role=\"dialog\"]');\n    if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {\n      close();\n    }\n  }\n  function close() {\n    onClose?.();\n    setIsOpen(false);\n  }\n  const args = {\n    isOpen: !!isOpen,\n    onToggle: () => setIsOpen(!isOpen),\n    onClose: close\n  };\n  const popoverPropsHaveAnchor = !!popoverProps?.anchor ||\n  // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and\n  // be removed from `Popover` from WordPress 6.3\n  !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: useMergeRefs([containerRef, forwardedRef, setFallbackPopoverAnchor])\n    // Some UAs focus the closest focusable parent when the toggle is\n    // clicked. Making this div focusable ensures such UAs will focus\n    // it and `closeIfFocusOutside` can tell if the toggle was clicked.\n    ,\n    tabIndex: -1,\n    style: style,\n    children: [renderToggle(args), isOpen && /*#__PURE__*/_jsx(Popover, {\n      position: position,\n      onClose: close,\n      onFocusOutside: closeIfFocusOutside,\n      expandOnMobile: expandOnMobile,\n      headerTitle: headerTitle,\n      focusOnMount: focusOnMount\n      // This value is used to ensure that the dropdowns\n      // align with the editor header by default.\n      ,\n      offset: 13,\n      anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,\n      variant: variant,\n      ...popoverProps,\n      className: clsx('components-dropdown__content', popoverProps?.className, contentClassName),\n      children: renderContent(args)\n    })]\n  });\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');\nexport default Dropdown;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAKvB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,0BAA0B;AACnC,OAAO,aAAa;AACpB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,sBAAsB,CAAC,OAAO,iBAAiB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF,IAAI,iBAAiB,OAAO,UAAU;AACtC,MAAI,aAAa,QAAW;AAC1B,eAAW,6CAA6C;AAAA,MACtD,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAIA,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,IAAI;AACvE,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,CAAC,QAAQ,SAAS,IAAI,mBAAmB;AAAA,IAC7C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAQD,WAAS,sBAAsB;AAC7B,QAAI,CAAC,aAAa,SAAS;AACzB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,aAAa;AACjB,UAAM,SAAS,eAAe,eAAe,QAAQ,iBAAiB;AACtE,QAAI,CAAC,aAAa,QAAQ,SAAS,cAAc,aAAa,MAAM,CAAC,UAAU,OAAO,SAAS,aAAa,OAAO,IAAI;AACrH,YAAM;AAAA,IACR;AAAA,EACF;AACA,WAAS,QAAQ;AACf,cAAU;AACV,cAAU,KAAK;AAAA,EACjB;AACA,QAAM,OAAO;AAAA,IACX,QAAQ,CAAC,CAAC;AAAA,IACV,UAAU,MAAM,UAAU,CAAC,MAAM;AAAA,IACjC,SAAS;AAAA,EACX;AACA,QAAM,yBAAyB,CAAC,CAAC,cAAc;AAAA;AAAA,EAG/C,CAAC,CAAC,cAAc,aAAa,CAAC,CAAC,cAAc,iBAAiB,CAAC,CAAC,cAAc;AAC9E,SAAoB,sBAAM,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK,aAAa,CAAC,cAAc,cAAc,wBAAwB,CAAC;AAAA,IAKxE,UAAU;AAAA,IACV;AAAA,IACA,UAAU,CAAC,aAAa,IAAI,GAAG,UAAuB,qBAAK,SAAS;AAAA,MAClE;AAAA,MACA,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAIA,QAAQ;AAAA,MACR,QAAQ,CAAC,yBAAyB,wBAAwB;AAAA,MAC1D;AAAA,MACA,GAAG;AAAA,MACH,WAAW,KAAK,gCAAgC,cAAc,WAAW,gBAAgB;AAAA,MACzF,UAAU,cAAc,IAAI;AAAA,IAC9B,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AA2BO,IAAM,WAAW,eAAe,qBAAqB,UAAU;AACtE,IAAO,mBAAQ;",
   "names": []
 }

package/build-module/external-link/index.mjs

@@ -36,7 +36,11 @@ function UnforwardedExternalLink(props, ref) {
         className: "components-external-link__contents",
         children
       }), /* @__PURE__ */ _jsx("span", {
-        className: "components-external-link__icon",
+        className: clsx(
+          "components-external-link__icon",
+          // This class prevents the arrow from being replaced by a Twemoji image.
+          "wp-exclude-emoji"
+        ),
         "aria-label": (
           /* translators: accessibility text */
           __("(opens in a new tab)")