@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.0

package/CHANGELOG.md

@@ -2,15 +2,32 @@
 
 ## Unreleased
 
-## 13.1.0-next.0 (2026-03-10)
+## 14.0.0 (2026-04-01)
+
+### Breaking Changes
+
+- DataViews: Use intersectionObserver to improve performance by unloading invisible items. Change how infinite scroll is enabled to require only 2 view properties: `infiniteScrollEnabled` and `startPosition`. [#74378](https://github.com/WordPress/gutenberg/pull/74378)
+- DataForm: The card layout now uses `Card` and `CollapsibleCard` from `@wordpress/ui` instead of `Card`, `CardHeader`, and `CardBody` from `@wordpress/components`. This changes the card's visual appearance (spacing, typography, and removal of the header/content separator). Custom CSS targeting `.components-card__body` within DataViews has been removed. Consumers wrapping DataViews or DataForm in a card should migrate to the `Card` and `CollapsibleCard` components from `@wordpress/ui`. [#76282](https://github.com/WordPress/gutenberg/pull/76282)
+
+### Enhancements
+
+- DataForm: Add `compact` configuration option to the `datetime` control. [#76905](https://github.com/WordPress/gutenberg/pull/76905)
+- DataViews: Field's description can accept ReactElements. [#76829](https://github.com/WordPress/gutenberg/pull/76829)
+- DataForm: Use `CollapsibleCard.HeaderDescription` for card layout header descriptions instead of manual `aria-describedby`. [#76867](https://github.com/WordPress/gutenberg/pull/76867)
+
+## 13.1.0 (2026-03-18)
 
 ### Enhancements
 
 - DataForm: Reduce panel's dialog min-width. [#76345](https://github.com/WordPress/gutenberg/pull/76345)
+- DataViews: Add border to sticky table headers. [#76396](https://github.com/WordPress/gutenberg/pull/76396)
+- DataViews: Update scrolling so the scrollbar appears on the active layout when DataViews is rendered in a constrained-height container. This may slightly change the UI depending on the container height. [#76453](https://github.com/WordPress/gutenberg/pull/76453)
+- DataViews: Add density option to Grid and PickerGrid layouts. [#75887](https://github.com/WordPress/gutenberg/pull/75887)
 
 ### Bug Fixes
 
 - DataViews: Fix last column classname in table layout. [#76133](https://github.com/WordPress/gutenberg/pull/76133)
+- DataViews: Add spinner in DataViewsLayout in initial load of data. [#76486](https://github.com/WordPress/gutenberg/pull/76486)
 - DataForm: Properly handle dates in datetime control. [#76193](https://github.com/WordPress/gutenberg/pull/76193)
 
 ### Code Quality

package/README.md

@@ -216,6 +216,7 @@ Properties:
     -   `isLocked`: whether the filter is locked (cannot be edited by the user).
 -   `perPage`: number of records to show per page.
 -   `page`: the page that is visible.
+-   `startPosition`: the first item to load when infinite scroll is enabled. Used instead of `page`.
 -   `sort`:
     -   `field`: the field used for sorting the dataset.
     -   `direction`: the direction to use for sorting, one of `asc` or `desc`.
@@ -240,7 +241,7 @@ Properties:
 
 | Props / Layout | `table` | `pickerTable` | `grid` | `pickerGrid` | `list` | `activity` |
 | -------------- | ------- | ------------- | ------ | ------------ | ------ | ---------- |
-| `density`      | ✓       | ✓             |        |              | ✓      | ✓          |
+| `density`      | ✓       | ✓             | ✓      | ✓            | ✓      | ✓          |
 | `enableMoving` | ✓       | ✓             |        |              |        |            |
 | `styles`       | ✓       | ✓             |        |              |        |            |
 | `badgeFields`  |         |               | ✓      | ✓            |        |            |
@@ -258,6 +259,7 @@ Right-align (`'end'`) whenever the cell value is fundamentally quantitative—nu
 `grid` and `pickerGrid` layout:
 
 -   `badgeFields`: a list of field's `id` to render without label and styled as badges.
+-   `density`: one of `comfortable`, `balanced`, or `compact`. Configures the gap between items in the grid.
 -   `previewSize`: a `number` representing the size of the preview.
 
 `list` layout:
@@ -388,7 +390,6 @@ const actions = [
 
 -   `totalItems`: the total number of items in the datasets.
 -   `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
--   `infiniteScrollHandler`: a function that handles infinite scrolling. This function should be called when the user scrolls to the bottom of the page. See [example in storybook](https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--infinite-scroll).
 
 #### `search`: `boolean`
 
@@ -689,7 +690,7 @@ A list of actions that can be performed on the dataset. See "Actions API" for mo
 
 #### `paginationInfo`: `Object`
 
-Same as `DataViews`. Contains `totalItems` and `totalPages` properties, and optionally `infiniteScrollHandler`.
+Same as `DataViews`. Contains `totalItems` and `totalPages` properties.
 
 #### `search`: `boolean`
 
@@ -1577,6 +1578,20 @@ Additionally, some of the bundled Edit controls are configurable via a config ob
 }
 ```
 
+-   `datetime` configuration:
+
+```js
+{
+	id: 'date',
+	type: 'datetime',
+	label: 'Date',
+	Edit: {
+		control: 'datetime',
+		compact: true
+	}
+}
+```
+
 Finally, the field author can always provide its own custom `Edit` control. It receives the following props:
 
 -   `data`: the item to be processed
@@ -1590,6 +1605,7 @@ Finally, the field author can always provide its own custom `Edit` control. It r
     -   `prefix`: a React component to be rendered as a prefix
     -   `suffix`: a React component to be rendered as a suffix
     -   `rows`: the number of rows to display (e.g., in the text area component)
+    -   `compact`: whether to render a compact version without the calendar widget (datetime control)
 
 ```js
 {

package/build/components/dataform-controls/datetime.cjs

@@ -57,8 +57,10 @@ function CalendarDateTimeControl({
   onChange,
   hideLabelFromVision,
   markWhenOptional,
-  validity
+  validity,
+  config
 }) {
+  const { compact } = config || {};
   const { id, label, description, setValue, getValue, isValid } = field;
   const fieldValue = getValue({ item: data });
   const value = typeof fieldValue === "string" ? fieldValue : void 0;
@@ -162,7 +164,7 @@ function CalendarDateTimeControl({
             onChange: handleManualDateTimeChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        !compact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           DateCalendar,
           {
             style: { width: "100%" },
@@ -185,7 +187,8 @@ function DateTime({
   hideLabelFromVision,
   markWhenOptional,
   operator,
-  validity
+  validity,
+  config
 }) {
   if (operator === import_constants.OPERATOR_IN_THE_PAST || operator === import_constants.OPERATOR_OVER) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -208,7 +211,8 @@ function DateTime({
       onChange,
       hideLabelFromVision,
       markWhenOptional,
-      validity
+      validity,
+      config
     }
   );
 }

package/build/components/dataform-controls/datetime.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-controls/datetime.tsx"],
-  "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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",
+  "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\tconfig,\n}: DataFormControlProps< Item > ) {\n\tconst { compact } = config || {};\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{ ! compact && (\n\t\t\t\t\t<DateCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t\t\t? parseDateTime( value ) || undefined\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t) }\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\tconfig,\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\tconfig={ config }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["componentsPrivateApis", "parseDateTime", "getCustomValidity", "RelativeDateControl"]
 }

package/build/components/dataform-layouts/card/index.cjs

@@ -33,10 +33,8 @@ __export(card_exports, {
   default: () => FormCardField
 });
 module.exports = __toCommonJS(card_exports);
-var import_components = require("@wordpress/components");
-var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
-var import_icons = require("@wordpress/icons");
+var import_ui = require("@wordpress/ui");
 var import__ = require("../index.cjs");
 var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
 var import_data_form_layout = require("../data-form-layout.cjs");
@@ -70,6 +68,84 @@ function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
   }
   return true;
 }
+function HeaderContent({
+  data,
+  fields,
+  label,
+  layout,
+  isOpen,
+  touched,
+  validity
+}) {
+  const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
+  const visibleSummaryFields = summaryFields.filter(
+    (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
+  );
+  const hasBadge = touched && layout.isCollapsible;
+  const hasSummary = visibleSummaryFields.length > 0 && layout.withHeader;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ui.Stack,
+    {
+      align: "center",
+      justify: "space-between",
+      className: "dataforms-layouts-card__field-header-content",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Card.Title, { children: label }),
+        (hasBadge || hasSummary) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.CollapsibleCard.HeaderDescription, { className: "dataforms-layouts-card__field-header-content-description", children: [
+          hasBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validation_badge.default, { validity }),
+          hasSummary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            summaryField.render,
+            {
+              item: data,
+              field: summaryField
+            },
+            summaryField.id
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+function BodyContent({
+  data,
+  field,
+  form,
+  onChange,
+  hideLabelFromVision,
+  markWhenOptional,
+  validity,
+  withHeader
+}) {
+  if (field.children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_data_form_layout.DataFormLayout,
+        {
+          data,
+          form,
+          onChange,
+          validity: validity?.children
+        }
+      )
+    ] });
+  }
+  const SingleFieldLayout = (0, import__.getFormFieldLayout)("regular")?.component;
+  if (!SingleFieldLayout) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SingleFieldLayout,
+    {
+      data,
+      field,
+      onChange,
+      hideLabelFromVision: hideLabelFromVision || withHeader,
+      markWhenOptional,
+      validity
+    }
+  );
+}
 function FormCardField({
   data,
   field,
@@ -80,10 +156,7 @@ function FormCardField({
 }) {
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
   const layout = field.layout;
-  const cardBodyRef = (0, import_element.useRef)(null);
-  const instanceId = (0, import_compose.useInstanceId)(FormCardField);
-  const bodyId = `dataforms-layouts-card-card-body-${instanceId}`;
-  const titleId = `dataforms-layouts-card-card-title-${instanceId}`;
+  const contentRef = (0, import_element.useRef)(null);
   const form = (0, import_element.useMemo)(
     () => ({
       layout: import_normalize_form.DEFAULT_LAYOUT,
@@ -92,52 +165,28 @@ function FormCardField({
     [field]
   );
   const { isOpened, isCollapsible } = layout;
-  const [internalIsOpen, setIsOpen] = (0, import_element.useState)(isOpened);
+  const [isOpen, setIsOpen] = (0, import_element.useState)(isOpened);
   const [touched, setTouched] = (0, import_element.useState)(false);
   (0, import_element.useEffect)(() => {
     setIsOpen(isOpened);
   }, [isOpened]);
-  const toggle = (0, import_element.useCallback)(() => {
-    setIsOpen((prev) => {
-      if (prev) {
-        setTouched(true);
-      }
-      return !prev;
-    });
+  const handleOpenChange = (0, import_element.useCallback)((open) => {
+    if (!open) {
+      setTouched(true);
+    }
+    setIsOpen(open);
   }, []);
-  const isOpen = isCollapsible ? internalIsOpen : true;
   const handleBlur = (0, import_element.useCallback)(() => {
     setTouched(true);
-  }, [setTouched]);
-  (0, import_use_report_validity.default)(cardBodyRef, isOpen && touched);
-  const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
-  const visibleSummaryFields = summaryFields.filter(
-    (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
+  }, []);
+  (0, import_use_report_validity.default)(
+    contentRef,
+    (isCollapsible ? isOpen : true) && touched
   );
-  const validationBadge = touched && layout.isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validation_badge.default, { validity }) : null;
-  const sizeCard = {
-    blockStart: "medium",
-    blockEnd: "medium",
-    inlineStart: "medium",
-    inlineEnd: "medium"
-  };
   let label = field.label;
   let withHeader;
-  let bodyContent;
   if (field.children) {
     withHeader = !!label && layout.withHeader;
-    bodyContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_data_form_layout.DataFormLayout,
-        {
-          data,
-          form,
-          onChange,
-          validity: validity?.children
-        }
-      )
-    ] });
   } else {
     const fieldDefinition = fields.find(
       (fieldDef) => fieldDef.id === field.id
@@ -145,103 +194,58 @@ function FormCardField({
     if (!fieldDefinition || !fieldDefinition.Edit) {
       return null;
     }
-    const SingleFieldLayout = (0, import__.getFormFieldLayout)("regular")?.component;
-    if (!SingleFieldLayout) {
-      return null;
-    }
     label = fieldDefinition.label;
     withHeader = !!label && layout.withHeader;
-    bodyContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      SingleFieldLayout,
-      {
-        data,
-        field,
-        onChange,
-        hideLabelFromVision: hideLabelFromVision || withHeader,
-        markWhenOptional,
-        validity
-      }
-    );
   }
-  const sizeCardBody = {
-    blockStart: withHeader ? "none" : "medium",
-    blockEnd: "medium",
-    inlineStart: "medium",
-    inlineEnd: "medium"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
-    withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.CardHeader,
+  const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    BodyContent,
+    {
+      data,
+      field,
+      form,
+      onChange,
+      hideLabelFromVision,
+      markWhenOptional,
+      validity,
+      withHeader
+    }
+  );
+  const headerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    HeaderContent,
+    {
+      data,
+      fields,
+      label,
+      layout,
+      isOpen: isCollapsible ? !!isOpen : true,
+      touched,
+      validity
+    }
+  );
+  if (withHeader && isCollapsible) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ui.CollapsibleCard.Root,
       {
-        className: "dataforms-layouts-card__field-header",
-        onClick: isCollapsible ? toggle : void 0,
-        style: {
-          cursor: isCollapsible ? "pointer" : void 0
-        },
-        isBorderless: true,
+        className: "dataforms-layouts-card__field",
+        open: isOpen,
+        onOpenChange: handleOpenChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "div",
-            {
-              style: {
-                // Match the expand/collapse button's height to avoid layout
-                // differences when that button is not displayed.
-                height: isCollapsible ? void 0 : "40px",
-                width: "100%",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "span",
-                  {
-                    id: titleId,
-                    className: "dataforms-layouts-card__field-header-label",
-                    children: label
-                  }
-                ),
-                validationBadge,
-                visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
-                  (summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    summaryField.render,
-                    {
-                      item: data,
-                      field: summaryField
-                    },
-                    summaryField.id
-                  )
-                ) })
-              ]
-            }
-          ),
-          isCollapsible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.CollapsibleCard.Header, { children: headerContent }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.CollapsibleCard.Content,
             {
-              __next40pxDefaultSize: true,
-              variant: "tertiary",
-              icon: isOpen ? import_icons.chevronUp : import_icons.chevronDown,
-              "aria-expanded": isOpen,
-              "aria-controls": bodyId,
-              "aria-labelledby": titleId
+              ref: contentRef,
+              onBlur: handleBlur,
+              children: bodyContent
             }
           )
         ]
       }
-    ),
-    (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
-    // Otherwise, the card will not be visible.
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.CardBody,
-      {
-        id: bodyId,
-        size: sizeCardBody,
-        className: "dataforms-layouts-card__field-control",
-        ref: cardBodyRef,
-        onBlur: handleBlur,
-        children: bodyContent
-      }
-    )
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Card.Root, { className: "dataforms-layouts-card__field", children: [
+    withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Card.Header, { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Card.Content, { ref: contentRef, onBlur: handleBlur, children: bodyContent })
   ] });
 }
 //# sourceMappingURL=index.cjs.map

package/build/components/dataform-layouts/card/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/card/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\tconst instanceId = useInstanceId( FormCardField );\n\tconst bodyId = `dataforms-layouts-card-card-body-${ instanceId }`;\n\tconst titleId = `dataforms-layouts-card-card-title-${ instanceId }`;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ internalIsOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => {\n\t\t\t// Mark as touched when collapsing (going from open to closed)\n\t\t\tif ( prev ) {\n\t\t\t\tsetTouched( true );\n\t\t\t}\n\t\t\treturn ! prev;\n\t\t} );\n\t}, [] );\n\n\tconst isOpen = isCollapsible ? internalIsOpen : true;\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst validationBadge =\n\t\ttouched && layout.isCollapsible ? (\n\t\t\t<ValidationBadge validity={ validity } />\n\t\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tlet label = field.label;\n\tlet withHeader: boolean;\n\tlet bodyContent: React.ReactNode;\n\n\tif ( field.children ) {\n\t\twithHeader = !! label && layout.withHeader;\n\t\tbodyContent = (\n\t\t\t<>\n\t\t\t\t{ field.description && (\n\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t} else {\n\t\tconst fieldDefinition = fields.find(\n\t\t\t( fieldDef ) => fieldDef.id === field.id\n\t\t);\n\n\t\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;\n\t\tif ( ! SingleFieldLayout ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlabel = fieldDefinition.label;\n\t\twithHeader = !! label && layout.withHeader;\n\t\tbodyContent = (\n\t\t\t<SingleFieldLayout\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision || withHeader }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<OriginalCardHeader\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-header\"\n\t\t\t\t\tonClick={ isCollapsible ? toggle : undefined }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tcursor: isCollapsible ? 'pointer' : undefined,\n\t\t\t\t\t} }\n\t\t\t\t\tisBorderless\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t// Match the expand/collapse button's height to avoid layout\n\t\t\t\t\t\t\t// differences when that button is not displayed.\n\t\t\t\t\t\t\theight: isCollapsible ? undefined : '40px',\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={ titleId }\n\t\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-header-label\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ isCollapsible && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-controls={ bodyId }\n\t\t\t\t\t\t\taria-labelledby={ titleId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</OriginalCardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tid={ bodyId }\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t{ bodyContent }\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAKO;AACP,qBAA8B;AAC9B,qBAOO;AACP,mBAAuC;AAKvC,eAAmC;AACnC,8BAA4B;AAQ5B,8BAA+B;AAC/B,4BAA+B;AAC/B,gCAAiC;AACjC,iCAA8B;AAC9B,8BAA4B;AAoHzB;AAlHH,SAAS,sBACR,cACA,eACA,QACC;AAED,MACC,CAAE,iBACA,MAAM,QAAS,aAAc,KAAK,cAAc,WAAW,GAC5D;AACD,WAAO;AAAA,EACR;AAGA,QAAM,qBAAqB,MAAM,QAAS,aAAc,IACrD,gBACA,CAAE,aAAc;AAGnB,QAAM,cAAc,mBAAmB,KAAM,CAAE,WAAY;AAC1D,QAAK,OAAO,WAAW,UAAW;AACjC,aAAO,WAAW,aAAa;AAAA,IAChC;AACA,QAAK,OAAO,WAAW,YAAY,QAAQ,QAAS;AACnD,aAAO,OAAO,OAAO,aAAa;AAAA,IACnC;AACA,WAAO;AAAA,EACR,CAAE;AAGF,MAAK,CAAE,aAAc;AACpB,WAAO;AAAA,EACR;AAGA,MAAK,OAAO,gBAAgB,UAAW;AACtC,WAAO;AAAA,EACR;AAGA,MAAK,OAAO,gBAAgB,YAAY,gBAAgB,aAAc;AACrE,WACC,YAAY,eAAe,YACzB,YAAY,eAAe,oBAAoB,CAAE;AAAA,EAErD;AAGA,SAAO;AACR;AAEe,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,QAAI,2BAAY,wBAAAA,OAAgB;AAC/C,QAAM,SAAS,MAAM;AACrB,QAAM,kBAAc,uBAA0B,IAAK;AACnD,QAAM,iBAAa,8BAAe,aAAc;AAChD,QAAM,SAAS,oCAAqC,UAAW;AAC/D,QAAM,UAAU,qCAAsC,UAAW;AAEjE,QAAM,WAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,YAAY,CAAC;AAAA,IAC5B;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,EAAE,UAAU,cAAc,IAAI;AACpC,QAAM,CAAE,gBAAgB,SAAU,QAAI,yBAAU,QAAS;AACzD,QAAM,CAAE,SAAS,UAAW,QAAI,yBAAU,KAAM;AAIhD,gCAAW,MAAM;AAChB,cAAW,QAAS;AAAA,EACrB,GAAG,CAAE,QAAS,CAAE;AAEhB,QAAM,aAAS,4BAAa,MAAM;AACjC,cAAW,CAAE,SAAU;AAEtB,UAAK,MAAO;AACX,mBAAY,IAAK;AAAA,MAClB;AACA,aAAO,CAAE;AAAA,IACV,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,QAAM,SAAS,gBAAgB,iBAAiB;AAIhD,QAAM,iBAAa,4BAAa,MAAM;AACrC,eAAY,IAAK;AAAA,EAClB,GAAG,CAAE,UAAW,CAAE;AAIlB,iCAAAC,SAAmB,aAAa,UAAU,OAAQ;AAElD,QAAM,oBAAgB,4CAA0B,OAAO,SAAS,MAAO;AAEvE,QAAM,uBAAuB,cAAc;AAAA,IAAQ,CAAE,iBACpD,sBAAuB,cAAc,OAAO,SAAS,MAAO;AAAA,EAC7D;AAEA,QAAM,kBACL,WAAW,OAAO,gBACjB,4CAAC,wBAAAC,SAAA,EAAgB,UAAsB,IACpC;AAEL,QAAM,WAAW;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,EACZ;AAEA,MAAI,QAAQ,MAAM;AAClB,MAAI;AACJ,MAAI;AAEJ,MAAK,MAAM,UAAW;AACrB,iBAAa,CAAC,CAAE,SAAS,OAAO;AAChC,kBACC,4EACG;AAAA,YAAM,eACP,4CAAC,SAAI,WAAU,6CACZ,gBAAM,aACT;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA;AAAA,MACtB;AAAA,OACD;AAAA,EAEF,OAAO;AACN,UAAM,kBAAkB,OAAO;AAAA,MAC9B,CAAE,aAAc,SAAS,OAAO,MAAM;AAAA,IACvC;AAEA,QAAK,CAAE,mBAAmB,CAAE,gBAAgB,MAAO;AAClD,aAAO;AAAA,IACR;AAEA,UAAM,wBAAoB,6BAAoB,SAAU,GAAG;AAC3D,QAAK,CAAE,mBAAoB;AAC1B,aAAO;AAAA,IACR;AAEA,YAAQ,gBAAgB;AACxB,iBAAa,CAAC,CAAE,SAAS,OAAO;AAChC,kBACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,qBAAsB,uBAAuB;AAAA,QAC7C;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,QAAM,eAAe;AAAA,IACpB,YAAY,aAAe,SAAsB;AAAA,IACjD,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,EACZ;AAEA,SACC,6CAAC,0BAAK,WAAU,iCAAgC,MAAO,UACpD;AAAA,kBACD;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAU,gBAAgB,SAAS;AAAA,QACnC,OAAQ;AAAA,UACP,QAAQ,gBAAgB,YAAY;AAAA,QACrC;AAAA,QACA,cAAY;AAAA,QAEZ;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ;AAAA;AAAA;AAAA,gBAGP,QAAQ,gBAAgB,SAAY;AAAA,gBACpC,OAAO;AAAA,gBACP,SAAS;AAAA,gBACT,gBAAgB;AAAA,gBAChB,YAAY;AAAA,cACb;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,IAAK;AAAA,oBACL,WAAU;AAAA,oBAER;AAAA;AAAA,gBACH;AAAA,gBACE;AAAA,gBACA,qBAAqB,SAAS,KAC/B,OAAO,cACN,4CAAC,SAAI,WAAU,yCACZ,+BAAqB;AAAA,kBACtB,CAAE,iBACD;AAAA,oBAAC,aAAa;AAAA,oBAAb;AAAA,sBAEA,MAAO;AAAA,sBACP,OAAQ;AAAA;AAAA,oBAFF,aAAa;AAAA,kBAGpB;AAAA,gBAEF,GACD;AAAA;AAAA;AAAA,UAEH;AAAA,UACE,iBACD;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,MAAO,SAAS,yBAAY;AAAA,cAC5B,iBAAgB;AAAA,cAChB,iBAAgB;AAAA,cAChB,mBAAkB;AAAA;AAAA,UACnB;AAAA;AAAA;AAAA,IAEF;AAAA,KAEG,UAAU,CAAE;AAAA;AAAA,IAGf;AAAA,MAAC;AAAA;AAAA,QACA,IAAK;AAAA,QACL,MAAO;AAAA,QACP,WAAU;AAAA,QACV,KAAM;AAAA,QACN,QAAS;AAAA,QAEP;AAAA;AAAA,IACH;AAAA,KAEF;AAEF;",
-  "names": ["DataFormContext", "useReportValidity", "ValidationBadge", "OriginalCardHeader"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n// TODO: enable in the ESlint rule once we complete\n// https://github.com/WordPress/gutenberg/issues/76135.\n// eslint-disable-next-line @wordpress/use-recommended-components\nimport { Card, CollapsibleCard, Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nfunction HeaderContent< Item >( {\n\tdata,\n\tfields,\n\tlabel,\n\tlayout,\n\tisOpen,\n\ttouched,\n\tvalidity,\n}: {\n\tdata: Item;\n\tfields: NormalizedField< Item >[];\n\tlabel: string | undefined;\n\tlayout: NormalizedCardLayout;\n\tisOpen: boolean;\n\ttouched: boolean;\n\tvalidity: FieldLayoutProps< Item >[ 'validity' ];\n} ) {\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst hasBadge = touched && layout.isCollapsible;\n\tconst hasSummary = visibleSummaryFields.length > 0 && layout.withHeader;\n\n\treturn (\n\t\t<Stack\n\t\t\talign=\"center\"\n\t\t\tjustify=\"space-between\"\n\t\t\tclassName=\"dataforms-layouts-card__field-header-content\"\n\t\t>\n\t\t\t<Card.Title>{ label }</Card.Title>\n\t\t\t{ ( hasBadge || hasSummary ) && (\n\t\t\t\t<CollapsibleCard.HeaderDescription className=\"dataforms-layouts-card__field-header-content-description\">\n\t\t\t\t\t{ hasBadge && <ValidationBadge validity={ validity } /> }\n\t\t\t\t\t{ hasSummary && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CollapsibleCard.HeaderDescription>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n\nfunction BodyContent< Item >( {\n\tdata,\n\tfield,\n\tform,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n\twithHeader,\n}: {\n\tdata: Item;\n\tfield: FieldLayoutProps< Item >[ 'field' ];\n\tform: NormalizedForm;\n\tonChange: FieldLayoutProps< Item >[ 'onChange' ];\n\thideLabelFromVision?: boolean;\n\tmarkWhenOptional?: boolean;\n\tvalidity: FieldLayoutProps< Item >[ 'validity' ];\n\twithHeader: boolean;\n} ) {\n\tif ( field.children ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ field.description && (\n\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\tconst SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! SingleFieldLayout ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SingleFieldLayout\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision || withHeader }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst handleOpenChange = useCallback( ( open: boolean ) => {\n\t\t// Mark as touched when collapsing (going from open to closed)\n\t\tif ( ! open ) {\n\t\t\tsetTouched( true );\n\t\t}\n\t\tsetIsOpen( open );\n\t}, [] );\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity(\n\t\tcontentRef,\n\t\t( isCollapsible ? isOpen : true ) && touched\n\t);\n\n\tlet label = field.label;\n\tlet withHeader: boolean;\n\n\tif ( field.children ) {\n\t\twithHeader = !! label && layout.withHeader;\n\t} else {\n\t\tconst fieldDefinition = fields.find(\n\t\t\t( fieldDef ) => fieldDef.id === field.id\n\t\t);\n\n\t\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlabel = fieldDefinition.label;\n\t\twithHeader = !! label && layout.withHeader;\n\t}\n\n\tconst bodyContent = (\n\t\t<BodyContent\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tform={ form }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tvalidity={ validity }\n\t\t\twithHeader={ withHeader }\n\t\t/>\n\t);\n\n\tconst headerContent = (\n\t\t<HeaderContent\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tlabel={ label }\n\t\t\tlayout={ layout }\n\t\t\tisOpen={ isCollapsible ? !! isOpen : true }\n\t\t\ttouched={ touched }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n\n\tif ( withHeader && isCollapsible ) {\n\t\treturn (\n\t\t\t<CollapsibleCard.Root\n\t\t\t\tclassName=\"dataforms-layouts-card__field\"\n\t\t\t\topen={ isOpen }\n\t\t\t\tonOpenChange={ handleOpenChange }\n\t\t\t>\n\t\t\t\t<CollapsibleCard.Header>\n\t\t\t\t\t{ headerContent }\n\t\t\t\t</CollapsibleCard.Header>\n\t\t\t\t<CollapsibleCard.Content\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t{ bodyContent }\n\t\t\t\t</CollapsibleCard.Content>\n\t\t\t</CollapsibleCard.Root>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Card.Root className=\"dataforms-layouts-card__field\">\n\t\t\t{ withHeader && <Card.Header>{ headerContent }</Card.Header> }\n\t\t\t<Card.Content ref={ contentRef } onBlur={ handleBlur }>\n\t\t\t\t{ bodyContent }\n\t\t\t</Card.Content>\n\t\t</Card.Root>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["ValidationBadge", "DataFormContext", "useReportValidity"]
 }