@wordpress/components 30.9.0 → 31.0.0

package/build-module/menu-item/index.js

@@ -39,7 +39,7 @@ function UnforwardedMenuItem(props, ref) {
     });
   }
   return /* @__PURE__ */ _jsxs(Button, {
-    __next40pxDefaultSize: true,
+    size: "compact",
     ref,
     "aria-checked": role === "menuitemcheckbox" || role === "menuitemradio" ? isSelected : void 0,
     role,

package/build-module/menu-item/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu-item/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedMenuItem(props, ref) {\n  let {\n    children,\n    info,\n    className,\n    icon,\n    iconPosition = 'right',\n    shortcut,\n    isSelected,\n    role = 'menuitem',\n    suffix,\n    ...buttonProps\n  } = props;\n  className = clsx('components-menu-item__button', className);\n  if (info) {\n    children = /*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-menu-item__info-wrapper\",\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        className: \"components-menu-item__item\",\n        children: children\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: \"components-menu-item__info\",\n        children: info\n      })]\n    });\n  }\n  if (icon && typeof icon !== 'string') {\n    icon = cloneElement(icon, {\n      className: clsx('components-menu-items__item-icon', {\n        'has-icon-right': iconPosition === 'right'\n      })\n    });\n  }\n  return /*#__PURE__*/_jsxs(Button, {\n    __next40pxDefaultSize: true,\n    ref: ref\n    // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n    ,\n    \"aria-checked\": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,\n    role: role,\n    icon: iconPosition === 'left' ? icon : undefined,\n    className: className,\n    accessibleWhenDisabled: true,\n    ...buttonProps,\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: \"components-menu-item__item\",\n      children: children\n    }), !suffix && /*#__PURE__*/_jsx(Shortcut, {\n      className: \"components-menu-item__shortcut\",\n      shortcut: shortcut\n    }), !suffix && icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    }), suffix]\n  });\n}\n\n/**\n * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n *\n * ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n *\n * \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef(UnforwardedMenuItem);\nexport default MenuItem;"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,cAAc,kBAAkB;AAKzC,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,oBAAoB,OAAO,KAAK;AACvC,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,cAAY,KAAK,gCAAgC,SAAS;AAC1D,MAAI,MAAM;AACR,eAAwB,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH;AACA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,aAAa,MAAM;AAAA,MACxB,WAAW,KAAK,oCAAoC;AAAA,QAClD,kBAAkB,iBAAiB;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,uBAAuB;AAAA,IACvB;AAAA,IAGA,gBAAgB,SAAS,sBAAsB,SAAS,kBAAkB,aAAa;AAAA,IACvF;AAAA,IACA,MAAM,iBAAiB,SAAS,OAAO;AAAA,IACvC;AAAA,IACA,wBAAwB;AAAA,IACxB,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,QAAQ;AAAA,MACnC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAuB,qBAAK,UAAU;AAAA,MACzC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAU,QAAQ,iBAAiB,WAAwB,qBAAK,MAAM;AAAA,MACzE;AAAA,IACF,CAAC,GAAG,MAAM;AAAA,EACZ,CAAC;AACH;AAyBO,IAAM,WAAW,WAAW,mBAAmB;AACtD,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedMenuItem(props, ref) {\n  let {\n    children,\n    info,\n    className,\n    icon,\n    iconPosition = 'right',\n    shortcut,\n    isSelected,\n    role = 'menuitem',\n    suffix,\n    ...buttonProps\n  } = props;\n  className = clsx('components-menu-item__button', className);\n  if (info) {\n    children = /*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-menu-item__info-wrapper\",\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        className: \"components-menu-item__item\",\n        children: children\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: \"components-menu-item__info\",\n        children: info\n      })]\n    });\n  }\n  if (icon && typeof icon !== 'string') {\n    icon = cloneElement(icon, {\n      className: clsx('components-menu-items__item-icon', {\n        'has-icon-right': iconPosition === 'right'\n      })\n    });\n  }\n  return /*#__PURE__*/_jsxs(Button, {\n    size: \"compact\",\n    ref: ref\n    // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n    ,\n    \"aria-checked\": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,\n    role: role,\n    icon: iconPosition === 'left' ? icon : undefined,\n    className: className,\n    accessibleWhenDisabled: true,\n    ...buttonProps,\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: \"components-menu-item__item\",\n      children: children\n    }), !suffix && /*#__PURE__*/_jsx(Shortcut, {\n      className: \"components-menu-item__shortcut\",\n      shortcut: shortcut\n    }), !suffix && icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    }), suffix]\n  });\n}\n\n/**\n * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n *\n * ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n *\n * \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef(UnforwardedMenuItem);\nexport default MenuItem;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,cAAc,kBAAkB;AAKzC,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,oBAAoB,OAAO,KAAK;AACvC,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,cAAY,KAAK,gCAAgC,SAAS;AAC1D,MAAI,MAAM;AACR,eAAwB,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH;AACA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,aAAa,MAAM;AAAA,MACxB,WAAW,KAAK,oCAAoC;AAAA,QAClD,kBAAkB,iBAAiB;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,MAAM;AAAA,IACN;AAAA,IAGA,gBAAgB,SAAS,sBAAsB,SAAS,kBAAkB,aAAa;AAAA,IACvF;AAAA,IACA,MAAM,iBAAiB,SAAS,OAAO;AAAA,IACvC;AAAA,IACA,wBAAwB;AAAA,IACxB,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,QAAQ;AAAA,MACnC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAuB,qBAAK,UAAU;AAAA,MACzC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAU,QAAQ,iBAAiB,WAAwB,qBAAK,MAAM;AAAA,MACzE;AAAA,IACF,CAAC,GAAG,MAAM;AAAA,EACZ,CAAC;AACH;AAyBO,IAAM,WAAW,WAAW,mBAAmB;AACtD,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/notice/index.js

@@ -75,7 +75,7 @@ function Notice({
       children: getStatusLabel(status)
     }), /* @__PURE__ */ _jsxs("div", {
       className: "components-notice__content",
-      children: [children, /* @__PURE__ */ _jsx("div", {
+      children: [children, actions.length > 0 && /* @__PURE__ */ _jsx("div", {
         className: "components-notice__actions",
         children: actions.map(({
           className: buttonCustomClasses,

package/build-module/notice/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/notice/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RawHTML, useEffect, renderToString } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction getDefaultPoliteness(status) {\n  switch (status) {\n    case 'success':\n    case 'warning':\n    case 'info':\n      return 'polite';\n    // The default will also catch the 'error' status.\n    default:\n      return 'assertive';\n  }\n}\nfunction getStatusLabel(status) {\n  switch (status) {\n    case 'warning':\n      return __('Warning notice');\n    case 'info':\n      return __('Information notice');\n    case 'error':\n      return __('Error notice');\n    // The default will also catch the 'success' status.\n    default:\n      return __('Notice');\n  }\n}\n\n/**\n * `Notice` is a component used to communicate feedback to the user.\n *\n *```jsx\n * import { Notice } from `@wordpress/components`;\n *\n * const MyNotice = () => (\n *   <Notice status=\"error\">An unknown error occurred.</Notice>\n * );\n * ```\n */\nfunction Notice({\n  className,\n  status = 'info',\n  children,\n  spokenMessage = children,\n  onRemove = noop,\n  isDismissible = true,\n  actions = [],\n  politeness = getDefaultPoliteness(status),\n  __unstableHTML,\n  // onDismiss is a callback executed when the notice is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the notice from the UI.\n  onDismiss = noop\n}) {\n  useSpokenMessage(spokenMessage, politeness);\n  const classes = clsx(className, 'components-notice', 'is-' + status, {\n    'is-dismissible': isDismissible\n  });\n  if (__unstableHTML && typeof children === 'string') {\n    children = /*#__PURE__*/_jsx(RawHTML, {\n      children: children\n    });\n  }\n  const onDismissNotice = () => {\n    onDismiss();\n    onRemove();\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: classes,\n    children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n      children: getStatusLabel(status)\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-notice__content\",\n      children: [children, /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-notice__actions\",\n        children: actions.map(({\n          className: buttonCustomClasses,\n          label,\n          isPrimary,\n          variant,\n          noDefaultClasses = false,\n          onClick,\n          url\n        }, index) => {\n          let computedVariant = variant;\n          if (variant !== 'primary' && !noDefaultClasses) {\n            computedVariant = !url ? 'secondary' : 'link';\n          }\n          if (typeof computedVariant === 'undefined' && isPrimary) {\n            computedVariant = 'primary';\n          }\n          return /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            href: url,\n            variant: computedVariant,\n            onClick: url ? undefined : onClick,\n            className: clsx('components-notice__action', buttonCustomClasses),\n            children: label\n          }, index);\n        })\n      })]\n    }), isDismissible && /*#__PURE__*/_jsx(Button, {\n      size: \"small\",\n      className: \"components-notice__dismiss\",\n      icon: close,\n      label: __('Close'),\n      onClick: onDismissNotice\n    })]\n  });\n}\nexport default Notice;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU;AACnB,SAAS,SAAS,WAAW,sBAAsB;AACnD,SAAS,aAAa;AACtB,SAAS,aAAa;AAKtB,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AAMpB,SAAS,iBAAiB,SAAS,YAAY;AAC7C,QAAM,gBAAgB,OAAO,YAAY,WAAW,UAAU,eAAe,OAAO;AACpF,YAAU,MAAM;AACd,QAAI,eAAe;AACjB,YAAM,eAAe,UAAU;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,eAAe,UAAU,CAAC;AAChC;AACA,SAAS,qBAAqB,QAAQ;AACpC,UAAQ,QAAQ;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA;AAAA,IAET;AACE,aAAO;AAAA,EACX;AACF;AACA,SAAS,eAAe,QAAQ;AAC9B,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,GAAG,gBAAgB;AAAA,IAC5B,KAAK;AACH,aAAO,GAAG,oBAAoB;AAAA,IAChC,KAAK;AACH,aAAO,GAAG,cAAc;AAAA;AAAA,IAE1B;AACE,aAAO,GAAG,QAAQ;AAAA,EACtB;AACF;AAaA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,UAAU,CAAC;AAAA,EACX,aAAa,qBAAqB,MAAM;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA,EAIA,YAAY;AACd,GAAG;AACD,mBAAiB,eAAe,UAAU;AAC1C,QAAM,UAAU,KAAK,WAAW,qBAAqB,QAAQ,QAAQ;AAAA,IACnE,kBAAkB;AAAA,EACpB,CAAC;AACD,MAAI,kBAAkB,OAAO,aAAa,UAAU;AAClD,eAAwB,qBAAK,SAAS;AAAA,MACpC;AAAA,IACF,CAAC;AAAA,EACH;AACA,QAAM,kBAAkB,MAAM;AAC5B,cAAU;AACV,aAAS;AAAA,EACX;AACA,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,gBAAgB;AAAA,MAC3C,UAAU,eAAe,MAAM;AAAA,IACjC,CAAC,GAAgB,sBAAM,OAAO;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,CAAC,UAAuB,qBAAK,OAAO;AAAA,QAC5C,WAAW;AAAA,QACX,UAAU,QAAQ,IAAI,CAAC;AAAA,UACrB,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,mBAAmB;AAAA,UACnB;AAAA,UACA;AAAA,QACF,GAAG,UAAU;AACX,cAAI,kBAAkB;AACtB,cAAI,YAAY,aAAa,CAAC,kBAAkB;AAC9C,8BAAkB,CAAC,MAAM,cAAc;AAAA,UACzC;AACA,cAAI,OAAO,oBAAoB,eAAe,WAAW;AACvD,8BAAkB;AAAA,UACpB;AACA,iBAAoB,qBAAK,QAAQ;AAAA,YAC/B,uBAAuB;AAAA,YACvB,MAAM;AAAA,YACN,SAAS;AAAA,YACT,SAAS,MAAM,SAAY;AAAA,YAC3B,WAAW,KAAK,6BAA6B,mBAAmB;AAAA,YAChE,UAAU;AAAA,UACZ,GAAG,KAAK;AAAA,QACV,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,GAAG,iBAA8B,qBAAK,QAAQ;AAAA,MAC7C,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,OAAO,GAAG,OAAO;AAAA,MACjB,SAAS;AAAA,IACX,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RawHTML, useEffect, renderToString } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction getDefaultPoliteness(status) {\n  switch (status) {\n    case 'success':\n    case 'warning':\n    case 'info':\n      return 'polite';\n    // The default will also catch the 'error' status.\n    default:\n      return 'assertive';\n  }\n}\nfunction getStatusLabel(status) {\n  switch (status) {\n    case 'warning':\n      return __('Warning notice');\n    case 'info':\n      return __('Information notice');\n    case 'error':\n      return __('Error notice');\n    // The default will also catch the 'success' status.\n    default:\n      return __('Notice');\n  }\n}\n\n/**\n * `Notice` is a component used to communicate feedback to the user.\n *\n *```jsx\n * import { Notice } from `@wordpress/components`;\n *\n * const MyNotice = () => (\n *   <Notice status=\"error\">An unknown error occurred.</Notice>\n * );\n * ```\n */\nfunction Notice({\n  className,\n  status = 'info',\n  children,\n  spokenMessage = children,\n  onRemove = noop,\n  isDismissible = true,\n  actions = [],\n  politeness = getDefaultPoliteness(status),\n  __unstableHTML,\n  // onDismiss is a callback executed when the notice is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the notice from the UI.\n  onDismiss = noop\n}) {\n  useSpokenMessage(spokenMessage, politeness);\n  const classes = clsx(className, 'components-notice', 'is-' + status, {\n    'is-dismissible': isDismissible\n  });\n  if (__unstableHTML && typeof children === 'string') {\n    children = /*#__PURE__*/_jsx(RawHTML, {\n      children: children\n    });\n  }\n  const onDismissNotice = () => {\n    onDismiss();\n    onRemove();\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: classes,\n    children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n      children: getStatusLabel(status)\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-notice__content\",\n      children: [children, actions.length > 0 && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-notice__actions\",\n        children: actions.map(({\n          className: buttonCustomClasses,\n          label,\n          isPrimary,\n          variant,\n          noDefaultClasses = false,\n          onClick,\n          url\n        }, index) => {\n          let computedVariant = variant;\n          if (variant !== 'primary' && !noDefaultClasses) {\n            computedVariant = !url ? 'secondary' : 'link';\n          }\n          if (typeof computedVariant === 'undefined' && isPrimary) {\n            computedVariant = 'primary';\n          }\n          return /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            href: url,\n            variant: computedVariant,\n            onClick: url ? undefined : onClick,\n            className: clsx('components-notice__action', buttonCustomClasses),\n            children: label\n          }, index);\n        })\n      })]\n    }), isDismissible && /*#__PURE__*/_jsx(Button, {\n      size: \"small\",\n      className: \"components-notice__dismiss\",\n      icon: close,\n      label: __('Close'),\n      onClick: onDismissNotice\n    })]\n  });\n}\nexport default Notice;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/query-controls/index.js

@@ -78,7 +78,6 @@ function QueryControls({
       onChange: props.onCategoryChange
     }, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /* @__PURE__ */ _jsx(FormTokenField, {
       __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
       label: __("Categories"),
       value: props.selectedCategories && props.selectedCategories.map((item) => ({
         id: item.id,

package/build-module/query-controls/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/query-controls/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\nfunction isSingleCategorySelection(props) {\n  return 'categoriesList' in props;\n}\nfunction isMultipleCategorySelection(props) {\n  return 'categorySuggestions' in props;\n}\nconst defaultOrderByOptions = [{\n  label: __('Newest to oldest'),\n  value: 'date/desc'\n}, {\n  label: __('Oldest to newest'),\n  value: 'date/asc'\n}, {\n  /* translators: Label for ordering posts by title in ascending order. */\n  label: __('A \u2192 Z'),\n  value: 'title/asc'\n}, {\n  /* translators: Label for ordering posts by title in descending order. */\n  label: __('Z \u2192 A'),\n  value: 'title/desc'\n}];\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n *   <QueryControls\n *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }\n *     onOrderByChange={ ( newOrderBy ) => {\n *       updateQuery( { orderBy: newOrderBy } )\n *     }\n *     onOrderChange={ ( newOrder ) => {\n *       updateQuery( { order: newOrder } )\n *     }\n *     categoriesList={ categories }\n *     selectedCategoryId={ category }\n *     onCategoryChange={ ( newCategory ) => {\n *       updateQuery( { category: newCategory } )\n *     }\n *     onNumberOfItemsChange={ ( newNumberOfItems ) => {\n *       updateQuery( { numberOfItems: newNumberOfItems } )\n *     } }\n *   />\n * );\n * ```\n */\nexport function QueryControls({\n  authorList,\n  selectedAuthorId,\n  numberOfItems,\n  order,\n  orderBy,\n  orderByOptions = defaultOrderByOptions,\n  maxItems = DEFAULT_MAX_ITEMS,\n  minItems = DEFAULT_MIN_ITEMS,\n  onAuthorChange,\n  onNumberOfItemsChange,\n  onOrderChange,\n  onOrderByChange,\n  // Props for single OR multiple category selection are not destructured here,\n  // but instead are destructured inline where necessary.\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: \"4\",\n    className: \"components-query-controls\",\n    children: [onOrderChange && onOrderByChange && /*#__PURE__*/_jsx(SelectControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Order by'),\n      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,\n      options: orderByOptions,\n      onChange: value => {\n        if (typeof value !== 'string') {\n          return;\n        }\n        const [newOrderBy, newOrder] = value.split('/');\n        if (newOrder !== order) {\n          onOrderChange(newOrder);\n        }\n        if (newOrderBy !== orderBy) {\n          onOrderByChange(newOrderBy);\n        }\n      }\n    }, \"query-controls-order-select\"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/_jsx(CategorySelect, {\n      __next40pxDefaultSize: true,\n      categoriesList: props.categoriesList,\n      label: __('Category'),\n      noOptionLabel: _x('All', 'categories'),\n      selectedCategoryId: props.selectedCategoryId,\n      onChange: props.onCategoryChange\n    }, \"query-controls-category-select\"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/_jsx(FormTokenField, {\n      __next40pxDefaultSize: true,\n      __nextHasNoMarginBottom: true,\n      label: __('Categories'),\n      value: props.selectedCategories && props.selectedCategories.map(item => ({\n        id: item.id,\n        // Keeping the fallback to `item.value` for legacy reasons,\n        // even if items of `selectedCategories` should not have a\n        // `value` property.\n        // @ts-expect-error\n        value: item.name || item.value\n      })),\n      suggestions: Object.keys(props.categorySuggestions),\n      onChange: props.onCategoryChange,\n      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS\n    }, \"query-controls-categories-select\"), onAuthorChange && /*#__PURE__*/_jsx(AuthorSelect, {\n      __next40pxDefaultSize: true,\n      authorList: authorList,\n      label: __('Author'),\n      noOptionLabel: _x('All', 'authors'),\n      selectedAuthorId: selectedAuthorId,\n      onChange: onAuthorChange\n    }, \"query-controls-author-select\"), onNumberOfItemsChange && /*#__PURE__*/_jsx(RangeControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Number of items'),\n      value: numberOfItems,\n      onChange: onNumberOfItemsChange,\n      min: minItems,\n      max: maxItems,\n      required: true\n    }, \"query-controls-range-control\")]\n  });\n}\nexport default QueryControls;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\nfunction isSingleCategorySelection(props) {\n  return 'categoriesList' in props;\n}\nfunction isMultipleCategorySelection(props) {\n  return 'categorySuggestions' in props;\n}\nconst defaultOrderByOptions = [{\n  label: __('Newest to oldest'),\n  value: 'date/desc'\n}, {\n  label: __('Oldest to newest'),\n  value: 'date/asc'\n}, {\n  /* translators: Label for ordering posts by title in ascending order. */\n  label: __('A \u2192 Z'),\n  value: 'title/asc'\n}, {\n  /* translators: Label for ordering posts by title in descending order. */\n  label: __('Z \u2192 A'),\n  value: 'title/desc'\n}];\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n *   <QueryControls\n *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }\n *     onOrderByChange={ ( newOrderBy ) => {\n *       updateQuery( { orderBy: newOrderBy } )\n *     }\n *     onOrderChange={ ( newOrder ) => {\n *       updateQuery( { order: newOrder } )\n *     }\n *     categoriesList={ categories }\n *     selectedCategoryId={ category }\n *     onCategoryChange={ ( newCategory ) => {\n *       updateQuery( { category: newCategory } )\n *     }\n *     onNumberOfItemsChange={ ( newNumberOfItems ) => {\n *       updateQuery( { numberOfItems: newNumberOfItems } )\n *     } }\n *   />\n * );\n * ```\n */\nexport function QueryControls({\n  authorList,\n  selectedAuthorId,\n  numberOfItems,\n  order,\n  orderBy,\n  orderByOptions = defaultOrderByOptions,\n  maxItems = DEFAULT_MAX_ITEMS,\n  minItems = DEFAULT_MIN_ITEMS,\n  onAuthorChange,\n  onNumberOfItemsChange,\n  onOrderChange,\n  onOrderByChange,\n  // Props for single OR multiple category selection are not destructured here,\n  // but instead are destructured inline where necessary.\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: \"4\",\n    className: \"components-query-controls\",\n    children: [onOrderChange && onOrderByChange && /*#__PURE__*/_jsx(SelectControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Order by'),\n      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,\n      options: orderByOptions,\n      onChange: value => {\n        if (typeof value !== 'string') {\n          return;\n        }\n        const [newOrderBy, newOrder] = value.split('/');\n        if (newOrder !== order) {\n          onOrderChange(newOrder);\n        }\n        if (newOrderBy !== orderBy) {\n          onOrderByChange(newOrderBy);\n        }\n      }\n    }, \"query-controls-order-select\"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/_jsx(CategorySelect, {\n      __next40pxDefaultSize: true,\n      categoriesList: props.categoriesList,\n      label: __('Category'),\n      noOptionLabel: _x('All', 'categories'),\n      selectedCategoryId: props.selectedCategoryId,\n      onChange: props.onCategoryChange\n    }, \"query-controls-category-select\"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/_jsx(FormTokenField, {\n      __next40pxDefaultSize: true,\n      label: __('Categories'),\n      value: props.selectedCategories && props.selectedCategories.map(item => ({\n        id: item.id,\n        // Keeping the fallback to `item.value` for legacy reasons,\n        // even if items of `selectedCategories` should not have a\n        // `value` property.\n        // @ts-expect-error\n        value: item.name || item.value\n      })),\n      suggestions: Object.keys(props.categorySuggestions),\n      onChange: props.onCategoryChange,\n      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS\n    }, \"query-controls-categories-select\"), onAuthorChange && /*#__PURE__*/_jsx(AuthorSelect, {\n      __next40pxDefaultSize: true,\n      authorList: authorList,\n      label: __('Author'),\n      noOptionLabel: _x('All', 'authors'),\n      selectedAuthorId: selectedAuthorId,\n      onChange: onAuthorChange\n    }, \"query-controls-author-select\"), onNumberOfItemsChange && /*#__PURE__*/_jsx(RangeControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Number of items'),\n      value: numberOfItems,\n      onChange: onNumberOfItemsChange,\n      min: minItems,\n      max: maxItems,\n      required: true\n    }, \"query-controls-range-control\")]\n  });\n}\nexport default QueryControls;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/snackbar/index.js

@@ -7,7 +7,7 @@ import warning from "@wordpress/warning";
 import Button from "../button";
 import ExternalLink from "../external-link";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var NOTICE_TIMEOUT = 1e4;
+var NOTICE_TIMEOUT = 6e3;
 function useSpokenMessage(message, politeness) {
   const spokenMessage = typeof message === "string" ? message : renderToString(message);
   useEffect(() => {

package/build-module/snackbar/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/snackbar/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    // Only set up the timeout dismiss if we're not explicitly dismissing.\n    const timeoutHandle = setTimeout(() => {\n      if (!explicitDismiss) {\n        callbacksRef.current.onDismiss?.();\n        callbacksRef.current.onRemove?.();\n      }\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nexport default Snackbar;"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    // Only set up the timeout dismiss if we're not explicitly dismissing.\n    const timeoutHandle = setTimeout(() => {\n      if (!explicitDismiss) {\n        callbacksRef.current.onDismiss?.();\n        callbacksRef.current.onRemove?.();\n      }\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nexport default Snackbar;"],
   "mappings": "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",
   "names": []
 }

package/build-module/validated-form-controls/components/checkbox-control.js

@@ -6,30 +6,20 @@ import CheckboxControl from "../../checkbox-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedCheckboxControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.checked);
   return /* @__PURE__ */ _jsx(ControlWithError, {
     required,
     markWhenOptional,
     ref: mergedRefs,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="checkbox"]'),
     children: /* @__PURE__ */ _jsx(CheckboxControl, {
       __nextHasNoMarginBottom: true,
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });

package/build-module/validated-form-controls/components/checkbox-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/checkbox-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CheckboxControl from '../../checkbox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCheckboxControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  const valueRef = useRef(restProps.checked);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    ref: mergedRefs,\n    onValidate: () => {\n      return onValidate?.(valueRef.current);\n    },\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"checkbox\"]'),\n    children: /*#__PURE__*/_jsx(CheckboxControl, {\n      __nextHasNoMarginBottom: true,\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      }\n      // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n      ,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedCheckboxControl = forwardRef(UnforwardedValidatedCheckboxControl);"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,WAAW,OAAO,UAAU,OAAO;AACzC,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,YAAY,MAAM;AAChB,aAAO,aAAa,SAAS,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,IAC1F,UAAuB,qBAAK,iBAAiB;AAAA,MAC3C,yBAAyB;AAAA,MACzB,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MAGA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAA2B,WAAW,mCAAmC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CheckboxControl from '../../checkbox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCheckboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"checkbox\"]'),\n    children: /*#__PURE__*/_jsx(CheckboxControl, {\n      __nextHasNoMarginBottom: true\n      // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n      ,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedCheckboxControl = forwardRef(UnforwardedValidatedCheckboxControl);"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,IAC1F,UAAuB,qBAAK,iBAAiB;AAAA,MAC3C,yBAAyB;AAAA,MAGzB,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAA2B,WAAW,mCAAmC;",
   "names": []
 }

package/build-module/validated-form-controls/components/combobox-control.js

@@ -6,15 +6,12 @@ import ComboboxControl from "../../combobox-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedComboboxControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.value);
   useEffect(() => {
     const input = validityTargetRef.current?.querySelector('input[role="combobox"]');
     if (input) {
@@ -27,19 +24,12 @@ var UnforwardedValidatedComboboxControl = ({
       required,
       markWhenOptional,
       ref: mergedRefs,
-      onValidate: () => {
-        return onValidate?.(valueRef.current);
-      },
       customValidity,
       getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
       children: /* @__PURE__ */ _jsx(ComboboxControl, {
         __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: true,
-        ...restProps,
-        onChange: (value) => {
-          valueRef.current = value;
-          onChange?.(value);
-        }
+        ...restProps
       })
     })
   );

package/build-module/validated-form-controls/components/combobox-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/combobox-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  const valueRef = useRef(restProps.value);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      onValidate: () => {\n        return onValidate?.(valueRef.current);\n      },\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: true,\n        ...restProps,\n        onChange: value => {\n          valueRef.current = value;\n          onChange?.(value);\n        }\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,cAAc;AAK9C,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,WAAW,OAAO,UAAU,KAAK;AAIvC,YAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,qBAAK,kBAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,YAAY,MAAM;AAChB,eAAO,aAAa,SAAS,OAAO;AAAA,MACtC;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,qBAAK,iBAAiB;AAAA,QAC3C,yBAAyB;AAAA,QACzB,uBAAuB;AAAA,QACvB,GAAG;AAAA,QACH,UAAU,WAAS;AACjB,mBAAS,UAAU;AACnB,qBAAW,KAAK;AAAA,QAClB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,2BAA2B,WAAW,mCAAmC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ComboboxControl from '../../combobox-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedComboboxControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n\n  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n  // so we need to set it manually.\n  useEffect(() => {\n    const input = validityTargetRef.current?.querySelector('input[role=\"combobox\"]');\n    if (input) {\n      input.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return (\n    /*#__PURE__*/\n    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n    _jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      ref: mergedRefs,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role=\"combobox\"]'),\n      children: /*#__PURE__*/_jsx(ComboboxControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    })\n  );\n};\nexport const ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,cAAc;AAK9C,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,OAAO,YAAY;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,YAAU,MAAM;AACd,UAAM,QAAQ,kBAAkB,SAAS,cAAc,wBAAwB;AAC/E,QAAI,OAAO;AACT,YAAM,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb;AAAA;AAAA,IAGE,qBAAK,kBAAkB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,wBAAwB;AAAA,MAC1F,UAAuB,qBAAK,iBAAiB;AAAA,QAC3C,yBAAyB;AAAA,QACzB,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA;AAEL;AACO,IAAM,2BAA2B,WAAW,mCAAmC;",
   "names": []
 }

package/build-module/validated-form-controls/components/custom-select-control.js

@@ -5,33 +5,23 @@ import CustomSelectControl from "../../custom-select-control";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var UnforwardedValidatedCustomSelectControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
-  const valueRef = useRef(restProps.value);
   return /* @__PURE__ */ _jsxs("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     ref: forwardedRef,
     children: [/* @__PURE__ */ _jsx(ControlWithError, {
       required,
       markWhenOptional,
-      onValidate: () => {
-        return onValidate?.(valueRef.current);
-      },
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /* @__PURE__ */ _jsx(
         CustomSelectControl,
         {
           __next40pxDefaultSize: true,
-          onChange: (value) => {
-            valueRef.current = value.selectedItem;
-            onChange?.(value);
-          },
           ...restProps
         }
       )

package/build-module/validated-form-controls/components/custom-select-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/custom-select-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const valueRef = useRef(restProps.value);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      onValidate: () => {\n        return onValidate?.(valueRef.current);\n      },\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        __next40pxDefaultSize: true,\n        onChange: value => {\n          valueRef.current = value.selectedItem;\n          onChange?.(value);\n        },\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);"],
-  "mappings": ";AAGA,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,yBAAyB;AAChC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,WAAW,OAAO,UAAU,KAAK;AACvC,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,YAAY,MAAM;AAChB,eAAO,aAAa,SAAS,OAAO;AAAA,MACtC;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB;AAAA,QAAK;AAAA,QAG1B;AAAA,UACA,uBAAuB;AAAA,UACvB,UAAU,WAAS;AACjB,qBAAS,UAAU,MAAM;AACzB,uBAAW,KAAK;AAAA,UAClB;AAAA,UACA,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,sBAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,qBAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,+BAA+B,WAAW,uCAAuC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);"],
+  "mappings": ";AAGA,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,yBAAyB;AAChC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB;AAAA,QAAK;AAAA,QAG1B;AAAA,UACA,uBAAuB;AAAA,UACvB,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,sBAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,qBAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,+BAA+B,WAAW,uCAAuC;",
   "names": []
 }

package/build-module/validated-form-controls/components/form-token-field.js

@@ -5,40 +5,29 @@ import { FormTokenField } from "../../form-token-field";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var UnforwardedValidatedFormTokenField = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
-  const valueRef = useRef(restProps.value);
   return /* @__PURE__ */ _jsxs("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     ref: forwardedRef,
     children: [/* @__PURE__ */ _jsx(ControlWithError, {
       required,
       markWhenOptional,
-      onValidate: () => {
-        return onValidate?.(valueRef.current);
-      },
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /* @__PURE__ */ _jsx(FormTokenField, {
         __next40pxDefaultSize: true,
-        __nextHasNoMarginBottom: true,
-        ...restProps,
-        onChange: (value, ...args) => {
-          valueRef.current = value;
-          onChange?.(value, ...args);
-        }
+        ...restProps
       })
     }), /* @__PURE__ */ _jsx("input", {
       className: "components-validated-control__error-delegate",
       type: "text",
       ref: validityTargetRef,
       required,
-      value: valueRef.current && valueRef.current.length > 0 ? "hasvalue" : "",
+      value: restProps.value && restProps.value.length > 0 ? "hasvalue" : "",
       tabIndex: -1,
       onChange: () => {
       },

package/build-module/validated-form-controls/components/form-token-field.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/form-token-field.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { FormTokenField } from '../../form-token-field';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedFormTokenField = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const valueRef = useRef(restProps.value);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      onValidate: () => {\n        return onValidate?.(valueRef.current);\n      },\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(FormTokenField, {\n        __next40pxDefaultSize: true,\n        __nextHasNoMarginBottom: true,\n        ...restProps,\n        onChange: (value, ...args) => {\n          valueRef.current = value;\n          onChange?.(value, ...args);\n        }\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required,\n      value: valueRef.current && valueRef.current.length > 0 ? 'hasvalue' : '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('input[type=\"text\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);"],
-  "mappings": ";AAGA,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,qCAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,WAAW,OAAO,UAAU,KAAK;AACvC,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,YAAY,MAAM;AAChB,eAAO,aAAa,SAAS,OAAO;AAAA,MACtC;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,qBAAK,gBAAgB;AAAA,QAC1C,uBAAuB;AAAA,QACvB,yBAAyB;AAAA,QACzB,GAAG;AAAA,QACH,UAAU,CAAC,UAAU,SAAS;AAC5B,mBAAS,UAAU;AACnB,qBAAW,OAAO,GAAG,IAAI;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,OAAO,SAAS,WAAW,SAAS,QAAQ,SAAS,IAAI,aAAa;AAAA,MACtE,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,oBAAoB,GAAG,MAAM;AAAA,MAC9E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,0BAA0B,WAAW,kCAAkC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { FormTokenField } from '../../form-token-field';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedFormTokenField = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(FormTokenField, {\n        __next40pxDefaultSize: true,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required,\n      value: restProps.value && restProps.value.length > 0 ? 'hasvalue' : '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('input[type=\"text\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);"],
+  "mappings": ";AAGA,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,qCAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,kBAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,qBAAK,gBAAgB;AAAA,QAC1C,uBAAuB;AAAA,QACvB,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,OAAO,UAAU,SAAS,UAAU,MAAM,SAAS,IAAI,aAAa;AAAA,MACpE,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,oBAAoB,GAAG,MAAM;AAAA,MAC9E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,0BAA0B,WAAW,kCAAkC;",
   "names": []
 }

package/build-module/validated-form-controls/components/input-control.js

@@ -6,30 +6,20 @@ import InputControl from "../../input-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedInputControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.value);
   return /* @__PURE__ */ _jsx(ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ _jsx(InputControl, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
-      onChange: (value, ...args) => {
-        valueRef.current = value;
-        onChange?.(value, ...args);
-      },
       ...restProps
     })
   });

package/build-module/validated-form-controls/components/input-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/input-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  const valueRef = useRef(restProps.value);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    onValidate: () => {\n      return onValidate?.(valueRef.current);\n    },\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      onChange: (value, ...args) => {\n        valueRef.current = value;\n        onChange?.(value, ...args);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);"],
-  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,WAAW,OAAO,UAAU,KAAK;AACvC,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA,YAAY,MAAM;AAChB,aAAO,aAAa,SAAS,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,cAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,UAAU,CAAC,UAAU,SAAS;AAC5B,iBAAS,UAAU;AACnB,mBAAW,OAAO,GAAG,IAAI;AAAA,MAC3B;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);"],
+  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,cAAc;AAAA,MACxC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;",
   "names": []
 }

package/build-module/validated-form-controls/components/number-control.js

@@ -6,30 +6,20 @@ import NumberControl from "../../number-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedNumberControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.value);
   return /* @__PURE__ */ _jsx(ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ _jsx(NumberControl, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
-      onChange: (value, ...args) => {
-        valueRef.current = value;
-        onChange?.(value, ...args);
-      },
       ...restProps
     })
   });

package/build-module/validated-form-controls/components/number-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/number-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedNumberControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  const valueRef = useRef(restProps.value);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    onValidate: () => {\n      return onValidate?.(valueRef.current);\n    },\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(NumberControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs\n      // TODO: Upstream limitation - When form is submitted when value is undefined, it will\n      // automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n      ,\n      onChange: (value, ...args) => {\n        valueRef.current = value;\n        onChange?.(value, ...args);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);"],
-  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,mBAAmB;AAC1B,SAAS,OAAO,YAAY;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,WAAW,OAAO,UAAU,KAAK;AACvC,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA,YAAY,MAAM;AAChB,aAAO,aAAa,SAAS,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,eAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MAIL,UAAU,CAAC,UAAU,SAAS;AAC5B,iBAAS,UAAU;AACnB,mBAAW,OAAO,GAAG,IAAI;AAAA,MAC3B;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,yBAAyB,WAAW,iCAAiC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedNumberControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(NumberControl, {\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);"],
+  "mappings": ";AAGA,SAAS,YAAY,cAAc;AACnC,SAAS,oBAAoB;AAK7B,SAAS,wBAAwB;AACjC,OAAO,mBAAmB;AAC1B,SAAS,OAAO,YAAY;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,qBAAK,eAAe;AAAA,MACzC,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,yBAAyB,WAAW,iCAAiC;",
   "names": []
 }

package/build-module/validated-form-controls/components/radio-control.js

@@ -6,29 +6,19 @@ import RadioControl from "../../radio-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedRadioControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.selected);
   return /* @__PURE__ */ _jsx(ControlWithError, {
     required,
     markWhenOptional,
     ref: mergedRefs,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="radio"]'),
     children: /* @__PURE__ */ _jsx(RadioControl, {
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });

package/build-module/validated-form-controls/components/radio-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/radio-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport RadioControl from '../../radio-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRadioControl = ({\n  required,\n  onValidate,\n  customValidity,\n  onChange,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  const valueRef = useRef(restProps.selected);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional\n    // TODO: Upstream limitation - RadioControl does not accept a ref.\n    ,\n    ref: mergedRefs,\n    onValidate: () => {\n      return onValidate?.(valueRef.current);\n    },\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"radio\"]'),\n    children: /*#__PURE__*/_jsx(RadioControl, {\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRadioControl = forwardRef(UnforwardedValidatedRadioControl);"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,WAAW,OAAO,UAAU,QAAQ;AAC1C,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IAGA,KAAK;AAAA,IACL,YAAY,MAAM;AAChB,aAAO,aAAa,SAAS,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,qBAAqB;AAAA,IACvF,UAAuB,qBAAK,cAAc;AAAA,MACxC,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport RadioControl from '../../radio-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRadioControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional\n    // TODO: Upstream limitation - RadioControl does not accept a ref.\n    ,\n    ref: mergedRefs,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type=\"radio\"]'),\n    children: /*#__PURE__*/_jsx(RadioControl, {\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRadioControl = forwardRef(UnforwardedValidatedRadioControl);"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,YAAY,cAAc;AAKnC,SAAS,wBAAwB;AACjC,OAAO,kBAAkB;AACzB,SAAS,OAAO,YAAY;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,aAAa,aAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,qBAAK,kBAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IAGA,KAAK;AAAA,IACL;AAAA,IACA,mBAAmB,MAAM,kBAAkB,SAAS,cAAc,qBAAqB;AAAA,IACvF,UAAuB,qBAAK,cAAc;AAAA,MACxC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,wBAAwB,WAAW,gCAAgC;",
   "names": []
 }

package/build-module/validated-form-controls/components/range-control.js

@@ -6,31 +6,21 @@ import RangeControl from "../../range-control";
 import { jsx as _jsx } from "react/jsx-runtime";
 var UnforwardedValidatedRangeControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  const valueRef = useRef(restProps.value);
   return /* @__PURE__ */ _jsx(ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ _jsx(RangeControl, {
       __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });