npm - @wordpress/dataviews - Versions diffs - 13.0.0 → 13.1.0 - Mend

@wordpress/dataviews 13.0.0 → 13.1.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 (156) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/datetime.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { format } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getSettings } from '@wordpress/date';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps, FormatDatetime } from '../../types';\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';\nimport RelativeDateControl from './utils/relative-date-control';\nimport getCustomValidity from './utils/get-custom-validity';\nimport parseDateTime from '../../field-types/utils/parse-date-time';\nimport { unlock } from '../../lock-unlock';\n\nconst { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );\n\nconst formatDateTime = ( date?: Date | string ): string => {\n\tif ( ! date ) {\n\t\treturn '';\n\t}\n\tif ( typeof date === 'string' ) {\n\t\treturn date;\n\t}\n\t// Format as datetime-local input expects: YYYY-MM-DDTHH:mm\n\treturn format( date, \"yyyy-MM-dd'T'HH:mm\" );\n};\n\nfunction CalendarDateTimeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, description, setValue, getValue, isValid } = field;\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDateTime( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst inputControlRef = useRef< HTMLInputElement >( null );\n\tconst validationTimeoutRef =\n\t\tuseRef< ReturnType< typeof setTimeout > >( undefined );\n\tconst previousFocusRef = useRef< Element | null >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\t// Cleanup timeout on unmount\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( validationTimeoutRef.current ) {\n\t\t\t\tclearTimeout( validationTimeoutRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tlet dateTimeValue: string | undefined;\n\t\t\tif ( newDate ) {\n\t\t\t\t// Preserve time if it exists in current value, otherwise use current time\n\t\t\t\tlet finalDateTime = newDate;\n\n\t\t\t\tif ( value ) {\n\t\t\t\t\tconst currentDateTime = parseDateTime( value );\n\t\t\t\t\tif ( currentDateTime ) {\n\t\t\t\t\t\t// Preserve the time part\n\t\t\t\t\t\tfinalDateTime = new Date( newDate );\n\t\t\t\t\t\tfinalDateTime.setHours( currentDateTime.getHours() );\n\t\t\t\t\t\tfinalDateTime.setMinutes(\n\t\t\t\t\t\t\tcurrentDateTime.getMinutes()\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tdateTimeValue = finalDateTime.toISOString();\n\t\t\t\tonChangeCallback( dateTimeValue );\n\n\t\t\t\t// Clear any existing timeout\n\t\t\t\tif ( validationTimeoutRef.current ) {\n\t\t\t\t\tclearTimeout( validationTimeoutRef.current );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Save the currently focused element\n\t\t\tpreviousFocusRef.current =\n\t\t\t\tinputControlRef.current &&\n\t\t\t\tinputControlRef.current.ownerDocument.activeElement;\n\n\t\t\t// Trigger validation display by simulating focus, blur, and changes.\n\t\t\t// Use a timeout to ensure it runs after the value update.\n\t\t\tvalidationTimeoutRef.current = setTimeout( () => {\n\t\t\t\tif ( inputControlRef.current ) {\n\t\t\t\t\tinputControlRef.current.focus();\n\t\t\t\t\tinputControlRef.current.blur();\n\t\t\t\t\tonChangeCallback( dateTimeValue );\n\n\t\t\t\t\t// Restore focus to the previously focused element\n\t\t\t\t\tif (\n\t\t\t\t\t\tpreviousFocusRef.current &&\n\t\t\t\t\t\tpreviousFocusRef.current instanceof HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tpreviousFocusRef.current.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}, 0 );\n\t\t},\n\t\t[ onChangeCallback, value ]\n\t);\n\n\tconst handleManualDateTimeChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tif ( newValue ) {\n\t\t\t\t// Convert from datetime-local format to ISO string\n\t\t\t\tconst dateTime = new Date( newValue );\n\t\t\t\tonChangeCallback( dateTime.toISOString() );\n\n\t\t\t\t// Update calendar month to match\n\t\t\t\tconst parsedDate = parseDateTime( dateTime.toISOString() );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst { format: fieldFormat } = field;\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDatetime ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tlet displayLabel = label;\n\tif ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Required' ) })`;\n\t} else if (\n\t\t! isValid?.required &&\n\t\tmarkWhenOptional &&\n\t\t! hideLabelFromVision\n\t) {\n\t\tdisplayLabel = `${ label } (${ __( 'Optional' ) })`;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tlabel={ displayLabel }\n\t\t\thelp={ description }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t<DateCalendar\n\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\tselected={\n\t\t\t\t\t\tvalue ? parseDateTime( value ) || undefined : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t/>\n\t\t\t\t{ /* Manual datetime input */ }\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tref={ inputControlRef }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\trequired={ !! isValid?.required }\n\t\t\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t\t\ttype=\"datetime-local\"\n\t\t\t\t\tlabel={ __( 'Date time' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tvalue\n\t\t\t\t\t\t\t? formatDateTime(\n\t\t\t\t\t\t\t\t\tparseDateTime( value ) || undefined\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ handleManualDateTimeChange }\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function DateTime< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__datetime\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateTimeControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { dateI18n, getDate, getSettings } from '@wordpress/date';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps, FormatDatetime } from '../../types';\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';\nimport RelativeDateControl from './utils/relative-date-control';\nimport getCustomValidity from './utils/get-custom-validity';\nimport parseDateTime from '../../field-types/utils/parse-date-time';\nimport { unlock } from '../../lock-unlock';\n\nconst { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );\n\nconst formatDateTime = ( value?: string ): string => {\n\tif ( ! value ) {\n\t\treturn '';\n\t}\n\t// Format in WordPress timezone for datetime-local input: YYYY-MM-DDTHH:mm\n\treturn dateI18n( 'Y-m-d\\\\TH:i', getDate( value ) );\n};\n\nfunction CalendarDateTimeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, description, setValue, getValue, isValid } = field;\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDateTime( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst inputControlRef = useRef< HTMLInputElement >( null );\n\tconst validationTimeoutRef =\n\t\tuseRef< ReturnType< typeof setTimeout > >( undefined );\n\tconst previousFocusRef = useRef< Element | null >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\t// Cleanup timeout on unmount\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( validationTimeoutRef.current ) {\n\t\t\t\tclearTimeout( validationTimeoutRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tlet dateTimeValue: string | undefined;\n\t\t\tif ( newDate ) {\n\t\t\t\t// Extract the date part in WP timezone from the calendar selection\n\t\t\t\tconst wpDate = dateI18n( 'Y-m-d', newDate );\n\n\t\t\t\t// Preserve time if it exists in current value, otherwise use current time\n\t\t\t\tlet wpTime: string;\n\t\t\t\tif ( value ) {\n\t\t\t\t\twpTime = dateI18n( 'H:i', getDate( value ) );\n\t\t\t\t} else {\n\t\t\t\t\twpTime = dateI18n( 'H:i', newDate );\n\t\t\t\t}\n\n\t\t\t\t// Combine date and time in WP timezone and convert to ISO\n\t\t\t\tconst finalDateTime = getDate( `${ wpDate }T${ wpTime }` );\n\t\t\t\tdateTimeValue = finalDateTime.toISOString();\n\t\t\t\tonChangeCallback( dateTimeValue );\n\n\t\t\t\t// Clear any existing timeout\n\t\t\t\tif ( validationTimeoutRef.current ) {\n\t\t\t\t\tclearTimeout( validationTimeoutRef.current );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Save the currently focused element\n\t\t\tpreviousFocusRef.current =\n\t\t\t\tinputControlRef.current &&\n\t\t\t\tinputControlRef.current.ownerDocument.activeElement;\n\n\t\t\t// Trigger validation display by simulating focus, blur, and changes.\n\t\t\t// Use a timeout to ensure it runs after the value update.\n\t\t\tvalidationTimeoutRef.current = setTimeout( () => {\n\t\t\t\tif ( inputControlRef.current ) {\n\t\t\t\t\tinputControlRef.current.focus();\n\t\t\t\t\tinputControlRef.current.blur();\n\t\t\t\t\tonChangeCallback( dateTimeValue );\n\n\t\t\t\t\t// Restore focus to the previously focused element\n\t\t\t\t\tif (\n\t\t\t\t\t\tpreviousFocusRef.current &&\n\t\t\t\t\t\tpreviousFocusRef.current instanceof HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tpreviousFocusRef.current.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}, 0 );\n\t\t},\n\t\t[ onChangeCallback, value ]\n\t);\n\n\tconst handleManualDateTimeChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tif ( newValue ) {\n\t\t\t\t// Interpret the datetime-local value in WordPress timezone\n\t\t\t\tconst dateTime = getDate( newValue );\n\t\t\t\tonChangeCallback( dateTime.toISOString() );\n\n\t\t\t\t// Update calendar month to match\n\t\t\t\tconst parsedDate = parseDateTime( dateTime.toISOString() );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst { format: fieldFormat } = field;\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDatetime ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tlet displayLabel = label;\n\tif ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {\n\t\tdisplayLabel = `${ label } (${ __( 'Required' ) })`;\n\t} else if (\n\t\t! isValid?.required &&\n\t\tmarkWhenOptional &&\n\t\t! hideLabelFromVision\n\t) {\n\t\tdisplayLabel = `${ label } (${ __( 'Optional' ) })`;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tlabel={ displayLabel }\n\t\t\thelp={ description }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t{ /* Manual datetime input */ }\n\t\t\t\t<ValidatedInputControl\n\t\t\t\t\tref={ inputControlRef }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\trequired={ !! isValid?.required }\n\t\t\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t\t\ttype=\"datetime-local\"\n\t\t\t\t\tlabel={ __( 'Date time' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tvalue={ formatDateTime( value ) }\n\t\t\t\t\tonChange={ handleManualDateTimeChange }\n\t\t\t\t/>\n\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t<DateCalendar\n\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\tselected={\n\t\t\t\t\t\tvalue ? parseDateTime( value ) || undefined : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function DateTime< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__datetime\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateTimeControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -33,7 +33,7 @@ function RelativeDateControl({
   operator
 }) {
   const options = TIME_UNITS_OPTIONS[operator === OPERATOR_IN_THE_PAST ? "inThePast" : "over"];
-  const { id, label, getValue, setValue } = field;
+  const { id, label, description, getValue, setValue } = field;
   const fieldValue = getValue({ item: data });
   const { value: relValue = "", unit = options[0].value } = fieldValue && typeof fieldValue === "object" ? fieldValue : {};
   const onChangeValue = useCallback(
@@ -61,6 +61,7 @@ function RelativeDateControl({
       className: clsx(className, "dataviews-controls__relative-date"),
       label,
       hideLabelFromVision,
+      help: description,
       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=\"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;",
+  "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, description, 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\thelp={ description }\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;AA2EjD,SACC,KADD;AAjEH,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,aAAa,UAAU,SAAS,IAAI;AACvD,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,MACA,MAAO;AAAA,MAEP,+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-layouts/normalize-form.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
 // packages/dataviews/src/components/dataform-layouts/normalize-form.ts
+import { __ } from "@wordpress/i18n";
 var DEFAULT_LAYOUT = {
   type: "regular",
   labelPosition: "top"
@@ -24,10 +25,27 @@ function normalizeLayout(layout) {
   } else if (layout?.type === "panel") {
     const summary = layout.summary ?? [];
     const normalizedSummary = Array.isArray(summary) ? summary : [summary];
+    const openAs = layout?.openAs;
+    let normalizedOpenAs;
+    if (typeof openAs === "object" && openAs.type === "modal") {
+      normalizedOpenAs = {
+        type: "modal",
+        applyLabel: openAs.applyLabel?.trim() || __("Apply"),
+        cancelLabel: openAs.cancelLabel?.trim() || __("Cancel")
+      };
+    } else if (openAs === "modal") {
+      normalizedOpenAs = {
+        type: "modal",
+        applyLabel: __("Apply"),
+        cancelLabel: __("Cancel")
+      };
+    } else {
+      normalizedOpenAs = { type: "dropdown" };
+    }
     normalizedLayout = {
       type: "panel",
       labelPosition: layout?.labelPosition ?? "side",
-      openAs: layout?.openAs ?? "dropdown",
+      openAs: normalizedOpenAs,
       summary: normalizedSummary,
       editVisibility: layout?.editVisibility ?? "on-hover"
     };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-layouts/normalize-form.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedDetailsLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../../types';\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nfunction normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t\teditVisibility: layout?.editVisibility ?? 'on-hover',\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t} else if ( layout?.type === 'details' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'details',\n\t\t\tsummary: layout?.summary ?? '',\n\t\t} satisfies NormalizedDetailsLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nfunction normalizeForm( form: Form ): NormalizedForm {\n\tconst normalizedFormLayout = normalizeLayout( form?.layout );\n\n\tconst normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(\n\t\t( field ) => {\n\t\t\tif ( typeof field === 'string' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field,\n\t\t\t\t\tlayout: normalizedFormLayout,\n\t\t\t\t} satisfies NormalizedFormField;\n\t\t\t}\n\n\t\t\tconst fieldLayout = field.layout\n\t\t\t\t? normalizeLayout( field.layout )\n\t\t\t\t: normalizedFormLayout;\n\n\t\t\treturn {\n\t\t\t\tid: field.id,\n\t\t\t\tlayout: fieldLayout,\n\t\t\t\t...( !! field.label && { label: field.label } ),\n\t\t\t\t...( !! field.description && {\n\t\t\t\t\tdescription: field.description,\n\t\t\t\t} ),\n\t\t\t\t...( 'children' in field &&\n\t\t\t\t\tArray.isArray( field.children ) && {\n\t\t\t\t\t\tchildren: normalizeForm( {\n\t\t\t\t\t\t\tfields: field.children,\n\t\t\t\t\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\t\t\t\t} ).fields,\n\t\t\t\t\t} ),\n\t\t\t} satisfies NormalizedFormField;\n\t\t}\n\t);\n\n\treturn {\n\t\tlayout: normalizedFormLayout,\n\t\tfields: normalizedFields,\n\t};\n}\n\nexport default normalizeForm;\n"],
-  "mappings": ";AAkBO,IAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,IAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQA,SAAS,gBAAiB,QAAoC;AAC7D,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,MACT,gBAAgB,QAAQ,kBAAkB;AAAA,IAC3C;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD,WAAY,QAAQ,SAAS,WAAY;AACxC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,QAAQ,WAAW;AAAA,IAC7B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,cAAe,MAA6B;AACpD,QAAM,uBAAuB,gBAAiB,MAAM,MAAO;AAE3D,QAAM,oBAA4C,KAAK,UAAU,CAAC,GAAI;AAAA,IACrE,CAAE,UAAW;AACZ,UAAK,OAAO,UAAU,UAAW;AAChC,eAAO;AAAA,UACN,IAAI;AAAA,UACJ,QAAQ;AAAA,QACT;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AAEH,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,QAAQ;AAAA,QACR,GAAK,CAAC,CAAE,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM;AAAA,QAC5C,GAAK,CAAC,CAAE,MAAM,eAAe;AAAA,UAC5B,aAAa,MAAM;AAAA,QACpB;AAAA,QACA,GAAK,cAAc,SAClB,MAAM,QAAS,MAAM,QAAS,KAAK;AAAA,UAClC,UAAU,cAAe;AAAA,YACxB,QAAQ,MAAM;AAAA,YACd,QAAQ;AAAA,UACT,CAAE,EAAE;AAAA,QACL;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACT;AACD;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedDetailsLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../../types';\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nfunction normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tconst openAs = layout?.openAs;\n\t\tlet normalizedOpenAs: NormalizedPanelLayout[ 'openAs' ];\n\t\tif ( typeof openAs === 'object' && openAs.type === 'modal' ) {\n\t\t\tnormalizedOpenAs = {\n\t\t\t\ttype: 'modal',\n\t\t\t\tapplyLabel: openAs.applyLabel?.trim() || __( 'Apply' ),\n\t\t\t\tcancelLabel: openAs.cancelLabel?.trim() || __( 'Cancel' ),\n\t\t\t};\n\t\t} else if ( openAs === 'modal' ) {\n\t\t\tnormalizedOpenAs = {\n\t\t\t\ttype: 'modal',\n\t\t\t\tapplyLabel: __( 'Apply' ),\n\t\t\t\tcancelLabel: __( 'Cancel' ),\n\t\t\t};\n\t\t} else {\n\t\t\tnormalizedOpenAs = { type: 'dropdown' };\n\t\t}\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: normalizedOpenAs,\n\t\t\tsummary: normalizedSummary,\n\t\t\teditVisibility: layout?.editVisibility ?? 'on-hover',\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t} else if ( layout?.type === 'details' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'details',\n\t\t\tsummary: layout?.summary ?? '',\n\t\t} satisfies NormalizedDetailsLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nfunction normalizeForm( form: Form ): NormalizedForm {\n\tconst normalizedFormLayout = normalizeLayout( form?.layout );\n\n\tconst normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(\n\t\t( field ) => {\n\t\t\tif ( typeof field === 'string' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field,\n\t\t\t\t\tlayout: normalizedFormLayout,\n\t\t\t\t} satisfies NormalizedFormField;\n\t\t\t}\n\n\t\t\tconst fieldLayout = field.layout\n\t\t\t\t? normalizeLayout( field.layout )\n\t\t\t\t: normalizedFormLayout;\n\n\t\t\treturn {\n\t\t\t\tid: field.id,\n\t\t\t\tlayout: fieldLayout,\n\t\t\t\t...( !! field.label && { label: field.label } ),\n\t\t\t\t...( !! field.description && {\n\t\t\t\t\tdescription: field.description,\n\t\t\t\t} ),\n\t\t\t\t...( 'children' in field &&\n\t\t\t\t\tArray.isArray( field.children ) && {\n\t\t\t\t\t\tchildren: normalizeForm( {\n\t\t\t\t\t\t\tfields: field.children,\n\t\t\t\t\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\t\t\t\t} ).fields,\n\t\t\t\t\t} ),\n\t\t\t} satisfies NormalizedFormField;\n\t\t}\n\t);\n\n\treturn {\n\t\tlayout: normalizedFormLayout,\n\t\tfields: normalizedFields,\n\t};\n}\n\nexport default normalizeForm;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAoBZ,IAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,IAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQA,SAAS,gBAAiB,QAAoC;AAC7D,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,UAAM,SAAS,QAAQ;AACvB,QAAI;AACJ,QAAK,OAAO,WAAW,YAAY,OAAO,SAAS,SAAU;AAC5D,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY,OAAO,YAAY,KAAK,KAAK,GAAI,OAAQ;AAAA,QACrD,aAAa,OAAO,aAAa,KAAK,KAAK,GAAI,QAAS;AAAA,MACzD;AAAA,IACD,WAAY,WAAW,SAAU;AAChC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY,GAAI,OAAQ;AAAA,QACxB,aAAa,GAAI,QAAS;AAAA,MAC3B;AAAA,IACD,OAAO;AACN,yBAAmB,EAAE,MAAM,WAAW;AAAA,IACvC;AAEA,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB,QAAQ,kBAAkB;AAAA,IAC3C;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD,WAAY,QAAQ,SAAS,WAAY;AACxC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,QAAQ,WAAW;AAAA,IAC7B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,cAAe,MAA6B;AACpD,QAAM,uBAAuB,gBAAiB,MAAM,MAAO;AAE3D,QAAM,oBAA4C,KAAK,UAAU,CAAC,GAAI;AAAA,IACrE,CAAE,UAAW;AACZ,UAAK,OAAO,UAAU,UAAW;AAChC,eAAO;AAAA,UACN,IAAI;AAAA,UACJ,QAAQ;AAAA,QACT;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AAEH,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,QAAQ;AAAA,QACR,GAAK,CAAC,CAAE,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM;AAAA,QAC5C,GAAK,CAAC,CAAE,MAAM,eAAe;AAAA,UAC5B,aAAa,MAAM;AAAA,QACpB;AAAA,QACA,GAAK,cAAc,SAClB,MAAM,QAAS,MAAM,QAAS,KAAK;AAAA,UAClC,UAAU,cAAe;AAAA,YACxB,QAAQ,MAAM;AAAA,YACd,QAAQ;AAAA,UACT,CAAE,EAAE;AAAA,QACL;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACT;AACD;AAEA,IAAO,yBAAQ;",
   "names": []
 }

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

@@ -9,7 +9,7 @@ function FormPanelField({
   validity
 }) {
   const layout = field.layout;
-  if (layout.openAs === "modal") {
+  if (layout.openAs.type === "modal") {
     return /* @__PURE__ */ jsx(
       PanelModal,
       {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/index.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { FieldLayoutProps, NormalizedPanelLayout } from '../../../types';\nimport PanelModal from './modal';\nimport PanelDropdown from './dropdown';\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedPanelLayout;\n\n\tif ( layout.openAs === 'modal' ) {\n\t\treturn (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<PanelDropdown\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAIA,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAYvB;AAVY,SAAR,eAAyC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,OAAO,WAAW,SAAU;AAChC,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { FieldLayoutProps, NormalizedPanelLayout } from '../../../types';\nimport PanelModal from './modal';\nimport PanelDropdown from './dropdown';\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedPanelLayout;\n\n\tif ( layout.openAs.type === 'modal' ) {\n\t\treturn (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<PanelDropdown\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAIA,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAYvB;AAVY,SAAR,eAAyC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,OAAO,OAAO,SAAS,SAAU;AACrC,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dataform-layouts/panel/modal.mjs CHANGED Viewed

@@ -5,7 +5,6 @@ import {
   Button,
   Modal
 } from "@wordpress/components";
-import { __ } from "@wordpress/i18n";
 import { useContext, useMemo, useRef, useState } from "@wordpress/element";
 import { useFocusOnMount, useMergeRefs } from "@wordpress/compose";
 import { Stack } from "@wordpress/ui";
@@ -25,6 +24,8 @@ function ModalContent({
   onClose,
   touched
 }) {
+  const { openAs } = field.layout;
+  const { applyLabel, cancelLabel } = openAs;
   const { fields } = useContext(DataFormContext);
   const [changes, setChanges] = useState({});
   const modalData = useMemo(() => {
@@ -115,7 +116,7 @@ function ModalContent({
                   variant: "tertiary",
                   onClick: onClose,
                   __next40pxDefaultSize: true,
-                  children: __("Cancel")
+                  children: cancelLabel
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -124,7 +125,7 @@ function ModalContent({
                   variant: "primary",
                   onClick: onApply,
                   __next40pxDefaultSize: true,
-                  children: __("Apply")
+                  children: applyLabel
                 }
               )
             ]

package/build-module/components/dataform-layouts/panel/modal.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/modal.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useMemo, useRef, useState } from '@wordpress/element';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tFieldLayoutProps,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../../hooks/use-form-validity';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport DataFormContext from '../../dataform-context';\nimport useFieldFromFormField from './utils/use-field-from-form-field';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n\ttouched,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n\ttouched: boolean;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {\n\t\t...f,\n\t\tEdit: f.Edit === null ? undefined : f.Edit,\n\t\tisValid: {\n\t\t\trequired: f.isValid.required?.constraint,\n\t\t\telements: f.isValid.elements?.constraint,\n\t\t\tmin: f.isValid.min?.constraint,\n\t\t\tmax: f.isValid.max?.constraint,\n\t\t\tpattern: f.isValid.pattern?.constraint,\n\t\t\tminLength: f.isValid.minLength?.constraint,\n\t\t\tmaxLength: f.isValid.maxLength?.constraint,\n\t\t},\n\t} ) );\n\tconst { validity } = useFormValidity( modalData, fieldsAsFieldType, form );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst mergedRef = useMergeRefs( [ focusOnMountRef, contentRef ] );\n\n\t// When the modal is opened after being previously closed (touched),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( contentRef, touched );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ mergedRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ (\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tchildField,\n\t\t\t\t\t\tchildFieldValidity,\n\t\t\t\t\t\tmarkWhenOptional\n\t\t\t\t\t) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst [ touched, setTouched ] = useState( false );\n\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst { fieldDefinition, fieldLabel, summaryFields } =\n\t\tuseFieldFromFormField( field );\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst handleClose = () => {\n\t\tsetIsOpen( false );\n\t\tsetTouched( true );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tvalidity={ validity }\n\t\t\t\ttouched={ touched }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ handleClose }\n\t\t\t\t\ttouched={ touched }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
-  "mappings": ";AAGA,OAAO,eAAe;AAKtB;AAAA,EACC,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,YAAY,SAAS,QAAQ,gBAAgB;AACtD,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,aAAa;AAWtB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,OAAO,mBAAmB;AAC1B,OAAO,qBAAqB;AAC5B,OAAO,uBAAuB;AAC9B,OAAO,qBAAqB;AAC5B,OAAO,2BAA2B;AA6F5B,SA2DJ,UA3DI,KAYH,YAZG;AA3FN,SAAS,aAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,CAAE,SAAS,UAAW,IAAI,SAA6B,CAAC,CAAE;AAChE,QAAM,YAAY,QAAS,MAAM;AAChC,WAAO,UAAW,MAAM,SAAS;AAAA,MAChC,YAAY,CAAE,QAAQ,WAAY;AAAA,IACnC,CAAE;AAAA,EACH,GAAG,CAAE,MAAM,OAAQ,CAAE;AAErB,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WACd,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,IAAI,QAAQ,eAAe,CAAE;AAAA;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,oBAAqC,OAAO,IAAK,CAAE,OAAS;AAAA,IACjE,GAAG;AAAA,IACH,MAAM,EAAE,SAAS,OAAO,SAAY,EAAE;AAAA,IACtC,SAAS;AAAA,MACR,UAAU,EAAE,QAAQ,UAAU;AAAA,MAC9B,UAAU,EAAE,QAAQ,UAAU;AAAA,MAC9B,KAAK,EAAE,QAAQ,KAAK;AAAA,MACpB,KAAK,EAAE,QAAQ,KAAK;AAAA,MACpB,SAAS,EAAE,QAAQ,SAAS;AAAA,MAC5B,WAAW,EAAE,QAAQ,WAAW;AAAA,MAChC,WAAW,EAAE,QAAQ,WAAW;AAAA,IACjC;AAAA,EACD,EAAI;AACJ,QAAM,EAAE,SAAS,IAAI,gBAAiB,WAAW,mBAAmB,IAAK;AAEzE,QAAM,UAAU,MAAM;AACrB,aAAU,OAAQ;AAClB,YAAQ;AAAA,EACT;AAEA,QAAM,iBAAiB,CAAE,aAA+B;AACvD;AAAA,MAAY,CAAE,SACb,UAAW,MAAM,UAAU;AAAA,QAC1B,YAAY,CAAE,QAAQ,WAAY;AAAA,MACnC,CAAE;AAAA,IACH;AAAA,EACD;AAEA,QAAM,kBAAkB,gBAAiB,mBAAoB;AAC7D,QAAM,aAAa,OAA0B,IAAK;AAClD,QAAM,YAAY,aAAc,CAAE,iBAAiB,UAAW,CAAE;AAIhE,oBAAmB,YAAY,OAAQ;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,OAAQ;AAAA,MACR,MAAK;AAAA,MAEL;AAAA,4BAAC,SAAI,KAAM,WACV;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP;AAAA,YACA,UAAW;AAAA,YACX;AAAA,YAEE,WACD,aACA,YACA,oBACA,qBAEA;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAO;AAAA,gBACP,OAAQ;AAAA,gBACR,UAAW;AAAA,gBACX,qBAAsB,KAAK,OAAO,SAAS;AAAA,gBAC3C;AAAA,gBACA,UAAW;AAAA;AAAA,cANL,WAAW;AAAA,YAOlB;AAAA;AAAA,QAEF,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,WAAU;AAAA,YACV,KAAI;AAAA,YAEJ;AAAA,kCAAC,UAAO,OAAQ,EAAE,MAAM,EAAE,GAAI;AAAA,cAC9B;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,uBAAqB;AAAA,kBAEnB,aAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,uBAAqB;AAAA,kBAEnB,aAAI,OAAQ;AAAA;AAAA,cACf;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,WAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,KAAM;AAEhD,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,KAAM;AAE9C,QAAM,EAAE,iBAAiB,YAAY,cAAc,IAClD,sBAAuB,KAAM;AAC9B,MAAK,CAAE,iBAAkB;AACxB,WAAO;AAAA,EACR;AAEA,QAAM,cAAc,MAAM;AACzB,cAAW,KAAM;AACjB,eAAY,IAAK;AAAA,EAClB;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAW,gBAAgB,aAAa;AAAA,QACxC,SAAU,MAAM,UAAW,IAAK;AAAA,QAChC,iBAAgB;AAAA;AAAA,IACjB;AAAA,IACE,UACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAa,cAAc;AAAA,QAC3B,SAAU;AAAA,QACV;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\n\nimport { useContext, useMemo, useRef, useState } from '@wordpress/element';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedPanelLayout,\n\tPanelOpenAsModal,\n\tFieldLayoutProps,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../../hooks/use-form-validity';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport DataFormContext from '../../dataform-context';\nimport useFieldFromFormField from './utils/use-field-from-form-field';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n\ttouched,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n\ttouched: boolean;\n} ) {\n\tconst { openAs } = field.layout as NormalizedPanelLayout;\n\tconst { applyLabel, cancelLabel } = openAs as PanelOpenAsModal;\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {\n\t\t...f,\n\t\tEdit: f.Edit === null ? undefined : f.Edit,\n\t\tisValid: {\n\t\t\trequired: f.isValid.required?.constraint,\n\t\t\telements: f.isValid.elements?.constraint,\n\t\t\tmin: f.isValid.min?.constraint,\n\t\t\tmax: f.isValid.max?.constraint,\n\t\t\tpattern: f.isValid.pattern?.constraint,\n\t\t\tminLength: f.isValid.minLength?.constraint,\n\t\t\tmaxLength: f.isValid.maxLength?.constraint,\n\t\t},\n\t} ) );\n\tconst { validity } = useFormValidity( modalData, fieldsAsFieldType, form );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst mergedRef = useMergeRefs( [ focusOnMountRef, contentRef ] );\n\n\t// When the modal is opened after being previously closed (touched),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( contentRef, touched );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ mergedRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ (\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tchildField,\n\t\t\t\t\t\tchildFieldValidity,\n\t\t\t\t\t\tmarkWhenOptional\n\t\t\t\t\t) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ cancelLabel }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ applyLabel }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst [ touched, setTouched ] = useState( false );\n\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst { fieldDefinition, fieldLabel, summaryFields } =\n\t\tuseFieldFromFormField( field );\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst handleClose = () => {\n\t\tsetIsOpen( false );\n\t\tsetTouched( true );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tvalidity={ validity }\n\t\t\t\ttouched={ touched }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ handleClose }\n\t\t\t\t\ttouched={ touched }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataviews-layout/index.mjs CHANGED Viewed

@@ -1,8 +1,10 @@
 // packages/dataviews/src/components/dataviews-layout/index.tsx
 import { useContext } from "@wordpress/element";
+import { Spinner } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import DataViewsContext from "../dataviews-context/index.mjs";
 import { VIEW_LAYOUTS } from "../dataviews-layouts/index.mjs";
+import { useDelayedLoading } from "../../hooks/use-delayed-loading.mjs";
 import { jsx } from "react/jsx-runtime";
 function DataViewsLayout({ className }) {
   const {
@@ -22,15 +24,22 @@ function DataViewsLayout({ className }) {
     isItemClickable,
     renderItemLink,
     defaultLayouts,
+    containerRef,
     empty = /* @__PURE__ */ jsx("p", { children: __("No results") })
   } = useContext(DataViewsContext);
+  const isDelayedInitialLoading = useDelayedLoading(!hasInitiallyLoaded, {
+    delay: 200
+  });
   if (!hasInitiallyLoaded) {
-    return null;
+    if (!isDelayedInitialLoading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "dataviews-loading", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) });
   }
   const ViewComponent = VIEW_LAYOUTS.find(
     (v) => v.type === view.type && defaultLayouts[v.type]
   )?.component;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "dataviews-layout__container", ref: containerRef, children: /* @__PURE__ */ jsx(
     ViewComponent,
     {
       className,
@@ -50,7 +59,7 @@ function DataViewsLayout({ className }) {
       view,
       empty
     }
-  );
+  ) });
 }
 export {
   DataViewsLayout as default

package/build-module/components/dataviews-layout/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-layout/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\thasInitiallyLoaded,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tif ( ! hasInitiallyLoaded ) {\n\t\treturn null;\n\t}\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAQA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAKnB,OAAO,sBAAsB;AAC7B,SAAS,oBAAoB;AAyBnB;AAlBK,SAAR,gBAAkC,EAAE,UAAU,GAA0B;AAC9E,QAAM;AAAA,IACL,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,oBAAC,OAAI,aAAI,YAAa,GAAG;AAAA,EAClC,IAAI,WAAY,gBAAiB;AAEjC,MAAK,CAAE,oBAAqB;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,aAAa;AAAA,IAClC,CAAE,MAAO,EAAE,SAAS,KAAK,QAAQ,eAAgB,EAAE,IAAK;AAAA,EACzD,GAAG;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Spinner } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport { useDelayedLoading } from '../../hooks/use-delayed-loading';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\thasInitiallyLoaded,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tcontainerRef,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tconst isDelayedInitialLoading = useDelayedLoading( ! hasInitiallyLoaded, {\n\t\tdelay: 200,\n\t} );\n\t// Until the initial data load completes, show a spinner (or nothing if fast).\n\t// After that, render the layout component which preserves previous data\n\t// while loading subsequent requests.\n\tif ( ! hasInitiallyLoaded ) {\n\t\t// If the initial data load is fast, don't show the loading state at all.\n\t\tif ( ! isDelayedInitialLoading ) {\n\t\t\treturn null;\n\t\t}\n\t\t// If the initial data load takes more than 200ms, show the loading state.\n\t\treturn (\n\t\t\t<div className=\"dataviews-loading\">\n\t\t\t\t<p>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<div className=\"dataviews-layout__container\" ref={ containerRef }>\n\t\t\t<ViewComponent\n\t\t\t\tclassName={ className }\n\t\t\t\tactions={ actions }\n\t\t\t\tdata={ data }\n\t\t\t\tfields={ fields }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t\tgetItemLevel={ getItemLevel }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tselection={ selection }\n\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\tview={ view }\n\t\t\t\tempty={ empty }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAQA,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,UAAU;AAKnB,OAAO,sBAAsB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AA0BxB;AAnBK,SAAR,gBAAkC,EAAE,UAAU,GAA0B;AAC9E,QAAM;AAAA,IACL,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,oBAAC,OAAI,aAAI,YAAa,GAAG;AAAA,EAClC,IAAI,WAAY,gBAAiB;AAEjC,QAAM,0BAA0B,kBAAmB,CAAE,oBAAoB;AAAA,IACxE,OAAO;AAAA,EACR,CAAE;AAIF,MAAK,CAAE,oBAAqB;AAE3B,QAAK,CAAE,yBAA0B;AAChC,aAAO;AAAA,IACR;AAEA,WACC,oBAAC,SAAI,WAAU,qBACd,8BAAC,OACA,8BAAC,WAAQ,GACV,GACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,aAAa;AAAA,IAClC,CAAE,MAAO,EAAE,SAAS,KAAK,QAAQ,eAAgB,EAAE,IAAK;AAAA,EACzD,GAAG;AAEH,SACC,oBAAC,SAAI,WAAU,+BAA8B,KAAM,cAClD;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD;AAEF;",
   "names": []
 }

package/build-module/components/dataviews-layouts/grid/composite-grid.mjs CHANGED Viewed

@@ -278,7 +278,11 @@ function CompositeGrid({
     Composite,
     {
       role: isInfiniteScroll ? "feed" : "grid",
-      className: clsx("dataviews-view-grid", className),
+      className: clsx("dataviews-view-grid", className, {
+        [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+          view.layout.density
+        )
+      }),
       focusWrap: true,
       "aria-busy": isLoading,
       "aria-rowcount": isInfiniteScroll ? void 0 : totalRows,

package/build-module/components/dataviews-layouts/grid/composite-grid.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/grid/composite-grid.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n}\n\nconst GridItem = forwardRef( function GridItem< Item >(\n\t{\n\t\tview,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\titem,\n\t\tactions,\n\t\tmediaField,\n\t\ttitleField,\n\t\tdescriptionField,\n\t\tregularFields,\n\t\tbadgeFields,\n\t\thasBulkActions,\n\t\tconfig,\n\t\t...props\n\t}: GridItemProps< Item >,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst instanceId = useInstanceId( GridItem );\n\tconst isSelected = selection.includes( id );\n\tconst mediaPlaceholder = (\n\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t);\n\tconst rendersMediaField = showMedia && mediaField?.render;\n\tconst renderedMediaField = rendersMediaField ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : (\n\t\tmediaPlaceholder\n\t);\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\tlet mediaA11yProps;\n\tlet titleA11yProps;\n\tif ( isItemClickable( item ) && onClickItem ) {\n\t\tif ( renderedTitleField ) {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t\ttitleA11yProps = {\n\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t} else {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t};\n\t\t}\n\t}\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tprops.className,\n\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t{\n\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<ItemClickWrapper\n\t\t\t\titem={ item }\n\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\tclassName={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t} ) }\n\t\t\t\t{ ...mediaA11yProps }\n\t\t\t>\n\t\t\t\t{ renderedMediaField }\n\t\t\t</ItemClickWrapper>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<div className=\"dataviews-view-grid__title\">\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tfield: titleField,\n\t\t\t\t\t\t\t} ) || undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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\t\t<Tooltip text={ field.label }>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n} ) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\n\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tinert?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tinert,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\treturn (\n\t\t<Composite\n\t\t\trole={ isInfiniteScroll ? 'feed' : 'grid' }\n\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\tfocusWrap\n\t\t\taria-busy={ isLoading }\n\t\t\taria-rowcount={ isInfiniteScroll ? undefined : totalRows }\n\t\t\tref={ resizeObserverRef }\n\t\t\t// @ts-ignore\n\t\t\tinert={ inert }\n\t\t>\n\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t<Composite.Row\n\t\t\t\t\tkey={ i }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ row.map( ( item, indexInRow ) => {\n\t\t\t\t\t\tconst index = i * gridColumns + indexInRow;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? 'article'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'gridcell'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-setsize={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-posinset={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n}\n\nconst GridItem = forwardRef( function GridItem< Item >(\n\t{\n\t\tview,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tgetItemId,\n\t\titem,\n\t\tactions,\n\t\tmediaField,\n\t\ttitleField,\n\t\tdescriptionField,\n\t\tregularFields,\n\t\tbadgeFields,\n\t\thasBulkActions,\n\t\tconfig,\n\t\t...props\n\t}: GridItemProps< Item >,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst instanceId = useInstanceId( GridItem );\n\tconst isSelected = selection.includes( id );\n\tconst mediaPlaceholder = (\n\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t);\n\tconst rendersMediaField = showMedia && mediaField?.render;\n\tconst renderedMediaField = rendersMediaField ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : (\n\t\tmediaPlaceholder\n\t);\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\tlet mediaA11yProps;\n\tlet titleA11yProps;\n\tif ( isItemClickable( item ) && onClickItem ) {\n\t\tif ( renderedTitleField ) {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t\ttitleA11yProps = {\n\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t} else {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t};\n\t\t}\n\t}\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tprops.className,\n\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t{\n\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<ItemClickWrapper\n\t\t\t\titem={ item }\n\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\tclassName={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t} ) }\n\t\t\t\t{ ...mediaA11yProps }\n\t\t\t>\n\t\t\t\t{ renderedMediaField }\n\t\t\t</ItemClickWrapper>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<div className=\"dataviews-view-grid__title\">\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tfield: titleField,\n\t\t\t\t\t\t\t} ) || undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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\t\t<Tooltip text={ field.label }>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n} ) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\n\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tinert?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tinert,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\treturn (\n\t\t<Composite\n\t\t\trole={ isInfiniteScroll ? 'feed' : 'grid' }\n\t\t\tclassName={ clsx( 'dataviews-view-grid', className, {\n\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t),\n\t\t\t} ) }\n\t\t\tfocusWrap\n\t\t\taria-busy={ isLoading }\n\t\t\taria-rowcount={ isInfiniteScroll ? undefined : totalRows }\n\t\t\tref={ resizeObserverRef }\n\t\t\t// @ts-ignore\n\t\t\tinert={ inert }\n\t\t>\n\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t<Composite.Row\n\t\t\t\t\tkey={ i }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ row.map( ( item, indexInRow ) => {\n\t\t\t\t\t\tconst index = i * gridColumns + indexInRow;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? 'article'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'gridcell'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-setsize={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\taria-posinset={\n\t\t\t\t\t\t\t\t\t\t\tisInfiniteScroll\n\t\t\t\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["GridItem"]
 }

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

@@ -21,8 +21,8 @@ import {
   LAYOUT_PICKER_GRID,
   LAYOUT_PICKER_TABLE
 } from "../../constants.mjs";
-import PreviewSizePicker from "./utils/preview-size-picker.mjs";
 import DensityPicker from "./utils/density-picker.mjs";
+import GridConfigOptions from "./utils/grid-config-options.mjs";
 var VIEW_LAYOUTS = [
   {
     type: LAYOUT_TABLE,
@@ -36,7 +36,7 @@ var VIEW_LAYOUTS = [
     label: __("Grid"),
     component: ViewGrid,
     icon: category,
-    viewConfigOptions: PreviewSizePicker
+    viewConfigOptions: GridConfigOptions
   },
   {
     type: LAYOUT_LIST,
@@ -57,7 +57,7 @@ var VIEW_LAYOUTS = [
     label: __("Grid"),
     component: ViewPickerGrid,
     icon: category,
-    viewConfigOptions: PreviewSizePicker,
+    viewConfigOptions: GridConfigOptions,
     isPicker: true
   },
   {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-layouts/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n\tscheduled,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewActivity from './activity';\nimport ViewPickerGrid from './picker-grid';\nimport ViewPickerTable from './picker-table';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_ACTIVITY,\n\tLAYOUT_PICKER_GRID,\n\tLAYOUT_PICKER_TABLE,\n} from '../../constants';\nimport PreviewSizePicker from './utils/preview-size-picker';\nimport DensityPicker from './utils/density-picker';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_ACTIVITY,\n\t\tlabel: __( 'Activity' ),\n\t\tcomponent: ViewActivity,\n\t\ticon: scheduled,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t\tisPicker: true,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewPickerTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t\tisPicker: true,\n\t},\n];\n"],
-  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,uBAAuB;AAC9B,OAAO,mBAAmB;AAEnB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,IACvC,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,UAAW;AAAA,IACtB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n\tscheduled,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewActivity from './activity';\nimport ViewPickerGrid from './picker-grid';\nimport ViewPickerTable from './picker-table';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_ACTIVITY,\n\tLAYOUT_PICKER_GRID,\n\tLAYOUT_PICKER_TABLE,\n} from '../../constants';\nimport DensityPicker from './utils/density-picker';\nimport GridConfigOptions from './utils/grid-config-options';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: GridConfigOptions,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_ACTIVITY,\n\t\tlabel: __( 'Activity' ),\n\t\tcomponent: ViewActivity,\n\t\ticon: scheduled,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: GridConfigOptions,\n\t\tisPicker: true,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewPickerTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t\tisPicker: true,\n\t},\n];\n"],
+  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,mBAAmB;AAC1B,OAAO,uBAAuB;AAEvB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,IACvC,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,UAAW;AAAA,IACtB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
   "names": []
 }

package/build-module/components/dataviews-layouts/picker-grid/index.mjs CHANGED Viewed

@@ -267,7 +267,12 @@ function ViewPickerGrid({
           "aria-multiselectable": isMultiselect,
           className: clsx(
             "dataviews-view-picker-grid",
-            className
+            className,
+            {
+              [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+                view.layout.density
+              )
+            }
           ),
           "aria-label": itemListLabel,
           render: ({ children, ...props }) => /* @__PURE__ */ jsx(
@@ -337,7 +342,13 @@ function ViewPickerGrid({
             {
               className: clsx(
                 "dataviews-view-picker-grid",
-                className
+                className,
+                {
+                  [`has-${view.layout?.density}-density`]: view.layout?.density && [
+                    "compact",
+                    "comfortable"
+                  ].includes(view.layout.density)
+                }
               ),
               previewSize: usedPreviewSize,
               "aria-busy": isLoading,