@wordpress/components 29.12.0 → 30.0.0

package/build/utils/hooks/use-controlled-value.js

@@ -27,15 +27,19 @@ function useControlledValue({
   const initialValue = hasValue ? valueProp : defaultValue;
   const [state, setState] = (0, _element.useState)(initialValue);
   const value = hasValue ? valueProp : state;
+  const uncontrolledSetValue = (0, _element.useCallback)((nextValue, ...args) => {
+    setState(nextValue);
+    onChange?.(nextValue, ...args);
+  }, [onChange]);
   let setValue;
   if (hasValue && typeof onChange === 'function') {
+    // Controlled mode.
     setValue = onChange;
   } else if (!hasValue && typeof onChange === 'function') {
-    setValue = nextValue => {
-      onChange(nextValue);
-      setState(nextValue);
-    };
+    // Uncontrolled mode, plus forwarding to the onChange prop.
+    setValue = uncontrolledSetValue;
   } else {
+    // Uncontrolled mode, only update internal state.
     setValue = setState;
   }
   return [value, setValue];

package/build/utils/hooks/use-controlled-value.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","useState","setValue","nextValue"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T ) => void;\n};\n\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tlet setValue: ( nextValue: T ) => void;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = ( nextValue ) => {\n\t\t\tonChange( nextValue );\n\t\t\tsetState( nextValue );\n\t\t};\n\t} else {\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue as typeof setState ] as const;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EACf,MAAMC,QAAQ,GAAG,OAAOD,SAAS,KAAK,WAAW;EACjD,MAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEM,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEH,YAAa,CAAC;EACpD,MAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAS,GAAGG,KAAK;EAE1C,IAAIG,QAAkC;EACtC,IAAKL,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IACjDQ,QAAQ,GAAGR,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEG,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IAC1DQ,QAAQ,GAAKC,SAAS,IAAM;MAC3BT,QAAQ,CAAES,SAAU,CAAC;MACrBH,QAAQ,CAAEG,SAAU,CAAC;IACtB,CAAC;EACF,CAAC,MAAM;IACND,QAAQ,GAAGF,QAAQ;EACpB;EAEA,OAAO,CAAEL,KAAK,EAAEO,QAAQ,CAAqB;AAC9C","ignoreList":[]}
+{"version":3,"names":["_element","require","useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","useState","uncontrolledSetValue","useCallback","nextValue","args","setValue"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T, ...args: any[] ) => void;\n};\n\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tconst uncontrolledSetValue = useCallback(\n\t\t( nextValue: T, ...args: any[] ) => {\n\t\t\tsetState( nextValue );\n\t\t\tonChange?.( nextValue, ...args );\n\t\t},\n\t\t[ onChange ]\n\t);\n\n\tlet setValue: typeof onChange;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\t// Controlled mode.\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\t// Uncontrolled mode, plus forwarding to the onChange prop.\n\t\tsetValue = uncontrolledSetValue;\n\t} else {\n\t\t// Uncontrolled mode, only update internal state.\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue ] as const;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EACf,MAAMC,QAAQ,GAAG,OAAOD,SAAS,KAAK,WAAW;EACjD,MAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEM,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEH,YAAa,CAAC;EACpD,MAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAS,GAAGG,KAAK;EAE1C,MAAMG,oBAAoB,GAAG,IAAAC,oBAAW,EACvC,CAAEC,SAAY,EAAE,GAAGC,IAAW,KAAM;IACnCL,QAAQ,CAAEI,SAAU,CAAC;IACrBV,QAAQ,GAAIU,SAAS,EAAE,GAAGC,IAAK,CAAC;EACjC,CAAC,EACD,CAAEX,QAAQ,CACX,CAAC;EAED,IAAIY,QAAyB;EAC7B,IAAKT,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IACjD;IACAY,QAAQ,GAAGZ,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEG,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IAC1D;IACAY,QAAQ,GAAGJ,oBAAoB;EAChC,CAAC,MAAM;IACN;IACAI,QAAQ,GAAGN,QAAQ;EACpB;EAEA,OAAO,CAAEL,KAAK,EAAEW,QAAQ,CAAE;AAC3B","ignoreList":[]}

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedCheckboxControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _checkboxControl = _interopRequireDefault(require("../../checkbox-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedCheckboxControl = ({
+  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);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    ref: mergedRefs,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="checkbox"]'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxControl.default, {
+      __nextHasNoMarginBottom: true,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      }
+      // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
+      ,
+      ...restProps
+    })
+  });
+};
+const ValidatedCheckboxControl = exports.ValidatedCheckboxControl = (0, _element.forwardRef)(UnforwardedValidatedCheckboxControl);
+//# sourceMappingURL=checkbox-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_controlWithError","_checkboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCheckboxControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","__nextHasNoMarginBottom","value","ValidatedCheckboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/checkbox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport CheckboxControl from '../../checkbox-control';\nimport type { CheckboxControlProps } from '../../checkbox-control/types';\n\ntype Value = CheckboxControlProps[ 'checked' ];\n\nconst UnforwardedValidatedCheckboxControl = (\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 CheckboxControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"checkbox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<CheckboxControl\n\t\t\t\t__nextHasNoMarginBottom\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// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedCheckboxControl = forwardRef(\n\tUnforwardedValidatedCheckboxControl\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,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;EAErD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCW,GAAG,EAAGN,UAAY;IAClBP,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACK,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,eAED,IAAApB,WAAA,CAAAc,GAAA,EAAChB,gBAAA,CAAAuB,OAAe;MACfC,uBAAuB;MACvBlB,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACK,OAAO,GAAGM,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDzB,mCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedComboboxControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _comboboxControl = _interopRequireDefault(require("../../combobox-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedComboboxControl = ({
+  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);
+
+  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+  // so we need to set it manually.
+  (0, _element.useEffect)(() => {
+    const input = validityTargetRef.current?.querySelector('input[role="combobox"]');
+    if (input) {
+      input.required = required !== null && required !== void 0 ? required : false;
+    }
+  }, [required]);
+  return (
+    /*#__PURE__*/
+    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
+    (0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      ref: mergedRefs,
+      customValidator: () => {
+        return customValidator?.(valueRef.current);
+      },
+      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboboxControl.default, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        ...restProps,
+        onChange: value => {
+          valueRef.current = value;
+          onChange?.(value);
+        }
+      })
+    })
+  );
+};
+const ValidatedComboboxControl = exports.ValidatedComboboxControl = (0, _element.forwardRef)(UnforwardedValidatedComboboxControl);
+//# sourceMappingURL=combobox-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_controlWithError","_comboboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedComboboxControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","useEffect","input","current","querySelector","jsx","ControlWithError","ref","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/combobox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ComboboxControl from '../../combobox-control';\nimport type { ComboboxControlProps } from '../../combobox-control/types';\n\ntype Value = ComboboxControlProps[ 'value' ];\n\nconst UnforwardedValidatedComboboxControl = (\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 ComboboxControl >,\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\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\tconst input =\n\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t);\n\t\tif ( input ) {\n\t\t\tinput.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<ComboboxControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...restProps }\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/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedComboboxControl = forwardRef(\n\tUnforwardedValidatedComboboxControl\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,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;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,KAAK,GACVP,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,CAACb,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACA,IAAAF,WAAA,CAAAkB,GAAA,EAACrB,iBAAA,CAAAsB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCe,GAAG,EAAGV,UAAY;MAClBP,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;MAC7C,CAAG;MACHK,iBAAiB,EAAGA,CAAA,KACnBb,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAK,QAAA,eAED,IAAAtB,WAAA,CAAAkB,GAAA,EAACpB,gBAAA,CAAAyB,OAAe;QACfC,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBnB,SAAS;QACdF,QAAQ,EAAKS,KAAK,IAAM;UACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;UACxBT,QAAQ,GAAIS,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAEM,MAAMa,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjD3B,mCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedCustomSelectControl = void 0;
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _customSelectControl = _interopRequireDefault(require("../../custom-select-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedCustomSelectControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "components-validated-control__wrapper-with-error-delegate",
+    ref: forwardedRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      customValidator: () => {
+        return customValidator?.(valueRef.current);
+      },
+      getValidityTarget: () => validityTargetRef.current,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelectControl.default
+      // TODO: Upstream limitation - Required isn't passed down correctly,
+      // so it needs to be set on a delegate element.
+      , {
+        __next40pxDefaultSize: true,
+        onChange: value => {
+          valueRef.current = value.selectedItem;
+          onChange?.(value);
+        },
+        ...restProps
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      className: "components-validated-control__error-delegate",
+      ref: validityTargetRef,
+      required: required,
+      tabIndex: -1,
+      value: restProps.value?.key ? 'hasvalue' : '',
+      onChange: () => {},
+      onFocus: e => {
+        e.target.previousElementSibling?.querySelector('[role="combobox"]')?.focus();
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "",
+        children: "No selection"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "hasvalue",
+        children: "Has selection"
+      })]
+    })]
+  });
+};
+const ValidatedCustomSelectControl = exports.ValidatedCustomSelectControl = (0, _element.forwardRef)(UnforwardedValidatedCustomSelectControl);
+//# sourceMappingURL=custom-select-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_controlWithError","_customSelectControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCustomSelectControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","valueRef","value","jsxs","className","ref","children","jsx","ControlWithError","current","getValidityTarget","default","__next40pxDefaultSize","selectedItem","tabIndex","key","onFocus","e","target","previousElementSibling","querySelector","focus","ValidatedCustomSelectControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/custom-select-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport CustomSelectControl from '../../custom-select-control';\nimport type {\n\tCustomSelectOption,\n\tCustomSelectProps,\n} from '../../custom-select-control/types';\n\ntype CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;\n\ntype Value = CustomSelectControlProps[ 'value' ];\n\nconst UnforwardedValidatedCustomSelectControl = (\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 CustomSelectControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLSelectElement >( null );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"components-validated-control__wrapper-with-error-delegate\"\n\t\t\tref={ forwardedRef }\n\t\t>\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<CustomSelectControl\n\t\t\t\t\t// TODO: Upstream limitation - Required isn't passed down correctly,\n\t\t\t\t\t// so it needs to be set on a delegate element.\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tvalueRef.current = value.selectedItem;\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<select\n\t\t\t\tclassName=\"components-validated-control__error-delegate\"\n\t\t\t\tref={ validityTargetRef }\n\t\t\t\trequired={ required }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tvalue={ restProps.value?.key ? 'hasvalue' : '' }\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 >(\n\t\t\t\t\t\t\t'[role=\"combobox\"]'\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\t\t<option value=\"\">No selection</option>\n\t\t\t\t<option value=\"hasvalue\">Has selection</option>\n\t\t\t</select>\n\t\t</div>\n\t);\n};\n\nexport const ValidatedCustomSelectControl = forwardRef(\n\tUnforwardedValidatedCustomSelectControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAV9D;AACA;AACA;;AAGA;AACA;AACA;;AAaA,MAAMK,uCAAuC,GAAGA,CAC/C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAuB,IAAK,CAAC;EAC7D,MAAMC,QAAQ,GAAG,IAAAD,eAAM,EAAWH,SAAS,CAACK,KAAM,CAAC;EAEnD,oBACC,IAAAX,WAAA,CAAAY,IAAA;IACCC,SAAS,EAAC,2DAA2D;IACrEC,GAAG,EAAGP,YAAc;IAAAQ,QAAA,gBAEpB,IAAAf,WAAA,CAAAgB,GAAA,EAACnB,iBAAA,CAAAoB,gBAAgB;MAChBf,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCF,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIO,QAAQ,CAACQ,OAAQ,CAAC;MAC7C,CAAG;MACHC,iBAAiB,EAAGA,CAAA,KAAMX,iBAAiB,CAACU,OAAS;MAAAH,QAAA,eAErD,IAAAf,WAAA,CAAAgB,GAAA,EAAClB,oBAAA,CAAAsB;MACA;MACA;MAAA;QACAC,qBAAqB;QACrBjB,QAAQ,EAAKO,KAAK,IAAM;UACvBD,QAAQ,CAACQ,OAAO,GAAGP,KAAK,CAACW,YAAY;UACrClB,QAAQ,GAAIO,KAAM,CAAC;QACpB,CAAG;QAAA,GACEL;MAAS,CACd;IAAC,CACe,CAAC,eACnB,IAAAN,WAAA,CAAAY,IAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDC,GAAG,EAAGN,iBAAmB;MACzBN,QAAQ,EAAGA,QAAU;MACrBqB,QAAQ,EAAG,CAAC,CAAG;MACfZ,KAAK,EAAGL,SAAS,CAACK,KAAK,EAAEa,GAAG,GAAG,UAAU,GAAG,EAAI;MAChDpB,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAG;MACrBqB,OAAO,EAAKC,CAAC,IAAM;QAClBA,CAAC,CAACC,MAAM,CAACC,sBAAsB,EAC5BC,aAAa,CACd,mBACD,CAAC,EACCC,KAAK,CAAC,CAAC;MACX,CAAG;MAAAf,QAAA,gBAEH,IAAAf,WAAA,CAAAgB,GAAA;QAAQL,KAAK,EAAC,EAAE;QAAAI,QAAA,EAAC;MAAY,CAAQ,CAAC,eACtC,IAAAf,WAAA,CAAAgB,GAAA;QAAQL,KAAK,EAAC,UAAU;QAAAI,QAAA,EAAC;MAAa,CAAQ,CAAC;IAAA,CACxC,CAAC;EAAA,CACL,CAAC;AAER,CAAC;AAEM,MAAMgB,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,mBAAU,EACrDhC,uCACD,CAAC","ignoreList":[]}

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

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _checkboxControl = require("./checkbox-control");
+Object.keys(_checkboxControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkboxControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkboxControl[key];
+    }
+  });
+});
+var _comboboxControl = require("./combobox-control");
+Object.keys(_comboboxControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _comboboxControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _comboboxControl[key];
+    }
+  });
+});
+var _customSelectControl = require("./custom-select-control");
+Object.keys(_customSelectControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _customSelectControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _customSelectControl[key];
+    }
+  });
+});
+var _inputControl = require("./input-control");
+Object.keys(_inputControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _inputControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _inputControl[key];
+    }
+  });
+});
+var _numberControl = require("./number-control");
+Object.keys(_numberControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _numberControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _numberControl[key];
+    }
+  });
+});
+var _radioControl = require("./radio-control");
+Object.keys(_radioControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _radioControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radioControl[key];
+    }
+  });
+});
+var _rangeControl = require("./range-control");
+Object.keys(_rangeControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rangeControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rangeControl[key];
+    }
+  });
+});
+var _selectControl = require("./select-control");
+Object.keys(_selectControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectControl[key];
+    }
+  });
+});
+var _textControl = require("./text-control");
+Object.keys(_textControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _textControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textControl[key];
+    }
+  });
+});
+var _textareaControl = require("./textarea-control");
+Object.keys(_textareaControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _textareaControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textareaControl[key];
+    }
+  });
+});
+var _toggleControl = require("./toggle-control");
+Object.keys(_toggleControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toggleControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toggleControl[key];
+    }
+  });
+});
+var _toggleGroupControl = require("./toggle-group-control");
+Object.keys(_toggleGroupControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toggleGroupControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toggleGroupControl[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_checkboxControl","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_comboboxControl","_customSelectControl","_inputControl","_numberControl","_radioControl","_rangeControl","_selectControl","_textControl","_textareaControl","_toggleControl","_toggleGroupControl"],"sources":["@wordpress/components/src/validated-form-controls/components/index.ts"],"sourcesContent":["export * from './checkbox-control';\nexport * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './input-control';\nexport * from './number-control';\nexport * from './radio-control';\nexport * from './range-control';\nexport * from './select-control';\nexport * from './text-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedInputControl = void 0;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _controlWithError = require("../control-with-error");
+var _inputControl = _interopRequireDefault(require("../../input-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedInputControl = ({
+  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)(_inputControl.default, {
+      __next40pxDefaultSize: true,
+      ref: mergedRefs,
+      onChange: (value, ...args) => {
+        valueRef.current = value;
+        onChange?.(value, ...args);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedInputControl = exports.ValidatedInputControl = (0, _element.forwardRef)(UnforwardedValidatedInputControl);
+//# sourceMappingURL=input-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","_controlWithError","_inputControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedInputControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedInputControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport InputControl from '../../input-control';\nimport type { InputControlProps } from '../../input-control/types';\n\ntype Value = InputControlProps[ 'value' ];\n\nconst UnforwardedValidatedInputControl = (\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 InputControl >,\n\t\t'__next40pxDefaultSize'\n\t> &\n\t\tValidatedControlProps< InputControlProps[ '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<InputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\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 ValidatedInputControl = forwardRef(\n\tUnforwardedValidatedInputControl\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;AAKiD,CAAC,EACtDC,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,GAAG,EAAGX,UAAY;MAClBN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;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/number-control.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedNumberControl = void 0;
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _controlWithError = require("../control-with-error");
+var _numberControl = _interopRequireDefault(require("../../number-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedNumberControl = ({
+  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)(_numberControl.default, {
+      __next40pxDefaultSize: true,
+      ref: mergedRefs
+      // TODO: Upstream limitation - When form is submitted when value is undefined, it will
+      // automatically set a clamped value (as defined by `min` attribute, so 0 by default).
+      ,
+      onChange: (value, ...args) => {
+        valueRef.current = value;
+        onChange?.(value, ...args);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedNumberControl = exports.ValidatedNumberControl = (0, _element.forwardRef)(UnforwardedValidatedNumberControl);
+//# sourceMappingURL=number-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_compose","_controlWithError","_numberControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedNumberControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","jsx","ControlWithError","current","getValidityTarget","children","default","__next40pxDefaultSize","ref","args","ValidatedNumberControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/number-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport NumberControl from '../../number-control';\nimport type { ValidatedControlProps } from './types';\nimport type { NumberControlProps } from '../../number-control/types';\n\ntype Value = NumberControlProps[ 'value' ];\n\nconst UnforwardedValidatedNumberControl = (\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 NumberControl >,\n\t\t'__next40pxDefaultSize'\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<NumberControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tref={ mergedRefs }\n\t\t\t\t// TODO: Upstream limitation - When form is submitted when value is undefined, it will\n\t\t\t\t// automatically set a clamped value (as defined by `min` attribute, so 0 by default).\n\t\t\t\tonChange={ ( value, ...args ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value, ...args );\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 ValidatedNumberControl = forwardRef(\n\tUnforwardedValidatedNumberControl\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;;AAQA,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,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,qBAAqB;MACrBC,GAAG,EAAGX;MACN;MACA;MAAA;MACAN,QAAQ,EAAGA,CAAES,KAAK,EAAE,GAAGS,IAAI,KAAM;QAChCV,QAAQ,CAACI,OAAO,GAAGH,KAAK;QACxBT,QAAQ,GAAIS,KAAK,EAAE,GAAGS,IAAK,CAAC;MAC7B,CAAG;MAAA,GACEhB;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/radio-control.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedRadioControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _radioControl = _interopRequireDefault(require("../../radio-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const UnforwardedValidatedRadioControl = ({
+  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.selected);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional
+    // TODO: Upstream limitation - RadioControl does not accept a ref.
+    ,
+    ref: mergedRefs,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="radio"]'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radioControl.default, {
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      },
+      ...restProps
+    })
+  });
+};
+const ValidatedRadioControl = exports.ValidatedRadioControl = (0, _element.forwardRef)(UnforwardedValidatedRadioControl);
+//# sourceMappingURL=radio-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","_controlWithError","_radioControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedRadioControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","selected","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","value","ValidatedRadioControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/radio-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport RadioControl from '../../radio-control';\nimport type { RadioControlProps } from '../../radio-control/types';\n\ntype Value = RadioControlProps[ 'selected' ];\n\nconst UnforwardedValidatedRadioControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: React.ComponentProps< typeof RadioControl > &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.selected );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t// TODO: Upstream limitation - RadioControl does not accept a ref.\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"radio\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<RadioControl\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 ValidatedRadioControl = forwardRef(\n\tUnforwardedValidatedRadioControl\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;AAE0B,CAAC,EAC/BC,YAAkD,KAC9C;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,QAAS,CAAC;EAEtD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA;IACnB;IAAA;IACAW,GAAG,EAAGN,UAAY;IAClBP,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACK,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,qBACD,CACA;IAAAC,QAAA,eAED,IAAApB,WAAA,CAAAc,GAAA,EAAChB,aAAA,CAAAuB,OAAY;MACZjB,QAAQ,EAAKkB,KAAK,IAAM;QACvBV,QAAQ,CAACK,OAAO,GAAGK,KAAK;QACxBlB,QAAQ,GAAIkB,KAAM,CAAC;MACpB,CAAG;MAAA,GACEhB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMiB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAC9CxB,gCACD,CAAC","ignoreList":[]}