@wordpress/components 29.12.0 → 30.0.0

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedRangeControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _rangeControl = _interopRequireDefault(require("../../range-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedRangeControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      ref: mergedRefs,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedRangeControl = exports.ValidatedRangeControl = (0, _element.forwardRef)(UnforwardedValidatedRangeControl);
+//# sourceMappingURL=range-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_controlWithError","_rangeControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRangeControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedRangeControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/range-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 type { ValidatedControlProps } from './types';\nimport RangeControl from '../../range-control';\nimport type { RangeControlProps } from '../../range-control/types';\n\ntype Value = RangeControlProps[ 'value' ];\n\nconst UnforwardedValidatedRangeControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof RangeControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<RangeControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedRangeControl = forwardRef(\n\tUnforwardedValidatedRangeControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAX/C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,gCAAgC,GAAGA,CACxC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,aAAA,CAAAqB,OAAY;MACZC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CxB,gCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedSelectControl = void 0;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _controlWithError = require("../control-with-error");
+var _selectControl = _interopRequireDefault(require("../../select-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// Only support single value selection
+
+const UnforwardedValidatedSelectControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
+      ref: mergedRefs,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedSelectControl = exports.ValidatedSelectControl = (0, _element.forwardRef)(UnforwardedValidatedSelectControl);
+//# sourceMappingURL=select-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","_controlWithError","_selectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedSelectControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","ValidatedSelectControl","exports","forwardRef"],"sources":["@wordpress/components/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';\nimport type { ValidatedControlProps } from './types';\nimport type { SelectControlProps as _SelectControlProps } from '../../select-control/types';\n\n// Only support single value selection\ntype SelectControlProps = Omit<\n\t_SelectControlProps,\n\t'multiple' | 'onChange' | 'value'\n> & {\n\tonChange?: ( value: string ) => void;\n\tvalue?: string;\n};\n\ntype Value = SelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedSelectControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof SelectControl >,\n\t\t| '__next40pxDefaultSize'\n\t\t| '__nextHasNoMarginBottom'\n\t\t| 'multiple'\n\t\t| 'onChange'\n\t\t| 'value'\n\t> & {\n\t\tvalue?: string;\n\t\tonChange: ( value: string ) => void;\n\t} & ValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLSelectElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedSelectControl = forwardRef(\n\tUnforwardedValidatedSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAVjD;AACA;AACA;;AAIA;AACA;AACA;;AAMA;;AAWA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAW6B,CAAC,EAClCC,YAAqD,KACjD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,cAAA,CAAAqB,OAAa;MACbC,uBAAuB;MACvBC,qBAAqB;MACrBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CxB,iCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedTextControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _textControl = _interopRequireDefault(require("../../text-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedTextControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textControl.default, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      ref: mergedRefs,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedTextControl = exports.ValidatedTextControl = (0, _element.forwardRef)(UnforwardedValidatedTextControl);
+//# sourceMappingURL=text-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_controlWithError","_textControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","__nextHasNoMarginBottom","ref","ValidatedTextControl","exports","forwardRef"],"sources":["@wordpress/components/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 type { ValidatedControlProps } from './types';\nimport TextControl from '../../text-control';\nimport type { TextControlProps } from '../../text-control/types';\n\ntype Value = TextControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextControl = forwardRef(\n\tUnforwardedValidatedTextControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAX7C;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,+BAA+B,GAAGA,CACvC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,YAAA,CAAAqB,OAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,mBAAU,EAC7CxB,+BACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedTextareaControl = void 0;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _controlWithError = require("../control-with-error");
+var _textareaControl = _interopRequireDefault(require("../../textarea-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedTextareaControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textareaControl.default, {
+      __nextHasNoMarginBottom: true,
+      ref: mergedRefs,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedTextareaControl = exports.ValidatedTextareaControl = (0, _element.forwardRef)(UnforwardedValidatedTextareaControl);
+//# sourceMappingURL=textarea-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","_controlWithError","_textareaControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedTextareaControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","ValidatedTextareaControl","exports","forwardRef"],"sources":["@wordpress/components/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 type { ValidatedControlProps } from './types';\nimport TextareaControl from '../../textarea-control';\nimport type { TextareaControlProps } from '../../textarea-control/types';\n\ntype Value = TextareaControlProps[ 'value' ];\n\nconst UnforwardedValidatedTextareaControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof TextareaControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLTextAreaElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLTextAreaElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedTextareaControl = forwardRef(\n\tUnforwardedValidatedTextareaControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAuD,KACnD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAyB,IAAK,CAAC;EAC/D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;EAEnD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KAAMT,iBAAiB,CAACQ,OAAS;IAAAE,QAAA,eAErD,IAAAlB,WAAA,CAAAc,GAAA,EAAChB,gBAAA,CAAAqB,OAAe;MACfC,uBAAuB;MACvBC,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAKS,KAAK,IAAM;QACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAM,CAAC;MACpB,CAAG;MAAA,GACEP;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMgB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDvB,mCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedToggleControl = void 0;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _controlWithError = require("../control-with-error");
+var _toggleControl = _interopRequireDefault(require("../../toggle-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// TODO: Should we customize the default `missingValue` message? It says to "check this box".
+
+const UnforwardedValidatedToggleControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.checked);
+
+  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+  // so we need to set it manually.
+  (0, _element.useEffect)(() => {
+    if (validityTargetRef.current) {
+      validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;
+    }
+  }, [required]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleControl.default, {
+      __nextHasNoMarginBottom: true,
+      ref: mergedRefs,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedToggleControl = exports.ValidatedToggleControl = (0, _element.forwardRef)(UnforwardedValidatedToggleControl);
+//# sourceMappingURL=toggle-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","_controlWithError","_toggleControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedToggleControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","useEffect","current","jsx","ControlWithError","getValidityTarget","children","default","__nextHasNoMarginBottom","ref","value","ValidatedToggleControl","exports","forwardRef"],"sources":["@wordpress/components/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 type { ValidatedControlProps } from './types';\nimport ToggleControl from '../../toggle-control';\nimport type { ToggleControlProps } from '../../toggle-control/types';\n\ntype Value = ToggleControlProps[ 'checked' ];\n\n// TODO: Should we customize the default `missingValue` message? It says to \"check this box\".\n\nconst UnforwardedValidatedToggleControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tif ( validityTargetRef.current ) {\n\t\t\tvalidityTargetRef.current.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedToggleControl = forwardRef(\n\tUnforwardedValidatedToggleControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAiD,IAAAK,WAAA,GAAAL,OAAA;AAXjD;AACA;AACA;;AAIA;AACA;AACA;;AAQA;;AAEA,MAAMM,iCAAiC,GAAGA,CACzC;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;;EAErD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKN,iBAAiB,CAACO,OAAO,EAAG;MAChCP,iBAAiB,CAACO,OAAO,CAACb,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACvD;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,oBACC,IAAAF,WAAA,CAAAgB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;IAChBf,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCF,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACG,OAAQ,CAAC;IAC7C,CAAG;IACHG,iBAAiB,EAAGA,CAAA,KAAMV,iBAAiB,CAACO,OAAS;IAAAI,QAAA,eAErD,IAAAnB,WAAA,CAAAgB,GAAA,EAAClB,cAAA,CAAAsB,OAAa;MACbC,uBAAuB;MACvBC,GAAG,EAAGZ,UAAY;MAClBN,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACG,OAAO,GAAGQ,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,mBAAU,EAC/CzB,iCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedToggleGroupControl = void 0;
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _toggleGroupControl = require("../../toggle-group-control");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedToggleGroupControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  const nameAttr = (0, _element.useId)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "components-validated-control__wrapper-with-error-delegate",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      customValidator: () => {
+        return customValidator?.(valueRef.current);
+      },
+      getValidityTarget: () => validityTargetRef.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControl, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        ref: forwardedRef
+        // TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
+        // setting a value has a visual bug.
+        ,
+        onChange: value => {
+          valueRef.current = value;
+          onChange?.(value);
+        },
+        ...restProps
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: "components-validated-control__error-delegate",
+      type: "radio",
+      ref: validityTargetRef,
+      required: required,
+      checked: restProps.value !== null,
+      tabIndex: -1
+      // A name attribute is needed for the `required` behavior to work.
+      ,
+      name: nameAttr,
+      onChange: () => {},
+      onFocus: e => {
+        e.target.previousElementSibling?.querySelector('[data-active-item="true"]')?.focus();
+      }
+    })]
+  });
+};
+const ValidatedToggleGroupControl = exports.ValidatedToggleGroupControl = (0, _element.forwardRef)(UnforwardedValidatedToggleGroupControl);
+//# sourceMappingURL=toggle-group-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_controlWithError","_toggleGroupControl","_jsxRuntime","UnforwardedValidatedToggleGroupControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","nameAttr","useId","jsxs","className","children","jsx","ControlWithError","current","getValidityTarget","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","type","checked","tabIndex","name","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedToggleGroupControl","exports","forwardRef"],"sources":["@wordpress/components/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 type { ValidatedControlProps } from './types';\nimport { ToggleGroupControl } from '../../toggle-group-control';\nimport type { ToggleGroupControlProps } from '../../toggle-group-control/types';\n\ntype Value = ToggleGroupControlProps[ 'value' ];\n\nconst UnforwardedValidatedToggleGroupControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ToggleGroupControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\tconst nameAttr = useId();\n\n\treturn (\n\t\t<div className=\"components-validated-control__wrapper-with-error-delegate\">\n\t\t\t<ControlWithError\n\t\t\t\trequired={ required }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tcustomValidator={ () => {\n\t\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t\t} }\n\t\t\t\tgetValidityTarget={ () => validityTargetRef.current }\n\t\t\t>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then\n\t\t\t\t\t// setting a value has a visual bug.\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\t\tonChange?.( value );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t/>\n\t\t\t</ControlWithError>\n\t\t\t<input\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\tchecked={ restProps.value !== null }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\t// A name attribute is needed for the `required` behavior to work.\n\t\t\t\tname={ nameAttr }\n\t\t\t\tonChange={ () => {} }\n\t\t\t\tonFocus={ ( e ) => {\n\t\t\t\t\te.target.previousElementSibling\n\t\t\t\t\t\t?.querySelector< HTMLButtonElement | HTMLInputElement >(\n\t\t\t\t\t\t\t'[data-active-item=\"true\"]'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t?.focus();\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedToggleGroupControl = forwardRef(\n\tUnforwardedValidatedToggleGroupControl\n);\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAVhE;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,sCAAsC,GAAGA,CAC9C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,MAAMC,QAAQ,GAAG,IAAAC,cAAK,EAAC,CAAC;EAExB,oBACC,IAAAb,WAAA,CAAAc,IAAA;IAAKC,SAAS,EAAC,2DAA2D;IAAAC,QAAA,gBACzE,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAChBhB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACS,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMZ,iBAAiB,CAACW,OAAS;MAAAH,QAAA,eAErD,IAAAhB,WAAA,CAAAiB,GAAA,EAAClB,mBAAA,CAAAsB,kBAAkB;QAClBC,uBAAuB;QACvBC,qBAAqB;QACrBC,GAAG,EAAGjB;QACN;QACA;QAAA;QACAH,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACS,OAAO,GAAGR,KAAK;UACxBP,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAN,WAAA,CAAAiB,GAAA;MACCF,SAAS,EAAC,8CAA8C;MACxDU,IAAI,EAAC,OAAO;MACZD,GAAG,EAAGhB,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBwB,OAAO,EAAGpB,SAAS,CAACK,KAAK,KAAK,IAAM;MACpCgB,QAAQ,EAAG,CAAC;MACZ;MAAA;MACAC,IAAI,EAAGhB,QAAU;MACjBR,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrByB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,2BACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX;IAAG,CACH,CAAC;EAAA,CACE,CAAC;AAER,CAAC;AAEM,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpDpC,sCACD,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/validated-form-controls/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/components/types.ts"],"sourcesContent":["export type ValidatedControlProps< V > = {\n\t/**\n\t * Whether the control is required.\n\t * @default false\n\t */\n\trequired?: boolean;\n\t/**\n\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t * @default false\n\t */\n\tmarkWhenOptional?: boolean;\n\t/**\n\t * A function that returns a custom validity message when applicable. This error message will be applied to the\n\t * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).\n\t * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and\n\t * will be prioritized over any existing validity messages dictated by the HTML attributes.\n\t * An empty string or `undefined` return value will clear any existing custom validity message.\n\t *\n\t * Make sure you don't programatically pass a value (such as an initial value) to the control component\n\t * that fails this validator, because the validator will only run for user-initiated changes.\n\t *\n\t * Always prefer using standard HTML attributes like `required` and `min`/`max` over custom validators\n\t * when possible, as they are simpler and have localized error messages built in.\n\t */\n\t// TODO: Technically, we could add an optional `customValidity` string prop so the consumer can set\n\t// an error message at any point in time. We should wait until we have a use case though.\n\tcustomValidator?: ( currentValue: V ) => string | void;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ControlWithError = void 0;
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
+var _icon = _interopRequireDefault(require("../icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function appendRequiredIndicator(label, required, markWhenOptional) {
+  if (required && !markWhenOptional) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [label, " ", `(${(0, _i18n.__)('Required')})`]
+    });
+  }
+  if (!required && markWhenOptional) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [label, " ", `(${(0, _i18n.__)('Optional')})`]
+    });
+  }
+  return label;
+}
+
+/**
+ * HTML elements that support the Constraint Validation API.
+ *
+ * Here, we exclude HTMLButtonElement because although it does technically support the API,
+ * normal buttons are actually exempted from any validation.
+ * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate
+ */
+
+function UnforwardedControlWithError({
+  required,
+  markWhenOptional,
+  customValidator,
+  getValidityTarget,
+  children
+}, forwardedRef) {
+  const [errorMessage, setErrorMessage] = (0, _element.useState)();
+  const [isTouched, setIsTouched] = (0, _element.useState)(false);
+
+  // Ensure that error messages are visible after user attemps to submit a form
+  // with multiple invalid fields.
+  (0, _element.useEffect)(() => {
+    const validityTarget = getValidityTarget();
+    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);
+    validityTarget?.addEventListener('invalid', showValidationMessage);
+    return () => {
+      validityTarget?.removeEventListener('invalid', showValidationMessage);
+    };
+  });
+  const validate = () => {
+    const message = customValidator?.();
+    const validityTarget = getValidityTarget();
+    validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : '');
+    setErrorMessage(validityTarget?.validationMessage);
+  };
+  const onBlur = event => {
+    // Only consider "blurred from the component" if focus has fully left the wrapping div.
+    // This prevents unnecessary blurs from components with multiple focusable elements.
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+      setIsTouched(true);
+      const validityTarget = getValidityTarget();
+
+      // Prevents a double flash of the native error tooltip when the control is already showing one.
+      if (!validityTarget?.validity.valid) {
+        if (!errorMessage) {
+          setErrorMessage(validityTarget?.validationMessage);
+        }
+        return;
+      }
+      validate();
+    }
+  };
+  const onChange = (...args) => {
+    children.props.onChange?.(...args);
+
+    // Only validate incrementally if the field has blurred at least once,
+    // or currently has an error message.
+    if (isTouched || errorMessage) {
+      validate();
+    }
+  };
+  const onKeyDown = event => {
+    // Ensures that custom validators are triggered when the user submits by pressing Enter,
+    // without ever blurring the control.
+    if (event.key === 'Enter') {
+      validate();
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // Disable reason: Just listening to a bubbled event, not for interaction.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("div", {
+      className: "components-validated-control",
+      ref: forwardedRef,
+      onBlur: onBlur,
+      onKeyDown: (0, _withIgnoreImeEvents.withIgnoreIMEEvents)(onKeyDown),
+      children: [(0, _element.cloneElement)(children, {
+        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
+        onChange,
+        required
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "aria-live": "polite",
+        children: errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          className: "components-validated-control__error",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+            className: "components-validated-control__error-icon",
+            icon: _icons.error,
+            size: 16,
+            fill: "currentColor"
+          }), errorMessage]
+        })
+      })]
+    })
+  );
+}
+const ControlWithError = exports.ControlWithError = (0, _element.forwardRef)(UnforwardedControlWithError);
+//# sourceMappingURL=control-with-error.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_icons","_element","_withIgnoreImeEvents","_icon","_interopRequireDefault","_jsxRuntime","appendRequiredIndicator","label","required","markWhenOptional","jsxs","Fragment","children","__","UnforwardedControlWithError","customValidator","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","useState","isTouched","setIsTouched","useEffect","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","validate","message","setCustomValidity","onBlur","event","relatedTarget","currentTarget","contains","validity","valid","onChange","args","props","onKeyDown","key","className","ref","withIgnoreIMEEvents","cloneElement","jsx","default","icon","error","size","fill","ControlWithError","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { error } from '@wordpress/icons';\n\n/**\n * External dependencies\n */\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nimport Icon from '../icon';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn 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 */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tcustomValidator,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * A function that returns a custom validity message when applicable.\n\t\t *\n\t\t * This message will be applied to the element returned by `getValidityTarget`.\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\n\t\t */\n\t\tcustomValidator?: () => string | void;\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tconst validate = () => {\n\t\tconst message = customValidator?.();\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tvalidityTarget?.setCustomValidity( message ?? '' );\n\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t};\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\n\t\t\tconst validityTarget = getValidityTarget();\n\n\t\t\t// Prevents a double flash of the native error tooltip when the control is already showing one.\n\t\t\tif ( ! validityTarget?.validity.valid ) {\n\t\t\t\tif ( ! errorMessage ) {\n\t\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<p className=\"components-validated-control__error\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__error-icon\"\n\t\t\t\t\t\t\ticon={ error }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}

package/build/validated-form-controls/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});
+var _controlWithError = require("./control-with-error");
+Object.keys(_controlWithError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _controlWithError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _controlWithError[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/validated-form-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_controlWithError"],"sources":["@wordpress/components/src/validated-form-controls/index.ts"],"sourcesContent":["export * from './components';\nexport * from './control-with-error';\n"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,iBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,iBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,iBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,iBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/build-module/autocomplete/index.js

@@ -78,6 +78,10 @@ export function useAutocomplete({
     // Reset autocomplete state after insertion rather than before
     // so insertion events don't cause the completion menu to redisplay.
     reset();
+
+    // Make sure that the content remains focused after making a selection
+    // and that the text cursor position is not lost.
+    contentRef.current?.focus();
   }
   function reset() {
     setSelectedIndex(0);