@wordpress/dataviews 3.0.0 → 4.0.0

package/build/layouts/table/index.js

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _dataviewsSelectionCheckbox = _interopRequireDefault(require("../../components/dataviews-selection-checkbox"));
+var _dataviewsItemActions = _interopRequireDefault(require("../../components/dataviews-item-actions"));
+var _constants = require("../../constants");
+var _dataviewsBulkActions = require("../../components/dataviews-bulk-actions");
+var _columnHeaderMenu = _interopRequireDefault(require("./column-header-menu"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function BulkSelectionCheckbox({
+  selection,
+  onChangeSelection,
+  data,
+  actions,
+  getItemId
+}) {
+  const selectableItems = (0, _element.useMemo)(() => {
+    return data.filter(item => {
+      return actions.some(action => action.supportsBulk && (!action.isEligible || action.isEligible(item)));
+    });
+  }, [data, actions]);
+  const selectedItems = data.filter(item => selection.includes(getItemId(item)) && selectableItems.includes(item));
+  const areAllSelected = selectedItems.length === selectableItems.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+    className: "dataviews-view-table-selection-checkbox",
+    __nextHasNoMarginBottom: true,
+    checked: areAllSelected,
+    indeterminate: !areAllSelected && !!selectedItems.length,
+    onChange: () => {
+      if (areAllSelected) {
+        onChangeSelection([]);
+      } else {
+        onChangeSelection(selectableItems.map(item => getItemId(item)));
+      }
+    },
+    "aria-label": areAllSelected ? (0, _i18n.__)('Deselect all') : (0, _i18n.__)('Select all')
+  });
+}
+function TableColumn({
+  column,
+  fields,
+  view,
+  ...props
+}) {
+  const field = fields.find(f => f.id === column);
+  if (!!field) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableColumnField, {
+      ...props,
+      field: field
+    });
+  }
+  const combinedField = view.layout?.combinedFields?.find(f => f.id === column);
+  if (!!combinedField) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableColumnCombined, {
+      ...props,
+      fields: fields,
+      view: view,
+      field: combinedField
+    });
+  }
+  return null;
+}
+function TableColumnField({
+  primaryField,
+  item,
+  field
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx.default)('dataviews-view-table__cell-content-wrapper', {
+      'dataviews-view-table__primary-field': primaryField?.id === field.id
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(field.render, {
+      item
+    })
+  });
+}
+function TableColumnCombined({
+  field,
+  ...props
+}) {
+  const children = field.children.map(child => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableColumn, {
+    ...props,
+    column: child
+  }, child));
+  if (field.direction === 'horizontal') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+      spacing: 3,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    spacing: 0,
+    children: children
+  });
+}
+function TableRow({
+  hasBulkActions,
+  item,
+  actions,
+  fields,
+  id,
+  view,
+  primaryField,
+  selection,
+  getItemId,
+  onChangeSelection
+}) {
+  const hasPossibleBulkAction = (0, _dataviewsBulkActions.useHasAPossibleBulkAction)(actions, item);
+  const isSelected = hasPossibleBulkAction && selection.includes(id);
+  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  // Will be set to true if `onTouchStart` fires. This happens before
+  // `onClick` and can be used to exclude touchscreen devices from certain
+  // behaviours.
+  const isTouchDevice = (0, _element.useRef)(false);
+  const columns = view.fields || fields.map(f => f.id);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+    className: (0, _clsx.default)('dataviews-view-table__row', {
+      'is-selected': hasPossibleBulkAction && isSelected,
+      'is-hovered': isHovered,
+      'has-bulk-actions': hasPossibleBulkAction
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: () => {
+      isTouchDevice.current = true;
+    },
+    onClick: () => {
+      if (!hasPossibleBulkAction) {
+        return;
+      }
+      if (!isTouchDevice.current && document.getSelection()?.type !== 'Range') {
+        onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [id]);
+      }
+    },
+    children: [hasBulkActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      className: "dataviews-view-table__checkbox-column",
+      style: {
+        width: '1%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dataviews-view-table__cell-content-wrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSelectionCheckbox.default, {
+          item: item,
+          selection: selection,
+          onChangeSelection: onChangeSelection,
+          getItemId: getItemId,
+          primaryField: primaryField,
+          disabled: !hasPossibleBulkAction
+        })
+      })
+    }), columns.map(column => {
+      var _view$layout$styles$c;
+      // Explicits picks the supported styles.
+      const {
+        width,
+        maxWidth,
+        minWidth
+      } = (_view$layout$styles$c = view.layout?.styles?.[column]) !== null && _view$layout$styles$c !== void 0 ? _view$layout$styles$c : {};
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+        style: {
+          width,
+          maxWidth,
+          minWidth
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableColumn, {
+          primaryField: primaryField,
+          fields: fields,
+          item: item,
+          column: column,
+          view: view
+        })
+      }, column);
+    }), !!actions?.length &&
+    /*#__PURE__*/
+    // Disable reason: we are not making the element interactive,
+    // but preventing any click events from bubbling up to the
+    // table row. This allows us to add a click handler to the row
+    // itself (to toggle row selection) without erroneously
+    // intercepting click events from ItemActions.
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+    (0, _jsxRuntime.jsx)("td", {
+      className: "dataviews-view-table__actions-column",
+      onClick: e => e.stopPropagation(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.default, {
+        item: item,
+        actions: actions
+      })
+    })
+    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */]
+  });
+}
+function ViewTable({
+  actions,
+  data,
+  fields,
+  getItemId,
+  isLoading = false,
+  onChangeView,
+  onChangeSelection,
+  selection,
+  setOpenedFilter,
+  view
+}) {
+  const headerMenuRefs = (0, _element.useRef)(new Map());
+  const headerMenuToFocusRef = (0, _element.useRef)();
+  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, _element.useState)();
+  const hasBulkActions = (0, _dataviewsBulkActions.useSomeItemHasAPossibleBulkAction)(actions, data);
+  (0, _element.useEffect)(() => {
+    if (headerMenuToFocusRef.current) {
+      headerMenuToFocusRef.current.focus();
+      headerMenuToFocusRef.current = undefined;
+    }
+  });
+  const tableNoticeId = (0, _element.useId)();
+  if (nextHeaderMenuToFocus) {
+    // If we need to force focus, we short-circuit rendering here
+    // to prevent any additional work while we handle that.
+    // Clearing out the focus directive is necessary to make sure
+    // future renders don't cause unexpected focus jumps.
+    headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+    setNextHeaderMenuToFocus(undefined);
+    return;
+  }
+  const onHide = field => {
+    const hidden = headerMenuRefs.current.get(field.id);
+    const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : undefined;
+    setNextHeaderMenuToFocus(fallback?.node);
+  };
+  const columns = view.fields || fields.map(f => f.id);
+  const hasData = !!data?.length;
+  const primaryField = fields.find(field => field.id === view.layout?.primaryField);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+      className: "dataviews-view-table",
+      "aria-busy": isLoading,
+      "aria-describedby": tableNoticeId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+          className: "dataviews-view-table__row",
+          children: [hasBulkActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            className: "dataviews-view-table__checkbox-column",
+            style: {
+              width: '1%'
+            },
+            scope: "col",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BulkSelectionCheckbox, {
+              selection: selection,
+              onChangeSelection: onChangeSelection,
+              data: data,
+              actions: actions,
+              getItemId: getItemId
+            })
+          }), columns.map((column, index) => {
+            var _view$layout$styles$c2;
+            // Explicits picks the supported styles.
+            const {
+              width,
+              maxWidth,
+              minWidth
+            } = (_view$layout$styles$c2 = view.layout?.styles?.[column]) !== null && _view$layout$styles$c2 !== void 0 ? _view$layout$styles$c2 : {};
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              style: {
+                width,
+                maxWidth,
+                minWidth
+              },
+              "aria-sort": view.sort?.field === column ? _constants.sortValues[view.sort.direction] : undefined,
+              scope: "col",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnHeaderMenu.default, {
+                ref: node => {
+                  if (node) {
+                    headerMenuRefs.current.set(column, {
+                      node,
+                      fallback: columns[index > 0 ? index - 1 : 1]
+                    });
+                  } else {
+                    headerMenuRefs.current.delete(column);
+                  }
+                },
+                fieldId: column,
+                view: view,
+                fields: fields,
+                onChangeView: onChangeView,
+                onHide: onHide,
+                setOpenedFilter: setOpenedFilter
+              })
+            }, column);
+          }), !!actions?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            className: "dataviews-view-table__actions-column",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dataviews-view-table-header",
+              children: (0, _i18n.__)('Actions')
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: hasData && data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableRow, {
+          item: item,
+          hasBulkActions: hasBulkActions,
+          actions: actions,
+          fields: fields,
+          id: getItemId(item) || index.toString(),
+          view: view,
+          primaryField: primaryField,
+          selection: selection,
+          getItemId: getItemId,
+          onChangeSelection: onChangeSelection
+        }, getItemId(item)))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !hasData && !isLoading
+      }),
+      id: tableNoticeId,
+      children: !hasData && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}) : (0, _i18n.__)('No results')
+      })
+    })]
+  });
+}
+var _default = exports.default = ViewTable;
+//# sourceMappingURL=index.js.map

package/build/layouts/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_components","_element","_dataviewsSelectionCheckbox","_dataviewsItemActions","_constants","_dataviewsBulkActions","_columnHeaderMenu","_jsxRuntime","BulkSelectionCheckbox","selection","onChangeSelection","data","actions","getItemId","selectableItems","useMemo","filter","item","some","action","supportsBulk","isEligible","selectedItems","includes","areAllSelected","length","jsx","CheckboxControl","className","__nextHasNoMarginBottom","checked","indeterminate","onChange","map","__","TableColumn","column","fields","view","props","field","find","f","id","TableColumnField","combinedField","layout","combinedFields","TableColumnCombined","primaryField","clsx","children","render","child","direction","__experimentalHStack","spacing","__experimentalVStack","TableRow","hasBulkActions","hasPossibleBulkAction","useHasAPossibleBulkAction","isSelected","isHovered","setIsHovered","useState","handleMouseEnter","handleMouseLeave","isTouchDevice","useRef","columns","jsxs","onMouseEnter","onMouseLeave","onTouchStart","current","onClick","document","getSelection","type","itemId","style","width","default","disabled","_view$layout$styles$c","maxWidth","minWidth","styles","e","stopPropagation","ViewTable","isLoading","onChangeView","setOpenedFilter","headerMenuRefs","Map","headerMenuToFocusRef","nextHeaderMenuToFocus","setNextHeaderMenuToFocus","useSomeItemHasAPossibleBulkAction","useEffect","focus","undefined","tableNoticeId","useId","onHide","hidden","get","fallback","node","hasData","Fragment","scope","index","_view$layout$styles$c2","sort","sortValues","ref","set","delete","fieldId","toString","Spinner","_default","exports"],"sources":["@wordpress/dataviews/src/layouts/table/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tCheckboxControl,\n\tSpinner,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport {\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n\tuseMemo,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport { sortValues } from '../../constants';\nimport {\n\tuseSomeItemHasAPossibleBulkAction,\n\tuseHasAPossibleBulkAction,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewTable as ViewTableType,\n\tViewTableProps,\n\tCombinedField,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport ColumnHeaderMenu from './column-header-menu';\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\ninterface TableColumnFieldProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfield: NormalizedField< Item >;\n\titem: Item;\n}\n\ninterface TableColumnCombinedProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\tfield: CombinedField;\n\titem: Item;\n\tview: ViewTableType;\n}\n\ninterface TableColumnProps< Item > {\n\tprimaryField?: NormalizedField< Item >;\n\tfields: NormalizedField< Item >[];\n\titem: Item;\n\tcolumn: string;\n\tview: ViewTableType;\n}\n\ninterface TableRowProps< Item > {\n\thasBulkActions: boolean;\n\titem: Item;\n\tactions: Action< Item >[];\n\tfields: NormalizedField< Item >[];\n\tid: string;\n\tview: ViewTableType;\n\tprimaryField?: NormalizedField< Item >;\n\tselection: string[];\n\tgetItemId: ( item: Item ) => string;\n\tonChangeSelection: SetSelection;\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction TableColumn< Item >( {\n\tcolumn,\n\tfields,\n\tview,\n\t...props\n}: TableColumnProps< Item > ) {\n\tconst field = fields.find( ( f ) => f.id === column );\n\tif ( !! field ) {\n\t\treturn <TableColumnField { ...props } field={ field } />;\n\t}\n\tconst combinedField = view.layout?.combinedFields?.find(\n\t\t( f ) => f.id === column\n\t);\n\tif ( !! combinedField ) {\n\t\treturn (\n\t\t\t<TableColumnCombined\n\t\t\t\t{ ...props }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tfield={ combinedField }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction TableColumnField< Item >( {\n\tprimaryField,\n\titem,\n\tfield,\n}: TableColumnFieldProps< Item > ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-view-table__cell-content-wrapper', {\n\t\t\t\t'dataviews-view-table__primary-field':\n\t\t\t\t\tprimaryField?.id === field.id,\n\t\t\t} ) }\n\t\t>\n\t\t\t<field.render { ...{ item } } />\n\t\t</div>\n\t);\n}\n\nfunction TableColumnCombined< Item >( {\n\tfield,\n\t...props\n}: TableColumnCombinedProps< Item > ) {\n\tconst children = field.children.map( ( child ) => (\n\t\t<TableColumn key={ child } { ...props } column={ child } />\n\t) );\n\n\tif ( field.direction === 'horizontal' ) {\n\t\treturn <HStack spacing={ 3 }>{ children }</HStack>;\n\t}\n\treturn <VStack spacing={ 0 }>{ children }</VStack>;\n}\n\nfunction TableRow< Item >( {\n\thasBulkActions,\n\titem,\n\tactions,\n\tfields,\n\tid,\n\tview,\n\tprimaryField,\n\tselection,\n\tgetItemId,\n\tonChangeSelection,\n}: TableRowProps< Item > ) {\n\tconst hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst isSelected = hasPossibleBulkAction && selection.includes( id );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\n\tconst handleMouseEnter = () => {\n\t\tsetIsHovered( true );\n\t};\n\tconst handleMouseLeave = () => {\n\t\tsetIsHovered( false );\n\t};\n\n\t// Will be set to true if `onTouchStart` fires. This happens before\n\t// `onClick` and can be used to exclude touchscreen devices from certain\n\t// behaviours.\n\tconst isTouchDevice = useRef( false );\n\tconst columns = view.fields || fields.map( ( f ) => f.id );\n\n\treturn (\n\t\t<tr\n\t\t\tclassName={ clsx( 'dataviews-view-table__row', {\n\t\t\t\t'is-selected': hasPossibleBulkAction && isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t'has-bulk-actions': hasPossibleBulkAction,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleMouseEnter }\n\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\tonTouchStart={ () => {\n\t\t\t\tisTouchDevice.current = true;\n\t\t\t} }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! hasPossibleBulkAction ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (\n\t\t\t\t\t! isTouchDevice.current &&\n\t\t\t\t\tdocument.getSelection()?.type !== 'Range'\n\t\t\t\t) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ hasBulkActions && (\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-table__cell-content-wrapper\">\n\t\t\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tdisabled={ ! hasPossibleBulkAction }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t) }\n\t\t\t{ columns.map( ( column: string ) => {\n\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\n\t\t\t\treturn (\n\t\t\t\t\t<td key={ column } style={ { width, maxWidth, minWidth } }>\n\t\t\t\t\t\t<TableColumn\n\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tcolumn={ column }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ !! actions?.length && (\n\t\t\t\t// Disable reason: we are not making the element interactive,\n\t\t\t\t// but preventing any click events from bubbling up to the\n\t\t\t\t// table row. This allows us to add a click handler to the row\n\t\t\t\t// itself (to toggle row selection) without erroneously\n\t\t\t\t// intercepting click events from ItemActions.\n\n\t\t\t\t/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t\t<td\n\t\t\t\t\tclassName=\"dataviews-view-table__actions-column\"\n\t\t\t\t\tonClick={ ( e ) => e.stopPropagation() }\n\t\t\t\t>\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } />\n\t\t\t\t</td>\n\t\t\t\t/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */\n\t\t\t) }\n\t\t</tr>\n\t);\n}\n\nfunction ViewTable< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading = false,\n\tonChangeView,\n\tonChangeSelection,\n\tselection,\n\tsetOpenedFilter,\n\tview,\n}: ViewTableProps< Item > ) {\n\tconst headerMenuRefs = useRef<\n\t\tMap< string, { node: HTMLButtonElement; fallback: string } >\n\t>( new Map() );\n\tconst headerMenuToFocusRef = useRef< HTMLButtonElement >();\n\tconst [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =\n\t\tuseState< HTMLButtonElement >();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\n\tuseEffect( () => {\n\t\tif ( headerMenuToFocusRef.current ) {\n\t\t\theaderMenuToFocusRef.current.focus();\n\t\t\theaderMenuToFocusRef.current = undefined;\n\t\t}\n\t} );\n\n\tconst tableNoticeId = useId();\n\n\tif ( nextHeaderMenuToFocus ) {\n\t\t// If we need to force focus, we short-circuit rendering here\n\t\t// to prevent any additional work while we handle that.\n\t\t// Clearing out the focus directive is necessary to make sure\n\t\t// future renders don't cause unexpected focus jumps.\n\t\theaderMenuToFocusRef.current = nextHeaderMenuToFocus;\n\t\tsetNextHeaderMenuToFocus( undefined );\n\t\treturn;\n\t}\n\n\tconst onHide = ( field: NormalizedField< Item > ) => {\n\t\tconst hidden = headerMenuRefs.current.get( field.id );\n\t\tconst fallback = hidden\n\t\t\t? headerMenuRefs.current.get( hidden.fallback )\n\t\t\t: undefined;\n\t\tsetNextHeaderMenuToFocus( fallback?.node );\n\t};\n\n\tconst columns = view.fields || fields.map( ( f ) => f.id );\n\tconst hasData = !! data?.length;\n\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout?.primaryField\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<table\n\t\t\t\tclassName=\"dataviews-view-table\"\n\t\t\t\taria-busy={ isLoading }\n\t\t\t\taria-describedby={ tableNoticeId }\n\t\t\t>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"dataviews-view-table__row\">\n\t\t\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-table__checkbox-column\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\twidth: '1%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ columns.map( ( column, index ) => {\n\t\t\t\t\t\t\t// Explicits picks the supported styles.\n\t\t\t\t\t\t\tconst { width, maxWidth, minWidth } =\n\t\t\t\t\t\t\t\tview.layout?.styles?.[ column ] ?? {};\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tkey={ column }\n\t\t\t\t\t\t\t\t\tstyle={ { width, maxWidth, minWidth } }\n\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\tview.sort?.field === column\n\t\t\t\t\t\t\t\t\t\t\t? sortValues[ view.sort.direction ]\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColumnHeaderMenu\n\t\t\t\t\t\t\t\t\t\tref={ ( node ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( node ) {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.set(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnode,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfallback:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolumns[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? index - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\theaderMenuRefs.current.delete(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t\t\t\t\t);\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\tfieldId={ column }\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\t\t\tonHide={ onHide }\n\t\t\t\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t\t<th className=\"dataviews-view-table__actions-column\">\n\t\t\t\t\t\t\t\t<span className=\"dataviews-view-table-header\">\n\t\t\t\t\t\t\t\t\t{ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{ hasData &&\n\t\t\t\t\t\tdata.map( ( item, index ) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\t\tid={ getItemId( item ) || index.toString() }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t\tid={ tableNoticeId }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ViewTable;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAMA,IAAAG,QAAA,GAAAH,OAAA;AAWA,IAAAI,2BAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,qBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AAYA,IAAAQ,iBAAA,GAAAT,sBAAA,CAAAC,OAAA;AAAoD,IAAAS,WAAA,GAAAT,OAAA;AAzCpD;AACA;AACA;;AAGA;AACA;AACA;;AAgBA;AACA;AACA;;AA6DA,SAASU,qBAAqBA,CAAU;EACvCC,SAAS;EACTC,iBAAiB;EACjBC,IAAI;EACJC,OAAO;EACPC;AACmC,CAAC,EAAG;EACvC,MAAMC,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,OAAOJ,IAAI,CAACK,MAAM,CAAIC,IAAI,IAAM;MAC/B,OAAOL,OAAO,CAACM,IAAI,CAChBC,MAAM,IACPA,MAAM,CAACC,YAAY,KACjB,CAAED,MAAM,CAACE,UAAU,IAAIF,MAAM,CAACE,UAAU,CAAEJ,IAAK,CAAC,CACpD,CAAC;IACF,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEN,IAAI,EAAEC,OAAO,CAAG,CAAC;EACtB,MAAMU,aAAa,GAAGX,IAAI,CAACK,MAAM,CAC9BC,IAAI,IACLR,SAAS,CAACc,QAAQ,CAAEV,SAAS,CAAEI,IAAK,CAAE,CAAC,IACvCH,eAAe,CAACS,QAAQ,CAAEN,IAAK,CACjC,CAAC;EACD,MAAMO,cAAc,GAAGF,aAAa,CAACG,MAAM,KAAKX,eAAe,CAACW,MAAM;EACtE,oBACC,IAAAlB,WAAA,CAAAmB,GAAA,EAAC1B,WAAA,CAAA2B,eAAe;IACfC,SAAS,EAAC,yCAAyC;IACnDC,uBAAuB;IACvBC,OAAO,EAAGN,cAAgB;IAC1BO,aAAa,EAAG,CAAEP,cAAc,IAAI,CAAC,CAAEF,aAAa,CAACG,MAAQ;IAC7DO,QAAQ,EAAGA,CAAA,KAAM;MAChB,IAAKR,cAAc,EAAG;QACrBd,iBAAiB,CAAE,EAAG,CAAC;MACxB,CAAC,MAAM;QACNA,iBAAiB,CAChBI,eAAe,CAACmB,GAAG,CAAIhB,IAAI,IAAMJ,SAAS,CAAEI,IAAK,CAAE,CACpD,CAAC;MACF;IACD,CAAG;IACH,cACCO,cAAc,GAAG,IAAAU,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa;EACzD,CACD,CAAC;AAEJ;AAEA,SAASC,WAAWA,CAAU;EAC7BC,MAAM;EACNC,MAAM;EACNC,IAAI;EACJ,GAAGC;AACsB,CAAC,EAAG;EAC7B,MAAMC,KAAK,GAAGH,MAAM,CAACI,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,EAAE,KAAKP,MAAO,CAAC;EACrD,IAAK,CAAC,CAAEI,KAAK,EAAG;IACf,oBAAO,IAAAjC,WAAA,CAAAmB,GAAA,EAACkB,gBAAgB;MAAA,GAAML,KAAK;MAAGC,KAAK,EAAGA;IAAO,CAAE,CAAC;EACzD;EACA,MAAMK,aAAa,GAAGP,IAAI,CAACQ,MAAM,EAAEC,cAAc,EAAEN,IAAI,CACpDC,CAAC,IAAMA,CAAC,CAACC,EAAE,KAAKP,MACnB,CAAC;EACD,IAAK,CAAC,CAAES,aAAa,EAAG;IACvB,oBACC,IAAAtC,WAAA,CAAAmB,GAAA,EAACsB,mBAAmB;MAAA,GACdT,KAAK;MACVF,MAAM,EAAGA,MAAQ;MACjBC,IAAI,EAAGA,IAAM;MACbE,KAAK,EAAGK;IAAe,CACvB,CAAC;EAEJ;EAEA,OAAO,IAAI;AACZ;AAEA,SAASD,gBAAgBA,CAAU;EAClCK,YAAY;EACZhC,IAAI;EACJuB;AAC8B,CAAC,EAAG;EAClC,oBACC,IAAAjC,WAAA,CAAAmB,GAAA;IACCE,SAAS,EAAG,IAAAsB,aAAI,EAAE,4CAA4C,EAAE;MAC/D,qCAAqC,EACpCD,YAAY,EAAEN,EAAE,KAAKH,KAAK,CAACG;IAC7B,CAAE,CAAG;IAAAQ,QAAA,eAEL,IAAA5C,WAAA,CAAAmB,GAAA,EAACc,KAAK,CAACY,MAAM;MAAQnC;IAAI,CAAM;EAAC,CAC5B,CAAC;AAER;AAEA,SAAS+B,mBAAmBA,CAAU;EACrCR,KAAK;EACL,GAAGD;AAC8B,CAAC,EAAG;EACrC,MAAMY,QAAQ,GAAGX,KAAK,CAACW,QAAQ,CAAClB,GAAG,CAAIoB,KAAK,iBAC3C,IAAA9C,WAAA,CAAAmB,GAAA,EAACS,WAAW;IAAA,GAAoBI,KAAK;IAAGH,MAAM,EAAGiB;EAAO,GAArCA,KAAuC,CACzD,CAAC;EAEH,IAAKb,KAAK,CAACc,SAAS,KAAK,YAAY,EAAG;IACvC,oBAAO,IAAA/C,WAAA,CAAAmB,GAAA,EAAC1B,WAAA,CAAAuD,oBAAM;MAACC,OAAO,EAAG,CAAG;MAAAL,QAAA,EAAGA;IAAQ,CAAU,CAAC;EACnD;EACA,oBAAO,IAAA5C,WAAA,CAAAmB,GAAA,EAAC1B,WAAA,CAAAyD,oBAAM;IAACD,OAAO,EAAG,CAAG;IAAAL,QAAA,EAAGA;EAAQ,CAAU,CAAC;AACnD;AAEA,SAASO,QAAQA,CAAU;EAC1BC,cAAc;EACd1C,IAAI;EACJL,OAAO;EACPyB,MAAM;EACNM,EAAE;EACFL,IAAI;EACJW,YAAY;EACZxC,SAAS;EACTI,SAAS;EACTH;AACsB,CAAC,EAAG;EAC1B,MAAMkD,qBAAqB,GAAG,IAAAC,+CAAyB,EAAEjD,OAAO,EAAEK,IAAK,CAAC;EACxE,MAAM6C,UAAU,GAAGF,qBAAqB,IAAInD,SAAS,CAACc,QAAQ,CAAEoB,EAAG,CAAC;EACpE,MAAM,CAAEoB,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAErD,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BF,YAAY,CAAE,IAAK,CAAC;EACrB,CAAC;EACD,MAAMG,gBAAgB,GAAGA,CAAA,KAAM;IAC9BH,YAAY,CAAE,KAAM,CAAC;EACtB,CAAC;;EAED;EACA;EACA;EACA,MAAMI,aAAa,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;EACrC,MAAMC,OAAO,GAAGhC,IAAI,CAACD,MAAM,IAAIA,MAAM,CAACJ,GAAG,CAAIS,CAAC,IAAMA,CAAC,CAACC,EAAG,CAAC;EAE1D,oBACC,IAAApC,WAAA,CAAAgE,IAAA;IACC3C,SAAS,EAAG,IAAAsB,aAAI,EAAE,2BAA2B,EAAE;MAC9C,aAAa,EAAEU,qBAAqB,IAAIE,UAAU;MAClD,YAAY,EAAEC,SAAS;MACvB,kBAAkB,EAAEH;IACrB,CAAE,CAAG;IACLY,YAAY,EAAGN,gBAAkB;IACjCO,YAAY,EAAGN,gBAAkB;IACjCO,YAAY,EAAGA,CAAA,KAAM;MACpBN,aAAa,CAACO,OAAO,GAAG,IAAI;IAC7B,CAAG;IACHC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAK,CAAEhB,qBAAqB,EAAG;QAC9B;MACD;MACA,IACC,CAAEQ,aAAa,CAACO,OAAO,IACvBE,QAAQ,CAACC,YAAY,CAAC,CAAC,EAAEC,IAAI,KAAK,OAAO,EACxC;QACDrE,iBAAiB,CAChBD,SAAS,CAACc,QAAQ,CAAEoB,EAAG,CAAC,GACrBlC,SAAS,CAACO,MAAM,CAAIgE,MAAM,IAAMrC,EAAE,KAAKqC,MAAO,CAAC,GAC/C,CAAErC,EAAE,CACR,CAAC;MACF;IACD,CAAG;IAAAQ,QAAA,GAEDQ,cAAc,iBACf,IAAApD,WAAA,CAAAmB,GAAA;MACCE,SAAS,EAAC,uCAAuC;MACjDqD,KAAK,EAAG;QACPC,KAAK,EAAE;MACR,CAAG;MAAA/B,QAAA,eAEH,IAAA5C,WAAA,CAAAmB,GAAA;QAAKE,SAAS,EAAC,4CAA4C;QAAAuB,QAAA,eAC1D,IAAA5C,WAAA,CAAAmB,GAAA,EAACxB,2BAAA,CAAAiF,OAAuB;UACvBlE,IAAI,EAAGA,IAAM;UACbR,SAAS,EAAGA,SAAW;UACvBC,iBAAiB,EAAGA,iBAAmB;UACvCG,SAAS,EAAGA,SAAW;UACvBoC,YAAY,EAAGA,YAAc;UAC7BmC,QAAQ,EAAG,CAAExB;QAAuB,CACpC;MAAC,CACE;IAAC,CACH,CACJ,EACCU,OAAO,CAACrC,GAAG,CAAIG,MAAc,IAAM;MAAA,IAAAiD,qBAAA;MACpC;MACA,MAAM;QAAEH,KAAK;QAAEI,QAAQ;QAAEC;MAAS,CAAC,IAAAF,qBAAA,GAClC/C,IAAI,CAACQ,MAAM,EAAE0C,MAAM,GAAIpD,MAAM,CAAE,cAAAiD,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;MAEtC,oBACC,IAAA9E,WAAA,CAAAmB,GAAA;QAAmBuD,KAAK,EAAG;UAAEC,KAAK;UAAEI,QAAQ;UAAEC;QAAS,CAAG;QAAApC,QAAA,eACzD,IAAA5C,WAAA,CAAAmB,GAAA,EAACS,WAAW;UACXc,YAAY,EAAGA,YAAc;UAC7BZ,MAAM,EAAGA,MAAQ;UACjBpB,IAAI,EAAGA,IAAM;UACbmB,MAAM,EAAGA,MAAQ;UACjBE,IAAI,EAAGA;QAAM,CACb;MAAC,GAPOF,MAQN,CAAC;IAEP,CAAE,CAAC,EACD,CAAC,CAAExB,OAAO,EAAEa,MAAM;IAAA;IACnB;IACA;IACA;IACA;IACA;IAEA;IACA,IAAAlB,WAAA,CAAAmB,GAAA;MACCE,SAAS,EAAC,sCAAsC;MAChDgD,OAAO,EAAKa,CAAC,IAAMA,CAAC,CAACC,eAAe,CAAC,CAAG;MAAAvC,QAAA,eAExC,IAAA5C,WAAA,CAAAmB,GAAA,EAACvB,qBAAA,CAAAgF,OAAW;QAAClE,IAAI,EAAGA,IAAM;QAACL,OAAO,EAAGA;MAAS,CAAE;IAAC,CAC9C;IACJ,0GACA;EAAA,CACE,CAAC;AAEP;AAEA,SAAS+E,SAASA,CAAU;EAC3B/E,OAAO;EACPD,IAAI;EACJ0B,MAAM;EACNxB,SAAS;EACT+E,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZnF,iBAAiB;EACjBD,SAAS;EACTqF,eAAe;EACfxD;AACuB,CAAC,EAAG;EAC3B,MAAMyD,cAAc,GAAG,IAAA1B,eAAM,EAE1B,IAAI2B,GAAG,CAAC,CAAE,CAAC;EACd,MAAMC,oBAAoB,GAAG,IAAA5B,eAAM,EAAsB,CAAC;EAC1D,MAAM,CAAE6B,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD,IAAAlC,iBAAQ,EAAsB,CAAC;EAChC,MAAMN,cAAc,GAAG,IAAAyC,uDAAiC,EAAExF,OAAO,EAAED,IAAK,CAAC;EAEzE,IAAA0F,kBAAS,EAAE,MAAM;IAChB,IAAKJ,oBAAoB,CAACtB,OAAO,EAAG;MACnCsB,oBAAoB,CAACtB,OAAO,CAAC2B,KAAK,CAAC,CAAC;MACpCL,oBAAoB,CAACtB,OAAO,GAAG4B,SAAS;IACzC;EACD,CAAE,CAAC;EAEH,MAAMC,aAAa,GAAG,IAAAC,cAAK,EAAC,CAAC;EAE7B,IAAKP,qBAAqB,EAAG;IAC5B;IACA;IACA;IACA;IACAD,oBAAoB,CAACtB,OAAO,GAAGuB,qBAAqB;IACpDC,wBAAwB,CAAEI,SAAU,CAAC;IACrC;EACD;EAEA,MAAMG,MAAM,GAAKlE,KAA8B,IAAM;IACpD,MAAMmE,MAAM,GAAGZ,cAAc,CAACpB,OAAO,CAACiC,GAAG,CAAEpE,KAAK,CAACG,EAAG,CAAC;IACrD,MAAMkE,QAAQ,GAAGF,MAAM,GACpBZ,cAAc,CAACpB,OAAO,CAACiC,GAAG,CAAED,MAAM,CAACE,QAAS,CAAC,GAC7CN,SAAS;IACZJ,wBAAwB,CAAEU,QAAQ,EAAEC,IAAK,CAAC;EAC3C,CAAC;EAED,MAAMxC,OAAO,GAAGhC,IAAI,CAACD,MAAM,IAAIA,MAAM,CAACJ,GAAG,CAAIS,CAAC,IAAMA,CAAC,CAACC,EAAG,CAAC;EAC1D,MAAMoE,OAAO,GAAG,CAAC,CAAEpG,IAAI,EAAEc,MAAM;EAE/B,MAAMwB,YAAY,GAAGZ,MAAM,CAACI,IAAI,CAC7BD,KAAK,IAAMA,KAAK,CAACG,EAAE,KAAKL,IAAI,CAACQ,MAAM,EAAEG,YACxC,CAAC;EAED,oBACC,IAAA1C,WAAA,CAAAgE,IAAA,EAAAhE,WAAA,CAAAyG,QAAA;IAAA7D,QAAA,gBACC,IAAA5C,WAAA,CAAAgE,IAAA;MACC3C,SAAS,EAAC,sBAAsB;MAChC,aAAYgE,SAAW;MACvB,oBAAmBY,aAAe;MAAArD,QAAA,gBAElC,IAAA5C,WAAA,CAAAmB,GAAA;QAAAyB,QAAA,eACC,IAAA5C,WAAA,CAAAgE,IAAA;UAAI3C,SAAS,EAAC,2BAA2B;UAAAuB,QAAA,GACtCQ,cAAc,iBACf,IAAApD,WAAA,CAAAmB,GAAA;YACCE,SAAS,EAAC,uCAAuC;YACjDqD,KAAK,EAAG;cACPC,KAAK,EAAE;YACR,CAAG;YACH+B,KAAK,EAAC,KAAK;YAAA9D,QAAA,eAEX,IAAA5C,WAAA,CAAAmB,GAAA,EAAClB,qBAAqB;cACrBC,SAAS,EAAGA,SAAW;cACvBC,iBAAiB,EAAGA,iBAAmB;cACvCC,IAAI,EAAGA,IAAM;cACbC,OAAO,EAAGA,OAAS;cACnBC,SAAS,EAAGA;YAAW,CACvB;UAAC,CACC,CACJ,EACCyD,OAAO,CAACrC,GAAG,CAAE,CAAEG,MAAM,EAAE8E,KAAK,KAAM;YAAA,IAAAC,sBAAA;YACnC;YACA,MAAM;cAAEjC,KAAK;cAAEI,QAAQ;cAAEC;YAAS,CAAC,IAAA4B,sBAAA,GAClC7E,IAAI,CAACQ,MAAM,EAAE0C,MAAM,GAAIpD,MAAM,CAAE,cAAA+E,sBAAA,cAAAA,sBAAA,GAAI,CAAC,CAAC;YACtC,oBACC,IAAA5G,WAAA,CAAAmB,GAAA;cAECuD,KAAK,EAAG;gBAAEC,KAAK;gBAAEI,QAAQ;gBAAEC;cAAS,CAAG;cACvC,aACCjD,IAAI,CAAC8E,IAAI,EAAE5E,KAAK,KAAKJ,MAAM,GACxBiF,qBAAU,CAAE/E,IAAI,CAAC8E,IAAI,CAAC9D,SAAS,CAAE,GACjCiD,SACH;cACDU,KAAK,EAAC,KAAK;cAAA9D,QAAA,eAEX,IAAA5C,WAAA,CAAAmB,GAAA,EAACpB,iBAAA,CAAA6E,OAAgB;gBAChBmC,GAAG,EAAKR,IAAI,IAAM;kBACjB,IAAKA,IAAI,EAAG;oBACXf,cAAc,CAACpB,OAAO,CAAC4C,GAAG,CACzBnF,MAAM,EACN;sBACC0E,IAAI;sBACJD,QAAQ,EACPvC,OAAO,CACN4C,KAAK,GAAG,CAAC,GACNA,KAAK,GAAG,CAAC,GACT,CAAC;oBAEP,CACD,CAAC;kBACF,CAAC,MAAM;oBACNnB,cAAc,CAACpB,OAAO,CAAC6C,MAAM,CAC5BpF,MACD,CAAC;kBACF;gBACD,CAAG;gBACHqF,OAAO,EAAGrF,MAAQ;gBAClBE,IAAI,EAAGA,IAAM;gBACbD,MAAM,EAAGA,MAAQ;gBACjBwD,YAAY,EAAGA,YAAc;gBAC7Ba,MAAM,EAAGA,MAAQ;gBACjBZ,eAAe,EAAGA;cAAiB,CACnC;YAAC,GApCI1D,MAqCH,CAAC;UAEP,CAAE,CAAC,EACD,CAAC,CAAExB,OAAO,EAAEa,MAAM,iBACnB,IAAAlB,WAAA,CAAAmB,GAAA;YAAIE,SAAS,EAAC,sCAAsC;YAAAuB,QAAA,eACnD,IAAA5C,WAAA,CAAAmB,GAAA;cAAME,SAAS,EAAC,6BAA6B;cAAAuB,QAAA,EAC1C,IAAAjB,QAAE,EAAE,SAAU;YAAC,CACZ;UAAC,CACJ,CACJ;QAAA,CACE;MAAC,CACC,CAAC,eACR,IAAA3B,WAAA,CAAAmB,GAAA;QAAAyB,QAAA,EACG4D,OAAO,IACRpG,IAAI,CAACsB,GAAG,CAAE,CAAEhB,IAAI,EAAEiG,KAAK,kBACtB,IAAA3G,WAAA,CAAAmB,GAAA,EAACgC,QAAQ;UAERzC,IAAI,EAAGA,IAAM;UACb0C,cAAc,EAAGA,cAAgB;UACjC/C,OAAO,EAAGA,OAAS;UACnByB,MAAM,EAAGA,MAAQ;UACjBM,EAAE,EAAG9B,SAAS,CAAEI,IAAK,CAAC,IAAIiG,KAAK,CAACQ,QAAQ,CAAC,CAAG;UAC5CpF,IAAI,EAAGA,IAAM;UACbW,YAAY,EAAGA,YAAc;UAC7BxC,SAAS,EAAGA,SAAW;UACvBI,SAAS,EAAGA,SAAW;UACvBH,iBAAiB,EAAGA;QAAmB,GAVjCG,SAAS,CAAEI,IAAK,CAWtB,CACA;MAAC,CACE,CAAC;IAAA,CACF,CAAC,eACR,IAAAV,WAAA,CAAAmB,GAAA;MACCE,SAAS,EAAG,IAAAsB,aAAI,EAAE;QACjB,mBAAmB,EAAE0C,SAAS;QAC9B,sBAAsB,EAAE,CAAEmB,OAAO,IAAI,CAAEnB;MACxC,CAAE,CAAG;MACLjD,EAAE,EAAG6D,aAAe;MAAArD,QAAA,EAElB,CAAE4D,OAAO,iBACV,IAAAxG,WAAA,CAAAmB,GAAA;QAAAyB,QAAA,EAAKyC,SAAS,gBAAG,IAAArF,WAAA,CAAAmB,GAAA,EAAC1B,WAAA,CAAA2H,OAAO,IAAE,CAAC,GAAG,IAAAzF,QAAE,EAAE,YAAa;MAAC,CAAK;IACtD,CACG,CAAC;EAAA,CACL,CAAC;AAEL;AAAC,IAAA0F,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAEcQ,SAAS","ignoreList":[]}

package/build/normalize-fields.js

@@ -21,7 +21,7 @@ function normalizeFields(fields) {
     }) => item[field.id]);
     return {
       ...field,
-      header: field.header || field.id,
+      label: field.label || field.id,
       getValue,
       render: field.render || getValue
     };

package/build/normalize-fields.js.map

@@ -1 +1 @@
-{"version":3,"names":["normalizeFields","fields","map","field","getValue","item","id","header","render"],"sources":["@wordpress/dataviews/src/normalize-fields.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Field, NormalizedField, ItemRecord } from './types';\n\n/**\n * Apply default values and normalize the fields config.\n *\n * @param fields Fields config.\n * @return Normalized fields config.\n */\nexport function normalizeFields< Item >(\n\tfields: Field< Item >[]\n): NormalizedField< Item >[] {\n\treturn fields.map( ( field ) => {\n\t\tconst getValue =\n\t\t\tfield.getValue ||\n\t\t\t( ( { item }: { item: ItemRecord } ) => item[ field.id ] );\n\n\t\treturn {\n\t\t\t...field,\n\t\t\theader: field.header || field.id,\n\t\t\tgetValue,\n\t\t\trender: field.render || getValue,\n\t\t};\n\t} );\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAeA,CAC9BC,MAAuB,EACK;EAC5B,OAAOA,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAC/B,MAAMC,QAAQ,GACbD,KAAK,CAACC,QAAQ,KACZ,CAAE;MAAEC;IAA2B,CAAC,KAAMA,IAAI,CAAEF,KAAK,CAACG,EAAE,CAAE,CAAE;IAE3D,OAAO;MACN,GAAGH,KAAK;MACRI,MAAM,EAAEJ,KAAK,CAACI,MAAM,IAAIJ,KAAK,CAACG,EAAE;MAChCF,QAAQ;MACRI,MAAM,EAAEL,KAAK,CAACK,MAAM,IAAIJ;IACzB,CAAC;EACF,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["normalizeFields","fields","map","field","getValue","item","id","label","render"],"sources":["@wordpress/dataviews/src/normalize-fields.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Field, NormalizedField, ItemRecord } from './types';\n\n/**\n * Apply default values and normalize the fields config.\n *\n * @param fields Fields config.\n * @return Normalized fields config.\n */\nexport function normalizeFields< Item >(\n\tfields: Field< Item >[]\n): NormalizedField< Item >[] {\n\treturn fields.map( ( field ) => {\n\t\tconst getValue =\n\t\t\tfield.getValue ||\n\t\t\t( ( { item }: { item: ItemRecord } ) => item[ field.id ] );\n\n\t\treturn {\n\t\t\t...field,\n\t\t\tlabel: field.label || field.id,\n\t\t\tgetValue,\n\t\t\trender: field.render || getValue,\n\t\t};\n\t} );\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAeA,CAC9BC,MAAuB,EACK;EAC5B,OAAOA,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAC/B,MAAMC,QAAQ,GACbD,KAAK,CAACC,QAAQ,KACZ,CAAE;MAAEC;IAA2B,CAAC,KAAMA,IAAI,CAAEF,KAAK,CAACG,EAAE,CAAE,CAAE;IAE3D,OAAO;MACN,GAAGH,KAAK;MACRI,KAAK,EAAEJ,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACG,EAAE;MAC9BF,QAAQ;MACRI,MAAM,EAAEL,KAAK,CAACK,MAAM,IAAIJ;IACzB,CAAC;EACF,CAAE,CAAC;AACJ","ignoreList":[]}

package/build/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\nexport type SortDirection = 'asc' | 'desc';\n\n/**\n * Generic option type.\n */\nexport interface Option< Value extends any = any > {\n\tvalue: Value;\n\tlabel: string;\n\tdescription?: string;\n}\n\ninterface FilterByConfig {\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators?: Operator[];\n\n\t/**\n\t * Whether it is a primary filter.\n\t *\n\t * A primary filter is always visible and is not listed in the \"Add filter\" component,\n\t * except for the list layout where it behaves like a secondary filter.\n\t */\n\tisPrimary?: boolean;\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll';\n\nexport type ItemRecord = Record< string, unknown >;\n\nexport type FieldType = 'text';\n\n/**\n * A dataview field for a specific property of a data type.\n */\nexport type Field< Item > = {\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldType;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\theader?: string;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ( args: { item: Item } ) => ReactNode;\n\n\t/**\n\t * The width of the field column.\n\t */\n\twidth?: string | number;\n\n\t/**\n\t * The minimum width of the field column.\n\t */\n\tmaxWidth?: string | number;\n\n\t/**\n\t * The maximum width of the field column.\n\t */\n\tminWidth?: string | number;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field is filterable.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | undefined;\n} & ( Item extends ItemRecord\n\t? {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue?: ( args: { item: Item } ) => any;\n\t  }\n\t: {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue: ( args: { item: Item } ) => any;\n\t  } );\n\nexport type NormalizedField< Item > = Field< Item > & {\n\theader: string;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ( args: { item: Item } ) => ReactNode;\n};\n\n/**\n * A collection of dataview fields for a data type.\n */\nexport type Fields< Item > = Field< Item >[];\n\nexport type Data< Item > = Item[];\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\tvisibleFields?: string[];\n};\n\n/**\n * The filters applied to the dataset.\n */\nexport interface Filter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The operator to use.\n\t */\n\toperator: Operator;\n\n\t/**\n\t * The value to filter by.\n\t */\n\tvalue: any;\n}\n\nexport interface NormalizedFilter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The field name.\n\t */\n\tname: string;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements: Option[];\n\n\t/**\n\t * Is a single selection filter.\n\t */\n\tsingleSelection: boolean;\n\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators: Operator[];\n\n\t/**\n\t * Whether the filter is visible.\n\t */\n\tisVisible: boolean;\n\n\t/**\n\t * Whether it is a primary filter.\n\t */\n\tisPrimary: boolean;\n}\n\ninterface ViewBase {\n\t/**\n\t * The layout of the view.\n\t */\n\ttype: string;\n\n\t/**\n\t * The global search term.\n\t */\n\tsearch?: string;\n\n\t/**\n\t * The filters to apply.\n\t */\n\tfilters?: Filter[];\n\n\t/**\n\t * The sorting configuration.\n\t */\n\tsort?: {\n\t\t/**\n\t\t * The field to sort by.\n\t\t */\n\t\tfield: string;\n\n\t\t/**\n\t\t * The direction to sort by.\n\t\t */\n\t\tdirection: SortDirection;\n\t};\n\n\t/**\n\t * The active page\n\t */\n\tpage?: number;\n\n\t/**\n\t * The number of items per page\n\t */\n\tperPage?: number;\n\n\t/**\n\t * The hidden fields.\n\t */\n\tfields?: string[];\n}\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\t};\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcolumnFields?: string[];\n\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\t};\n}\n\nexport type View = ViewList | ViewGrid | ViewTable;\n\ninterface ActionBase< Item > {\n\t/**\n\t * The unique identifier of the action.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the action.\n\t * In case we want to adjust the label based on the selected items,\n\t * a function can be provided.\n\t */\n\tlabel: string | ( ( items: Item[] ) => string );\n\n\t/**\n\t * The icon of the action. (Either a string or an SVG element)\n\t * This should be IconType from the components package\n\t * but that import is breaking typescript build for the moment.\n\t */\n\ticon?: any;\n\n\t/**\n\t * Whether the action is disabled.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether the action is destructive.\n\t */\n\tisDestructive?: boolean;\n\n\t/**\n\t * Whether the action is a primary action.\n\t */\n\tisPrimary?: boolean;\n\n\t/**\n\t * Whether the item passed as an argument supports the current action.\n\t */\n\tisEligible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether the action can be used as a bulk action.\n\t */\n\tsupportsBulk?: boolean;\n}\n\nexport interface ActionModal< Item > extends ActionBase< Item > {\n\t/**\n\t * Modal to render when the action is triggered.\n\t */\n\tRenderModal: ( {\n\t\titems,\n\t\tcloseModal,\n\t\tonActionPerformed,\n\t}: {\n\t\titems: Item[];\n\t\tcloseModal?: () => void;\n\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t} ) => ReactElement;\n\n\t/**\n\t * Whether to hide the modal header.\n\t */\n\thideModalHeader?: boolean;\n\n\t/**\n\t * The header of the modal.\n\t */\n\tmodalHeader?: string;\n}\n\nexport interface ActionButton< Item > extends ActionBase< Item > {\n\t/**\n\t * The callback to execute when the action is triggered.\n\t */\n\tcallback: (\n\t\titems: Item[],\n\t\tcontext: {\n\t\t\tregistry: any;\n\t\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t\t}\n\t) => void;\n}\n\nexport type Action< Item > = ActionModal< Item > | ActionButton< Item >;\n\nexport interface ViewBaseProps< Item > {\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonSelectionChange: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tview: View;\n}\n\nexport interface ViewTableProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewTable;\n}\n\nexport interface ViewListProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewList;\n}\n\nexport interface ViewGridProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewGrid;\n}\n\nexport type ViewProps< Item > =\n\t| ViewTableProps< Item >\n\t| ViewGridProps< Item >\n\t| ViewListProps< Item >;\n\nexport interface SupportedLayouts {\n\tlist?: Omit< ViewList, 'type' >;\n\tgrid?: Omit< ViewGrid, 'type' >;\n\ttable?: Omit< ViewTable, 'type' >;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\nexport type SortDirection = 'asc' | 'desc';\n\n/**\n * Generic option type.\n */\nexport interface Option< Value extends any = any > {\n\tvalue: Value;\n\tlabel: string;\n\tdescription?: string;\n}\n\ninterface FilterByConfig {\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators?: Operator[];\n\n\t/**\n\t * Whether it is a primary filter.\n\t *\n\t * A primary filter is always visible and is not listed in the \"Add filter\" component,\n\t * except for the list layout where it behaves like a secondary filter.\n\t */\n\tisPrimary?: boolean;\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll';\n\nexport type ItemRecord = Record< string, unknown >;\n\nexport type FieldType = 'text';\n\n/**\n * A dataview field for a specific property of a data type.\n */\nexport type Field< Item > = {\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldType;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< { item: Item } >;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field is filterable.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | undefined;\n} & ( Item extends ItemRecord\n\t? {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue?: ( args: { item: Item } ) => any;\n\t  }\n\t: {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue: ( args: { item: Item } ) => any;\n\t  } );\n\nexport type NormalizedField< Item > = Field< Item > & {\n\tlabel: string;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ComponentType< { item: Item } >;\n};\n\n/**\n * A collection of dataview fields for a data type.\n */\nexport type Fields< Item > = Field< Item >[];\n\nexport type Data< Item > = Item[];\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\tvisibleFields?: string[];\n};\n\n/**\n * The filters applied to the dataset.\n */\nexport interface Filter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The operator to use.\n\t */\n\toperator: Operator;\n\n\t/**\n\t * The value to filter by.\n\t */\n\tvalue: any;\n}\n\nexport interface NormalizedFilter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The field name.\n\t */\n\tname: string;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements: Option[];\n\n\t/**\n\t * Is a single selection filter.\n\t */\n\tsingleSelection: boolean;\n\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators: Operator[];\n\n\t/**\n\t * Whether the filter is visible.\n\t */\n\tisVisible: boolean;\n\n\t/**\n\t * Whether it is a primary filter.\n\t */\n\tisPrimary: boolean;\n}\n\ninterface ViewBase {\n\t/**\n\t * The layout of the view.\n\t */\n\ttype: string;\n\n\t/**\n\t * The global search term.\n\t */\n\tsearch?: string;\n\n\t/**\n\t * The filters to apply.\n\t */\n\tfilters?: Filter[];\n\n\t/**\n\t * The sorting configuration.\n\t */\n\tsort?: {\n\t\t/**\n\t\t * The field to sort by.\n\t\t */\n\t\tfield: string;\n\n\t\t/**\n\t\t * The direction to sort by.\n\t\t */\n\t\tdirection: SortDirection;\n\t};\n\n\t/**\n\t * The active page\n\t */\n\tpage?: number;\n\n\t/**\n\t * The number of items per page\n\t */\n\tperPage?: number;\n\n\t/**\n\t * The fields to render\n\t */\n\tfields?: string[];\n}\n\nexport interface CombinedField {\n\tid: string;\n\n\tlabel: string;\n\n\t/**\n\t * The fields to use as columns.\n\t */\n\tchildren: string[];\n\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection: 'horizontal' | 'vertical';\n}\n\nexport interface ColumnStyle {\n\t/**\n\t * The width of the field column.\n\t */\n\twidth?: string | number;\n\n\t/**\n\t * The minimum width of the field column.\n\t */\n\tmaxWidth?: string | number;\n\n\t/**\n\t * The maximum width of the field column.\n\t */\n\tminWidth?: string | number;\n}\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcombinedFields?: CombinedField[];\n\n\t\t/**\n\t\t * The styles for the columns.\n\t\t */\n\t\tstyles?: Record< string, ColumnStyle >;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\t};\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcolumnFields?: string[];\n\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\t};\n}\n\nexport type View = ViewList | ViewGrid | ViewTable;\n\ninterface ActionBase< Item > {\n\t/**\n\t * The unique identifier of the action.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the action.\n\t * In case we want to adjust the label based on the selected items,\n\t * a function can be provided.\n\t */\n\tlabel: string | ( ( items: Item[] ) => string );\n\n\t/**\n\t * The icon of the action. (Either a string or an SVG element)\n\t * This should be IconType from the components package\n\t * but that import is breaking typescript build for the moment.\n\t */\n\ticon?: any;\n\n\t/**\n\t * Whether the action is disabled.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether the action is destructive.\n\t */\n\tisDestructive?: boolean;\n\n\t/**\n\t * Whether the action is a primary action.\n\t */\n\tisPrimary?: boolean;\n\n\t/**\n\t * Whether the item passed as an argument supports the current action.\n\t */\n\tisEligible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether the action can be used as a bulk action.\n\t */\n\tsupportsBulk?: boolean;\n}\n\nexport interface ActionModal< Item > extends ActionBase< Item > {\n\t/**\n\t * Modal to render when the action is triggered.\n\t */\n\tRenderModal: ( {\n\t\titems,\n\t\tcloseModal,\n\t\tonActionPerformed,\n\t}: {\n\t\titems: Item[];\n\t\tcloseModal?: () => void;\n\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t} ) => ReactElement;\n\n\t/**\n\t * Whether to hide the modal header.\n\t */\n\thideModalHeader?: boolean;\n\n\t/**\n\t * The header of the modal.\n\t */\n\tmodalHeader?: string;\n}\n\nexport interface ActionButton< Item > extends ActionBase< Item > {\n\t/**\n\t * The callback to execute when the action is triggered.\n\t */\n\tcallback: (\n\t\titems: Item[],\n\t\tcontext: {\n\t\t\tregistry: any;\n\t\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t\t}\n\t) => void;\n}\n\nexport type Action< Item > = ActionModal< Item > | ActionButton< Item >;\n\nexport interface ViewBaseProps< Item > {\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonChangeSelection: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tview: View;\n\tdensity: number;\n}\n\nexport interface ViewTableProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewTable;\n}\n\nexport interface ViewListProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewList;\n}\n\nexport interface ViewGridProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewGrid;\n}\n\nexport type ViewProps< Item > =\n\t| ViewTableProps< Item >\n\t| ViewGridProps< Item >\n\t| ViewListProps< Item >;\n\nexport interface SupportedLayouts {\n\tlist?: Omit< ViewList, 'type' >;\n\tgrid?: Omit< ViewGrid, 'type' >;\n\ttable?: Omit< ViewTable, 'type' >;\n}\n"],"mappings":"","ignoreList":[]}

package/build-module/{dataform.js → components/dataform/index.js}

@@ -12,7 +12,7 @@ import { useCallback, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 
-import { normalizeFields } from './normalize-fields';
+import { normalizeFields } from '../../normalize-fields';
 import { jsx as _jsx } from "react/jsx-runtime";
 function DataFormTextControl({
   data,
@@ -21,7 +21,7 @@ function DataFormTextControl({
 }) {
   const {
     id,
-    header,
+    label,
     placeholder
   } = field;
   const value = field.getValue({
@@ -32,9 +32,9 @@ function DataFormTextControl({
     [id]: newValue
   })), [id, onChange]);
   return /*#__PURE__*/_jsx(TextControl, {
-    label: header,
+    label: label,
     placeholder: placeholder,
-    value: value,
+    value: value !== null && value !== void 0 ? value : '',
     onChange: onChangeControl,
     __next40pxDefaultSize: true
   });
@@ -69,4 +69,4 @@ export default function DataForm({
     }, field.id) : null;
   });
 }
-//# sourceMappingURL=dataform.js.map
+//# sourceMappingURL=index.js.map

package/build-module/components/dataform/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TextControl","useCallback","useMemo","normalizeFields","jsx","_jsx","DataFormTextControl","data","field","onChange","id","label","placeholder","value","getValue","item","onChangeControl","newValue","prevItem","__next40pxDefaultSize","controls","text","getControlForField","type","Object","keys","includes","DataForm","fields","form","visibleFields","filter","map","DataFormControl"],"sources":["@wordpress/dataviews/src/components/dataform/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Dispatch, SetStateAction } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Form, Field, NormalizedField } from '../../types';\nimport { normalizeFields } from '../../normalize-fields';\n\ntype DataFormProps< Item > = {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: Dispatch< SetStateAction< Item > >;\n};\n\ntype DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: Dispatch< SetStateAction< Item > >;\n};\n\nfunction DataFormTextControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, placeholder } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( ( prevItem: Item ) => ( {\n\t\t\t\t...prevItem,\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ) ),\n\t\t[ id, onChange ]\n\t);\n\n\treturn (\n\t\t<TextControl\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n\nconst controls: {\n\t[ key: string ]: < Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) => JSX.Element;\n} = {\n\ttext: DataFormTextControl,\n};\n\nfunction getControlForField< Item >( field: NormalizedField< Item > ) {\n\tif ( ! field.type ) {\n\t\treturn null;\n\t}\n\n\tif ( ! Object.keys( controls ).includes( field.type ) ) {\n\t\treturn null;\n\t}\n\n\treturn controls[ field.type ];\n}\n\nexport default function DataForm< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter(\n\t\t\t\t\t( { id } ) => !! form.visibleFields?.includes( id )\n\t\t\t\t)\n\t\t\t),\n\t\t[ fields, form.visibleFields ]\n\t);\n\n\treturn visibleFields.map( ( field ) => {\n\t\tconst DataFormControl = getControlForField( field );\n\t\treturn DataFormControl ? (\n\t\t\t<DataFormControl\n\t\t\t\tkey={ field.id }\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t) : null;\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,uBAAuB;AACnD,SAASC,WAAW,EAAEC,OAAO,QAAQ,oBAAoB;;AAEzD;AACA;AACA;;AAEA,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAezD,SAASC,mBAAmBA,CAAU;EACrCC,IAAI;EACJC,KAAK;EACLC;AAC6B,CAAC,EAAG;EACjC,MAAM;IAAEC,EAAE;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAGJ,KAAK;EACxC,MAAMK,KAAK,GAAGL,KAAK,CAACM,QAAQ,CAAE;IAAEC,IAAI,EAAER;EAAK,CAAE,CAAC;EAE9C,MAAMS,eAAe,GAAGf,WAAW,CAChCgB,QAAgB,IACjBR,QAAQ,CAAIS,QAAc,KAAQ;IACjC,GAAGA,QAAQ;IACX,CAAER,EAAE,GAAIO;EACT,CAAC,CAAG,CAAC,EACN,CAAEP,EAAE,EAAED,QAAQ,CACf,CAAC;EAED,oBACCJ,IAAA,CAACL,WAAW;IACXW,KAAK,EAAGA,KAAO;IACfC,WAAW,EAAGA,WAAa;IAC3BC,KAAK,EAAGA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAI;IACrBJ,QAAQ,EAAGO,eAAiB;IAC5BG,qBAAqB;EAAA,CACrB,CAAC;AAEJ;AAEA,MAAMC,QAIL,GAAG;EACHC,IAAI,EAAEf;AACP,CAAC;AAED,SAASgB,kBAAkBA,CAAUd,KAA8B,EAAG;EACrE,IAAK,CAAEA,KAAK,CAACe,IAAI,EAAG;IACnB,OAAO,IAAI;EACZ;EAEA,IAAK,CAAEC,MAAM,CAACC,IAAI,CAAEL,QAAS,CAAC,CAACM,QAAQ,CAAElB,KAAK,CAACe,IAAK,CAAC,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,OAAOH,QAAQ,CAAEZ,KAAK,CAACe,IAAI,CAAE;AAC9B;AAEA,eAAe,SAASI,QAAQA,CAAU;EACzCpB,IAAI;EACJqB,MAAM;EACNC,IAAI;EACJpB;AACsB,CAAC,EAAG;EAC1B,MAAMqB,aAAa,GAAG5B,OAAO,CAC5B,MACCC,eAAe,CACdyB,MAAM,CAACG,MAAM,CACZ,CAAE;IAAErB;EAAG,CAAC,KAAM,CAAC,CAAEmB,IAAI,CAACC,aAAa,EAAEJ,QAAQ,CAAEhB,EAAG,CACnD,CACD,CAAC,EACF,CAAEkB,MAAM,EAAEC,IAAI,CAACC,aAAa,CAC7B,CAAC;EAED,OAAOA,aAAa,CAACE,GAAG,CAAIxB,KAAK,IAAM;IACtC,MAAMyB,eAAe,GAAGX,kBAAkB,CAAEd,KAAM,CAAC;IACnD,OAAOyB,eAAe,gBACrB5B,IAAA,CAAC4B,eAAe;MAEf1B,IAAI,EAAGA,IAAM;MACbC,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA;IAAU,GAHfD,KAAK,CAACE,EAIZ,CAAC,GACC,IAAI;EACT,CAAE,CAAC;AACJ","ignoreList":[]}

package/build-module/components/dataviews/index.js

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
+import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
+import DataViewsContext from '../dataviews-context';
+import DataViewsFilters from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import DataviewsPagination from '../dataviews-pagination';
+import DataViewsSearch from '../dataviews-search';
+import DataViewsViewConfig from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import DensityPicker from '../../layouts/grid/density-picker';
+import { LAYOUT_GRID } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultGetItemId = item => item.id;
+export default function DataViews({
+  view,
+  onChangeView,
+  fields,
+  search = true,
+  searchLabel = undefined,
+  actions = [],
+  data,
+  getItemId = defaultGetItemId,
+  isLoading = false,
+  paginationInfo,
+  defaultLayouts,
+  selection: selectionProperty,
+  onChangeSelection,
+  header
+}) {
+  const [selectionState, setSelectionState] = useState([]);
+  const [density, setDensity] = useState(0);
+  const isUncontrolled = selectionProperty === undefined || onChangeSelection === undefined;
+  const selection = isUncontrolled ? selectionState : selectionProperty;
+  const [openedFilter, setOpenedFilter] = useState(null);
+  function setSelectionWithChange(value) {
+    const newValue = typeof value === 'function' ? value(selection) : value;
+    if (isUncontrolled) {
+      setSelectionState(newValue);
+    }
+    if (onChangeSelection) {
+      onChangeSelection(newValue);
+    }
+  }
+  const _fields = useMemo(() => normalizeFields(fields), [fields]);
+  const _selection = useMemo(() => {
+    return selection.filter(id => data.some(item => getItemId(item) === id));
+  }, [selection, data, getItemId]);
+  return /*#__PURE__*/_jsx(DataViewsContext.Provider, {
+    value: {
+      view,
+      onChangeView,
+      fields: _fields,
+      actions,
+      data,
+      isLoading,
+      paginationInfo,
+      selection: _selection,
+      onChangeSelection: setSelectionWithChange,
+      openedFilter,
+      setOpenedFilter,
+      getItemId,
+      density
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "dataviews-wrapper",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignment: "top",
+        justify: "start",
+        className: "dataviews__view-actions",
+        children: [/*#__PURE__*/_jsxs(HStack, {
+          justify: "start",
+          className: "dataviews-filters__container",
+          wrap: true,
+          children: [search && /*#__PURE__*/_jsx(DataViewsSearch, {
+            label: searchLabel
+          }), /*#__PURE__*/_jsx(DataViewsFilters, {})]
+        }), view.type === LAYOUT_GRID && /*#__PURE__*/_jsx(DensityPicker, {
+          density: density,
+          setDensity: setDensity
+        }), /*#__PURE__*/_jsx(DataViewsBulkActions, {}), /*#__PURE__*/_jsxs(HStack, {
+          spacing: 1,
+          expanded: false,
+          style: {
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/_jsx(DataViewsViewConfig, {
+            defaultLayouts: defaultLayouts
+          }), header]
+        })]
+      }), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataviewsPagination, {}), /*#__PURE__*/_jsx(DataViewsBulkActionsToolbar, {})]
+    })
+  });
+}
+//# sourceMappingURL=index.js.map