@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.6deb34194.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/select-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 SelectControl from '../../select-control';\n\n// Only support single value selection\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\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(SelectControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,eAAW,uBAAO,UAAU,KAAK;AACvC,SAAoB,uCAAAA,KAAK,4CAAkB;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,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,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 SelectControl from '../../select-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedSelectControl = ({\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(SelectControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
   "names": ["_jsx", "SelectControl"]
 }

package/build/validated-form-controls/components/text-control.js

@@ -40,31 +40,21 @@ var import_text_control = __toESM(require("../../text-control"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedTextControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  const valueRef = (0, import_element.useRef)(restProps.value);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text_control.default, {
       __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/text-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 TextControl from '../../text-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextControl = ({\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(TextControl, {\n      __next40pxDefaultSize: true,\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,0BAAwB;AACxB,yBAA4B;AAC5B,IAAM,kCAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,eAAW,uBAAO,UAAU,KAAK;AACvC,SAAoB,uCAAAA,KAAK,4CAAkB;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,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,MACvC,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAAuB,2BAAW,+BAA+B;",
+  "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 TextControl from '../../text-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextControl = ({\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(TextControl, {\n      __next40pxDefaultSize: true,\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,qBAAmC;AAKnC,gCAAiC;AACjC,0BAAwB;AACxB,yBAA4B;AAC5B,IAAM,kCAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,MACvC,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,2BAAuB,2BAAW,+BAA+B;",
   "names": ["_jsx", "TextControl"]
 }

package/build/validated-form-controls/components/textarea-control.js

@@ -40,30 +40,20 @@ var import_textarea_control = __toESM(require("../../textarea-control"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedTextareaControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  const valueRef = (0, import_element.useRef)(restProps.value);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_textarea_control.default, {
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/textarea-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 TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\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(TextareaControl, {\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,eAAW,uBAAO,UAAU,KAAK;AACvC,SAAoB,uCAAAA,KAAK,4CAAkB;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,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;",
+  "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 TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\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(TextareaControl, {\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA6B;AAK7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;",
   "names": ["_jsx", "TextareaControl"]
 }

package/build/validated-form-controls/components/toggle-control.js

@@ -40,15 +40,12 @@ var import_toggle_control = __toESM(require("../../toggle-control"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedToggleControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  const valueRef = (0, import_element.useRef)(restProps.checked);
   (0, import_element.useEffect)(() => {
     if (validityTargetRef.current) {
       validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;
@@ -57,18 +54,11 @@ var UnforwardedValidatedToggleControl = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
     required,
     markWhenOptional,
-    onValidate: () => {
-      return onValidate?.(valueRef.current);
-    },
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_control.default, {
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
-      onChange: (value) => {
-        valueRef.current = value;
-        onChange?.(value);
-      },
       ...restProps
     })
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = ({\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\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    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\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(ToggleControl, {\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      onChange: value => {\n        valueRef.current = value;\n        onChange?.(value);\n      },\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAC1B,yBAA4B;AAG5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,QAAM,eAAW,uBAAO,UAAU,OAAO;AAIzC,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IAC7F;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;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,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,UAAU,WAAS;AACjB,iBAAS,UAAU;AACnB,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef, useEffect } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport ToggleControl from '../../toggle-control';\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleControl = ({\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    if (validityTargetRef.current) {\n      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;\n    }\n  }, [required]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(ToggleControl, {\n      __nextHasNoMarginBottom: true,\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,qBAA6B;AAK7B,gCAAiC;AACjC,4BAA0B;AAG1B,yBAA4B;AAC5B,IAAM,oCAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AAIjE,gCAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,WAAW,aAAa,QAAQ,aAAa,SAAS,WAAW;AAAA,IAC7F;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,sBAAAC,SAAe;AAAA,MACzC,yBAAyB;AAAA,MACzB,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,6BAAyB,2BAAW,iCAAiC;",
   "names": ["_jsx", "ToggleControl"]
 }

package/build/validated-form-controls/components/toggle-group-control.js

@@ -29,33 +29,23 @@ var import_toggle_group_control = require("../../toggle-group-control");
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedToggleGroupControl = ({
   required,
-  onValidate,
   customValidity,
-  onChange,
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
-  const valueRef = (0, import_element.useRef)(restProps.value);
   const nameAttr = (0, import_element.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
       required,
       markWhenOptional,
-      onValidate: () => {
-        return onValidate?.(valueRef.current);
-      },
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_group_control.ToggleGroupControl, {
         __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: true,
         ref: forwardedRef,
-        onChange: (value) => {
-          valueRef.current = value;
-          onChange?.(value);
-        },
         ...restProps
       })
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {

package/build/validated-form-controls/components/toggle-group-control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/toggle-group-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\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  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\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(ToggleGroupControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: true,\n        ref: forwardedRef,\n        onChange: value => {\n          valueRef.current = value;\n          onChange?.(value);\n        },\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,gCAAiC;AACjC,kCAAmC;AACnC,yBAA2C;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,eAAW,uBAAO,UAAU,KAAK;AACvC,QAAM,eAAW,sBAAM;AACvB,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;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,uCAAAA,KAAK,gDAAoB;AAAA,QAC9C,yBAAyB;AAAA,QACzB,uBAAuB;AAAA,QACvB,KAAK;AAAA,QACL,UAAU,WAAS;AACjB,mBAAS,UAAU;AACnB,qBAAW,KAAK;AAAA,QAClB;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,kCAA8B,2BAAW,sCAAsC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useId, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedToggleGroupControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const nameAttr = useId();\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ToggleGroupControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: true,\n        ref: forwardedRef,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"radio\",\n      ref: validityTargetRef,\n      required: required,\n      checked: restProps.value !== undefined,\n      tabIndex: -1\n      // A name attribute is needed for the `required` behavior to work.\n      ,\n      name: nameAttr,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[data-active-item=\"true\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,gCAAiC;AACjC,kCAAmC;AACnC,yBAA2C;AAC3C,IAAM,yCAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,eAAW,sBAAM;AACvB,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gDAAoB;AAAA,QAC9C,yBAAyB;AAAA,QACzB,uBAAuB;AAAA,QACvB,KAAK;AAAA,QACL,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAA,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MACA,SAAS,UAAU,UAAU;AAAA,MAC7B,UAAU;AAAA,MAGV,MAAM;AAAA,MACN,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,2BAA2B,GAAG,MAAM;AAAA,MACrF;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,kCAA8B,2BAAW,sCAAsC;",
   "names": ["_jsxs", "_jsx"]
 }

package/build/validated-form-controls/control-with-error.js

@@ -23,10 +23,8 @@ __export(control_with_error_exports, {
   ControlWithError: () => ControlWithError
 });
 module.exports = __toCommonJS(control_with_error_exports);
-var import_compose = require("@wordpress/compose");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
-var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events");
 var import_validity_indicator = require("./validity-indicator");
 var import_jsx_runtime = require("react/jsx-runtime");
 function appendRequiredIndicator(label, required, markWhenOptional) {
@@ -42,30 +40,28 @@ function appendRequiredIndicator(label, required, markWhenOptional) {
   }
   return label;
 }
+var VALIDITY_VISIBLE_ATTRIBUTE = "data-validity-visible";
 function UnforwardedControlWithError({
   required,
   markWhenOptional,
-  onValidate,
   customValidity,
   getValidityTarget,
   children
 }, forwardedRef) {
   const [errorMessage, setErrorMessage] = (0, import_element.useState)();
   const [statusMessage, setStatusMessage] = (0, import_element.useState)();
+  const [showMessage, setShowMessage] = (0, import_element.useState)(false);
   const [isTouched, setIsTouched] = (0, import_element.useState)(false);
-  const previousCustomValidityType = (0, import_compose.usePrevious)(customValidity?.type);
   (0, import_element.useEffect)(() => {
     const validityTarget = getValidityTarget();
-    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);
-    validityTarget?.addEventListener("invalid", showValidationMessage);
-    return () => {
-      validityTarget?.removeEventListener("invalid", showValidationMessage);
+    const handler = () => {
+      setShowMessage(true);
+      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
     };
-  });
+    validityTarget?.addEventListener("invalid", handler);
+    return () => validityTarget?.removeEventListener("invalid", handler);
+  }, [getValidityTarget]);
   (0, import_element.useEffect)(() => {
-    if (!isTouched) {
-      return;
-    }
     const validityTarget = getValidityTarget();
     if (!customValidity?.type) {
       validityTarget?.setCustomValidity("");
@@ -75,20 +71,15 @@ function UnforwardedControlWithError({
     }
     switch (customValidity.type) {
       case "validating": {
-        const timer = setTimeout(() => {
-          validityTarget?.setCustomValidity("");
-          setErrorMessage(void 0);
-          setStatusMessage({
-            type: "validating",
-            message: customValidity.message
-          });
-        }, 1e3);
-        return () => clearTimeout(timer);
+        validityTarget?.setCustomValidity("");
+        setErrorMessage(void 0);
+        setStatusMessage({
+          type: "validating",
+          message: customValidity.message
+        });
+        break;
       }
       case "valid": {
-        if (previousCustomValidityType === "valid") {
-          break;
-        }
         validityTarget?.setCustomValidity("");
         setErrorMessage(validityTarget?.validationMessage);
         setStatusMessage({
@@ -105,51 +96,55 @@ function UnforwardedControlWithError({
         break;
       }
     }
-  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget, previousCustomValidityType]);
+  }, [customValidity, getValidityTarget]);
+  (0, import_element.useEffect)(() => {
+    if (!isTouched || showMessage) {
+      return;
+    }
+    if (customValidity?.type === "validating") {
+      const timer = setTimeout(() => {
+        setShowMessage(true);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }
+    setShowMessage(true);
+  }, [isTouched, customValidity?.type, showMessage]);
   const onBlur = (event) => {
     if (isTouched) {
       return;
     }
     if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
       setIsTouched(true);
-      onValidate?.();
+      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
     }
   };
-  const onChange = (...args) => {
-    children.props.onChange?.(...args);
-    if (isTouched || errorMessage) {
-      onValidate?.();
+  const message = () => {
+    if (errorMessage) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
+        type: "invalid",
+        message: errorMessage
+      });
     }
-  };
-  const onKeyDown = (event) => {
-    if (event.key === "Enter") {
-      onValidate?.();
+    if (statusMessage?.type) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
+        type: statusMessage.type,
+        message: statusMessage.message
+      });
     }
+    return null;
   };
-  return (
-    // Disable reason: Just listening to a bubbled event, not for interaction.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-      className: "components-validated-control",
-      ref: forwardedRef,
-      onBlur,
-      onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(onKeyDown),
-      children: [(0, import_element.cloneElement)(children, {
-        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
-        onChange,
-        required
-      }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-        "aria-live": "polite",
-        children: [errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
-          type: "invalid",
-          message: errorMessage
-        }), !errorMessage && statusMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
-          type: statusMessage.type,
-          message: statusMessage.message
-        })]
-      })]
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+    className: "components-validated-control",
+    ref: forwardedRef,
+    onBlur,
+    children: [(0, import_element.cloneElement)(children, {
+      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
+      required
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      "aria-live": "polite",
+      children: showMessage && message()
+    })]
+  });
 }
 var ControlWithError = (0, import_element.forwardRef)(UnforwardedControlWithError);
 // Annotate the CommonJS export names for ESM import in node:

package/build/validated-form-controls/control-with-error.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  onValidate,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [isTouched, setIsTouched] = useState(false);\n  const previousCustomValidityType = usePrevious(customValidity?.type);\n\n  // Ensure that error messages are visible after user attemps to submit a form\n  // with multiple invalid fields.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);\n    validityTarget?.addEventListener('invalid', showValidationMessage);\n    return () => {\n      validityTarget?.removeEventListener('invalid', showValidationMessage);\n    };\n  });\n  useEffect(() => {\n    if (!isTouched) {\n      return;\n    }\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          // Wait before showing a validating state.\n          const timer = setTimeout(() => {\n            validityTarget?.setCustomValidity('');\n            setErrorMessage(undefined);\n            setStatusMessage({\n              type: 'validating',\n              message: customValidity.message\n            });\n          }, 1000);\n          return () => clearTimeout(timer);\n        }\n      case 'valid':\n        {\n          // Ensures that we wait for any async responses before showing\n          // a synchronously valid state.\n          if (previousCustomValidityType === 'valid') {\n            break;\n          }\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          var _customValidity$messa;\n          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget, previousCustomValidityType]);\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      onValidate?.();\n    }\n  };\n  const onChange = (...args) => {\n    children.props.onChange?.(...args);\n\n    // Only validate incrementally if the field has blurred at least once,\n    // or currently has an error message.\n    if (isTouched || errorMessage) {\n      onValidate?.();\n    }\n  };\n  const onKeyDown = event => {\n    // Ensures that custom validators are triggered when the user submits by pressing Enter,\n    // without ever blurring the control.\n    if (event.key === 'Enter') {\n      onValidate?.();\n    }\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reason: Just listening to a bubbled event, not for interaction.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsxs(\"div\", {\n      className: \"components-validated-control\",\n      ref: forwardedRef,\n      onBlur: onBlur,\n      onKeyDown: withIgnoreIMEEvents(onKeyDown),\n      children: [cloneElement(children, {\n        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n        onChange,\n        required\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        \"aria-live\": \"polite\",\n        children: [errorMessage && /*#__PURE__*/_jsx(ValidityIndicator, {\n          type: \"invalid\",\n          message: errorMessage\n        }), !errorMessage && statusMessage && /*#__PURE__*/_jsx(ValidityIndicator, {\n          type: statusMessage.type,\n          message: statusMessage.message\n        })]\n      })]\n    })\n  );\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          var _customValidity$messa;\n          validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const message = () => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control\",\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: showMessage && message()\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build-module/alignment-matrix-control/cell.js

@@ -1,9 +1,135 @@
 // packages/components/src/alignment-matrix-control/cell.tsx
+import clsx from "clsx";
 import { Composite } from "../composite";
 import Tooltip from "../tooltip";
 import { VisuallyHidden } from "../visually-hidden";
 import { ALIGNMENT_LABEL } from "./utils";
-import { Cell as CellView, Point } from "./styles";
+
+// packages/components/src/alignment-matrix-control/style.module.scss
+var css = `/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.style-module__grid-container__AuKvW {
+  direction: ltr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+.style-module__grid-row__xCH47 {
+  grid-column: 1/-1;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.style-module__cell__Ovdp9 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  outline: none;
+}
+
+.style-module__point__N-8S1 {
+  display: block;
+  contain: strict;
+  box-sizing: border-box;
+  width: 6px;
+  aspect-ratio: 1;
+  margin: auto;
+  color: var(--wp-components-color-gray-400, #ccc);
+  /* Use border instead of background color so that the point shows
+  in Windows High Contrast Mode */
+  border: 3px solid currentColor;
+  /* Highlight active item */
+}
+.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  transform: scale(1.6666666667);
+}
+.style-module__point__N-8S1 {
+  /* Hover styles for non-active items */
+}
+.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+.style-module__point__N-8S1 {
+  /* Show an outline only when interacting with keyboard */
+}
+.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {
+  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: 1px;
+}
+@media not (prefers-reduced-motion) {
+  .style-module__point__N-8S1 {
+    transition-property: color, transform;
+    transition-duration: 120ms;
+    transition-timing-function: linear;
+  }
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_module_default = {
+  "grid-container": "style-module__grid-container__AuKvW",
+  "grid-row": "style-module__grid-row__xCH47",
+  "cell": "style-module__cell__Ovdp9",
+  "point": "style-module__point__N-8S1"
+};
+
+// packages/components/src/alignment-matrix-control/cell.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Cell({
   id,
@@ -14,13 +140,15 @@ function Cell({
     text: ALIGNMENT_LABEL[value],
     children: /* @__PURE__ */ _jsxs(Composite.Item, {
       id,
-      render: /* @__PURE__ */ _jsx(CellView, {
+      render: /* @__PURE__ */ _jsx("span", {
         ...props,
+        className: clsx(style_module_default.cell, props.className),
         role: "gridcell"
       }),
       children: [/* @__PURE__ */ _jsx(VisuallyHidden, {
         children: value
-      }), /* @__PURE__ */ _jsx(Point, {
+      }), /* @__PURE__ */ _jsx("span", {
+        className: style_module_default.point,
         role: "presentation"
       })]
     })

package/build-module/alignment-matrix-control/cell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/alignment-matrix-control/cell.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport { Cell as CellView, Point } from './styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(CellView, {\n        ...props,\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(Point, {\n        role: \"presentation\"\n      })]\n    })\n  });\n}"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;AAChC,SAAS,QAAQ,UAAU,aAAa;AACxC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,SAAS;AAAA,IAChC,MAAM,gBAAgB,KAAK;AAAA,IAC3B,UAAuB,sBAAM,UAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,qBAAK,UAAU;AAAA,QAClC,GAAG;AAAA,QACH,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,OAAO;AAAA,QAC3B,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../src/alignment-matrix-control/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.style-module__grid-container__AuKvW {\n  direction: ltr;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  box-sizing: border-box;\n  aspect-ratio: 1;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  outline: none;\n  cursor: pointer;\n}\n\n.style-module__grid-row__xCH47 {\n  grid-column: 1/-1;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.style-module__cell__Ovdp9 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  border: none;\n  outline: none;\n}\n\n.style-module__point__N-8S1 {\n  display: block;\n  contain: strict;\n  box-sizing: border-box;\n  width: 6px;\n  aspect-ratio: 1;\n  margin: auto;\n  color: var(--wp-components-color-gray-400, #ccc);\n  /* Use border instead of background color so that the point shows\n  in Windows High Contrast Mode */\n  border: 3px solid currentColor;\n  /* Highlight active item */\n}\n.style-module__cell__Ovdp9[data-active-item] .style-module__point__N-8S1 {\n  color: var(--wp-components-color-foreground, #1e1e1e);\n  transform: scale(1.6666666667);\n}\n.style-module__point__N-8S1 {\n  /* Hover styles for non-active items */\n}\n.style-module__cell__Ovdp9:not([data-active-item]):hover .style-module__point__N-8S1 {\n  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n}\n.style-module__point__N-8S1 {\n  /* Show an outline only when interacting with keyboard */\n}\n.style-module__cell__Ovdp9[data-focus-visible] .style-module__point__N-8S1 {\n  outline: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n  outline-offset: 1px;\n}\n@media not (prefers-reduced-motion) {\n  .style-module__point__N-8S1 {\n    transition-property: color, transform;\n    transition-duration: 120ms;\n    transition-timing-function: linear;\n  }\n}`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"grid-container\": \"style-module__grid-container__AuKvW\",\n  \"grid-row\": \"style-module__grid-row__xCH47\",\n  \"cell\": \"style-module__cell__Ovdp9\",\n  \"point\": \"style-module__point__N-8S1\"\n};"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;;;ACfhC,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,uBAAQ;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AACX;;;AD3GA,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,SAAS;AAAA,IAChC,MAAM,gBAAgB,KAAK;AAAA,IAC3B,UAAuB,sBAAM,UAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,qBAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,WAAW,KAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": []
 }