npm - @wordpress/dataviews - Versions diffs - 12.1.1-next.v.202602241322.0 → 13.0.0 - Mend

@wordpress/dataviews 12.1.1-next.v.202602241322.0 → 13.0.0

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

Files changed (132) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,17 +2,37 @@
 ## Unreleased
-## 12.1.0-next.0 (2026-02-24)
+## 13.0.0 (2026-03-04)
+### Breaking Changes
+- DataViews: Align to end integer and number field types. [#75917](https://github.com/WordPress/gutenberg/pull/75917)
 ### Bug Fixes
+- DataForm: Fix label color of array control. [#75730](https://github.com/WordPress/gutenberg/pull/75730)
+- DataForm: Fix text overflow for long unhyphenated text in panel layout. [#76073](https://github.com/WordPress/gutenberg/pull/76073)
+- DataForm: Fix `card` layout's toggle button screen reader text. [#76039](https://github.com/WordPress/gutenberg/pull/76039)
+- DataViews: Fix focus transfer while searching in `list` layout. [#75999](https://github.com/WordPress/gutenberg/pull/75999)
 - DataForm: Fix focus loss when collapsing in Card view. [#75689](https://github.com/WordPress/gutenberg/pull/75689)
+- DataViews: Avoid flickering while refreshing. [#74572](https://github.com/WordPress/gutenberg/pull/74572)
 - DataViews: Fix spacing in first column. [#75693](https://github.com/WordPress/gutenberg/pull/75693)
+- DataViews: Fix filter toggle flickering when there are locked or primary filters. [#75913](https://github.com/WordPress/gutenberg/pull/75913)
 - DataViews: Fix search input losing characters during debounce when externally synced. [#75810](https://github.com/WordPress/gutenberg/pull/75810)
+- DataForm: Fix vertical alignment of summary fields in card layout. [#75864](https://github.com/WordPress/gutenberg/pull/75864)
+- DataViews: Remove visual divider between quick and regular actions in the actions menu. [#75893](https://github.com/WordPress/gutenberg/pull/75893)
+- DataForm: field label for panel layout are no longer uppercased. [#75944](https://github.com/WordPress/gutenberg/pull/75944)
 ### Enhancements
+- Documentation: Update README.md. [#75881](https://github.com/WordPress/gutenberg/pull/75881)
+- DataViews: Improve UI in `list` layout when we render only title and/or media fields. [#76042](https://github.com/WordPress/gutenberg/pull/76042)
 - DataViews: Adjust column spacing in table layout when no titleField is provided. [#75410](https://github.com/WordPress/gutenberg/pull/75410)
+- DataViews: minimize padding for primary actions. [#75721](https://github.com/WordPress/gutenberg/pull/75721)
+### Code Quality
+- Remove unused dependencies from `package.json`. [#76075](https://github.com/WordPress/gutenberg/pull/76075)
 ## 12.0.0 (2026-02-18)
@@ -42,6 +62,7 @@
 - DataViews: Consistent rendering of selection checkbox and actions in grid layout. [#75056](https://github.com/WordPress/gutenberg/pull/75056)
 ### Code Quality
 - DataForm: Style SummaryButton in panel layout with `is-disabled` classname. [#75470](https://github.com/WordPress/gutenberg/pull/75470)
 ### Internal

package/README.md CHANGED Viewed

@@ -207,7 +207,7 @@ const view = {
 Properties:
--   `type`: view type, one of `table`, `grid`, `list`. See "Layout types".
+-   `type`: view type, one of `table`, `grid`, `list`, `activity`, `pickerTable`, `pickerGrid`. See "Layout types".
 -   `search`: the text search applied to the dataset.
 -   `filters`: the filters applied to the dataset. Each item describes:
     -   `field`: which field this filter is bound to.
@@ -230,7 +230,9 @@ Properties:
     -   `field`: the field used for grouping the dataset.
     -   `direction`: the direction to use for sorting the groups, one of `asc` or `desc`. Default `asc`.
+    -   `showLabel`: whether to show the field label in the group header. `true` by default.
+-   `infiniteScrollEnabled`: whether infinite scroll is enabled. `false` by default.
 -   `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed.
 -   `layout`: config that is specific to a particular layout type.
@@ -238,7 +240,7 @@ Properties:
 | Props / Layout | `table` | `pickerTable` | `grid` | `pickerGrid` | `list` | `activity` |
 | -------------- | ------- | ------------- | ------ | ------------ | ------ | ---------- |
-| `density`      | ✓       | ✓             |        |              |        | ✓          |
+| `density`      | ✓       | ✓             |        |              | ✓      | ✓          |
 | `enableMoving` | ✓       | ✓             |        |              |        |            |
 | `styles`       | ✓       | ✓             |        |              |        |            |
 | `badgeFields`  |         |               | ✓      | ✓            |        |            |
@@ -248,10 +250,10 @@ Properties:
 -   `density`: one of `comfortable`, `balanced`, or `compact`. Configures the size and spacing of the layout.
 -   `enableMoving`: whether the table columns should display moving controls.
--   `styles`: additional `width`, `maxWidth`, `minWidth`, `align` styles for each field column.
+-   `styles`: additional `width`, `maxWidth`, `minWidth`, `align` styles for each field column. The `align` property accepts `'start'`, `'center'`, or `'end'`.
 **For column alignment (`align` property), follow these guidelines:**
-Right-align whenever the cell value is fundamentally quantitative—numbers, decimals, currency, percentages—so that digits and decimal points line up, aiding comparison and calculation. Otherwise, default to left-alignment for all other types (text, codes, labels, dates).
+Right-align (`'end'`) whenever the cell value is fundamentally quantitative—numbers, decimals, currency, percentages—so that digits and decimal points line up, aiding comparison and calculation. Otherwise, default to left-alignment (`'start'`) for all other types (text, codes, labels, dates).
 `grid` and `pickerGrid` layout:
@@ -260,7 +262,7 @@ Right-align whenever the cell value is fundamentally quantitative—numbers, dec
 `list` layout:
--   None
+-   `density`: one of `comfortable`, `balanced`, or `compact`. Configures the size and spacing of the layout.
 `activity` layout:
@@ -400,7 +402,7 @@ What text to show in the search input. "Search" by default.
 Whether the data is loading. `false` by default.
-#### `defaultLayouts`: `Record< string, view >`
+#### `defaultLayouts`: `Object`
 This property limits the available layout and provides layout information about active view types. If empty, this enables all layout types (see "Layout Types") with empty layout data.
@@ -417,7 +419,7 @@ const defaultLayouts = {
 };
 ```
-The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, `list`, and `activity`. These properties are applied to the view object each time the user switches to the corresponding layout.
+The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, `list`, `activity`, `pickerTable`, and `pickerGrid`. These properties are applied to the view object each time the user switches to the corresponding layout.
 #### `selection`: `string[]`
@@ -823,7 +825,7 @@ const fields = [
 ];
 ```
-#### `form`: `Object[]`
+#### `form`: `Object`
 -   `layout`: an object describing the layout used to render the top-level fields present in `fields`. See `layout` prop in "Form Field API".
 -   `fields`: a list of fields ids that should be rendered. Field ids can also be defined as an object and allow you to define a `layout`, `labelPosition` or `children` if displaying combined fields. See "Form Field API" for a description of every property.
@@ -893,7 +895,9 @@ return (
 Object that determines the validation status of each field. There's a `useFormValidity` hook that can be used to create the validity object — see the utility below. This section documents the `validity` object in case you want to create it via other means.
-The top-level props of the `validity` object are the field IDs. Fields declare their validity status for each of the validation rules supported: `required`, `elements`, `custom`. If a rule is valid, it should not be present in the object; if a field is valid for all the rules, it should not be present in the object either.
+The top-level props of the `validity` object are the field IDs. Fields declare their validity status for each of the validation rules supported: `required`, `elements`, `pattern`, `minLength`, `maxLength`, `min`, `max`, `custom`. If a rule is valid, it should not be present in the object; if a field is valid for all the rules, it should not be present in the object either.
+A field's validity can also contain a `children` property (`Record<string, FieldValidity>`) for nested field validity when using combined fields.
 For example:
@@ -910,6 +914,32 @@ For example:
 			"message": "Value must be one of the elements."
 		}
 	},
+	"slug": {
+		"pattern": {
+			"type": "invalid",
+			"message": "Must match the required pattern."
+		}
+	},
+	"description": {
+		"minLength": {
+			"type": "invalid",
+			"message": "Must be at least 10 characters."
+		},
+		"maxLength": {
+			"type": "invalid",
+			"message": "Must be at most 200 characters."
+		}
+	},
+	"price": {
+		"min": {
+			"type": "invalid",
+			"message": "Must be at least 0."
+		},
+		"max": {
+			"type": "invalid",
+			"message": "Must be at most 9999."
+		}
+	},
 	"publisher": {
 		"custom": {
 			"type": "validating",
@@ -982,6 +1012,26 @@ Returns an object containing:
 			type: 'invalid',
 			message: 'Value must be one of the elements.' // Optional
 		},
+		pattern: {
+			type: 'invalid',
+			message: 'Must match the required pattern.'
+		},
+		minLength: {
+			type: 'invalid',
+			message: 'Must be at least 10 characters.'
+		},
+		maxLength: {
+			type: 'invalid',
+			message: 'Must be at most 200 characters.'
+		},
+		min: {
+			type: 'invalid',
+			message: 'Must be at least 0.'
+		},
+		max: {
+			type: 'invalid',
+			message: 'Must be at most 9999.'
+		},
 		custom: {
 			type: 'validating',
 			message: 'Validating...'
@@ -1084,7 +1134,7 @@ Function that performs the required action.
 ```js
 {
-	callback: ( items, { onActionPerformed } ) => {
+	callback: ( items, { registry, onActionPerformed } ) => {
 		// Perform action.
 		onActionPerformed?.( items );
 	};
@@ -1231,7 +1281,7 @@ Example:
 React element used by some layouts (table, grid) to display the field name — useful to add icons, etc.
--   Type: React element.
+-   Type: `string` | React element.
 -   Optional.
 -   Defaults to the `label` value.
@@ -1533,6 +1583,8 @@ Finally, the field author can always provide its own custom `Edit` control. It r
 -   `field`: the field definition
 -   `onChange`: the callback with the updates
 -   `hideLabelFromVision`: boolean representing if the label should be hidden
+-   `markWhenOptional`: boolean indicating whether to label the control as "optional" when the field is not required, instead of showing "required"
+-   `operator`: the currently selected filter operator for this field. Used by DataViews filters to determine which control to render based on the operator type
 -   `validity`: object representing the validity of the field's value (see validity section)
 -   `config`: object representing extra config for the component:
     -   `prefix`: a React component to be rendered as a prefix
@@ -1621,6 +1673,11 @@ Object that contains the validation rules for the field. If a rule is not met, t
 -   `required`: boolean indicating whether the field is required or not. Disabled by default.
 -   `elements`: boolean restricting selection to the provided list of elements only. Enabled by default. The `array` Edit control uses it to restrict the input values.
+-   `pattern`: a regex pattern string that the field value must match.
+-   `minLength`: minimum string length for the field value.
+-   `maxLength`: maximum string length for the field value.
+-   `min`: minimum numeric value for the field.
+-   `max`: maximum numeric value for the field.
 -   `custom`: a function that validates a field's value. If the value is invalid, the function should return a string explaining why the value is invalid. Otherwise, the function must return null.
 Fields that define a type come with default validation for the type. For example, the `integer` type ensures that the value is a valid integer:
@@ -1952,11 +2009,30 @@ Valid operators per field type:
 ### `format`
-Display format configuration for fields. Supported for date, number, and integer fields. This configuration affects how the field is displayed in the `render` method, the `Edit` control, and filter controls.
+Display format configuration for fields. Supported for `datetime`, `date`, `number`, and `integer` fields. This configuration affects how the field is displayed in the `render` method, the `Edit` control, and filter controls.
 -   Type: `object`.
 -   Optional.
+For `datetime` fields:
+-   Properties:
+    -   `datetime`: The format string using PHP date format (e.g., `'M j, Y g:i a'` for `'Jan 1, 2021 2:30 pm'`). Optional, defaults to WordPress date format settings.
+    -   `weekStartsOn`: Specifies the first day of the week for calendar controls. One of 0, 1, 2, 3, 4, 5, 6. Optional, defaults to WordPress "Week Starts On" setting, whose value is 0 (Sunday).
+Example:
+```js
+{
+	id: 'createdAt',
+	type: 'datetime',
+	label: 'Created At',
+	format: {
+		datetime: 'M j, Y g:i a',
+		weekStartsOn: 1,
+	},
+}
+```
 For `date` fields:
 -   Properties:
     -   `date`: The format string using PHP date format (e.g., 'F j, Y' for 'March 10, 2023'). Optional, defaults to WordPress "Date Format" setting.
@@ -2035,7 +2111,7 @@ Example:
 ### `layout`
-Represents the type of layout used to render the field. It'll be one of Regular, Panel, Card, or Row. This prop is the same as the `form.layout` prop.
+Represents the type of layout used to render the field. It'll be one of Regular, Panel, Card, Row, or Details. This prop is the same as the `form.layout` prop.
 #### Regular
@@ -2116,6 +2192,7 @@ For example:
 -   `type`: `row`. Required.
 -   `alignment`: one of `start`, `center`, or `end`. Optional. `center` by default.
+-   `styles`: an object mapping field IDs to style objects. Each style object supports a `flex` property (any valid CSS `flex` value) to control how the field sizes within the row. Optional.
 The Row layout displays fields horizontally in a single row. It's particularly useful for grouping related fields that should be displayed side by side. This layout can be used both as a top-level form layout and for individual field groups.
@@ -2126,7 +2203,30 @@ For example:
 	id: 'field_id',
 	layout: {
 		type: 'row',
-		alignment: 'start'
+		alignment: 'start',
+		styles: {
+			field1: { flex: '1 1 auto' },
+			field2: { flex: '0 0 200px' },
+		},
+	},
+}
+```
+#### Details
+-   `type`: `details`. Required.
+-   `summary`: Summary field configuration. Optional. Specifies which field to display in the details summary. A string (single field ID)
+The Details layout renders the field inside a collapsible `<details>` HTML element. The `summary` property controls the text shown in the disclosure summary.
+For example:
+```js
+{
+	id: 'field_id',
+	layout: {
+		type: 'details',
+		summary: 'summaryFieldId'
 	},
 }
 ```
@@ -2147,6 +2247,24 @@ Example:
 }
 ```
+### `description`
+A string describing the form field's purpose or usage. Used to provide additional context.
+-   Type: `string`.
+-   Optional.
+Example:
+```js
+{
+	id: 'field_id',
+	label: 'Status & Visibility',
+	description: 'Control the publish status and visibility of the post.',
+	children: [ 'status', 'password' ],
+}
+```
 ### `children`
 Groups a set of fields defined within children. For example if you want to display multiple fields within the Panel dropdown you can use children ( see example ).

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

@@ -36,7 +36,6 @@ 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_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import__ = require("../index.cjs");
 var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
@@ -82,10 +81,9 @@ function FormCardField({
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
   const layout = field.layout;
   const cardBodyRef = (0, import_element.useRef)(null);
-  const bodyId = (0, import_compose.useInstanceId)(
-    FormCardField,
-    "dataforms-layouts-card-card-body"
-  );
+  const instanceId = (0, import_compose.useInstanceId)(FormCardField);
+  const bodyId = `dataforms-layouts-card-card-body-${instanceId}`;
+  const titleId = `dataforms-layouts-card-card-title-${instanceId}`;
   const form = (0, import_element.useMemo)(
     () => ({
       layout: import_normalize_form.DEFAULT_LAYOUT,
@@ -195,7 +193,14 @@ function FormCardField({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: label }),
+                /* @__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)(
@@ -218,7 +223,7 @@ function FormCardField({
               icon: isOpen ? import_icons.chevronUp : import_icons.chevronDown,
               "aria-expanded": isOpen,
               "aria-controls": bodyId,
-              "aria-label": isOpen ? (0, import_i18n.__)("Collapse") : (0, import_i18n.__)("Expand")
+              "aria-labelledby": titleId
             }
           )
         ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/card/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\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 bodyId = useInstanceId(\n\t\tFormCardField,\n\t\t'dataforms-layouts-card-card-body'\n\t);\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 className=\"dataforms-layouts-card__field-header-label\">\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-label={\n\t\t\t\t\t\t\t\tisOpen ? __( 'Collapse' ) : __( 'Expand' )\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</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": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { 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": "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",
   "names": ["DataFormContext", "useReportValidity", "ValidationBadge", "OriginalCardHeader"]
 }

package/build/components/dataform-layouts/panel/utils/get-label-content.cjs CHANGED Viewed

@@ -29,8 +29,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function getLabelContent(showError, errorMessage, fieldLabel) {
   return showError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dataforms-layouts-panel__field-label-error-content", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.error, size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { children: fieldLabel })
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { children: fieldLabel });
+    fieldLabel
+  ] }) }) : fieldLabel;
 }
 var get_label_content_default = getLabelContent;
 //# sourceMappingURL=get-label-content.cjs.map

package/build/components/dataform-layouts/panel/utils/get-label-content.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/dataform-layouts/panel/utils/get-label-content.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, Icon, Tooltip } from '@wordpress/components';\nimport { error as errorIcon } from '@wordpress/icons';\n\nfunction getLabelContent(\n\tshowError?: boolean,\n\terrorMessage?: string,\n\tfieldLabel?: string\n) {\n\treturn showError ? (\n\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t<span className=\"dataforms-layouts-panel__field-label-error-content\">\n\t\t\t\t<Icon icon={ errorIcon } size={ 16 } />\n\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t</span>\n\t\t</Tooltip>\n\t) : (\n\t\t<BaseControl.VisualLabel>{ fieldLabel }</BaseControl.VisualLabel>\n\t);\n}\n\nexport default getLabelContent;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA2C;AAC3C,mBAAmC;AAShC;AAPH,SAAS,gBACR,WACA,cACA,YACC;AACD,SAAO,YACN,4CAAC,6BAAQ,MAAO,cAAe,WAAU,OACxC,uDAAC,UAAK,WAAU,sDACf;AAAA,gDAAC,0BAAK,MAAO,aAAAA,OAAY,MAAO,IAAK;AAAA,IACrC,4CAAC,8BAAY,aAAZ,EACE,sBACH;AAAA,KACD,GACD,IAEA,4CAAC,8BAAY,aAAZ,EAA0B,sBAAY;AAEzC;AAEA,IAAO,4BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Icon, Tooltip } from '@wordpress/components';\nimport { error as errorIcon } from '@wordpress/icons';\n\nfunction getLabelContent(\n\tshowError?: boolean,\n\terrorMessage?: string,\n\tfieldLabel?: string\n) {\n\treturn showError ? (\n\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t<span className=\"dataforms-layouts-panel__field-label-error-content\">\n\t\t\t\t<Icon icon={ errorIcon } size={ 16 } />\n\t\t\t\t{ fieldLabel }\n\t\t\t</span>\n\t\t</Tooltip>\n\t) : (\n\t\tfieldLabel\n\t);\n}\n\nexport default getLabelContent;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA8B;AAC9B,mBAAmC;AAShC;AAPH,SAAS,gBACR,WACA,cACA,YACC;AACD,SAAO,YACN,4CAAC,6BAAQ,MAAO,cAAe,WAAU,OACxC,uDAAC,UAAK,WAAU,sDACf;AAAA,gDAAC,0BAAK,MAAO,aAAAA,OAAY,MAAO,IAAK;AAAA,IACnC;AAAA,KACH,GACD,IAEA;AAEF;AAEA,IAAO,4BAAQ;",
   "names": ["errorIcon"]
 }

package/build/components/dataviews-context/index.cjs CHANGED Viewed

@@ -53,6 +53,7 @@ var DataViewsContext = (0, import_element.createContext)({
   isShowingFilter: false,
   setIsShowingFilter: () => {
   },
+  hasInitiallyLoaded: false,
   hasInfiniteScrollHandler: false,
   config: {
     perPageSizes: []

package/build/components/dataviews-context/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-context/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentProps, ReactElement, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, createRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tView,\n\tAction,\n\tNormalizedField,\n\tSupportedLayouts,\n\tNormalizedFilter,\n} from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport { LAYOUT_TABLE } from '../../constants';\n\ntype DataViewsContextType< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\topenedFilter: string | null;\n\tsetOpenedFilter: ( openedFilter: string | null ) => void;\n\tgetItemId: ( item: Item ) => string;\n\tgetItemLevel?: ( item: Item ) => number;\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\tcontainerWidth: number;\n\tcontainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tresizeObserverRef:\n\t\t| ( ( element?: HTMLDivElement | null ) => void )\n\t\t| React.RefObject< HTMLDivElement >;\n\tdefaultLayouts: SupportedLayouts;\n\tfilters: NormalizedFilter[];\n\tisShowingFilter: boolean;\n\tsetIsShowingFilter: ( value: boolean ) => void;\n\tconfig: { perPageSizes: number[] };\n\tempty?: ReactNode;\n\thasInfiniteScrollHandler: boolean;\n\titemListLabel?: string;\n\tonReset?: ( () => void ) | false;\n};\n\nconst DataViewsContext = createContext< DataViewsContextType< any > >( {\n\tview: { type: LAYOUT_TABLE },\n\tonChangeView: () => {},\n\tfields: [],\n\tdata: [],\n\tpaginationInfo: {\n\t\ttotalItems: 0,\n\t\ttotalPages: 0,\n\t},\n\tselection: [],\n\tonChangeSelection: () => {},\n\tsetOpenedFilter: () => {},\n\topenedFilter: null,\n\tgetItemId: ( item ) => item.id,\n\tisItemClickable: () => true,\n\trenderItemLink: undefined,\n\tcontainerWidth: 0,\n\tcontainerRef: createRef(),\n\tresizeObserverRef: () => {},\n\tdefaultLayouts: { list: {}, grid: {}, table: {} },\n\tfilters: [],\n\tisShowingFilter: false,\n\tsetIsShowingFilter: () => {},\n\thasInfiniteScrollHandler: false,\n\tconfig: {\n\t\tperPageSizes: [],\n\t},\n} );\n\nDataViewsContext.displayName = 'DataViewsContext';\n\nexport default DataViewsContext;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAAyC;AAazC,uBAA6B;AA0C7B,IAAM,uBAAmB,8BAA8C;AAAA,EACtE,MAAM,EAAE,MAAM,8BAAa;AAAA,EAC3B,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,QAAQ,CAAC;AAAA,EACT,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc;AAAA,EACd,WAAW,CAAE,SAAU,KAAK;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EACvB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAc,0BAAU;AAAA,EACxB,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,gBAAgB,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE;AAAA,EAChD,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,EACjB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,QAAQ;AAAA,IACP,cAAc,CAAC;AAAA,EAChB;AACD,CAAE;AAEF,iBAAiB,cAAc;AAE/B,IAAO,4BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentProps, ReactElement, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, createRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tView,\n\tAction,\n\tNormalizedField,\n\tSupportedLayouts,\n\tNormalizedFilter,\n} from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport { LAYOUT_TABLE } from '../../constants';\n\ntype DataViewsContextType< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\topenedFilter: string | null;\n\tsetOpenedFilter: ( openedFilter: string | null ) => void;\n\tgetItemId: ( item: Item ) => string;\n\tgetItemLevel?: ( item: Item ) => number;\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\tcontainerWidth: number;\n\tcontainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tresizeObserverRef:\n\t\t| ( ( element?: HTMLDivElement | null ) => void )\n\t\t| React.RefObject< HTMLDivElement >;\n\tdefaultLayouts: SupportedLayouts;\n\tfilters: NormalizedFilter[];\n\tisShowingFilter: boolean;\n\tsetIsShowingFilter: ( value: boolean ) => void;\n\tconfig: { perPageSizes: number[] };\n\tempty?: ReactNode;\n\thasInitiallyLoaded?: boolean;\n\thasInfiniteScrollHandler: boolean;\n\titemListLabel?: string;\n\tonReset?: ( () => void ) | false;\n};\n\nconst DataViewsContext = createContext< DataViewsContextType< any > >( {\n\tview: { type: LAYOUT_TABLE },\n\tonChangeView: () => {},\n\tfields: [],\n\tdata: [],\n\tpaginationInfo: {\n\t\ttotalItems: 0,\n\t\ttotalPages: 0,\n\t},\n\tselection: [],\n\tonChangeSelection: () => {},\n\tsetOpenedFilter: () => {},\n\topenedFilter: null,\n\tgetItemId: ( item ) => item.id,\n\tisItemClickable: () => true,\n\trenderItemLink: undefined,\n\tcontainerWidth: 0,\n\tcontainerRef: createRef(),\n\tresizeObserverRef: () => {},\n\tdefaultLayouts: { list: {}, grid: {}, table: {} },\n\tfilters: [],\n\tisShowingFilter: false,\n\tsetIsShowingFilter: () => {},\n\thasInitiallyLoaded: false,\n\thasInfiniteScrollHandler: false,\n\tconfig: {\n\t\tperPageSizes: [],\n\t},\n} );\n\nDataViewsContext.displayName = 'DataViewsContext';\n\nexport default DataViewsContext;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAAyC;AAazC,uBAA6B;AA2C7B,IAAM,uBAAmB,8BAA8C;AAAA,EACtE,MAAM,EAAE,MAAM,8BAAa;AAAA,EAC3B,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,QAAQ,CAAC;AAAA,EACT,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc;AAAA,EACd,WAAW,CAAE,SAAU,KAAK;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EACvB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAc,0BAAU;AAAA,EACxB,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,gBAAgB,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE;AAAA,EAChD,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,EACjB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,oBAAoB;AAAA,EACpB,0BAA0B;AAAA,EAC1B,QAAQ;AAAA,IACP,cAAc,CAAC;AAAA,EAChB;AACD,CAAE;AAEF,iBAAiB,cAAc;AAE/B,IAAO,4BAAQ;",
   "names": []
 }

package/build/components/dataviews-filters/toggle.cjs CHANGED Viewed

@@ -57,11 +57,10 @@ function FiltersToggle() {
     },
     [onChangeView, setIsShowingFilter]
   );
-  const visibleFilters = filters.filter((filter) => filter.isVisible);
-  const hasVisibleFilters = !!visibleFilters.length;
   if (filters.length === 0) {
     return null;
   }
+  const hasVisibleFilters = filters.some((filter) => filter.isVisible);
   const addFilterButtonProps = {
     label: (0, import_i18n.__)("Add filter"),
     "aria-expanded": false,
@@ -78,6 +77,9 @@ function FiltersToggle() {
       setIsShowingFilter(!isShowingFilter);
     }
   };
+  const hasPrimaryOrLockedFilters = filters.some(
+    (filter) => filter.isPrimary || filter.isLocked
+  );
   const buttonComponent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.Button,
     {
@@ -85,6 +87,8 @@ function FiltersToggle() {
       className: "dataviews-filters__visibility-toggle",
       size: "compact",
       icon: import_icons.funnel,
+      disabled: hasPrimaryOrLockedFilters,
+      accessibleWhenDisabled: true,
       ...hasVisibleFilters ? toggleFiltersButtonProps : addFilterButtonProps
     }
   );

package/build/components/dataviews-filters/toggle.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-filters/toggle.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useRef, useCallback, useEffect } from '@wordpress/element';\nimport { Button } from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AddFilterMenu } from './add-filter';\nimport DataViewsContext from '../dataviews-context';\nimport type { View } from '../../types';\n\nfunction FiltersToggle() {\n\tconst {\n\t\tfilters,\n\t\tview,\n\t\tonChangeView,\n\t\tsetOpenedFilter,\n\t\tisShowingFilter,\n\t\tsetIsShowingFilter,\n\t} = useContext( DataViewsContext );\n\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst onChangeViewWithFilterVisibility = useCallback(\n\t\t( _view: View ) => {\n\t\t\tonChangeView( _view );\n\t\t\tsetIsShowingFilter( true );\n\t\t},\n\t\t[ onChangeView, setIsShowingFilter ]\n\t);\n\tconst visibleFilters = filters.filter( ( filter ) => filter.isVisible );\n\n\tconst hasVisibleFilters = !! visibleFilters.length;\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst addFilterButtonProps = {\n\t\tlabel: __( 'Add filter' ),\n\t\t'aria-expanded': false,\n\t\tisPressed: false,\n\t};\n\tconst toggleFiltersButtonProps = {\n\t\tlabel: _x( 'Filter', 'verb' ),\n\t\t'aria-expanded': isShowingFilter,\n\t\tisPressed: isShowingFilter,\n\t\tonClick: () => {\n\t\t\tif ( ! isShowingFilter ) {\n\t\t\t\tsetOpenedFilter( null );\n\t\t\t}\n\t\t\tsetIsShowingFilter( ! isShowingFilter );\n\t\t},\n\t};\n\tconst buttonComponent = (\n\t\t<Button\n\t\t\tref={ buttonRef }\n\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\tsize=\"compact\"\n\t\t\ticon={ funnel }\n\t\t\t{ ...( hasVisibleFilters\n\t\t\t\t? toggleFiltersButtonProps\n\t\t\t\t: addFilterButtonProps ) }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"dataviews-filters__container-visibility-toggle\">\n\t\t\t{ ! hasVisibleFilters ? (\n\t\t\t\t<AddFilterMenu\n\t\t\t\t\tfilters={ filters }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeViewWithFilterVisibility }\n\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\ttriggerProps={ { render: buttonComponent } }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\tbuttonRef={ buttonRef }\n\t\t\t\t\tfiltersCount={ view.filters?.length }\n\t\t\t\t>\n\t\t\t\t\t{ buttonComponent }\n\t\t\t\t</FilterVisibilityToggle>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction FilterVisibilityToggle( {\n\tbuttonRef,\n\tfiltersCount,\n\tchildren,\n}: {\n\tbuttonRef: React.RefObject< HTMLButtonElement | null >;\n\tfiltersCount?: number;\n\tchildren: React.ReactNode;\n} ) {\n\t// Focus the `add filter` button when unmounts.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tbuttonRef.current?.focus();\n\t\t},\n\t\t[ buttonRef ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ children }\n\t\t\t{ !! filtersCount && (\n\t\t\t\t<span className=\"dataviews-filters-toggle__count\">\n\t\t\t\t\t{ filtersCount }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default FiltersToggle;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2D;AAC3D,wBAAuB;AACvB,mBAAuB;AACvB,kBAAuB;AAKvB,wBAA8B;AAC9B,+BAA6B;AA6C3B;AA1CF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,QAAM,gBAAY,uBAA6B,IAAK;AACpD,QAAM,uCAAmC;AAAA,IACxC,CAAE,UAAiB;AAClB,mBAAc,KAAM;AACpB,yBAAoB,IAAK;AAAA,IAC1B;AAAA,IACA,CAAE,cAAc,kBAAmB;AAAA,EACpC;AACA,QAAM,iBAAiB,QAAQ,OAAQ,CAAE,WAAY,OAAO,SAAU;AAEtE,QAAM,oBAAoB,CAAC,CAAE,eAAe;AAC5C,MAAK,QAAQ,WAAW,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,uBAAuB;AAAA,IAC5B,WAAO,gBAAI,YAAa;AAAA,IACxB,iBAAiB;AAAA,IACjB,WAAW;AAAA,EACZ;AACA,QAAM,2BAA2B;AAAA,IAChC,WAAO,gBAAI,UAAU,MAAO;AAAA,IAC5B,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AACd,UAAK,CAAE,iBAAkB;AACxB,wBAAiB,IAAK;AAAA,MACvB;AACA,yBAAoB,CAAE,eAAgB;AAAA,IACvC;AAAA,EACD;AACA,QAAM,kBACL;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MACV,MAAK;AAAA,MACL,MAAO;AAAA,MACL,GAAK,oBACJ,2BACA;AAAA;AAAA,EACJ;AAED,SACC,4CAAC,SAAI,WAAU,kDACZ,WAAE,oBACH;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,cAAe,EAAE,QAAQ,gBAAgB;AAAA;AAAA,EAC1C,IAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAe,KAAK,SAAS;AAAA,MAE3B;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAII;AAEH;AAAA,IACC,MAAM,MAAM;AACX,gBAAU,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACA,SACC,4EACG;AAAA;AAAA,IACA,CAAC,CAAE,gBACJ,4CAAC,UAAK,WAAU,mCACb,wBACH;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useRef, useCallback, useEffect } from '@wordpress/element';\nimport { Button } from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AddFilterMenu } from './add-filter';\nimport DataViewsContext from '../dataviews-context';\nimport type { View } from '../../types';\n\nfunction FiltersToggle() {\n\tconst {\n\t\tfilters,\n\t\tview,\n\t\tonChangeView,\n\t\tsetOpenedFilter,\n\t\tisShowingFilter,\n\t\tsetIsShowingFilter,\n\t} = useContext( DataViewsContext );\n\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst onChangeViewWithFilterVisibility = useCallback(\n\t\t( _view: View ) => {\n\t\t\tonChangeView( _view );\n\t\t\tsetIsShowingFilter( true );\n\t\t},\n\t\t[ onChangeView, setIsShowingFilter ]\n\t);\n\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst hasVisibleFilters = filters.some( ( filter ) => filter.isVisible );\n\n\tconst addFilterButtonProps = {\n\t\tlabel: __( 'Add filter' ),\n\t\t'aria-expanded': false,\n\t\tisPressed: false,\n\t};\n\tconst toggleFiltersButtonProps = {\n\t\tlabel: _x( 'Filter', 'verb' ),\n\t\t'aria-expanded': isShowingFilter,\n\t\tisPressed: isShowingFilter,\n\t\tonClick: () => {\n\t\t\tif ( ! isShowingFilter ) {\n\t\t\t\tsetOpenedFilter( null );\n\t\t\t}\n\t\t\tsetIsShowingFilter( ! isShowingFilter );\n\t\t},\n\t};\n\t// When there are primary or locked filters, the filter bar is always\n\t// visible and cannot be hidden, so the toggle button should be disabled.\n\tconst hasPrimaryOrLockedFilters = filters.some(\n\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t);\n\tconst buttonComponent = (\n\t\t<Button\n\t\t\tref={ buttonRef }\n\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\tsize=\"compact\"\n\t\t\ticon={ funnel }\n\t\t\tdisabled={ hasPrimaryOrLockedFilters }\n\t\t\taccessibleWhenDisabled\n\t\t\t{ ...( hasVisibleFilters\n\t\t\t\t? toggleFiltersButtonProps\n\t\t\t\t: addFilterButtonProps ) }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"dataviews-filters__container-visibility-toggle\">\n\t\t\t{ ! hasVisibleFilters ? (\n\t\t\t\t<AddFilterMenu\n\t\t\t\t\tfilters={ filters }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeViewWithFilterVisibility }\n\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\ttriggerProps={ { render: buttonComponent } }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\tbuttonRef={ buttonRef }\n\t\t\t\t\tfiltersCount={ view.filters?.length }\n\t\t\t\t>\n\t\t\t\t\t{ buttonComponent }\n\t\t\t\t</FilterVisibilityToggle>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction FilterVisibilityToggle( {\n\tbuttonRef,\n\tfiltersCount,\n\tchildren,\n}: {\n\tbuttonRef: React.RefObject< HTMLButtonElement | null >;\n\tfiltersCount?: number;\n\tchildren: React.ReactNode;\n} ) {\n\t// Focus the `add filter` button when unmounts.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tbuttonRef.current?.focus();\n\t\t},\n\t\t[ buttonRef ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ children }\n\t\t\t{ !! filtersCount && (\n\t\t\t\t<span className=\"dataviews-filters-toggle__count\">\n\t\t\t\t\t{ filtersCount }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default FiltersToggle;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2D;AAC3D,wBAAuB;AACvB,mBAAuB;AACvB,kBAAuB;AAKvB,wBAA8B;AAC9B,+BAA6B;AAkD3B;AA/CF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,QAAM,gBAAY,uBAA6B,IAAK;AACpD,QAAM,uCAAmC;AAAA,IACxC,CAAE,UAAiB;AAClB,mBAAc,KAAM;AACpB,yBAAoB,IAAK;AAAA,IAC1B;AAAA,IACA,CAAE,cAAc,kBAAmB;AAAA,EACpC;AAEA,MAAK,QAAQ,WAAW,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,oBAAoB,QAAQ,KAAM,CAAE,WAAY,OAAO,SAAU;AAEvE,QAAM,uBAAuB;AAAA,IAC5B,WAAO,gBAAI,YAAa;AAAA,IACxB,iBAAiB;AAAA,IACjB,WAAW;AAAA,EACZ;AACA,QAAM,2BAA2B;AAAA,IAChC,WAAO,gBAAI,UAAU,MAAO;AAAA,IAC5B,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AACd,UAAK,CAAE,iBAAkB;AACxB,wBAAiB,IAAK;AAAA,MACvB;AACA,yBAAoB,CAAE,eAAgB;AAAA,IACvC;AAAA,EACD;AAGA,QAAM,4BAA4B,QAAQ;AAAA,IACzC,CAAE,WAAY,OAAO,aAAa,OAAO;AAAA,EAC1C;AACA,QAAM,kBACL;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MACV,MAAK;AAAA,MACL,MAAO;AAAA,MACP,UAAW;AAAA,MACX,wBAAsB;AAAA,MACpB,GAAK,oBACJ,2BACA;AAAA;AAAA,EACJ;AAED,SACC,4CAAC,SAAI,WAAU,kDACZ,WAAE,oBACH;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,cAAe,EAAE,QAAQ,gBAAgB;AAAA;AAAA,EAC1C,IAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAe,KAAK,SAAS;AAAA,MAE3B;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAII;AAEH;AAAA,IACC,MAAM,MAAM;AACX,gBAAU,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACA,SACC,4EACG;AAAA;AAAA,IACA,CAAC,CAAE,gBACJ,4CAAC,UAAK,WAAU,mCACb,wBACH;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
   "names": ["DataViewsContext"]
 }

package/build/components/dataviews-footer/index.cjs CHANGED Viewed

@@ -33,12 +33,14 @@ __export(dataviews_footer_exports, {
   default: () => DataViewsFooter
 });
 module.exports = __toCommonJS(dataviews_footer_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
 var import_ui = require("@wordpress/ui");
 var import_dataviews_context = __toESM(require("../dataviews-context/index.cjs"));
 var import_dataviews_pagination = __toESM(require("../dataviews-pagination/index.cjs"));
 var import_dataviews_bulk_actions = require("../dataviews-bulk-actions/index.cjs");
 var import_constants = require("../../constants.cjs");
+var import_use_delayed_loading = require("../../hooks/use-delayed-loading.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var EMPTY_ARRAY = [];
 function DataViewsFooter() {
@@ -46,24 +48,38 @@ function DataViewsFooter() {
     view,
     paginationInfo: { totalItems = 0, totalPages },
     data,
-    actions = EMPTY_ARRAY
+    actions = EMPTY_ARRAY,
+    isLoading,
+    hasInitiallyLoaded,
+    hasInfiniteScrollHandler
   } = (0, import_element.useContext)(import_dataviews_context.default);
+  const isRefreshing = !!isLoading && hasInitiallyLoaded && !hasInfiniteScrollHandler && !!data?.length;
+  const isDelayedRefreshing = (0, import_use_delayed_loading.useDelayedLoading)(!!isRefreshing);
   const hasBulkActions = (0, import_dataviews_bulk_actions.useSomeItemHasAPossibleBulkAction)(actions, data) && [import_constants.LAYOUT_TABLE, import_constants.LAYOUT_GRID].includes(view.type);
-  if (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions) {
+  if (!isRefreshing && (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions)) {
     return null;
   }
-  return !!totalItems && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_ui.Stack,
+  return (!!totalItems || isRefreshing) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
     {
-      direction: "row",
-      justify: "end",
-      align: "center",
       className: "dataviews-footer",
-      gap: "sm",
-      children: [
-        hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews_bulk_actions.BulkActionsFooter, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews_pagination.default, {})
-      ]
+      inert: isRefreshing ? "true" : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ui.Stack,
+        {
+          direction: "row",
+          justify: "end",
+          align: "center",
+          className: (0, import_clsx.default)("dataviews-footer__content", {
+            "is-refreshing": isDelayedRefreshing
+          }),
+          gap: "sm",
+          children: [
+            hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews_bulk_actions.BulkActionsFooter, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews_pagination.default, {})
+          ]
+        }
+      )
     }
   );
 }