@wordpress/dataviews 0.2.0

package/build-module/search.js

@@ -0,0 +1,39 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+import { useDebouncedInput } from '@wordpress/compose';
+export default function Search({
+  label,
+  view,
+  onChangeView
+}) {
+  const [search, setSearch, debouncedSearch] = useDebouncedInput(view.search);
+  useEffect(() => {
+    setSearch(view.search);
+  }, [view]);
+  const onChangeViewRef = useRef(onChangeView);
+  useEffect(() => {
+    onChangeViewRef.current = onChangeView;
+  }, [onChangeView]);
+  useEffect(() => {
+    onChangeViewRef.current(currentView => ({
+      ...currentView,
+      page: 1,
+      search: debouncedSearch
+    }));
+  }, [debouncedSearch]);
+  const searchLabel = label || __('Filter list');
+  return createElement(SearchControl, {
+    __nextHasNoMarginBottom: true,
+    onChange: setSearch,
+    value: search,
+    label: searchLabel,
+    placeholder: searchLabel,
+    size: "compact"
+  });
+}
+//# sourceMappingURL=search.js.map

package/build-module/search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","useEffect","useRef","SearchControl","useDebouncedInput","Search","label","view","onChangeView","search","setSearch","debouncedSearch","onChangeViewRef","current","currentView","page","searchLabel","createElement","__nextHasNoMarginBottom","onChange","value","placeholder","size"],"sources":["@wordpress/dataviews/src/search.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\nexport default function Search( { label, view, onChangeView } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search );\n\t}, [ view ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t}, [ onChangeView ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( ( currentView ) => ( {\n\t\t\t...currentView,\n\t\t\tpage: 1,\n\t\t\tsearch: debouncedSearch,\n\t\t} ) );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Filter list' );\n\treturn (\n\t\t<SearchControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,iBAAiB,QAAQ,oBAAoB;AAEtD,eAAe,SAASC,MAAMA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EAC/D,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGP,iBAAiB,CAC/DG,IAAI,CAACE,MACN,CAAC;EACDR,SAAS,CAAE,MAAM;IAChBS,SAAS,CAAEH,IAAI,CAACE,MAAO,CAAC;EACzB,CAAC,EAAE,CAAEF,IAAI,CAAG,CAAC;EACb,MAAMK,eAAe,GAAGV,MAAM,CAAEM,YAAa,CAAC;EAC9CP,SAAS,CAAE,MAAM;IAChBW,eAAe,CAACC,OAAO,GAAGL,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrBP,SAAS,CAAE,MAAM;IAChBW,eAAe,CAACC,OAAO,CAAIC,WAAW,KAAQ;MAC7C,GAAGA,WAAW;MACdC,IAAI,EAAE,CAAC;MACPN,MAAM,EAAEE;IACT,CAAC,CAAG,CAAC;EACN,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMK,WAAW,GAAGV,KAAK,IAAIN,EAAE,CAAE,aAAc,CAAC;EAChD,OACCiB,aAAA,CAACd,aAAa;IACbe,uBAAuB;IACvBC,QAAQ,EAAGT,SAAW;IACtBU,KAAK,EAAGX,MAAQ;IAChBH,KAAK,EAAGU,WAAa;IACrBK,WAAW,EAAGL,WAAa;IAC3BM,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

package/build-module/view-actions.js

@@ -0,0 +1,216 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Button, Icon, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
+} = unlock(componentsPrivateApis);
+function ViewTypeMenu({
+  view,
+  onChangeView,
+  supportedLayouts
+}) {
+  let _availableViews = VIEW_LAYOUTS;
+  if (supportedLayouts) {
+    _availableViews = _availableViews.filter(_view => supportedLayouts.includes(_view.type));
+  }
+  if (_availableViews.length === 1) {
+    return null;
+  }
+  const activeView = _availableViews.find(v => view.type === v.type);
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
+      suffix: createElement(Fragment, null, activeView.label, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Layout'))
+  }, _availableViews.map(availableView => {
+    return createElement(DropdownMenuItem, {
+      key: availableView.type,
+      role: "menuitemradio",
+      "aria-checked": availableView.id === view.type,
+      prefix: availableView.type === view.type && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        // We need to handle this on DropDown component probably..
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          type: availableView.type
+        });
+      }
+    }, availableView.label);
+  }));
+}
+const PAGE_SIZE_VALUES = [10, 20, 50, 100];
+function PageSizeMenu({
+  view,
+  onChangeView
+}) {
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
+      suffix: createElement(Fragment, null, view.perPage, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Rows per page'))
+  }, PAGE_SIZE_VALUES.map(size => {
+    return createElement(DropdownMenuItem, {
+      key: size,
+      role: "menuitemradio",
+      "aria-checked": view.perPage === size,
+      prefix: view.perPage === size && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        // We need to handle this on DropDown component probably..
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          perPage: size,
+          page: 1
+        });
+      }
+    }, size);
+  }));
+}
+function FieldsVisibilityMenu({
+  view,
+  onChangeView,
+  fields
+}) {
+  const hidableFields = fields.filter(field => field.enableHiding !== false && field.id !== view.layout.mediaField);
+  if (!hidableFields?.length) {
+    return null;
+  }
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
+      suffix: createElement(Icon, {
+        icon: chevronRightSmall
+      })
+    }, __('Fields'))
+  }, hidableFields?.map(field => {
+    return createElement(DropdownMenuItem, {
+      key: field.id,
+      role: "menuitemcheckbox",
+      prefix: !view.hiddenFields?.includes(field.id) && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          hiddenFields: view.hiddenFields?.includes(field.id) ? view.hiddenFields.filter(id => id !== field.id) : [...(view.hiddenFields || []), field.id]
+        });
+      }
+    }, field.header);
+  }));
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+  asc: {
+    icon: arrowUp,
+    label: __('Sort ascending')
+  },
+  desc: {
+    icon: arrowDown,
+    label: __('Sort descending')
+  }
+};
+function SortMenu({
+  fields,
+  view,
+  onChangeView
+}) {
+  const sortableFields = fields.filter(field => field.enableSorting !== false);
+  if (!sortableFields?.length) {
+    return null;
+  }
+  const currentSortedField = fields.find(field => field.id === view.sort?.field);
+  return createElement(DropdownSubMenu, {
+    trigger: createElement(DropdownSubMenuTrigger, {
+      suffix: createElement(Fragment, null, currentSortedField?.header, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Sort by'))
+  }, sortableFields?.map(field => {
+    const sortedDirection = view.sort?.direction;
+    return createElement(DropdownSubMenu, {
+      key: field.id,
+      trigger: createElement(DropdownSubMenuTrigger, {
+        suffix: createElement(Icon, {
+          icon: chevronRightSmall
+        })
+      }, field.header),
+      side: "left"
+    }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
+      return createElement(DropdownMenuItem, {
+        key: direction,
+        role: "menuitemradio",
+        "aria-checked": isActive,
+        prefix: createElement(Icon, {
+          icon: info.icon
+        }),
+        suffix: isActive && createElement(Icon, {
+          icon: check
+        }),
+        onSelect: event => {
+          event.preventDefault();
+          onChangeView({
+            ...view,
+            sort: {
+              field: field.id,
+              direction
+            }
+          });
+        }
+      }, info.label);
+    }));
+  }));
+}
+export default function ViewActions({
+  fields,
+  view,
+  onChangeView,
+  supportedLayouts
+}) {
+  return createElement(DropdownMenu, {
+    trigger: createElement(Button, {
+      variant: "tertiary",
+      size: "compact",
+      icon: VIEW_LAYOUTS.find(v => v.type === view.type)?.icon || VIEW_LAYOUTS.find(v => v.type === LAYOUT_TABLE).icon,
+      label: __('View options')
+    })
+  }, createElement(DropdownMenuGroup, null, createElement(ViewTypeMenu, {
+    view: view,
+    onChangeView: onChangeView,
+    supportedLayouts: supportedLayouts
+  }), createElement(SortMenu, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
+  }), createElement(FieldsVisibilityMenu, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
+  }), createElement(PageSizeMenu, {
+    view: view,
+    onChangeView: onChangeView
+  })));
+}
+//# sourceMappingURL=view-actions.js.map

package/build-module/view-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Icon","privateApis","componentsPrivateApis","chevronRightSmall","check","arrowUp","arrowDown","__","unlock","VIEW_LAYOUTS","LAYOUT_TABLE","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","ViewTypeMenu","view","onChangeView","supportedLayouts","_availableViews","filter","_view","includes","type","length","activeView","find","v","createElement","trigger","suffix","Fragment","label","icon","map","availableView","key","role","id","prefix","onSelect","event","preventDefault","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","field","enableHiding","layout","mediaField","hiddenFields","header","sortingItemsInfo","asc","desc","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","side","Object","entries","info","isActive","ViewActions","variant"],"sources":["@wordpress/dataviews/src/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n} = unlock( componentsPrivateApis );\n\nfunction ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {\n\tlet _availableViews = VIEW_LAYOUTS;\n\tif ( supportedLayouts ) {\n\t\t_availableViews = _availableViews.filter( ( _view ) =>\n\t\t\tsupportedLayouts.includes( _view.type )\n\t\t);\n\t}\n\tif ( _availableViews.length === 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = _availableViews.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ activeView.label }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ _availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ availableView.type }\n\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\taria-checked={ availableView.id === view.type }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tavailableView.type === view.type && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\ttype: availableView.type,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ view.perPage }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\taria-checked={ view.perPage === size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tview.perPage === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, perPage: size, page: 1 } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) =>\n\t\t\tfield.enableHiding !== false && field.id !== view.layout.mediaField\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t! view.hiddenFields?.includes( field.id ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.hiddenFields || [] ),\n\t\t\t\t\t\t\t\t\t\t\tfield.id,\n\t\t\t\t\t\t\t\t\t  ],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownSubMenu\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\tcurrentSortedField &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\taria-checked={ isActive }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tisActive && <Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\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>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenu>\n\t);\n}\n\nexport default function ViewActions( {\n\tfields,\n\tview,\n\tonChangeView,\n\tsupportedLayouts,\n} ) {\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={\n\t\t\t\t\t\tVIEW_LAYOUTS.find( ( v ) => v.type === view.type )\n\t\t\t\t\t\t\t?.icon ||\n\t\t\t\t\t\tVIEW_LAYOUTS.find( ( v ) => v.type === LAYOUT_TABLE )\n\t\t\t\t\t\t\t.icon\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'View options' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t<ViewTypeMenu\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t/>\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroup>\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

package/build-module/view-grid.js

@@ -0,0 +1,72 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from './item-actions';
+export default function ViewGrid({
+  data,
+  fields,
+  view,
+  actions,
+  getItemId,
+  deferredRendering
+}) {
+  const mediaField = fields.find(field => field.id === view.layout.mediaField);
+  const primaryField = fields.find(field => field.id === view.layout.primaryField);
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
+  const shownData = useAsyncList(data, {
+    step: 3
+  });
+  const usedData = deferredRendering ? shownData : data;
+  return createElement(Grid, {
+    gap: 8,
+    columns: 2,
+    alignment: "top",
+    className: "dataviews-grid-view"
+  }, usedData.map((item, index) => createElement(VStack, {
+    spacing: 3,
+    key: getItemId?.(item) || index,
+    className: "dataviews-view-grid__card"
+  }, createElement("div", {
+    className: "dataviews-view-grid__media"
+  }, mediaField?.render({
+    item
+  })), createElement(HStack, {
+    className: "dataviews-view-grid__primary-field",
+    justify: "space-between"
+  }, createElement(FlexBlock, null, primaryField?.render({
+    item
+  })), createElement(ItemActions, {
+    item: item,
+    actions: actions,
+    isCompact: true
+  })), createElement(VStack, {
+    className: "dataviews-view-grid__fields",
+    spacing: 3
+  }, visibleFields.map(field => {
+    const renderedValue = field.render({
+      item
+    });
+    if (!renderedValue) {
+      return null;
+    }
+    return createElement(VStack, {
+      className: "dataviews-view-grid__field",
+      key: field.id,
+      spacing: 1
+    }, createElement("div", {
+      className: "dataviews-view-grid__field-header"
+    }, field.header), createElement("div", {
+      className: "dataviews-view-grid__field-value"
+    }, field.render({
+      item
+    })));
+  })))));
+}
+//# sourceMappingURL=view-grid.js.map

package/build-module/view-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlexBlock","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","useAsyncList","ItemActions","ViewGrid","data","fields","view","actions","getItemId","deferredRendering","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","shownData","step","usedData","createElement","gap","columns","alignment","className","map","item","index","spacing","key","render","justify","isCompact","renderedValue","header"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tgetItemId,\n\tdeferredRendering,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\treturn (\n\t\t<Grid\n\t\t\tgap={ 8 }\n\t\t\tcolumns={ 2 }\n\t\t\talignment=\"top\"\n\t\t\tclassName=\"dataviews-grid-view\"\n\t\t>\n\t\t\t{ usedData.map( ( item, index ) => (\n\t\t\t\t<VStack\n\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\tkey={ getItemId?.( item ) || index }\n\t\t\t\t\tclassName=\"dataviews-view-grid__card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__primary-field\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-header\">\n\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-grid__field-value\">\n\t\t\t\t\t\t\t\t\t\t{ field.render( { item } ) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":"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"}

package/build-module/view-list.js

@@ -0,0 +1,75 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useAsyncList } from '@wordpress/compose';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+export default function ViewList({
+  view,
+  fields,
+  data,
+  getItemId,
+  onSelectionChange,
+  selection,
+  deferredRendering
+}) {
+  const shownData = useAsyncList(data, {
+    step: 3
+  });
+  const usedData = deferredRendering ? shownData : data;
+  const mediaField = fields.find(field => field.id === view.layout.mediaField);
+  const primaryField = fields.find(field => field.id === view.layout.primaryField);
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.primaryField, view.layout.mediaField].includes(field.id));
+  const onEnter = item => event => {
+    const {
+      keyCode
+    } = event;
+    if ([ENTER, SPACE].includes(keyCode)) {
+      onSelectionChange([item]);
+    }
+  };
+  return createElement("ul", {
+    className: "dataviews-list-view"
+  }, usedData.map((item, index) => {
+    return createElement("li", {
+      key: getItemId?.(item) || index
+    }, createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": selection.includes(item.id),
+      onKeyDown: onEnter(item),
+      className: classNames('dataviews-list-view__item', {
+        'dataviews-list-view__item-selected': selection.includes(item.id)
+      }),
+      onClick: () => onSelectionChange([item])
+    }, createElement(HStack, {
+      spacing: 3
+    }, createElement("div", {
+      className: "dataviews-list-view__media-wrapper"
+    }, mediaField?.render({
+      item
+    }) || createElement("div", {
+      className: "dataviews-list-view__media-placeholder"
+    })), createElement(HStack, null, createElement(VStack, {
+      spacing: 1
+    }, primaryField?.render({
+      item
+    }), createElement("div", {
+      className: "dataviews-list-view__fields"
+    }, visibleFields.map(field => {
+      return createElement("span", {
+        key: field.id,
+        className: "dataviews-list-view__field"
+      }, field.render({
+        item
+      }));
+    })))))));
+  }));
+}
+//# sourceMappingURL=view-list.js.map

package/build-module/view-list.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","ENTER","SPACE","ViewList","view","fields","data","getItemId","onSelectionChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","createElement","className","map","index","key","role","tabIndex","onKeyDown","onClick","spacing","render"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tgetItemId,\n\tonSelectionChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ul className=\"dataviews-list-view\">\n\t\t\t{ usedData.map( ( item, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li key={ getItemId?.( item ) || index }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\t\t\t'dataviews-list-view__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'dataviews-list-view__item-selected':\n\t\t\t\t\t\t\t\t\t\tselection.includes( item.id ),\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-wrapper\">\n\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-list-view__field\"\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\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\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</span>\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</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}