@wordpress/dataviews 11.3.1-next.v.0 → 12.0.0

package/build-module/components/dataform-controls/color.mjs

@@ -1,16 +1,21 @@
 // packages/dataviews/src/components/dataform-controls/color.tsx
 import { colord } from "colord";
 import {
+  Button,
+  ColorIndicator,
+  ColorPicker,
   Dropdown,
   privateApis,
-  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper
+  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+  __experimentalDropdownContentWrapper as DropdownContentWrapper
 } from "@wordpress/components";
 import { useCallback } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
 import { unlock } from "../../lock-unlock.mjs";
 import getCustomValidity from "./utils/get-custom-validity.mjs";
 import { jsx } from "react/jsx-runtime";
-var { ValidatedInputControl, Picker } = unlock(privateApis);
-var ColorPicker = ({
+var { ValidatedInputControl } = unlock(privateApis);
+var ColorPickerDropdown = ({
   color,
   onColorChange
 }) => {
@@ -18,33 +23,21 @@ var ColorPicker = ({
   return /* @__PURE__ */ jsx(
     Dropdown,
     {
-      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(
-        "button",
+      className: "dataviews-controls__color-picker-dropdown",
+      popoverProps: { resize: false },
+      renderToggle: ({ onToggle }) => /* @__PURE__ */ jsx(
+        Button,
         {
-          type: "button",
           onClick: onToggle,
-          style: {
-            width: "24px",
-            height: "24px",
-            borderRadius: "50%",
-            backgroundColor: validColor,
-            border: "1px solid #ddd",
-            cursor: "pointer",
-            outline: isOpen ? "2px solid #007cba" : "none",
-            outlineOffset: "2px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: 0,
-            margin: 0
-          },
-          "aria-label": "Open color picker"
+          "aria-label": __("Open color picker"),
+          size: "small",
+          icon: () => /* @__PURE__ */ jsx(ColorIndicator, { colorValue: validColor })
         }
-      ) }),
-      renderContent: () => /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: /* @__PURE__ */ jsx(
-        Picker,
+      ),
+      renderContent: () => /* @__PURE__ */ jsx(DropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ jsx(
+        ColorPicker,
         {
-          color: colord(validColor),
+          color: validColor,
           onChange: onColorChange,
           enableAlpha: true
         }
@@ -57,13 +50,14 @@ function Color({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { label, placeholder, description, setValue, isValid } = field;
   const value = field.getValue({ item: data }) || "";
   const handleColorChange = useCallback(
-    (colorObject) => {
-      onChange(setValue({ item: data, value: colorObject.toHex() }));
+    (newColor) => {
+      onChange(setValue({ item: data, value: newColor }));
     },
     [data, onChange, setValue]
   );
@@ -77,6 +71,7 @@ function Color({
     ValidatedInputControl,
     {
       required: !!field.isValid?.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
@@ -85,13 +80,13 @@ function Color({
       onChange: handleInputChange,
       hideLabelFromVision,
       type: "text",
-      prefix: /* @__PURE__ */ jsx(
-        ColorPicker,
+      prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "control", children: /* @__PURE__ */ jsx(
+        ColorPickerDropdown,
         {
           color: value,
           onColorChange: handleColorChange
         }
-      )
+      ) })
     }
   );
 }

package/build-module/components/dataform-controls/color.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/color.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedInputControl, Picker } = unlock( privateApis );\n\nconst ColorPicker = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( colorObject: any ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\t\tbackgroundColor: validColor,\n\t\t\t\t\t\t\tborder: '1px solid #ddd',\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\toutline: isOpen ? '2px solid #007cba' : 'none',\n\t\t\t\t\t\t\toutlineOffset: '2px',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-label=\"Open color picker\"\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<div style={ { padding: '16px' } }>\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tcolor={ colord( validColor ) }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\n\tconst handleColorChange = useCallback(\n\t\t( colorObject: any ) => {\n\t\t\tonChange( setValue( { item: data, value: colorObject.toHex() } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ value }\n\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AAKvB;AAAA,EACC;AAAA,EACA;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAiBzB;AAfL,IAAM,EAAE,uBAAuB,OAAO,IAAI,OAAQ,WAAY;AAE9D,IAAM,cAAc,CAAE;AAAA,EACrB;AAAA,EACA;AACD,MAGO;AACN,QAAM,aAAa,SAAS,OAAQ,KAAM,EAAE,QAAQ,IAAI,QAAQ;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,CAAE,EAAE,UAAU,OAAO,MACnC,oBAAC,6BAA0B,SAAQ,QAClC;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,SAAU;AAAA,UACV,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,SAAS,SAAS,sBAAsB;AAAA,YACxC,eAAe;AAAA,YACf,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,QAAQ;AAAA,UACT;AAAA,UACA,cAAW;AAAA;AAAA,MACZ,GACD;AAAA,MAED,eAAgB,MACf,oBAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,GAC9B;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,OAAQ,UAAW;AAAA,UAC3B,UAAW;AAAA,UACX,aAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEe,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAElD,QAAM,oBAAoB;AAAA,IACzB,CAAE,gBAAsB;AACvB,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,MAAM,EAAE,CAAE,CAAE;AAAA,IAClE;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAkC;AACnC,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,QACC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,eAAgB;AAAA;AAAA,MACjB;AAAA;AAAA,EAEF;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tColorPicker,\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nconst ColorPickerDropdown = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( newColor: string ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName=\"dataviews-controls__color-picker-dropdown\"\n\t\t\tpopoverProps={ { resize: false } }\n\t\t\trenderToggle={ ( { onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\taria-label={ __( 'Open color picker' ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ () => <ColorIndicator colorValue={ validColor } /> }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ validColor }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\n\tconst handleColorChange = useCallback(\n\t\t( newColor: string ) => {\n\t\t\tonChange( setValue( { item: data, value: newColor } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper variant=\"control\">\n\t\t\t\t\t<ColorPickerDropdown\n\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,cAAc;AAKvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2CAA2C;AAAA,EAC3C,wCAAwC;AAAA,OAClC;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAMnB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAsBZ;AApBlB,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAEtD,IAAM,sBAAsB,CAAE;AAAA,EAC7B;AAAA,EACA;AACD,MAGO;AACN,QAAM,aAAa,SAAS,OAAQ,KAAM,EAAE,QAAQ,IAAI,QAAQ;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAe,EAAE,QAAQ,MAAM;AAAA,MAC/B,cAAe,CAAE,EAAE,SAAS,MAC3B;AAAA,QAAC;AAAA;AAAA,UACA,SAAU;AAAA,UACV,cAAa,GAAI,mBAAoB;AAAA,UACrC,MAAK;AAAA,UACL,MAAO,MAAM,oBAAC,kBAAe,YAAa,YAAa;AAAA;AAAA,MACxD;AAAA,MAED,eAAgB,MACf,oBAAC,0BAAuB,aAAY,QACnC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,UAAW;AAAA,UACX,aAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEe,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAElD,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAsB;AACvB,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAkC;AACnC,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,QACC,oBAAC,6BAA0B,SAAQ,WAClC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,eAAgB;AAAA;AAAA,MACjB,GACD;AAAA;AAAA,EAEF;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/combobox.mjs

@@ -0,0 +1,49 @@
+// packages/dataviews/src/components/dataform-controls/combobox.tsx
+import { privateApis, Spinner } from "@wordpress/components";
+import { useCallback } from "@wordpress/element";
+import useElements from "../../hooks/use-elements.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import getCustomValidity from "./utils/get-custom-validity.mjs";
+import { jsx } from "react/jsx-runtime";
+var { ValidatedComboboxControl } = unlock(privateApis);
+function Combobox({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision,
+  validity
+}) {
+  const { label, description, placeholder, getValue, setValue, isValid } = field;
+  const value = getValue({ item: data }) ?? "";
+  const onChangeControl = useCallback(
+    (newValue) => onChange(setValue({ item: data, value: newValue ?? "" })),
+    [data, onChange, setValue]
+  );
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Spinner, {});
+  }
+  return /* @__PURE__ */ jsx(
+    ValidatedComboboxControl,
+    {
+      required: !!field.isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
+      label,
+      value,
+      help: description,
+      placeholder,
+      options: elements,
+      onChange: onChangeControl,
+      hideLabelFromVision,
+      allowReset: true,
+      expandOnFocus: true
+    }
+  );
+}
+export {
+  Combobox as default
+};
+//# sourceMappingURL=combobox.mjs.map

package/build-module/components/dataform-controls/combobox.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataform-controls/combobox.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedComboboxControl } = unlock( privateApis );\n\nexport default function Combobox< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, placeholder, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | null ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue ?? '' } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedComboboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tplaceholder={ placeholder }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tallowReset\n\t\t\texpandOnFocus\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA2BrB;AAzBT,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAE5C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP;AAAA,MACA,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA,MACA,YAAU;AAAA,MACV,eAAa;AAAA;AAAA,EACd;AAEF;",
+  "names": []
+}

package/build-module/components/dataform-controls/date.mjs

@@ -148,17 +148,42 @@ function ValidatedDateControl({
     setCustomValidity(void 0);
   }, [inputRefs]);
   useEffect(() => {
-    if (isTouched) {
-      const timeoutId = setTimeout(() => {
-        if (validity) {
-          setCustomValidity(getCustomValidity(isValid, validity));
-        } else {
-          validateRefs();
-        }
-      }, 0);
-      return () => clearTimeout(timeoutId);
+    const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
+    const result = validity ? getCustomValidity(isValid, validity) : void 0;
+    for (const ref of refs) {
+      const input = ref.current;
+      if (input) {
+        input.setCustomValidity(
+          result?.type === "invalid" && result.message ? result.message : ""
+        );
+      }
+    }
+  }, [inputRefs, isValid, validity]);
+  useEffect(() => {
+    const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
+    const handleInvalid = (event) => {
+      event.preventDefault();
+      setIsTouched(true);
+    };
+    for (const ref of refs) {
+      ref.current?.addEventListener("invalid", handleInvalid);
+    }
+    return () => {
+      for (const ref of refs) {
+        ref.current?.removeEventListener("invalid", handleInvalid);
+      }
+    };
+  }, [inputRefs, setIsTouched]);
+  useEffect(() => {
+    if (!isTouched) {
+      return;
+    }
+    const result = validity ? getCustomValidity(isValid, validity) : void 0;
+    if (result) {
+      setCustomValidity(result);
+    } else {
+      validateRefs();
     }
-    return void 0;
   }, [isTouched, isValid, validity, validateRefs]);
   const onBlur = (event) => {
     if (isTouched) {
@@ -175,8 +200,7 @@ function ValidatedDateControl({
       {
         className: clsx(
           "components-validated-control__indicator",
-          customValidity.type === "invalid" ? "is-invalid" : void 0,
-          customValidity.type === "valid" ? "is-valid" : void 0
+          customValidity.type === "invalid" ? "is-invalid" : void 0
         ),
         children: [
           /* @__PURE__ */ jsx(
@@ -199,6 +223,7 @@ function CalendarDateControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const {
@@ -262,7 +287,12 @@ function CalendarDateControl({
   const {
     timezone: { string: timezoneString }
   } = getSettings();
-  const displayLabel = isValid?.required ? `${label} (${__("Required")})` : label;
+  let displayLabel = label;
+  if (isValid?.required && !markWhenOptional) {
+    displayLabel = `${label} (${__("Required")})`;
+  } else if (!isValid?.required && markWhenOptional) {
+    displayLabel = `${label} (${__("Optional")})`;
+  }
   return /* @__PURE__ */ jsx(
     ValidatedDateControl,
     {
@@ -278,12 +308,12 @@ function CalendarDateControl({
           className: "dataviews-controls__date",
           label: displayLabel,
           hideLabelFromVision,
-          children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "md", children: [
+          children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ jsxs(
               Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 wrap: "wrap",
                 justify: "flex-start",
                 children: [
@@ -353,6 +383,7 @@ function CalendarDateRangeControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { id, label, getValue, setValue, format: fieldFormat } = field;
@@ -444,7 +475,12 @@ function CalendarDateRangeControl({
     [value, updateDateRange]
   );
   const { timezone } = getSettings();
-  const displayLabel = field.isValid?.required ? `${label} (${__("Required")})` : label;
+  let displayLabel = label;
+  if (field.isValid?.required && !markWhenOptional) {
+    displayLabel = `${label} (${__("Required")})`;
+  } else if (!field.isValid?.required && markWhenOptional) {
+    displayLabel = `${label} (${__("Optional")})`;
+  }
   return /* @__PURE__ */ jsx(
     ValidatedDateControl,
     {
@@ -460,12 +496,12 @@ function CalendarDateRangeControl({
           className: "dataviews-controls__date",
           label: displayLabel,
           hideLabelFromVision,
-          children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "md", children: [
+          children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ jsxs(
               Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 wrap: "wrap",
                 justify: "flex-start",
                 children: [
@@ -503,7 +539,7 @@ function CalendarDateRangeControl({
               Stack,
               {
                 direction: "row",
-                gap: "xs",
+                gap: "sm",
                 justify: "space-between",
                 className: "dataviews-controls__date-range-inputs",
                 children: [
@@ -559,6 +595,7 @@ function DateControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   operator,
   validity
 }) {
@@ -583,6 +620,7 @@ function DateControl({
         field,
         onChange,
         hideLabelFromVision,
+        markWhenOptional,
         validity
       }
     );
@@ -594,6 +632,7 @@ function DateControl({
       field,
       onChange,
       hideLabelFromVision,
+      markWhenOptional,
       validity
     }
   );

package/build-module/components/dataform-controls/date.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/date.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport {\n\tformat,\n\tisValid as isValidDate,\n\tsubMonths,\n\tsubDays,\n\tsubYears,\n\tstartOfMonth,\n\tstartOfYear,\n} from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControl as InputControl,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getDate, getSettings } from '@wordpress/date';\nimport { error as errorIcon } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport RelativeDateControl from './utils/relative-date-control';\nimport {\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n\tOPERATOR_BETWEEN,\n} from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type {\n\tDataFormControlProps,\n\tFieldValidity,\n\tFormatDate,\n\tNormalizedField,\n} from '../../types';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );\n\ntype DateRange = [ string, string ] | undefined;\n\nconst DATE_PRESETS: {\n\tid: string;\n\tlabel: string;\n\tgetValue: () => Date;\n}[] = [\n\t{\n\t\tid: 'today',\n\t\tlabel: __( 'Today' ),\n\t\tgetValue: () => getDate( null ),\n\t},\n\t{\n\t\tid: 'yesterday',\n\t\tlabel: __( 'Yesterday' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 1 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-week',\n\t\tlabel: __( 'Past week' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 7 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-month',\n\t\tlabel: __( 'Past month' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subMonths( today, 1 );\n\t\t},\n\t},\n];\n\nconst DATE_RANGE_PRESETS = [\n\t{\n\t\tid: 'last-7-days',\n\t\tlabel: __( 'Last 7 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 7 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-30-days',\n\t\tlabel: __( 'Last 30 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 30 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'month-to-date',\n\t\tlabel: __( 'Month to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfMonth( today ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-year',\n\t\tlabel: __( 'Last year' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subYears( today, 1 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'year-to-date',\n\t\tlabel: __( 'Year to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfYear( today ), today ];\n\t\t},\n\t},\n];\n\nconst parseDate = ( dateString?: string ): Date | null => {\n\tif ( ! dateString ) {\n\t\treturn null;\n\t}\n\tconst parsed = getDate( dateString );\n\treturn parsed && isValidDate( parsed ) ? parsed : null;\n};\n\nconst formatDate = ( date?: Date | string ): string => {\n\tif ( ! date ) {\n\t\treturn '';\n\t}\n\treturn typeof date === 'string' ? date : format( date, 'yyyy-MM-dd' );\n};\n\nfunction ValidatedDateControl< Item >( {\n\tfield,\n\tvalidity,\n\tinputRefs,\n\tisTouched,\n\tsetIsTouched,\n\tchildren,\n}: {\n\tfield: NormalizedField< Item >;\n\tvalidity?: FieldValidity;\n\tinputRefs:\n\t\t| React.RefObject< HTMLInputElement >\n\t\t| React.RefObject< HTMLInputElement >[];\n\tisTouched: boolean;\n\tsetIsTouched: ( touched: boolean ) => void;\n\tchildren: React.ReactNode;\n} ) {\n\tconst { isValid } = field;\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\n\tconst validateRefs = useCallback( () => {\n\t\t// Check HTML5 validity on all refs\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input && ! input.validity.valid ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage: input.validationMessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// No errors\n\t\tsetCustomValidity( undefined );\n\t}, [ inputRefs ] );\n\n\tuseEffect( () => {\n\t\tif ( isTouched ) {\n\t\t\tconst timeoutId = setTimeout( () => {\n\t\t\t\tif ( validity ) {\n\t\t\t\t\tsetCustomValidity( getCustomValidity( isValid, validity ) );\n\t\t\t\t} else {\n\t\t\t\t\tvalidateRefs();\n\t\t\t\t}\n\t\t\t}, 0 );\n\t\t\treturn () => clearTimeout( timeoutId );\n\t\t}\n\t\treturn undefined;\n\t}, [ isTouched, isValid, validity, validateRefs ] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\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\t\t}\n\t};\n\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t{ children }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ customValidity && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\tcustomValidity.type === 'invalid'\n\t\t\t\t\t\t\t\t? 'is-invalid'\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\tcustomValidity.type === 'valid'\n\t\t\t\t\t\t\t\t? 'is-valid'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\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{ customValidity.message }\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\nfunction CalendarDateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tsetValue,\n\t\tgetValue,\n\t\tisValid,\n\t\tformat: fieldFormat,\n\t} = field;\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDate( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tconst dateValue = newDate\n\t\t\t\t? format( newDate, 'yyyy-MM-dd' )\n\t\t\t\t: undefined;\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_PRESETS )[ 0 ] ) => {\n\t\t\tconst presetDate = preset.getValue();\n\t\t\tconst dateValue = formatDate( presetDate );\n\n\t\t\tsetCalendarMonth( presetDate );\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tonChangeCallback( newValue );\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tconst displayLabel = isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ validityTargetRef }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date input */ }\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tlabel={ __( 'Date' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleManualDateChange }\n\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t\t<DateCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\tvalue ? parseDate( value ) || undefined : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nfunction CalendarDateRangeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, getValue, setValue, format: fieldFormat } = field;\n\tlet value: DateRange;\n\tconst fieldValue = getValue( { item: data } );\n\tif (\n\t\tArray.isArray( fieldValue ) &&\n\t\tfieldValue.length === 2 &&\n\t\tfieldValue.every( ( date ) => typeof date === 'string' )\n\t) {\n\t\tvalue = fieldValue as DateRange;\n\t}\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: DateRange ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst selectedRange = useMemo( () => {\n\t\tif ( ! value ) {\n\t\t\treturn { from: undefined, to: undefined };\n\t\t}\n\n\t\tconst [ from, to ] = value;\n\t\treturn {\n\t\t\tfrom: parseDate( from ) || undefined,\n\t\t\tto: parseDate( to ) || undefined,\n\t\t};\n\t}, [ value ] );\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\treturn selectedRange.from || new Date();\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst fromInputRef = useRef< HTMLInputElement >( null );\n\tconst toInputRef = useRef< HTMLInputElement >( null );\n\n\tconst updateDateRange = useCallback(\n\t\t( fromDate?: Date | string, toDate?: Date | string ) => {\n\t\t\tif ( fromDate && toDate ) {\n\t\t\t\tonChangeCallback( [\n\t\t\t\t\tformatDate( fromDate ),\n\t\t\t\t\tformatDate( toDate ),\n\t\t\t\t] );\n\t\t\t} else if ( ! fromDate && ! toDate ) {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Do nothing if only one date is set - wait for both\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst onSelectCalendarRange = useCallback(\n\t\t(\n\t\t\tnewRange:\n\t\t\t\t| { from: Date | undefined; to?: Date | undefined }\n\t\t\t\t| undefined\n\t\t) => {\n\t\t\tupdateDateRange( newRange?.from, newRange?.to );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_RANGE_PRESETS )[ 0 ] ) => {\n\t\t\tconst [ startDate, endDate ] = preset.getValue();\n\t\t\tsetCalendarMonth( startDate );\n\t\t\tupdateDateRange( startDate, endDate );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( fromOrTo: 'from' | 'to', newValue?: string ) => {\n\t\t\tconst [ currentFrom, currentTo ] = value || [\n\t\t\t\tundefined,\n\t\t\t\tundefined,\n\t\t\t];\n\t\t\tconst updatedFrom = fromOrTo === 'from' ? newValue : currentFrom;\n\t\t\tconst updatedTo = fromOrTo === 'to' ? newValue : currentTo;\n\n\t\t\tupdateDateRange( updatedFrom, updatedTo );\n\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ value, updateDateRange ]\n\t);\n\n\tconst { timezone } = getSettings();\n\n\tconst displayLabel = field.isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ [ fromInputRef, toInputRef ] }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_RANGE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date range inputs */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-controls__date-range-inputs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ fromInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'From' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 0 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'from', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ toInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'To' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 1 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'to', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t<DateRangeCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={ selectedRange }\n\t\t\t\t\t\tonSelect={ onSelectCalendarRange }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezone.string || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nexport default function DateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<CalendarDateRangeControl\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport {\n\tformat,\n\tisValid as isValidDate,\n\tsubMonths,\n\tsubDays,\n\tsubYears,\n\tstartOfMonth,\n\tstartOfYear,\n} from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControl as InputControl,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getDate, getSettings } from '@wordpress/date';\nimport { error as errorIcon } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport RelativeDateControl from './utils/relative-date-control';\nimport {\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n\tOPERATOR_BETWEEN,\n} from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type {\n\tDataFormControlProps,\n\tFieldValidity,\n\tFormatDate,\n\tNormalizedField,\n} from '../../types';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );\n\ntype DateRange = [ string, string ] | undefined;\n\nconst DATE_PRESETS: {\n\tid: string;\n\tlabel: string;\n\tgetValue: () => Date;\n}[] = [\n\t{\n\t\tid: 'today',\n\t\tlabel: __( 'Today' ),\n\t\tgetValue: () => getDate( null ),\n\t},\n\t{\n\t\tid: 'yesterday',\n\t\tlabel: __( 'Yesterday' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 1 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-week',\n\t\tlabel: __( 'Past week' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 7 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-month',\n\t\tlabel: __( 'Past month' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subMonths( today, 1 );\n\t\t},\n\t},\n];\n\nconst DATE_RANGE_PRESETS = [\n\t{\n\t\tid: 'last-7-days',\n\t\tlabel: __( 'Last 7 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 7 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-30-days',\n\t\tlabel: __( 'Last 30 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 30 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'month-to-date',\n\t\tlabel: __( 'Month to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfMonth( today ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-year',\n\t\tlabel: __( 'Last year' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subYears( today, 1 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'year-to-date',\n\t\tlabel: __( 'Year to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfYear( today ), today ];\n\t\t},\n\t},\n];\n\nconst parseDate = ( dateString?: string ): Date | null => {\n\tif ( ! dateString ) {\n\t\treturn null;\n\t}\n\tconst parsed = getDate( dateString );\n\treturn parsed && isValidDate( parsed ) ? parsed : null;\n};\n\nconst formatDate = ( date?: Date | string ): string => {\n\tif ( ! date ) {\n\t\treturn '';\n\t}\n\treturn typeof date === 'string' ? date : format( date, 'yyyy-MM-dd' );\n};\n\nfunction ValidatedDateControl< Item >( {\n\tfield,\n\tvalidity,\n\tinputRefs,\n\tisTouched,\n\tsetIsTouched,\n\tchildren,\n}: {\n\tfield: NormalizedField< Item >;\n\tvalidity?: FieldValidity;\n\tinputRefs:\n\t\t| React.RefObject< HTMLInputElement | null >\n\t\t| React.RefObject< HTMLInputElement | null >[];\n\tisTouched: boolean;\n\tsetIsTouched: ( touched: boolean ) => void;\n\tchildren: React.ReactNode;\n} ) {\n\tconst { isValid } = field;\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\n\tconst validateRefs = useCallback( () => {\n\t\t// Check HTML5 validity on all refs\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input && ! input.validity.valid ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage: input.validationMessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// No errors\n\t\tsetCustomValidity( undefined );\n\t}, [ inputRefs ] );\n\n\t// Sync React-level validation to native inputs.\n\tuseEffect( () => {\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tconst result = validity\n\t\t\t? getCustomValidity( isValid, validity )\n\t\t\t: undefined;\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input ) {\n\t\t\t\tinput.setCustomValidity(\n\t\t\t\t\tresult?.type === 'invalid' && result.message\n\t\t\t\t\t\t? result.message\n\t\t\t\t\t\t: ''\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [ inputRefs, isValid, validity ] );\n\n\t// Listen for 'invalid' events (e.g., from reportValidity() on card re-expand).\n\tuseEffect( () => {\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tconst handleInvalid = ( event: Event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsTouched( true );\n\t\t};\n\t\tfor ( const ref of refs ) {\n\t\t\tref.current?.addEventListener( 'invalid', handleInvalid );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const ref of refs ) {\n\t\t\t\tref.current?.removeEventListener( 'invalid', handleInvalid );\n\t\t\t}\n\t\t};\n\t}, [ inputRefs, setIsTouched ] );\n\n\tuseEffect( () => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = validity\n\t\t\t? getCustomValidity( isValid, validity )\n\t\t\t: undefined;\n\t\tif ( result ) {\n\t\t\tsetCustomValidity( result );\n\t\t} else {\n\t\t\tvalidateRefs();\n\t\t}\n\t}, [ isTouched, isValid, validity, validateRefs ] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\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\t\t}\n\t};\n\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t{ children }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ customValidity && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\tcustomValidity.type === 'invalid'\n\t\t\t\t\t\t\t\t? 'is-invalid'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\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{ customValidity.message }\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\nfunction CalendarDateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tsetValue,\n\t\tgetValue,\n\t\tisValid,\n\t\tformat: fieldFormat,\n\t} = field;\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDate( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tconst dateValue = newDate\n\t\t\t\t? format( newDate, 'yyyy-MM-dd' )\n\t\t\t\t: undefined;\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_PRESETS )[ 0 ] ) => {\n\t\t\tconst presetDate = preset.getValue();\n\t\t\tconst dateValue = formatDate( presetDate );\n\n\t\t\tsetCalendarMonth( presetDate );\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tonChangeCallback( newValue );\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tlet displayLabel = label;\n\tif ( isValid?.required && ! markWhenOptional ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Required' ) })`;\n\t} else if ( ! isValid?.required && markWhenOptional ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Optional' ) })`;\n\t}\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ validityTargetRef }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date input */ }\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tlabel={ __( 'Date' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleManualDateChange }\n\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t\t<DateCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\tvalue ? parseDate( value ) || undefined : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nfunction CalendarDateRangeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, getValue, setValue, format: fieldFormat } = field;\n\tlet value: DateRange;\n\tconst fieldValue = getValue( { item: data } );\n\tif (\n\t\tArray.isArray( fieldValue ) &&\n\t\tfieldValue.length === 2 &&\n\t\tfieldValue.every( ( date ) => typeof date === 'string' )\n\t) {\n\t\tvalue = fieldValue as DateRange;\n\t}\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: DateRange ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst selectedRange = useMemo( () => {\n\t\tif ( ! value ) {\n\t\t\treturn { from: undefined, to: undefined };\n\t\t}\n\n\t\tconst [ from, to ] = value;\n\t\treturn {\n\t\t\tfrom: parseDate( from ) || undefined,\n\t\t\tto: parseDate( to ) || undefined,\n\t\t};\n\t}, [ value ] );\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\treturn selectedRange.from || new Date();\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst fromInputRef = useRef< HTMLInputElement >( null );\n\tconst toInputRef = useRef< HTMLInputElement >( null );\n\n\tconst updateDateRange = useCallback(\n\t\t( fromDate?: Date | string, toDate?: Date | string ) => {\n\t\t\tif ( fromDate && toDate ) {\n\t\t\t\tonChangeCallback( [\n\t\t\t\t\tformatDate( fromDate ),\n\t\t\t\t\tformatDate( toDate ),\n\t\t\t\t] );\n\t\t\t} else if ( ! fromDate && ! toDate ) {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Do nothing if only one date is set - wait for both\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst onSelectCalendarRange = useCallback(\n\t\t(\n\t\t\tnewRange:\n\t\t\t\t| { from: Date | undefined; to?: Date | undefined }\n\t\t\t\t| undefined\n\t\t) => {\n\t\t\tupdateDateRange( newRange?.from, newRange?.to );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_RANGE_PRESETS )[ 0 ] ) => {\n\t\t\tconst [ startDate, endDate ] = preset.getValue();\n\t\t\tsetCalendarMonth( startDate );\n\t\t\tupdateDateRange( startDate, endDate );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( fromOrTo: 'from' | 'to', newValue?: string ) => {\n\t\t\tconst [ currentFrom, currentTo ] = value || [\n\t\t\t\tundefined,\n\t\t\t\tundefined,\n\t\t\t];\n\t\t\tconst updatedFrom = fromOrTo === 'from' ? newValue : currentFrom;\n\t\t\tconst updatedTo = fromOrTo === 'to' ? newValue : currentTo;\n\n\t\t\tupdateDateRange( updatedFrom, updatedTo );\n\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ value, updateDateRange ]\n\t);\n\n\tconst { timezone } = getSettings();\n\n\tlet displayLabel = label;\n\tif ( field.isValid?.required && ! markWhenOptional ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Required' ) })`;\n\t} else if ( ! field.isValid?.required && markWhenOptional ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Optional' ) })`;\n\t}\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ [ fromInputRef, toInputRef ] }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_RANGE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date range inputs */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-controls__date-range-inputs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ fromInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'From' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 0 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'from', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ toInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'To' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 1 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'to', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t<DateRangeCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={ selectedRange }\n\t\t\t\t\t\tonSelect={ onSelectCalendarRange }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezone.string || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nexport default function DateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<CalendarDateRangeControl\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataform-controls/datetime.mjs

@@ -29,6 +29,7 @@ function CalendarDateTimeControl({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { id, label, description, setValue, getValue, isValid } = field;
@@ -39,7 +40,7 @@ function CalendarDateTimeControl({
     return parsedDate || /* @__PURE__ */ new Date();
   });
   const inputControlRef = useRef(null);
-  const validationTimeoutRef = useRef();
+  const validationTimeoutRef = useRef(void 0);
   const previousFocusRef = useRef(null);
   const onChangeCallback = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
@@ -109,7 +110,12 @@ function CalendarDateTimeControl({
   const {
     timezone: { string: timezoneString }
   } = getSettings();
-  const displayLabel = isValid?.required && !hideLabelFromVision ? `${label} (${__("Required")})` : label;
+  let displayLabel = label;
+  if (isValid?.required && !markWhenOptional && !hideLabelFromVision) {
+    displayLabel = `${label} (${__("Required")})`;
+  } else if (!isValid?.required && markWhenOptional && !hideLabelFromVision) {
+    displayLabel = `${label} (${__("Optional")})`;
+  }
   return /* @__PURE__ */ jsx(
     BaseControl,
     {
@@ -117,7 +123,7 @@ function CalendarDateTimeControl({
       label: displayLabel,
       help: description,
       hideLabelFromVision,
-      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "md", children: [
+      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "lg", children: [
         /* @__PURE__ */ jsx(
           DateCalendar,
           {
@@ -155,6 +161,7 @@ function DateTime({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   operator,
   validity
 }) {
@@ -178,6 +185,7 @@ function DateTime({
       field,
       onChange,
       hideLabelFromVision,
+      markWhenOptional,
       validity
     }
   );