npm - @wordpress/dataviews - Versions diffs - 11.4.1-next.v.0 → 12.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (415) hide show

package/build-module/components/dataform-controls/select.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/select.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 { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\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<ValidatedSelectControl\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\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA4BrB;AA1BT,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAElE,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,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,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB;AAAA,MACA,UAAW;AAAA;AAAA,EACZ;AAEF;",
+  "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 { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\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<ValidatedSelectControl\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\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA6BrB;AA3BT,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAElE,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,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;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB;AAAA,MACA,UAAW;AAAA;AAAA,EACZ;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/telephone.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ function Telephone({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   return /* @__PURE__ */ jsx(
@@ -21,6 +22,7 @@ function Telephone({
         field,
         onChange,
         hideLabelFromVision,
+        markWhenOptional,
         validity,
         type: "tel",
         prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: mobile }) })

package/build-module/components/dataform-controls/telephone.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/telephone.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { mobile } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Telephone< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'tel',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ mobile } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,cAAc;AAMvB,OAAO,mBAAmB;AAoBpB;AAlBS,SAAR,UAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,QAAS,GACvB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { mobile } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Telephone< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tmarkWhenOptional,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'tel',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ mobile } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,cAAc;AAMvB,OAAO,mBAAmB;AAsBpB;AApBS,SAAR,UAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,QAAS,GACvB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/text.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ function Text({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   config,
   validity
 }) {
@@ -19,6 +20,7 @@ function Text({
         field,
         onChange,
         hideLabelFromVision,
+        markWhenOptional,
         validity,
         prefix: prefix ? createElement(prefix) : void 0,
         suffix: suffix ? createElement(suffix) : void 0

package/build-module/components/dataform-controls/text.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/text.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Text< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { prefix, suffix } = config || {};\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\tprefix: prefix ? createElement( prefix ) : undefined,\n\t\t\t\tsuffix: suffix ? createElement( suffix ) : undefined,\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAM9B,OAAO,mBAAmB;AAaxB;AAXa,SAAR,KAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,QAAQ,OAAO,IAAI,UAAU,CAAC;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,QAC3C,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Text< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { prefix, suffix } = config || {};\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tmarkWhenOptional,\n\t\t\t\tvalidity,\n\t\t\t\tprefix: prefix ? createElement( prefix ) : undefined,\n\t\t\t\tsuffix: suffix ? createElement( suffix ) : undefined,\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,qBAAqB;AAM9B,OAAO,mBAAmB;AAcxB;AAZa,SAAR,KAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,QAAQ,OAAO,IAAI,UAAU,CAAC;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,QAC3C,QAAQ,SAAS,cAAe,MAAO,IAAI;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/textarea.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ function Textarea({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   config,
   validity
 }) {
@@ -24,6 +25,7 @@ function Textarea({
     ValidatedTextareaControl,
     {
       required: !!isValid.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,

package/build-module/components/dataform-controls/textarea.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/textarea.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! 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={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAuB5B;AArBF,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA,MACrB;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! 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={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAwB5B;AAtBF,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA,MACrB;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/toggle-group.mjs CHANGED Viewed

@@ -15,6 +15,7 @@ function ToggleGroup({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { getValue, setValue, isValid } = field;
@@ -38,6 +39,7 @@ function ToggleGroup({
     ValidatedToggleGroupControl,
     {
       required: !!field.isValid?.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       __next40pxDefaultSize: true,
       isBlock: true,

package/build-module/components/dataform-controls/toggle-group.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/toggle-group.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\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';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\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\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AA0Bf;AAxBT,IAAM,EAAE,4BAA4B,IAAI,OAAQ,WAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,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,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC;AAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA;AAAA,QAFL,GAAG;AAAA,MAGV,CACC;AAAA;AAAA,EACH;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\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';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\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\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AA2Bf;AAzBT,IAAM,EAAE,4BAA4B,IAAI,OAAQ,WAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,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,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC;AAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA;AAAA,QAFL,GAAG;AAAA,MAGV,CACC;AAAA;AAAA,EACH;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/toggle.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ function Toggle({
   onChange,
   data,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { label, description, getValue, setValue, isValid } = field;
@@ -22,6 +23,7 @@ function Toggle({
     ValidatedToggleControl,
     {
       required: !!isValid.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       hidden: hideLabelFromVision,
       label,

package/build-module/components/dataform-controls/toggle.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/toggle.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Toggle< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ onChange, setValue, data, getValue ] );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAoB5B;AAlBF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAE5D,QAAM,kBAAkB,YAAa,MAAM;AAC1C;AAAA,MACC,SAAU,EAAE,MAAM,MAAM,OAAO,CAAE,SAAU,EAAE,MAAM,KAAK,CAAE,EAAE,CAAE;AAAA,IAC/D;AAAA,EACD,GAAG,CAAE,UAAU,UAAU,MAAM,QAAS,CAAE;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,QAAS;AAAA,MACT;AAAA,MACA,MAAO;AAAA,MACP,SAAU,SAAU,EAAE,MAAM,KAAK,CAAE;AAAA,MACnC,UAAW;AAAA;AAAA,EACZ;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Toggle< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ onChange, setValue, data, getValue ] );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAqB5B;AAnBF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAE5D,QAAM,kBAAkB,YAAa,MAAM;AAC1C;AAAA,MACC,SAAU,EAAE,MAAM,MAAM,OAAO,CAAE,SAAU,EAAE,MAAM,KAAK,CAAE,EAAE,CAAE;AAAA,IAC/D;AAAA,EACD,GAAG,CAAE,UAAU,UAAU,MAAM,QAAS,CAAE;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,QAAS;AAAA,MACT;AAAA,MACA,MAAO;AAAA,MACP,SAAU,SAAU,EAAE,MAAM,KAAK,CAAE;AAAA,MACnC,UAAW;AAAA;AAAA,EACZ;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/url.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ function Url({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   return /* @__PURE__ */ jsx(
@@ -21,6 +22,7 @@ function Url({
         field,
         onChange,
         hideLabelFromVision,
+        markWhenOptional,
         validity,
         type: "url",
         prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: link }) })

package/build-module/components/dataform-controls/url.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/url.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { link } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Url< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'url',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ link } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,YAAY;AAMrB,OAAO,mBAAmB;AAoBpB;AAlBS,SAAR,IAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,MAAO,GACrB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { link } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Url< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tmarkWhenOptional,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'url',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ link } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,YAAY;AAMrB,OAAO,mBAAmB;AAsBpB;AApBS,SAAR,IAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,MAAO,GACrB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/utils/relative-date-control.mjs CHANGED Viewed

@@ -61,7 +61,7 @@ function RelativeDateControl({
       className: clsx(className, "dataviews-controls__relative-date"),
       label,
       hideLabelFromVision,
-      children: /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "xs", children: [
+      children: /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "sm", children: [
         /* @__PURE__ */ jsx(
           NumberControl,
           {

package/build-module/components/dataform-controls/utils/relative-date-control.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-controls/utils/relative-date-control.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, getValue, setValue } = field;\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"xs\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, getValue, setValue } = field;\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
   "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,aAAa;AAKtB,SAAS,sBAAsB,qBAAqB;AA0EjD,SACC,KADD;AAhEH,IAAM,qBAAkE;AAAA,EACvE,CAAE,oBAAqB,GAAG;AAAA,IACzB,EAAE,OAAO,QAAQ,OAAO,GAAI,MAAO,EAAE;AAAA,IACrC,EAAE,OAAO,SAAS,OAAO,GAAI,OAAQ,EAAE;AAAA,IACvC,EAAE,OAAO,UAAU,OAAO,GAAI,QAAS,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,OAAO,GAAI,OAAQ,EAAE;AAAA,EACxC;AAAA,EACA,CAAE,aAAc,GAAG;AAAA,IAClB,EAAE,OAAO,QAAQ,OAAO,GAAI,UAAW,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,OAAO,GAAI,WAAY,EAAE;AAAA,IAC3C,EAAE,OAAO,UAAU,OAAO,GAAI,YAAa,EAAE;AAAA,IAC7C,EAAE,OAAO,SAAS,OAAO,GAAI,WAAY,EAAE;AAAA,EAC5C;AACD;AAEe,SAAR,oBAA8C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEI;AACH,QAAM,UACL,mBACC,aAAa,uBAAuB,cAAc,MACnD;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,SAAS,IAAI;AAC1C,QAAM,aAAa,SAAU,EAAE,MAAM,KAAK,CAAE;AAC5C,QAAM,EAAE,OAAO,WAAW,IAAI,OAAO,QAAS,CAAE,EAAE,MAAM,IACvD,cAAc,OAAO,eAAe,WAAW,aAAa,CAAC;AAE9D,QAAM,gBAAgB;AAAA,IACrB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,OAAQ,QAAS,GAAG,KAAK;AAAA,MAC1C,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,IAAK;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACpB,CAAE,YACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,UAAU,MAAM,QAAQ;AAAA,MACzC,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,QAAS;AAAA,EACtC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,WAAW,mCAAoC;AAAA,MACjE;AAAA,MACA;AAAA,MAEA,+BAAC,SAAM,WAAU,OAAM,KAAI,MAC1B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,cAAa;AAAA,YACb,KAAM;AAAA,YACN,MAAO;AAAA,YACP,OAAQ;AAAA,YACR,UAAW;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,uBAAqB;AAAA,YACrB,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR;AAAA,YACA,UAAW;AAAA,YACX,qBAAmB;AAAA;AAAA,QACpB;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/utils/validated-input.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ function ValidatedText({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   type,
   prefix,
   suffix,
@@ -30,6 +31,7 @@ function ValidatedText({
     ValidatedInputControl,
     {
       required: !!isValid.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,

package/build-module/components/dataform-controls/utils/validated-input.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-controls/utils/validated-input.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\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[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! 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={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tpattern={ isValid.pattern ? isValid.pattern.constraint : undefined }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA8C5B;AA5CF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAkBvC,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+C;AAC9C,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACR,CAAE;AAAA,IACH;AAAA,IACD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAU,QAAQ,UAAU,QAAQ,QAAQ,aAAa;AAAA,MACzD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA;AAAA,EACtB;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } 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 './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\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[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! 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={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tpattern={ isValid.pattern ? isValid.pattern.constraint : undefined }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA+C5B;AA7CF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAkBvC,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+C;AAC9C,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACR,CAAE;AAAA,IACH;AAAA,IACD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAU,QAAQ,UAAU,QAAQ,QAAQ,aAAa;AAAA,MACzD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA;AAAA,EACtB;AAEF;",
   "names": []
 }

package/build-module/components/dataform-controls/utils/validated-number.mjs CHANGED Viewed

@@ -72,6 +72,7 @@ function ValidatedNumber({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   operator,
   validity
 }) {
@@ -125,6 +126,7 @@ function ValidatedNumber({
     ValidatedNumberControl,
     {
       required: !!isValid.required,
+      markWhenOptional,
       customValidity: getCustomValidity(isValid, validity),
       label,
       help: description,

package/build-module/components/dataform-controls/utils/validated-number.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-controls/utils/validated-number.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../../constants';\nimport type { DataFormControlProps, FormatNumber } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst decimals = ( field.format as FormatNumber )?.decimals ?? 0;\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\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\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t\tmin={ isValid.min ? isValid.min.constraint : undefined }\n\t\t\tmax={ isValid.max ? isValid.max.constraint : undefined }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../../constants';\nimport type { DataFormControlProps, FormatNumber } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst decimals = ( field.format as FormatNumber )?.decimals ?? 0;\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\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\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t\tmin={ isValid.min ? isValid.min.constraint : undefined }\n\t\t\tmax={ isValid.max ? isValid.max.constraint : undefined }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataform-layouts/card/index.mjs CHANGED Viewed

@@ -133,6 +133,7 @@ function FormCardField({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { fields } = useContext(DataFormContext);
@@ -255,6 +256,7 @@ function FormCardField({
             field,
             onChange,
             hideLabelFromVision: hideLabelFromVision || withHeader,
+            markWhenOptional,
             validity
           }
         )

package/build-module/components/dataform-layouts/card/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/card/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\t// Mark as touched when collapsing (going from open to closed)\n\t\tif ( isOpen ) {\n\t\t\tsetTouched( true );\n\t\t}\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [ isOpen ] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn {\n\t\tisOpen: effectiveIsOpen,\n\t\tCardHeader: CardHeaderComponent,\n\t\ttouched,\n\t\tsetTouched,\n\t};\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst validationBadge =\n\t\ttouched && layout.isCollapsible ? (\n\t\t\t<ValidationBadge validity={ validity } />\n\t\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\t// Mark as touched when collapsing (going from open to closed)\n\t\tif ( isOpen ) {\n\t\t\tsetTouched( true );\n\t\t}\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [ isOpen ] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn {\n\t\tisOpen: effectiveIsOpen,\n\t\tCardHeader: CardHeaderComponent,\n\t\ttouched,\n\t\tsetTouched,\n\t};\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst validationBadge =\n\t\ttouched && layout.isCollapsible ? (\n\t\t\t<ValidationBadge validity={ validity } />\n\t\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["withHeader", "sizeCardBody"]
 }

package/build-module/components/dataform-layouts/data-form-layout.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 // packages/dataviews/src/components/dataform-layouts/data-form-layout.tsx
-import { useContext } from "@wordpress/element";
+import { useContext, useMemo } from "@wordpress/element";
 import { Stack } from "@wordpress/ui";
 import { getFormFieldLayout } from "./index.mjs";
 import DataFormContext from "../dataform-context/index.mjs";
 import { jsx } from "react/jsx-runtime";
-var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx(Stack, { direction: "column", className: "dataforms-layouts__wrapper", gap: "md", children });
+var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx(Stack, { direction: "column", className: "dataforms-layouts__wrapper", gap: "lg", children });
 function DataFormLayout({
   data,
   form,
@@ -14,6 +14,13 @@ function DataFormLayout({
   as
 }) {
   const { fields: fieldDefinitions } = useContext(DataFormContext);
+  const markWhenOptional = useMemo(() => {
+    const requiredCount = fieldDefinitions.filter(
+      (f) => !!f.isValid?.required
+    ).length;
+    const optionalCount = fieldDefinitions.length - requiredCount;
+    return requiredCount > optionalCount;
+  }, [fieldDefinitions]);
   function getFieldDefinition(field) {
     return fieldDefinitions.find(
       (fieldDefinition) => fieldDefinition.id === field.id
@@ -33,7 +40,8 @@ function DataFormLayout({
       return children(
         FieldLayout,
         formField,
-        validity?.[formField.id]
+        validity?.[formField.id],
+        markWhenOptional
       );
     }
     return /* @__PURE__ */ jsx(
@@ -42,6 +50,7 @@ function DataFormLayout({
         data,
         field: formField,
         onChange,
+        markWhenOptional,
         validity: validity?.[formField.id]
       },
       formField.id

package/build-module/components/dataform-layouts/data-form-layout.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-layouts/data-form-layout.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tFormValidity,\n\tNormalizedForm,\n\tNormalizedFormField,\n} from '../../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../dataform-context';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack direction=\"column\" className=\"dataforms-layouts__wrapper\" gap=\"md\">\n\t\t{ children }\n\t</Stack>\n);\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tvalidity,\n\tchildren,\n\tas,\n}: {\n\tdata: Item;\n\tform: NormalizedForm;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FormValidity;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: NormalizedFormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t\tvalidity?: FieldValidity;\n\t\t} ) => React.JSX.Element | null,\n\t\tchildField: NormalizedFormField,\n\t\tchildFieldValidity?: FieldValidity\n\t) => React.JSX.Element;\n\tas?: React.ComponentType< { children: React.ReactNode } >;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\tfunction getFieldDefinition( field: NormalizedFormField ) {\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === field.id\n\t\t);\n\t}\n\n\tconst Wrapper =\n\t\tas ??\n\t\tgetFormFieldLayout( form.layout.type )?.wrapper ??\n\t\tDEFAULT_WRAPPER;\n\n\treturn (\n\t\t<Wrapper layout={ form.layout }>\n\t\t\t{ form.fields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout.type )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! formField.children\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children(\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tformField,\n\t\t\t\t\t\tvalidity?.[ formField.id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.[ formField.id ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAWtB,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,oBAAC,SAAM,WAAU,UAAS,WAAU,8BAA6B,KAAI,MAClE,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,IAAI,WAAY,eAAgB;AAEjE,WAAS,mBAAoB,OAA6B;AACzD,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO,MAAM;AAAA,IACrD;AAAA,EACD;AAEA,QAAM,UACL,MACA,mBAAoB,KAAK,OAAO,IAAK,GAAG,WACxC;AAED,SACC,oBAAC,WAAQ,QAAS,KAAK,QACpB,eAAK,OAAO,IAAK,CAAE,cAAe;AACnC,UAAM,cAAc,mBAAoB,UAAU,OAAO,IAAK,GAC3D;AAEH,QAAK,CAAE,aAAc;AACpB,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,CAAE,UAAU,WACjC,mBAAoB,SAAU,IAC9B;AAEH,QACC,mBACA,gBAAgB,aAChB,CAAE,gBAAgB,UAAW,IAAK,GACjC;AACD,aAAO;AAAA,IACR;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,WAAY,UAAU,EAAG;AAAA,MAC1B;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA,QACA,UAAW,WAAY,UAAU,EAAG;AAAA;AAAA,MAJ9B,UAAU;AAAA,IAKjB;AAAA,EAEF,CAAE,GACH;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tFormValidity,\n\tNormalizedForm,\n\tNormalizedFormField,\n} from '../../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../dataform-context';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack direction=\"column\" className=\"dataforms-layouts__wrapper\" gap=\"lg\">\n\t\t{ children }\n\t</Stack>\n);\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tvalidity,\n\tchildren,\n\tas,\n}: {\n\tdata: Item;\n\tform: NormalizedForm;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FormValidity;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: NormalizedFormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t\tmarkWhenOptional?: boolean;\n\t\t\tvalidity?: FieldValidity;\n\t\t} ) => React.JSX.Element | null,\n\t\tchildField: NormalizedFormField,\n\t\tchildFieldValidity?: FieldValidity,\n\t\tmarkWhenOptional?: boolean\n\t) => React.JSX.Element;\n\tas?: React.ComponentType< { children: React.ReactNode } >;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\t// Auto-compute: mark the minority of fields\n\t// When counts are equal, mark required fields\n\tconst markWhenOptional = useMemo( () => {\n\t\tconst requiredCount = fieldDefinitions.filter(\n\t\t\t( f ) => !! f.isValid?.required\n\t\t).length;\n\t\tconst optionalCount = fieldDefinitions.length - requiredCount;\n\t\treturn requiredCount > optionalCount;\n\t}, [ fieldDefinitions ] );\n\n\tfunction getFieldDefinition( field: NormalizedFormField ) {\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === field.id\n\t\t);\n\t}\n\n\tconst Wrapper =\n\t\tas ??\n\t\tgetFormFieldLayout( form.layout.type )?.wrapper ??\n\t\tDEFAULT_WRAPPER;\n\n\treturn (\n\t\t<Wrapper layout={ form.layout }>\n\t\t\t{ form.fields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout.type )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! formField.children\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children(\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tformField,\n\t\t\t\t\t\tvalidity?.[ formField.id ],\n\t\t\t\t\t\tmarkWhenOptional\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\tvalidity={ validity?.[ formField.id ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,YAAY,eAAe;AACpC,SAAS,aAAa;AAWtB,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,oBAAC,SAAM,WAAU,UAAS,WAAU,8BAA6B,KAAI,MAClE,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAmBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,IAAI,WAAY,eAAgB;AAIjE,QAAM,mBAAmB,QAAS,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AAAA,MACtC,CAAE,MAAO,CAAC,CAAE,EAAE,SAAS;AAAA,IACxB,EAAE;AACF,UAAM,gBAAgB,iBAAiB,SAAS;AAChD,WAAO,gBAAgB;AAAA,EACxB,GAAG,CAAE,gBAAiB,CAAE;AAExB,WAAS,mBAAoB,OAA6B;AACzD,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO,MAAM;AAAA,IACrD;AAAA,EACD;AAEA,QAAM,UACL,MACA,mBAAoB,KAAK,OAAO,IAAK,GAAG,WACxC;AAED,SACC,oBAAC,WAAQ,QAAS,KAAK,QACpB,eAAK,OAAO,IAAK,CAAE,cAAe;AACnC,UAAM,cAAc,mBAAoB,UAAU,OAAO,IAAK,GAC3D;AAEH,QAAK,CAAE,aAAc;AACpB,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,CAAE,UAAU,WACjC,mBAAoB,SAAU,IAC9B;AAEH,QACC,mBACA,gBAAgB,aAChB,CAAE,gBAAgB,UAAW,IAAK,GACjC;AACD,aAAO;AAAA,IACR;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,WAAY,UAAU,EAAG;AAAA,QACzB;AAAA,MACD;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,UAAW,WAAY,UAAU,EAAG;AAAA;AAAA,MAL9B,UAAU;AAAA,IAMjB;AAAA,EAEF,CAAE,GACH;AAEF;",
   "names": []
 }

package/build-module/components/dataform-layouts/details/index.mjs CHANGED Viewed

@@ -76,7 +76,7 @@ function FormDetailsField({
           {
             direction: "row",
             align: "center",
-            gap: "sm",
+            gap: "md",
             className: "dataforms-layouts-details__summary-content",
             children: [
               summaryContent,

package/build-module/components/dataform-layouts/details/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/details/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedForm,\n\tNormalizedDetailsLayout,\n\tFieldLayoutProps,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nexport default function FormDetailsField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst detailsRef = useRef< HTMLDetailsElement >( null );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst [ touched, setTouched ] = useState( false );\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\t// Track the open/close state of the native details element.\n\tuseEffect( () => {\n\t\tconst details = detailsRef.current;\n\t\tif ( ! details ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleToggle = () => {\n\t\t\tconst nowOpen = details.open;\n\t\t\t// Mark as touched when collapsing (going from open to closed).\n\t\t\tif ( ! nowOpen ) {\n\t\t\t\tsetTouched( true );\n\t\t\t}\n\t\t\tsetIsOpen( nowOpen );\n\t\t};\n\n\t\tdetails.addEventListener( 'toggle', handleToggle );\n\t\treturn () => {\n\t\t\tdetails.removeEventListener( 'toggle', handleToggle );\n\t\t};\n\t}, [] );\n\n\t// When expanded after being touched, trigger reportValidity to show\n\t// field-level errors.\n\tuseReportValidity( contentRef, isOpen && touched );\n\n\t// Mark as touched when any field inside is blurred.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [] );\n\n\tif ( ! field.children ) {\n\t\treturn null;\n\t}\n\n\t// Find the summary field definition if specified\n\tconst summaryFieldId =\n\t\t( field.layout as NormalizedDetailsLayout ).summary ?? '';\n\tconst summaryField = summaryFieldId\n\t\t? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )\n\t\t: undefined;\n\n\t// Render the summary content\n\tlet summaryContent;\n\tif ( summaryField && summaryField.render ) {\n\t\t// Use the field's render function to display the current value\n\t\tsummaryContent = (\n\t\t\t<summaryField.render item={ data } field={ summaryField } />\n\t\t);\n\t} else {\n\t\t// Fall back to the label\n\t\tsummaryContent = field.label || __( 'More details' );\n\t}\n\n\treturn (\n\t\t<details\n\t\t\tref={ detailsRef }\n\t\t\tclassName=\"dataforms-layouts-details__details\"\n\t\t>\n\t\t\t<summary className=\"dataforms-layouts-details__summary\">\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tclassName=\"dataforms-layouts-details__summary-content\"\n\t\t\t\t>\n\t\t\t\t\t{ summaryContent }\n\t\t\t\t\t{ touched && <ValidationBadge validity={ validity } /> }\n\t\t\t\t</Stack>\n\t\t\t</summary>\n\t\t\t<div\n\t\t\t\tref={ contentRef }\n\t\t\t\tclassName=\"dataforms-layouts-details__content\"\n\t\t\t\tonBlur={ handleBlur }\n\t\t\t>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</details>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedForm,\n\tNormalizedDetailsLayout,\n\tFieldLayoutProps,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nexport default function FormDetailsField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst detailsRef = useRef< HTMLDetailsElement >( null );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst [ touched, setTouched ] = useState( false );\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\t// Track the open/close state of the native details element.\n\tuseEffect( () => {\n\t\tconst details = detailsRef.current;\n\t\tif ( ! details ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleToggle = () => {\n\t\t\tconst nowOpen = details.open;\n\t\t\t// Mark as touched when collapsing (going from open to closed).\n\t\t\tif ( ! nowOpen ) {\n\t\t\t\tsetTouched( true );\n\t\t\t}\n\t\t\tsetIsOpen( nowOpen );\n\t\t};\n\n\t\tdetails.addEventListener( 'toggle', handleToggle );\n\t\treturn () => {\n\t\t\tdetails.removeEventListener( 'toggle', handleToggle );\n\t\t};\n\t}, [] );\n\n\t// When expanded after being touched, trigger reportValidity to show\n\t// field-level errors.\n\tuseReportValidity( contentRef, isOpen && touched );\n\n\t// Mark as touched when any field inside is blurred.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [] );\n\n\tif ( ! field.children ) {\n\t\treturn null;\n\t}\n\n\t// Find the summary field definition if specified\n\tconst summaryFieldId =\n\t\t( field.layout as NormalizedDetailsLayout ).summary ?? '';\n\tconst summaryField = summaryFieldId\n\t\t? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )\n\t\t: undefined;\n\n\t// Render the summary content\n\tlet summaryContent;\n\tif ( summaryField && summaryField.render ) {\n\t\t// Use the field's render function to display the current value\n\t\tsummaryContent = (\n\t\t\t<summaryField.render item={ data } field={ summaryField } />\n\t\t);\n\t} else {\n\t\t// Fall back to the label\n\t\tsummaryContent = field.label || __( 'More details' );\n\t}\n\n\treturn (\n\t\t<details\n\t\t\tref={ detailsRef }\n\t\t\tclassName=\"dataforms-layouts-details__details\"\n\t\t>\n\t\t\t<summary className=\"dataforms-layouts-details__summary\">\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tclassName=\"dataforms-layouts-details__summary-content\"\n\t\t\t\t>\n\t\t\t\t\t{ summaryContent }\n\t\t\t\t\t{ touched && <ValidationBadge validity={ validity } /> }\n\t\t\t\t</Stack>\n\t\t\t</summary>\n\t\t\t<div\n\t\t\t\tref={ contentRef }\n\t\t\t\tclassName=\"dataforms-layouts-details__content\"\n\t\t\t\tonBlur={ handleBlur }\n\t\t\t>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</details>\n\t);\n}\n"],
   "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,aAAa;AAUtB,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,OAAO,uBAAuB;AAC9B,OAAO,qBAAqB;AAqEzB,cAaC,YAbD;AAnEY,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,aAAa,OAA8B,IAAK;AACtD,QAAM,aAAa,OAA0B,IAAK;AAClD,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,KAAM;AAChD,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,KAAM;AAE9C,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,YAAY,CAAC;AAAA,IAC5B;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAGA,YAAW,MAAM;AAChB,UAAM,UAAU,WAAW;AAC3B,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AAEA,UAAM,eAAe,MAAM;AAC1B,YAAM,UAAU,QAAQ;AAExB,UAAK,CAAE,SAAU;AAChB,mBAAY,IAAK;AAAA,MAClB;AACA,gBAAW,OAAQ;AAAA,IACpB;AAEA,YAAQ,iBAAkB,UAAU,YAAa;AACjD,WAAO,MAAM;AACZ,cAAQ,oBAAqB,UAAU,YAAa;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,CAAE;AAIN,oBAAmB,YAAY,UAAU,OAAQ;AAGjD,QAAM,aAAa,YAAa,MAAM;AACrC,eAAY,IAAK;AAAA,EAClB,GAAG,CAAC,CAAE;AAEN,MAAK,CAAE,MAAM,UAAW;AACvB,WAAO;AAAA,EACR;AAGA,QAAM,iBACH,MAAM,OAAoC,WAAW;AACxD,QAAM,eAAe,iBAClB,OAAO,KAAM,CAAE,aAAc,SAAS,OAAO,cAAe,IAC5D;AAGH,MAAI;AACJ,MAAK,gBAAgB,aAAa,QAAS;AAE1C,qBACC,oBAAC,aAAa,QAAb,EAAoB,MAAO,MAAO,OAAQ,cAAe;AAAA,EAE5D,OAAO;AAEN,qBAAiB,MAAM,SAAS,GAAI,cAAe;AAAA,EACpD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA,4BAAC,aAAQ,WAAU,sCAClB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,WAAU;AAAA,YAER;AAAA;AAAA,cACA,WAAW,oBAAC,mBAAgB,UAAsB;AAAA;AAAA;AAAA,QACrD,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAW,UAAU;AAAA;AAAA,YACtB;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }