@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.0

package/build/components/dataviews-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_dataviewsContext","_interopRequireDefault","_dataviewsLayouts","_jsxRuntime","DataViewsLayout","className","actions","data","fields","getItemId","getItemLevel","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","onClickItem","isItemClickable","renderItemLink","empty","__","useContext","DataViewsContext","ViewComponent","VIEW_LAYOUTS","find","v","type","component","jsx"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tempty = __( 'No results' ),\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )\n\t\t?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAfvD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASe,SAASM,eAAeA,CAAE;EAAEC;AAAgC,CAAC,EAAG;EAC9E,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC,WAAW;IACXC,eAAe;IACfC,cAAc;IACdC,KAAK,GAAG,IAAAC,QAAE,EAAE,YAAa;EAC1B,CAAC,GAAG,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAElC,MAAMC,aAAa,GAAGC,8BAAY,CAACC,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKhB,IAAI,CAACgB,IAAK,CAAC,EACrEC,SAAkD;EAErD,oBACC,IAAA1B,WAAA,CAAA2B,GAAA,EAACN,aAAa;IACbnB,SAAS,EAAGA,SAAW;IACvBC,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,YAAY,EAAGA,YAAc;IAC7BC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCC,WAAW,EAAGA,WAAa;IAC3BE,cAAc,EAAGA,cAAgB;IACjCD,eAAe,EAAGA,eAAiB;IACnCN,IAAI,EAAGA,IAAM;IACbQ,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_element","require","_i18n","_dataviewsContext","_interopRequireDefault","_dataviewsLayouts","_jsxRuntime","DataViewsLayout","className","actions","data","fields","getItemId","getItemLevel","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","onClickItem","isItemClickable","renderItemLink","defaultLayouts","empty","jsx","children","__","useContext","DataViewsContext","ViewComponent","VIEW_LAYOUTS","find","v","type","component"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\ntype DataViewsLayoutProps = {\n\tclassName?: string;\n};\n\nexport default function DataViewsLayout( { className }: DataViewsLayoutProps ) {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tgetItemLevel,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tonClickItem,\n\t\tisItemClickable,\n\t\trenderItemLink,\n\t\tdefaultLayouts,\n\t\tempty = <p>{ __( 'No results' ) }</p>,\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type && defaultLayouts[ v.type ]\n\t)?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tclassName={ className }\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tgetItemLevel={ getItemLevel }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tonClickItem={ onClickItem }\n\t\t\trenderItemLink={ renderItemLink }\n\t\t\tisItemClickable={ isItemClickable }\n\t\t\tview={ view }\n\t\t\tempty={ empty }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAuD,IAAAK,WAAA,GAAAL,OAAA;AAfvD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASe,SAASM,eAAeA,CAAE;EAAEC;AAAgC,CAAC,EAAG;EAC9E,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC,WAAW;IACXC,eAAe;IACfC,cAAc;IACdC,cAAc;IACdC,KAAK,gBAAG,IAAAlB,WAAA,CAAAmB,GAAA;MAAAC,QAAA,EAAK,IAAAC,QAAE,EAAE,YAAa;IAAC,CAAK;EACrC,CAAC,GAAG,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAElC,MAAMC,aAAa,GAAGC,8BAAY,CAACC,IAAI,CACpCC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKnB,IAAI,CAACmB,IAAI,IAAIX,cAAc,CAAEU,CAAC,CAACC,IAAI,CACxD,CAAC,EAAEC,SAAkD;EAErD,oBACC,IAAA7B,WAAA,CAAAmB,GAAA,EAACK,aAAa;IACbtB,SAAS,EAAGA,SAAW;IACvBC,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,YAAY,EAAGA,YAAc;IAC7BC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCC,WAAW,EAAGA,WAAa;IAC3BE,cAAc,EAAGA,cAAgB;IACjCD,eAAe,EAAGA,eAAiB;IACnCN,IAAI,EAAGA,IAAM;IACbS,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}

package/build/components/dataviews-picker/footer.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataViewsPickerFooter = DataViewsPickerFooter;
+exports.useIsMultiselectPicker = useIsMultiselectPicker;
+var _components = require("@wordpress/components");
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _dataviewsPagination = _interopRequireDefault(require("../dataviews-pagination"));
+var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const EMPTY_ARRAY = [];
+function useIsMultiselectPicker(actions) {
+  return (0, _element.useMemo)(() => {
+    return actions?.every(action => action.supportsBulk);
+  }, [actions]);
+}
+function BulkSelectionCheckbox({
+  selection,
+  selectedItems,
+  onChangeSelection,
+  data,
+  getItemId
+}) {
+  const areAllSelected = selectedItems.length === data.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) {
+        // Deselect all - remove the current page from the total selection.
+        onChangeSelection(selection.filter(id => !data.some(item => id === getItemId(item))));
+      } else {
+        // Select all - merge the current page into the total selection.
+        const selectionSet = new Set([...selection, ...data.map(item => getItemId(item))]);
+        onChangeSelection(Array.from(selectionSet));
+      }
+    },
+    "aria-label": areAllSelected ? (0, _i18n.__)('Deselect all') : (0, _i18n.__)('Select all')
+  });
+}
+function ActionButtons({
+  actions,
+  items,
+  selection
+}) {
+  const registry = (0, _data.useRegistry)();
+  const [actionInProgress, setActionInProgress] = (0, _element.useState)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 1,
+    children: actions.map(action => {
+      // Only support actions with callbacks for DataViewsPicker.
+      // This is because many use cases of the picker will be already within modals.
+      if (!('callback' in action)) {
+        return null;
+      }
+      const {
+        id,
+        label,
+        icon,
+        isPrimary,
+        isDestructive,
+        callback
+      } = action;
+      const _label = typeof label === 'string' ? label : label(items);
+      const variant = isPrimary ? 'primary' : 'tertiary';
+      const isInProgress = id === actionInProgress;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        accessibleWhenDisabled: true,
+        icon: icon,
+        disabled: isInProgress || !selection?.length,
+        isBusy: isInProgress,
+        onClick: async () => {
+          setActionInProgress(id);
+          await callback(items, {
+            registry
+          });
+          setActionInProgress(null);
+        },
+        size: "compact",
+        isDestructive: isDestructive,
+        variant: variant,
+        children: _label
+      }, id);
+    })
+  });
+}
+function DataViewsPickerFooter() {
+  const {
+    data,
+    selection,
+    onChangeSelection,
+    getItemId,
+    actions = EMPTY_ARRAY
+  } = (0, _element.useContext)(_dataviewsContext.default);
+  const selectionCount = selection.length;
+  const isMultiselect = useIsMultiselectPicker(actions);
+  const message = selectionCount > 0 ? (0, _i18n.sprintf)(/* translators: %d: number of items. */
+  (0, _i18n._n)('%d Item selected', '%d Items selected', selectionCount), selectionCount) : (0, _i18n.sprintf)(/* translators: %d: number of items. */
+  (0, _i18n._n)('%d Item', '%d Items', data.length), data.length);
+  const selectedItems = (0, _element.useMemo)(() => data.filter(item => selection.includes(getItemId(item))), [selection, getItemId, data]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+    expanded: false,
+    justify: "space-between",
+    className: "dataviews-footer",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      className: "dataviews-picker-footer__bulk-selection",
+      expanded: false,
+      spacing: 3,
+      children: [isMultiselect && /*#__PURE__*/(0, _jsxRuntime.jsx)(BulkSelectionCheckbox, {
+        selection: selection,
+        selectedItems: selectedItems,
+        onChangeSelection: onChangeSelection,
+        data: data,
+        getItemId: getItemId
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dataviews-bulk-actions-footer__item-count",
+        children: message
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsPagination.default, {}), Boolean(actions?.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dataviews-picker-footer__actions",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtons, {
+        actions: actions,
+        items: selectedItems,
+        selection: selection
+      })
+    })]
+  });
+}
+//# sourceMappingURL=footer.js.map

package/build/components/dataviews-picker/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_data","_element","_i18n","_dataviewsPagination","_interopRequireDefault","_dataviewsContext","_jsxRuntime","EMPTY_ARRAY","useIsMultiselectPicker","actions","useMemo","every","action","supportsBulk","BulkSelectionCheckbox","selection","selectedItems","onChangeSelection","data","getItemId","areAllSelected","length","jsx","CheckboxControl","className","__nextHasNoMarginBottom","checked","indeterminate","onChange","filter","id","some","item","selectionSet","Set","map","Array","from","__","ActionButtons","items","registry","useRegistry","actionInProgress","setActionInProgress","useState","__experimentalHStack","expanded","spacing","children","label","icon","isPrimary","isDestructive","callback","_label","variant","isInProgress","Button","accessibleWhenDisabled","disabled","isBusy","onClick","size","DataViewsPickerFooter","useContext","DataViewsContext","selectionCount","isMultiselect","message","sprintf","_n","includes","jsxs","justify","default","Boolean"],"sources":["@wordpress/dataviews/src/components/dataviews-picker/footer.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { __, sprintf, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsPagination from '../dataviews-pagination';\nimport DataViewsContext from '../dataviews-context';\nimport type { SetSelection } from '../../private-types';\nimport type { Action } from '../../types';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport function useIsMultiselectPicker< Item >(\n\tactions: Action< Item >[] | undefined\n) {\n\treturn useMemo( () => {\n\t\treturn actions?.every( ( action ) => action.supportsBulk );\n\t}, [ actions ] );\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tselectedItems,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: {\n\tselection: string[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n} ) {\n\tconst areAllSelected = selectedItems.length === data.length;\n\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\t// Deselect all - remove the current page from the total selection.\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter(\n\t\t\t\t\t\t\t( id ) =>\n\t\t\t\t\t\t\t\t! data.some(\n\t\t\t\t\t\t\t\t\t( item ) => id === getItemId( item )\n\t\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} else {\n\t\t\t\t\t// Select all - merge the current page into the total selection.\n\t\t\t\t\tconst selectionSet = new Set( [\n\t\t\t\t\t\t...selection,\n\t\t\t\t\t\t...data.map( ( item ) => getItemId( item ) ),\n\t\t\t\t\t] );\n\t\t\t\t\tonChangeSelection( Array.from( selectionSet ) );\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 ActionButtons< Item >( {\n\tactions,\n\titems,\n\tselection,\n}: {\n\tactions: Action< Item >[];\n\titems: Item[];\n\tselection: string[];\n} ) {\n\tconst registry = useRegistry();\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\n\treturn (\n\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\t// Only support actions with callbacks for DataViewsPicker.\n\t\t\t\t// This is because many use cases of the picker will be already within modals.\n\t\t\t\tif ( ! ( 'callback' in action ) ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst { id, label, icon, isPrimary, isDestructive, callback } =\n\t\t\t\t\taction;\n\n\t\t\t\tconst _label =\n\t\t\t\t\ttypeof label === 'string' ? label : label( items );\n\t\t\t\tconst variant = isPrimary ? 'primary' : 'tertiary';\n\t\t\t\tconst isInProgress = id === actionInProgress;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tdisabled={ isInProgress || ! selection?.length }\n\t\t\t\t\t\tisBusy={ isInProgress }\n\t\t\t\t\t\tonClick={ async () => {\n\t\t\t\t\t\t\tsetActionInProgress( id );\n\t\t\t\t\t\t\tawait callback( items, {\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetActionInProgress( null );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tisDestructive={ isDestructive }\n\t\t\t\t\t\tvariant={ variant }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ _label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</HStack>\n\t);\n}\n\nexport function DataViewsPickerFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t\tactions = EMPTY_ARRAY,\n\t} = useContext( DataViewsContext );\n\n\tconst selectionCount = selection.length;\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\tconst message =\n\t\tselectionCount > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectionCount\n\t\t\t\t\t),\n\t\t\t\t\tselectionCount\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t  );\n\n\tconst selectedItems = useMemo(\n\t\t() =>\n\t\t\tdata.filter( ( item ) => selection.includes( getItemId( item ) ) ),\n\t\t[ selection, getItemId, data ]\n\t);\n\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tjustify=\"space-between\"\n\t\t\tclassName=\"dataviews-footer\"\n\t\t>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-picker-footer__bulk-selection\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 3 }\n\t\t\t>\n\t\t\t\t{ isMultiselect && (\n\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t\t{ message }\n\t\t\t\t</span>\n\t\t\t</HStack>\n\t\t\t<DataViewsPagination />\n\t\t\t{ Boolean( actions?.length ) && (\n\t\t\t\t<div className=\"dataviews-picker-footer__actions\">\n\t\t\t\t\t<ActionButtons\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titems={ selectedItems }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _dataviewsContext = _interopRequireDefault(require("../dataviews-context"));
+var _dataviewsLayouts = require("../../dataviews-layouts");
+var _dataviewsFilters = _interopRequireWildcard(require("../dataviews-filters"));
+var _dataviewsLayout = _interopRequireDefault(require("../dataviews-layout"));
+var _footer = require("./footer");
+var _dataviewsSearch = _interopRequireDefault(require("../dataviews-search"));
+var _dataviewsPagination = require("../dataviews-pagination");
+var _dataviewsViewConfig = _interopRequireWildcard(require("../dataviews-view-config"));
+var _normalizeFields = require("../../normalize-fields");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const isItemClickable = () => false;
+const dataViewsPickerLayouts = _dataviewsLayouts.VIEW_LAYOUTS.filter(viewLayout => viewLayout.isPicker);
+const defaultGetItemId = item => item.id;
+const EMPTY_ARRAY = [];
+function DefaultUI({
+  search = true,
+  searchLabel = undefined
+}) {
+  const {
+    isShowingFilter
+  } = (0, _element.useContext)(_dataviewsContext.default);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "top",
+      justify: "space-between",
+      className: "dataviews__view-actions",
+      spacing: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "start",
+        expanded: false,
+        className: "dataviews__search",
+        children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsSearch.default, {
+          label: searchLabel
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.FiltersToggle, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+        spacing: 1,
+        expanded: false,
+        style: {
+          flexShrink: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsViewConfig.default, {})
+      })]
+    }), isShowingFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsFilters.default, {
+      className: "dataviews-filters__container"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsLayout.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.DataViewsPickerFooter, {})]
+  });
+}
+function DataViewsPicker({
+  view,
+  onChangeView,
+  fields,
+  search = true,
+  searchLabel = undefined,
+  actions = EMPTY_ARRAY,
+  data,
+  getItemId = defaultGetItemId,
+  isLoading = false,
+  paginationInfo,
+  defaultLayouts: defaultLayoutsProperty,
+  selection,
+  onChangeSelection,
+  children,
+  config = {
+    perPageSizes: [10, 20, 50, 100]
+  },
+  itemListLabel,
+  empty
+}) {
+  const {
+    infiniteScrollHandler
+  } = paginationInfo;
+  const containerRef = (0, _element.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, _element.useState)(0);
+  const resizeObserverRef = (0, _compose.useResizeObserver)(resizeObserverEntries => {
+    setContainerWidth(resizeObserverEntries[0].borderBoxSize[0].inlineSize);
+  }, {
+    box: 'border-box'
+  });
+  const [openedFilter, setOpenedFilter] = (0, _element.useState)(null);
+  function setSelectionWithChange(value) {
+    const newValue = typeof value === 'function' ? value(selection) : value;
+    if (onChangeSelection) {
+      onChangeSelection(newValue);
+    }
+  }
+  const _fields = (0, _element.useMemo)(() => (0, _normalizeFields.normalizeFields)(fields), [fields]);
+  const filters = (0, _dataviewsFilters.useFilters)(_fields, view);
+  const hasPrimaryOrLockedFilters = (0, _element.useMemo)(() => (filters || []).some(filter => filter.isPrimary || filter.isLocked), [filters]);
+  const [isShowingFilter, setIsShowingFilter] = (0, _element.useState)(hasPrimaryOrLockedFilters);
+  (0, _element.useEffect)(() => {
+    if (hasPrimaryOrLockedFilters && !isShowingFilter) {
+      setIsShowingFilter(true);
+    }
+  }, [hasPrimaryOrLockedFilters, isShowingFilter]);
+
+  // Attach scroll event listener for infinite scroll
+  (0, _element.useEffect)(() => {
+    if (!view.infiniteScrollEnabled || !containerRef.current) {
+      return;
+    }
+    const handleScroll = (0, _compose.throttle)(event => {
+      const target = event.target;
+      const scrollTop = target.scrollTop;
+      const scrollHeight = target.scrollHeight;
+      const clientHeight = target.clientHeight;
+
+      // Check if user has scrolled near the bottom
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
+        infiniteScrollHandler?.();
+      }
+    }, 100); // Throttle to 100ms
+
+    const container = containerRef.current;
+    container.addEventListener('scroll', handleScroll);
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel(); // Cancel any pending throttled calls
+    };
+  }, [infiniteScrollHandler, view.infiniteScrollEnabled]);
+
+  // Filter out DataViewsPicker layouts.
+  const defaultLayouts = (0, _element.useMemo)(() => Object.fromEntries(Object.entries(defaultLayoutsProperty).filter(([layoutType]) => {
+    return dataViewsPickerLayouts.some(viewLayout => viewLayout.type === layoutType);
+  })), [defaultLayoutsProperty]);
+  if (!defaultLayouts[view.type]) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsContext.default.Provider, {
+    value: {
+      view,
+      onChangeView,
+      fields: _fields,
+      actions,
+      data,
+      isLoading,
+      paginationInfo,
+      isItemClickable,
+      selection,
+      onChangeSelection: setSelectionWithChange,
+      openedFilter,
+      setOpenedFilter,
+      getItemId,
+      containerWidth,
+      containerRef,
+      resizeObserverRef,
+      defaultLayouts,
+      filters,
+      isShowingFilter,
+      setIsShowingFilter,
+      config,
+      itemListLabel,
+      empty,
+      hasInfiniteScrollHandler: !!infiniteScrollHandler
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dataviews-picker-wrapper",
+      ref: containerRef,
+      children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultUI, {
+        search: search,
+        searchLabel: searchLabel
+      })
+    })
+  });
+}
+
+// Populate the DataViews sub components
+const DataViewsPickerSubComponents = DataViewsPicker;
+DataViewsPickerSubComponents.BulkActionToolbar = _footer.DataViewsPickerFooter;
+DataViewsPickerSubComponents.Filters = _dataviewsFilters.default;
+DataViewsPickerSubComponents.FiltersToggle = _dataviewsFilters.FiltersToggle;
+DataViewsPickerSubComponents.Layout = _dataviewsLayout.default;
+DataViewsPickerSubComponents.LayoutSwitcher = _dataviewsViewConfig.ViewTypeMenu;
+DataViewsPickerSubComponents.Pagination = _dataviewsPagination.DataViewsPagination;
+DataViewsPickerSubComponents.Search = _dataviewsSearch.default;
+DataViewsPickerSubComponents.ViewConfig = _dataviewsViewConfig.DataviewsViewConfigDropdown;
+var _default = exports.default = DataViewsPickerSubComponents;
+//# sourceMappingURL=index.js.map

package/build/components/dataviews-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_compose","_dataviewsContext","_interopRequireDefault","_dataviewsLayouts","_dataviewsFilters","_interopRequireWildcard","_dataviewsLayout","_footer","_dataviewsSearch","_dataviewsPagination","_dataviewsViewConfig","_normalizeFields","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","isItemClickable","dataViewsPickerLayouts","VIEW_LAYOUTS","filter","viewLayout","isPicker","defaultGetItemId","item","id","EMPTY_ARRAY","DefaultUI","search","searchLabel","undefined","isShowingFilter","useContext","DataViewsContext","jsxs","Fragment","children","__experimentalHStack","alignment","justify","className","spacing","expanded","jsx","label","FiltersToggle","style","flexShrink","DataViewsPickerFooter","DataViewsPicker","view","onChangeView","fields","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","defaultLayoutsProperty","selection","onChangeSelection","config","perPageSizes","itemListLabel","empty","infiniteScrollHandler","containerRef","useRef","containerWidth","setContainerWidth","useState","resizeObserverRef","useResizeObserver","resizeObserverEntries","borderBoxSize","inlineSize","box","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","useMemo","normalizeFields","filters","useFilters","hasPrimaryOrLockedFilters","some","isPrimary","isLocked","setIsShowingFilter","useEffect","infiniteScrollEnabled","current","handleScroll","throttle","event","target","scrollTop","scrollHeight","clientHeight","container","addEventListener","removeEventListener","cancel","fromEntries","entries","layoutType","type","Provider","hasInfiniteScrollHandler","ref","DataViewsPickerSubComponents","BulkActionToolbar","Filters","DataViewsFilters","Layout","DataViewsLayout","LayoutSwitcher","ViewTypeMenu","Pagination","DataViewsPagination","Search","DataViewsSearch","ViewConfig","DataviewsViewConfigDropdown","_default","exports"],"sources":["@wordpress/dataviews/src/components/dataviews-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { useResizeObserver, throttle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFiltersToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport { DataViewsPickerFooter } from './footer';\nimport DataViewsSearch from '../dataviews-search';\nimport { DataViewsPagination } from '../dataviews-pagination';\nimport DataViewsViewConfig, {\n\tDataviewsViewConfigDropdown,\n\tViewTypeMenu,\n} from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { ActionButton, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\ntype ItemWithId = { id: string };\n\nconst isItemClickable = () => false;\n\nconst dataViewsPickerLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => viewLayout.isPicker\n);\n\ntype DataViewsPickerProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tactions?: ActionButton< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t\tinfiniteScrollHandler?: () => void;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection: string[];\n\tonChangeSelection: ( items: string[] ) => void;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\titemListLabel?: string;\n\tempty?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst EMPTY_ARRAY: any[] = [];\n\ntype DefaultUIProps = Pick<\n\tDataViewsPickerProps< any >,\n\t'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\tsearch = true,\n\tsearchLabel = undefined,\n}: DefaultUIProps ) {\n\tconst { isShowingFilter } = useContext( DataViewsContext );\n\treturn (\n\t\t<>\n\t\t\t<HStack\n\t\t\t\talignment=\"top\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t>\n\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t<FiltersToggle />\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<DataViewsViewConfig />\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ isShowingFilter && (\n\t\t\t\t<DataViewsFilters className=\"dataviews-filters__container\" />\n\t\t\t) }\n\t\t\t<DataViewsLayout />\n\t\t\t<DataViewsPickerFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViewsPicker< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection,\n\tonChangeSelection,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\titemListLabel,\n\tempty,\n}: DataViewsPickerProps< Item > ) {\n\tconst { infiniteScrollHandler } = paginationInfo;\n\tconst containerRef = useRef< HTMLDivElement | null >( null );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst resizeObserverRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst filters = useFilters( _fields, view );\n\tconst hasPrimaryOrLockedFilters = useMemo(\n\t\t() =>\n\t\t\t( filters || [] ).some(\n\t\t\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t\t\t),\n\t\t[ filters ]\n\t);\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(\n\t\thasPrimaryOrLockedFilters\n\t);\n\n\tuseEffect( () => {\n\t\tif ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {\n\t\t\tsetIsShowingFilter( true );\n\t\t}\n\t}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );\n\n\t// Attach scroll event listener for infinite scroll\n\tuseEffect( () => {\n\t\tif ( ! view.infiniteScrollEnabled || ! containerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = throttle( ( event: unknown ) => {\n\t\t\tconst target = ( event as Event ).target as HTMLElement;\n\t\t\tconst scrollTop = target.scrollTop;\n\t\t\tconst scrollHeight = target.scrollHeight;\n\t\t\tconst clientHeight = target.clientHeight;\n\n\t\t\t// Check if user has scrolled near the bottom\n\t\t\tif ( scrollTop + clientHeight >= scrollHeight - 100 ) {\n\t\t\t\tinfiniteScrollHandler?.();\n\t\t\t}\n\t\t}, 100 ); // Throttle to 100ms\n\n\t\tconst container = containerRef.current;\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener( 'scroll', handleScroll );\n\t\t\thandleScroll.cancel(); // Cancel any pending throttled calls\n\t\t};\n\t}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );\n\n\t// Filter out DataViewsPicker layouts.\n\tconst defaultLayouts = useMemo(\n\t\t() =>\n\t\t\tObject.fromEntries(\n\t\t\t\tObject.entries( defaultLayoutsProperty ).filter(\n\t\t\t\t\t( [ layoutType ] ) => {\n\t\t\t\t\t\treturn dataViewsPickerLayouts.some(\n\t\t\t\t\t\t\t( viewLayout ) => viewLayout.type === layoutType\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t[ defaultLayoutsProperty ]\n\t);\n\n\tif ( ! defaultLayouts[ view.type ] ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tisItemClickable,\n\t\t\t\tselection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tcontainerWidth,\n\t\t\t\tcontainerRef,\n\t\t\t\tresizeObserverRef,\n\t\t\t\tdefaultLayouts,\n\t\t\t\tfilters,\n\t\t\t\tisShowingFilter,\n\t\t\t\tsetIsShowingFilter,\n\t\t\t\tconfig,\n\t\t\t\titemListLabel,\n\t\t\t\tempty,\n\t\t\t\thasInfiniteScrollHandler: !! infiniteScrollHandler,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-picker-wrapper\" ref={ containerRef }>\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI search={ search } searchLabel={ searchLabel } />\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n\n// Populate the DataViews sub components\nconst DataViewsPickerSubComponents =\n\tDataViewsPicker as typeof DataViewsPicker & {\n\t\tBulkActionToolbar: typeof DataViewsPickerFooter;\n\t\tFilters: typeof DataViewsFilters;\n\t\tFiltersToggle: typeof FiltersToggle;\n\t\tLayout: typeof DataViewsLayout;\n\t\tLayoutSwitcher: typeof ViewTypeMenu;\n\t\tPagination: typeof DataViewsPagination;\n\t\tSearch: typeof DataViewsSearch;\n\t\tViewConfig: typeof DataviewsViewConfigDropdown;\n\t};\n\nDataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;\nDataViewsPickerSubComponents.Filters = DataViewsFilters;\nDataViewsPickerSubComponents.FiltersToggle = FiltersToggle;\nDataViewsPickerSubComponents.Layout = DataViewsLayout;\nDataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsPickerSubComponents.Pagination = DataViewsPagination;\nDataViewsPickerSubComponents.Search = DataViewsSearch;\nDataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;\n\nexport default DataViewsPickerSubComponents;\n"],"mappings":"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","ignoreList":[]}

package/build/components/dataviews-selection-checkbox/index.js

@@ -21,7 +21,8 @@ function DataViewsSelectionCheckbox({
   item,
   getItemId,
   titleField,
-  disabled
+  disabled,
+  ...extraProps
 }) {
   const id = getItemId(item);
   const checked = !disabled && selection.includes(id);
@@ -41,7 +42,8 @@ function DataViewsSelectionCheckbox({
         return;
       }
       onChangeSelection(selection.includes(id) ? selection.filter(itemId => id !== itemId) : [...selection, id]);
-    }
+    },
+    ...extraProps
   });
 }
 //# sourceMappingURL=index.js.map

package/build/components/dataviews-selection-checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_jsxRuntime","DataViewsSelectionCheckbox","selection","onChangeSelection","item","getItemId","titleField","disabled","id","checked","includes","selectionLabel","getValue","__","jsx","CheckboxControl","className","__nextHasNoMarginBottom","onChange","filter","itemId"],"sources":["@wordpress/dataviews/src/components/dataviews-selection-checkbox/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CheckboxControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from '../../private-types';\nimport type { NormalizedField } from '../../types';\n\ninterface DataViewsSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\titem: Item;\n\tgetItemId: ( item: Item ) => string;\n\ttitleField?: NormalizedField< Item >;\n\tdisabled: boolean;\n}\n\nexport default function DataViewsSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\titem,\n\tgetItemId,\n\ttitleField,\n\tdisabled,\n}: DataViewsSelectionCheckboxProps< Item > ) {\n\tconst id = getItemId( item );\n\tconst checked = ! disabled && selection.includes( id );\n\n\t// Fallback label to ensure accessibility\n\tconst selectionLabel =\n\t\ttitleField?.getValue?.( { item } ) || __( '(no title)' );\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\taria-label={ selectionLabel }\n\t\t\taria-disabled={ disabled }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( disabled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonChangeSelection(\n\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAqC,IAAAE,WAAA,GAAAF,OAAA;AAJrC;AACA;AACA;;AAIA;AACA;AACA;;AAae,SAASG,0BAA0BA,CAAU;EAC3DC,SAAS;EACTC,iBAAiB;EACjBC,IAAI;EACJC,SAAS;EACTC,UAAU;EACVC;AACwC,CAAC,EAAG;EAC5C,MAAMC,EAAE,GAAGH,SAAS,CAAED,IAAK,CAAC;EAC5B,MAAMK,OAAO,GAAG,CAAEF,QAAQ,IAAIL,SAAS,CAACQ,QAAQ,CAAEF,EAAG,CAAC;;EAEtD;EACA,MAAMG,cAAc,GACnBL,UAAU,EAAEM,QAAQ,GAAI;IAAER;EAAK,CAAE,CAAC,IAAI,IAAAS,QAAE,EAAE,YAAa,CAAC;EAEzD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,WAAA,CAAAkB,eAAe;IACfC,SAAS,EAAC,8BAA8B;IACxCC,uBAAuB;IACvB,cAAaN,cAAgB;IAC7B,iBAAgBJ,QAAU;IAC1BE,OAAO,EAAGA,OAAS;IACnBS,QAAQ,EAAGA,CAAA,KAAM;MAChB,IAAKX,QAAQ,EAAG;QACf;MACD;MAEAJ,iBAAiB,CAChBD,SAAS,CAACQ,QAAQ,CAAEF,EAAG,CAAC,GACrBN,SAAS,CAACiB,MAAM,CAAIC,MAAM,IAAMZ,EAAE,KAAKY,MAAO,CAAC,GAC/C,CAAE,GAAGlB,SAAS,EAAEM,EAAE,CACtB,CAAC;IACF;EAAG,CACH,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_jsxRuntime","DataViewsSelectionCheckbox","selection","onChangeSelection","item","getItemId","titleField","disabled","extraProps","id","checked","includes","selectionLabel","getValue","__","jsx","CheckboxControl","className","__nextHasNoMarginBottom","onChange","filter","itemId"],"sources":["@wordpress/dataviews/src/components/dataviews-selection-checkbox/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CheckboxControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from '../../private-types';\nimport type { NormalizedField } from '../../types';\n\ninterface DataViewsSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\titem: Item;\n\tgetItemId: ( item: Item ) => string;\n\ttitleField?: NormalizedField< Item >;\n\tdisabled: boolean;\n\ttabIndex?: number;\n}\n\nexport default function DataViewsSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\titem,\n\tgetItemId,\n\ttitleField,\n\tdisabled,\n\t...extraProps\n}: DataViewsSelectionCheckboxProps< Item > ) {\n\tconst id = getItemId( item );\n\tconst checked = ! disabled && selection.includes( id );\n\n\t// Fallback label to ensure accessibility\n\tconst selectionLabel =\n\t\ttitleField?.getValue?.( { item } ) || __( '(no title)' );\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\taria-label={ selectionLabel }\n\t\t\taria-disabled={ disabled }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( disabled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonChangeSelection(\n\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t);\n\t\t\t} }\n\t\t\t{ ...extraProps }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAqC,IAAAE,WAAA,GAAAF,OAAA;AAJrC;AACA;AACA;;AAIA;AACA;AACA;;AAce,SAASG,0BAA0BA,CAAU;EAC3DC,SAAS;EACTC,iBAAiB;EACjBC,IAAI;EACJC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACR,GAAGC;AACqC,CAAC,EAAG;EAC5C,MAAMC,EAAE,GAAGJ,SAAS,CAAED,IAAK,CAAC;EAC5B,MAAMM,OAAO,GAAG,CAAEH,QAAQ,IAAIL,SAAS,CAACS,QAAQ,CAAEF,EAAG,CAAC;;EAEtD;EACA,MAAMG,cAAc,GACnBN,UAAU,EAAEO,QAAQ,GAAI;IAAET;EAAK,CAAE,CAAC,IAAI,IAAAU,QAAE,EAAE,YAAa,CAAC;EAEzD,oBACC,IAAAd,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAAmB,eAAe;IACfC,SAAS,EAAC,8BAA8B;IACxCC,uBAAuB;IACvB,cAAaN,cAAgB;IAC7B,iBAAgBL,QAAU;IAC1BG,OAAO,EAAGA,OAAS;IACnBS,QAAQ,EAAGA,CAAA,KAAM;MAChB,IAAKZ,QAAQ,EAAG;QACf;MACD;MAEAJ,iBAAiB,CAChBD,SAAS,CAACS,QAAQ,CAAEF,EAAG,CAAC,GACrBP,SAAS,CAACkB,MAAM,CAAIC,MAAM,IAAMZ,EAAE,KAAKY,MAAO,CAAC,GAC/C,CAAE,GAAGnB,SAAS,EAAEO,EAAE,CACtB,CAAC;IACF,CAAG;IAAA,GACED;EAAU,CACf,CAAC;AAEJ","ignoreList":[]}

package/build/components/dataviews-view-config/index.js

@@ -74,6 +74,7 @@ function ViewTypeMenu() {
               case 'list':
               case 'grid':
               case 'table':
+              case 'pickerGrid':
                 const viewWithoutLayout = {
                   ...view
                 };