@wordpress/dataviews 8.0.0 → 8.0.2-next.836ecdcae.0

package/build-module/dataviews-layouts/picker-grid/index.js

@@ -0,0 +1,348 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, Spinner, Flex, FlexItem, privateApis as componentsPrivateApis, Composite } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsContext from '../../components/dataviews-context';
+import { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';
+import { GridItems } from '../utils/grid-items';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  Badge
+} = unlock(componentsPrivateApis);
+function GridItem({
+  view,
+  multiselect,
+  selection,
+  onChangeSelection,
+  getItemId,
+  item,
+  mediaField,
+  titleField,
+  descriptionField,
+  regularFields,
+  badgeFields,
+  config,
+  posinset,
+  setsize
+}) {
+  const {
+    showTitle = true,
+    showMedia = true,
+    showDescription = true
+  } = view;
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  const renderedMediaField = mediaField?.render ? /*#__PURE__*/_jsx(mediaField.render, {
+    item: item,
+    field: mediaField,
+    config: config
+  }) : null;
+  const renderedTitleField = showTitle && titleField?.render ? /*#__PURE__*/_jsx(titleField.render, {
+    item: item,
+    field: titleField
+  }) : null;
+  return /*#__PURE__*/_jsxs(Composite.Item, {
+    render: ({
+      children,
+      ...props
+    }) => /*#__PURE__*/_jsx(VStack, {
+      spacing: 0,
+      children: children,
+      ...props
+    }),
+    role: "option",
+    "aria-posinset": posinset,
+    "aria-setsize": setsize,
+    className: clsx('dataviews-view-picker-grid__card', {
+      'is-selected': isSelected
+    }),
+    "aria-selected": isSelected,
+    onClick: () => {
+      if (isSelected) {
+        onChangeSelection(selection.filter(itemId => id !== itemId));
+      } else {
+        const newSelection = multiselect ? [...selection, id] : [id];
+        onChangeSelection(newSelection);
+      }
+    },
+    children: [showMedia && renderedMediaField && /*#__PURE__*/_jsx("div", {
+      className: "dataviews-view-picker-grid__media",
+      children: renderedMediaField
+    }), showMedia && renderedMediaField && /*#__PURE__*/_jsx(DataViewsSelectionCheckbox, {
+      item: item,
+      selection: selection,
+      onChangeSelection: onChangeSelection,
+      getItemId: getItemId,
+      titleField: titleField,
+      disabled: false,
+      "aria-hidden": true,
+      tabIndex: -1
+    }), /*#__PURE__*/_jsx(HStack, {
+      justify: "space-between",
+      className: "dataviews-view-picker-grid__title-actions",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "dataviews-view-picker-grid__title-field dataviews-title-field",
+        children: renderedTitleField
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      spacing: 1,
+      children: [showDescription && descriptionField?.render && /*#__PURE__*/_jsx(descriptionField.render, {
+        item: item,
+        field: descriptionField
+      }), !!badgeFields?.length && /*#__PURE__*/_jsx(HStack, {
+        className: "dataviews-view-picker-grid__badge-fields",
+        spacing: 2,
+        wrap: true,
+        alignment: "top",
+        justify: "flex-start",
+        children: badgeFields.map(field => {
+          return /*#__PURE__*/_jsx(Badge, {
+            className: "dataviews-view-picker-grid__field-value",
+            children: /*#__PURE__*/_jsx(field.render, {
+              item: item,
+              field: field
+            })
+          }, field.id);
+        })
+      }), !!regularFields?.length && /*#__PURE__*/_jsx(VStack, {
+        className: "dataviews-view-picker-grid__fields",
+        spacing: 1,
+        children: regularFields.map(field => {
+          return /*#__PURE__*/_jsx(Flex, {
+            className: "dataviews-view-picker-grid__field",
+            gap: 1,
+            justify: "flex-start",
+            expanded: true,
+            style: {
+              height: 'auto'
+            },
+            direction: "row",
+            children: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(FlexItem, {
+                className: "dataviews-view-picker-grid__field-name",
+                children: field.header
+              }), /*#__PURE__*/_jsx(FlexItem, {
+                className: "dataviews-view-picker-grid__field-value",
+                style: {
+                  maxHeight: 'none'
+                },
+                children: /*#__PURE__*/_jsx(field.render, {
+                  item: item,
+                  field: field
+                })
+              })]
+            })
+          }, field.id);
+        })
+      })]
+    })]
+  }, id);
+}
+function GridGroup({
+  groupName,
+  groupField,
+  children
+}) {
+  const headerId = useInstanceId(GridGroup, 'dataviews-view-picker-grid-group__header');
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 2,
+    role: "group",
+    "aria-labelledby": headerId,
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: "dataviews-view-picker-grid-group__header",
+      id: headerId,
+      children: sprintf(
+      // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+      __('%1$s: %2$s'), groupField.label, groupName)
+    }), children]
+  }, groupName);
+}
+function ViewPickerGrid({
+  actions,
+  data,
+  fields,
+  getItemId,
+  isLoading,
+  onChangeSelection,
+  selection,
+  view,
+  className,
+  empty
+}) {
+  var _view$fields, _view$page, _view$perPage;
+  const {
+    resizeObserverRef,
+    paginationInfo,
+    itemListLabel
+  } = useContext(DataViewsContext);
+  const titleField = fields.find(field => field.id === view?.titleField);
+  const mediaField = fields.find(field => field.id === view?.mediaField);
+  const descriptionField = fields.find(field => field.id === view?.descriptionField);
+  const otherFields = (_view$fields = view.fields) !== null && _view$fields !== void 0 ? _view$fields : [];
+  const {
+    regularFields,
+    badgeFields
+  } = otherFields.reduce((accumulator, fieldId) => {
+    const field = fields.find(f => f.id === fieldId);
+    if (!field) {
+      return accumulator;
+    }
+    // If the field is a badge field, add it to the badgeFields array
+    // otherwise add it to the rest visibleFields array.
+    const key = view.layout?.badgeFields?.includes(fieldId) ? 'badgeFields' : 'regularFields';
+    accumulator[key].push(field);
+    return accumulator;
+  }, {
+    regularFields: [],
+    badgeFields: []
+  });
+  const hasData = !!data?.length;
+  const usedPreviewSize = view.layout?.previewSize;
+  const isMultiselect = useIsMultiselectPicker(actions);
+
+  /*
+   * This is the maximum width that an image can achieve in the grid. The reasoning is:
+   * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).
+   * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.
+   * So each image will never grow past 2*430px plus a little more to account for the gaps.
+   */
+  const size = '900px';
+  const groupField = view.groupByField ? fields.find(f => f.id === view.groupByField) : null;
+
+  // Group data by groupByField if specified
+  const dataByGroup = groupField ? data.reduce((groups, item) => {
+    const groupName = groupField.getValue({
+      item
+    });
+    if (!groups.has(groupName)) {
+      groups.set(groupName, []);
+    }
+    groups.get(groupName)?.push(item);
+    return groups;
+  }, new Map()) : null;
+  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
+  const currentPage = (_view$page = view?.page) !== null && _view$page !== void 0 ? _view$page : 1;
+  const perPage = (_view$perPage = view?.perPage) !== null && _view$perPage !== void 0 ? _view$perPage : 0;
+  const setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [
+    // Render multiple groups.
+    hasData && groupField && dataByGroup && /*#__PURE__*/_jsx(Composite, {
+      virtualFocus: true,
+      orientation: "horizontal",
+      role: "listbox",
+      "aria-multiselectable": isMultiselect,
+      className: clsx('dataviews-view-picker-grid', className),
+      "aria-label": itemListLabel,
+      render: ({
+        children,
+        ...props
+      }) => /*#__PURE__*/_jsx(VStack, {
+        spacing: 4,
+        children: children,
+        ...props
+      }),
+      children: Array.from(dataByGroup.entries()).map(([groupName, groupItems]) => /*#__PURE__*/_jsx(GridGroup, {
+        groupName: groupName,
+        groupField: groupField,
+        children: /*#__PURE__*/_jsx(GridItems, {
+          previewSize: usedPreviewSize,
+          style: {
+            gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax(${usedPreviewSize}px, 1fr))`
+          },
+          "aria-busy": isLoading,
+          ref: resizeObserverRef,
+          children: groupItems.map(item => {
+            const posInSet = (currentPage - 1) * perPage + data.indexOf(item) + 1;
+            return /*#__PURE__*/_jsx(GridItem, {
+              view: view,
+              multiselect: isMultiselect,
+              selection: selection,
+              onChangeSelection: onChangeSelection,
+              getItemId: getItemId,
+              item: item,
+              mediaField: mediaField,
+              titleField: titleField,
+              descriptionField: descriptionField,
+              regularFields: regularFields,
+              badgeFields: badgeFields,
+              config: {
+                sizes: size
+              },
+              posinset: posInSet,
+              setsize: setSize
+            }, getItemId(item));
+          })
+        })
+      }, groupName))
+    }),
+    // Render a single grid with all data.
+    hasData && !dataByGroup && /*#__PURE__*/_jsx(Composite, {
+      render: /*#__PURE__*/_jsx(GridItems, {
+        className: clsx('dataviews-view-picker-grid', className),
+        previewSize: usedPreviewSize,
+        "aria-busy": isLoading,
+        ref: resizeObserverRef
+      }),
+      virtualFocus: true,
+      orientation: "horizontal",
+      role: "listbox",
+      "aria-multiselectable": isMultiselect,
+      "aria-label": itemListLabel,
+      children: data.map((item, index) => {
+        let posinset = isInfiniteScroll ? index + 1 : undefined;
+        if (!isInfiniteScroll) {
+          // When infinite scroll isn't active, take pagination into account
+          // when calculating the posinset.
+          posinset = (currentPage - 1) * perPage + index + 1;
+        }
+        return /*#__PURE__*/_jsx(GridItem, {
+          view: view,
+          multiselect: isMultiselect,
+          selection: selection,
+          onChangeSelection: onChangeSelection,
+          getItemId: getItemId,
+          item: item,
+          mediaField: mediaField,
+          titleField: titleField,
+          descriptionField: descriptionField,
+          regularFields: regularFields,
+          badgeFields: badgeFields,
+          config: {
+            sizes: size
+          },
+          posinset: posinset,
+          setsize: setSize
+        }, getItemId(item));
+      })
+    }),
+    // Render empty state.
+    !hasData && /*#__PURE__*/_jsx("div", {
+      className: clsx({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !isLoading
+      }),
+      children: /*#__PURE__*/_jsx("p", {
+        children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : empty
+      })
+    }), hasData && isLoading && /*#__PURE__*/_jsx("p", {
+      className: "dataviews-loading-more",
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    })]
+  });
+}
+export default ViewPickerGrid;
+//# sourceMappingURL=index.js.map

package/build-module/dataviews-layouts/picker-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clsx","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","privateApis","componentsPrivateApis","Composite","__","sprintf","useInstanceId","useContext","unlock","DataViewsSelectionCheckbox","DataViewsContext","useIsMultiselectPicker","GridItems","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Badge","GridItem","view","multiselect","selection","onChangeSelection","getItemId","item","mediaField","titleField","descriptionField","regularFields","badgeFields","config","posinset","setsize","showTitle","showMedia","showDescription","id","isSelected","includes","renderedMediaField","render","field","renderedTitleField","Item","children","props","spacing","role","className","onClick","filter","itemId","newSelection","disabled","tabIndex","justify","length","wrap","alignment","map","gap","expanded","style","height","direction","header","maxHeight","GridGroup","groupName","groupField","headerId","label","ViewPickerGrid","actions","data","fields","isLoading","empty","_view$fields","_view$page","_view$perPage","resizeObserverRef","paginationInfo","itemListLabel","find","otherFields","reduce","accumulator","fieldId","f","key","layout","push","hasData","usedPreviewSize","previewSize","isMultiselect","size","groupByField","dataByGroup","groups","getValue","has","set","get","Map","isInfiniteScroll","infiniteScrollEnabled","currentPage","page","perPage","setSize","totalItems","undefined","virtualFocus","orientation","Array","from","entries","groupItems","gridTemplateColumns","ref","posInSet","indexOf","sizes","index"],"sources":["@wordpress/dataviews/src/dataviews-layouts/picker-grid/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n\tComposite,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport DataViewsContext from '../../components/dataviews-context';\nimport { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';\nimport type {\n\tNormalizedField,\n\tViewPickerGrid as ViewPickerGridType,\n\tViewPickerGridProps,\n} from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\n\ninterface GridItemProps< Item > {\n\tview: ViewPickerGridType;\n\tmultiselect?: boolean;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nfunction GridItem< Item >( {\n\tview,\n\tmultiselect,\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\tconfig,\n\tposinset,\n\tsetsize,\n}: GridItemProps< Item > ) {\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : null;\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\treturn (\n\t\t<Composite.Item\n\t\t\tkey={ id }\n\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t<VStack spacing={ 0 } children={ children } { ...props } />\n\t\t\t) }\n\t\t\trole=\"option\"\n\t\t\taria-posinset={ posinset }\n\t\t\taria-setsize={ setsize }\n\t\t\tclassName={ clsx( 'dataviews-view-picker-grid__card', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\taria-selected={ isSelected }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tconst newSelection = multiselect\n\t\t\t\t\t\t? [ ...selection, id ]\n\t\t\t\t\t\t: [ id ];\n\t\t\t\t\tonChangeSelection( newSelection );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<div className=\"dataviews-view-picker-grid__media\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showMedia && renderedMediaField && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ false }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-picker-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<div className=\"dataviews-view-picker-grid__title-field dataviews-title-field\">\n\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t</div>\n\t\t\t</HStack>\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__badge-fields\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\twrap\n\t\t\t\t\t\talignment=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__fields\"\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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<FlexItem className=\"dataviews-view-picker-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\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\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\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) }\n\t\t\t</VStack>\n\t\t</Composite.Item>\n\t);\n}\n\nfunction GridGroup< Item >( {\n\tgroupName,\n\tgroupField,\n\tchildren,\n}: {\n\tgroupName: string;\n\tgroupField: NormalizedField< Item >;\n\tchildren: ReactNode;\n} ) {\n\tconst headerId = useInstanceId(\n\t\tGridGroup,\n\t\t'dataviews-view-picker-grid-group__header'\n\t);\n\treturn (\n\t\t<VStack\n\t\t\tkey={ groupName }\n\t\t\tspacing={ 2 }\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headerId }\n\t\t>\n\t\t\t<h3\n\t\t\t\tclassName=\"dataviews-view-picker-grid-group__header\"\n\t\t\t\tid={ headerId }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\tgroupField.label,\n\t\t\t\t\tgroupName\n\t\t\t\t) }\n\t\t\t</h3>\n\t\t\t{ children }\n\t\t</VStack>\n\t);\n}\n\nfunction ViewPickerGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewPickerGridProps< Item > ) {\n\tconst { resizeObserverRef, paginationInfo, itemListLabel } =\n\t\tuseContext( DataViewsContext );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\tconst usedPreviewSize = view.layout?.previewSize;\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( f ) => f.id === view.groupByField )\n\t\t: null;\n\n\t// Group data by groupByField if specified\n\tconst dataByGroup = groupField\n\t\t? data.reduce( ( groups: Map< string, typeof data >, item ) => {\n\t\t\t\tconst groupName = groupField.getValue( { item } );\n\t\t\t\tif ( ! groups.has( groupName ) ) {\n\t\t\t\t\tgroups.set( groupName, [] );\n\t\t\t\t}\n\t\t\t\tgroups.get( groupName )?.push( item );\n\t\t\t\treturn groups;\n\t\t  }, new Map< string, typeof data >() )\n\t\t: null;\n\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\n\tconst currentPage = view?.page ?? 1;\n\tconst perPage = view?.perPage ?? 0;\n\tconst setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render multiple groups.\n\t\t\t\thasData && groupField && dataByGroup && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t) }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t\trender={ ( { children, ...props } ) => (\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\t\tchildren={ children }\n\t\t\t\t\t\t\t\t{ ...props }\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{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t\t<GridGroup\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns:\n\t\t\t\t\t\t\t\t\t\t\t\tusedPreviewSize &&\n\t\t\t\t\t\t\t\t\t\t\t\t`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\t\t\tconst posInSet =\n\t\t\t\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage +\n\t\t\t\t\t\t\t\t\t\t\t\tdata.indexOf( item ) +\n\t\t\t\t\t\t\t\t\t\t\t\t1;\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmultiselect={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMultiselect\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\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\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\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\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\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\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\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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\tposinset={ posInSet }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetsize={ setSize }\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</GridItems>\n\t\t\t\t\t\t\t\t</GridGroup>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t{\n\t\t\t\t// Render a single grid with all data.\n\t\t\t\thasData && ! dataByGroup && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-picker-grid',\n\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\tresizeObserverRef as React.RefObject< HTMLDivElement >\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\tvirtualFocus\n\t\t\t\t\t\torientation=\"horizontal\"\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\t\t\taria-label={ itemListLabel }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\t\t\tlet posinset = isInfiniteScroll\n\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif ( ! isInfiniteScroll ) {\n\t\t\t\t\t\t\t\t// When infinite scroll isn't active, take pagination into account\n\t\t\t\t\t\t\t\t// when calculating the posinset.\n\t\t\t\t\t\t\t\tposinset =\n\t\t\t\t\t\t\t\t\t( currentPage - 1 ) * perPage + index + 1;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tmultiselect={ isMultiselect }\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\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tposinset={ posinset }\n\t\t\t\t\t\t\t\t\tsetsize={ setSize }\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</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render empty state.\n\t\t\t\t! hasData && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>{ isLoading ? <Spinner /> : empty }</p>\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{ hasData && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ViewPickerGrid;\n"],"mappings":"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","ignoreList":[]}

package/build-module/dataviews-layouts/utils/grid-items.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridItems = forwardRef(({
+  className,
+  previewSize,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: clsx('dataviews-view-grid-items', className),
+    style: {
+      gridTemplateColumns: previewSize && `repeat(auto-fill, minmax(${previewSize}px, 1fr))`
+    },
+    ...props
+  });
+});
+//# sourceMappingURL=grid-items.js.map

package/build-module/dataviews-layouts/utils/grid-items.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","clsx","jsx","_jsx","GridItems","className","previewSize","props","ref","style","gridTemplateColumns"],"sources":["@wordpress/dataviews/src/dataviews-layouts/utils/grid-items.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\nexport const GridItems = forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tclassName?: string;\n\t\tpreviewSize: number | undefined;\n\t} & ComponentPropsWithoutRef< 'div' >\n>( ( { className, previewSize, ...props }, ref ) => {\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( 'dataviews-view-grid-items', className ) }\n\t\t\tstyle={ {\n\t\t\t\tgridTemplateColumns:\n\t\t\t\t\tpreviewSize &&\n\t\t\t\t\t`repeat(auto-fill, minmax(${ previewSize }px, 1fr))`,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n} );\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,IAAI,MAAM,MAAM;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExB,OAAO,MAAMC,SAAS,GAAGJ,UAAU,CAMhC,CAAE;EAAEK,SAAS;EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACnD,oBACCL,IAAA;IACCK,GAAG,EAAGA,GAAK;IACXH,SAAS,EAAGJ,IAAI,CAAE,2BAA2B,EAAEI,SAAU,CAAG;IAC5DI,KAAK,EAAG;MACPC,mBAAmB,EAClBJ,WAAW,IACX,4BAA6BA,WAAW;IAC1C,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ,CAAE,CAAC","ignoreList":[]}

package/build-module/dataviews-layouts/utils/preview-size-picker.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import { jsx as _jsx } from "react/jsx-runtime";
+const imageSizes = [{
+  value: 120,
+  breakpoint: 1
+}, {
+  value: 170,
+  breakpoint: 1
+}, {
+  value: 230,
+  breakpoint: 1
+}, {
+  value: 290,
+  breakpoint: 1112 // at minimum image width, 4 images display at this container size
+}, {
+  value: 350,
+  breakpoint: 1636 // at minimum image width, 6 images display at this container size
+}, {
+  value: 430,
+  breakpoint: 588 // at minimum image width, 2 images display at this container size
+}];
+export default function PreviewSizePicker() {
+  var _view$layout$previewS, _breakValues$map$filt;
+  const context = useContext(DataViewsContext);
+  const view = context.view;
+  const breakValues = imageSizes.filter(size => {
+    return context.containerWidth >= size.breakpoint;
+  });
+  const layoutPreviewSize = (_view$layout$previewS = view.layout?.previewSize) !== null && _view$layout$previewS !== void 0 ? _view$layout$previewS : 230; // Default to the third smallest size if no preview size is set.
+  // If the container has resized and the set preview size is no longer available,
+  // we reset it to the next smallest size, or the smallest available size.
+  const previewSizeToUse = (_breakValues$map$filt = breakValues.map((size, index) => ({
+    ...size,
+    index
+  })).filter(size => size.value <= layoutPreviewSize).sort((a, b) => b.value - a.value)[0]?.index) !== null && _breakValues$map$filt !== void 0 ? _breakValues$map$filt : 0;
+  const marks = breakValues.map((size, index) => {
+    return {
+      value: index
+    };
+  });
+  return /*#__PURE__*/_jsx(RangeControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    showTooltip: false,
+    label: __('Preview size'),
+    value: previewSizeToUse,
+    min: 0,
+    max: breakValues.length - 1,
+    withInputField: false,
+    onChange: (value = 0) => {
+      context.onChangeView({
+        ...view,
+        layout: {
+          ...view.layout,
+          previewSize: breakValues[value].value
+        }
+      });
+    },
+    step: 1,
+    marks: marks
+  });
+}
+//# sourceMappingURL=preview-size-picker.js.map

package/build-module/dataviews-layouts/utils/preview-size-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RangeControl","__","useContext","DataViewsContext","jsx","_jsx","imageSizes","value","breakpoint","PreviewSizePicker","_view$layout$previewS","_breakValues$map$filt","context","view","breakValues","filter","size","containerWidth","layoutPreviewSize","layout","previewSize","previewSizeToUse","map","index","sort","a","b","marks","__nextHasNoMarginBottom","__next40pxDefaultSize","showTooltip","label","min","max","length","withInputField","onChange","onChangeView","step"],"sources":["@wordpress/dataviews/src/dataviews-layouts/utils/preview-size-picker.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../components/dataviews-context';\nimport type { ViewGrid } from '../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,uBAAuB;AACpD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGlE,MAAMC,UAAU,GAAG,CAClB;EACCC,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE;AACb,CAAC,EACD;EACCD,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE;AACb,CAAC,EACD;EACCD,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE;AACb,CAAC,EACD;EACCD,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE,IAAI,CAAE;AACnB,CAAC,EACD;EACCD,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE,IAAI,CAAE;AACnB,CAAC,EACD;EACCD,KAAK,EAAE,GAAG;EACVC,UAAU,EAAE,GAAG,CAAE;AAClB,CAAC,CACD;AAED,eAAe,SAASC,iBAAiBA,CAAA,EAAG;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAC3C,MAAMC,OAAO,GAAGV,UAAU,CAAEC,gBAAiB,CAAC;EAC9C,MAAMU,IAAI,GAAGD,OAAO,CAACC,IAAgB;EAErC,MAAMC,WAAW,GAAGR,UAAU,CAACS,MAAM,CAAIC,IAAI,IAAM;IAClD,OAAOJ,OAAO,CAACK,cAAc,IAAID,IAAI,CAACR,UAAU;EACjD,CAAE,CAAC;EAEH,MAAMU,iBAAiB,IAAAR,qBAAA,GAAGG,IAAI,CAACM,MAAM,EAAEC,WAAW,cAAAV,qBAAA,cAAAA,qBAAA,GAAI,GAAG,CAAC,CAAC;EAC3D;EACA;EACA,MAAMW,gBAAgB,IAAAV,qBAAA,GACrBG,WAAW,CACTQ,GAAG,CAAE,CAAEN,IAAI,EAAEO,KAAK,MAAQ;IAAE,GAAGP,IAAI;IAAEO;EAAM,CAAC,CAAG,CAAC,CAChDR,MAAM,CAAIC,IAAI,IAAMA,IAAI,CAACT,KAAK,IAAIW,iBAAkB,CAAC,CACrDM,IAAI,CAAE,CAAEC,CAAC,EAAEC,CAAC,KAAMA,CAAC,CAACnB,KAAK,GAAGkB,CAAC,CAAClB,KAAM,CAAC,CAAE,CAAC,CAAE,EAAEgB,KAAK,cAAAZ,qBAAA,cAAAA,qBAAA,GAAI,CAAC;EAEzD,MAAMgB,KAAK,GAAGb,WAAW,CAACQ,GAAG,CAAE,CAAEN,IAAI,EAAEO,KAAK,KAAM;IACjD,OAAO;MACNhB,KAAK,EAAEgB;IACR,CAAC;EACF,CAAE,CAAC;EAEH,oBACClB,IAAA,CAACL,YAAY;IACZ4B,uBAAuB;IACvBC,qBAAqB;IACrBC,WAAW,EAAG,KAAO;IACrBC,KAAK,EAAG9B,EAAE,CAAE,cAAe,CAAG;IAC9BM,KAAK,EAAGc,gBAAkB;IAC1BW,GAAG,EAAG,CAAG;IACTC,GAAG,EAAGnB,WAAW,CAACoB,MAAM,GAAG,CAAG;IAC9BC,cAAc,EAAG,KAAO;IACxBC,QAAQ,EAAGA,CAAE7B,KAAK,GAAG,CAAC,KAAM;MAC3BK,OAAO,CAACyB,YAAY,CAAE;QACrB,GAAGxB,IAAI;QACPM,MAAM,EAAE;UACP,GAAGN,IAAI,CAACM,MAAM;UACdC,WAAW,EAAEN,WAAW,CAAEP,KAAK,CAAE,CAACA;QACnC;MACD,CAAE,CAAC;IACJ,CAAG;IACH+B,IAAI,EAAG,CAAG;IACVX,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}

package/build-module/field-types/index.js

@@ -15,6 +15,7 @@ import { default as date } from './date';
 import { default as boolean } from './boolean';
 import { default as media } from './media';
 import { default as array } from './array';
+import { default as telephone } from './telephone';
 import { renderFromElements } from '../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
@@ -49,6 +50,9 @@ export default function getFieldTypeDefinition(type) {
   if ('array' === type) {
     return array;
   }
+  if ('telephone' === type) {
+    return telephone;
+  }
 
   // This is a fallback for fields that don't provide a type.
   // It can be removed when the field.type is mandatory.

package/build-module/field-types/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","default","email","integer","text","datetime","date","boolean","media","array","renderFromElements","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","getFieldTypeDefinition","type","sort","a","b","direction","localeCompare","isValid","custom","item","field","elements","value","getValue","validValues","map","f","includes","Edit","render","enableSorting","filterBy","defaultOperators","validOperators"],"sources":["@wordpress/dataviews/src/field-types/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataViewRenderFieldProps,\n\tNormalizedField,\n\tFieldType,\n\tFieldTypeDefinition,\n\tSortDirection,\n} from '../types';\nimport { default as email } from './email';\nimport { default as integer } from './integer';\nimport { default as text } from './text';\nimport { default as datetime } from './datetime';\nimport { default as date } from './date';\nimport { default as boolean } from './boolean';\nimport { default as media } from './media';\nimport { default as array } from './array';\nimport { renderFromElements } from '../utils';\nimport { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';\n\n/**\n *\n * @param {FieldType} type The field type definition to get.\n *\n * @return A field type definition.\n */\nexport default function getFieldTypeDefinition< Item >(\n\ttype?: FieldType\n): FieldTypeDefinition< Item > {\n\tif ( 'email' === type ) {\n\t\treturn email;\n\t}\n\n\tif ( 'integer' === type ) {\n\t\treturn integer;\n\t}\n\n\tif ( 'text' === type ) {\n\t\treturn text;\n\t}\n\n\tif ( 'datetime' === type ) {\n\t\treturn datetime;\n\t}\n\n\tif ( 'date' === type ) {\n\t\treturn date;\n\t}\n\n\tif ( 'boolean' === type ) {\n\t\treturn boolean;\n\t}\n\n\tif ( 'media' === type ) {\n\t\treturn media;\n\t}\n\n\tif ( 'array' === type ) {\n\t\treturn array;\n\t}\n\n\t// This is a fallback for fields that don't provide a type.\n\t// It can be removed when the field.type is mandatory.\n\treturn {\n\t\tsort: ( a: any, b: any, direction: SortDirection ) => {\n\t\t\tif ( typeof a === 'number' && typeof b === 'number' ) {\n\t\t\t\treturn direction === 'asc' ? a - b : b - a;\n\t\t\t}\n\n\t\t\treturn direction === 'asc'\n\t\t\t\t? a.localeCompare( b )\n\t\t\t\t: b.localeCompare( a );\n\t\t},\n\t\tisValid: {\n\t\t\tcustom: ( item: any, field: NormalizedField< any > ) => {\n\t\t\t\tif ( field?.elements ) {\n\t\t\t\t\tconst value = field.getValue( { item } );\n\t\t\t\t\tconst validValues = field?.elements?.map(\n\t\t\t\t\t\t( f ) => f.value\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! validValues.includes( value ) ) {\n\t\t\t\t\t\treturn __( 'Value must be one of the elements.' );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t},\n\t\t},\n\t\tEdit: null,\n\t\trender: ( { item, field }: DataViewRenderFieldProps< Item > ) => {\n\t\t\treturn field.elements\n\t\t\t\t? renderFromElements( { item, field } )\n\t\t\t\t: field.getValue( { item } );\n\t\t},\n\t\tenableSorting: true,\n\t\tfilterBy: {\n\t\t\tdefaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],\n\t\t\tvalidOperators: ALL_OPERATORS,\n\t\t},\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAQA,SAASC,OAAO,IAAIC,KAAK,QAAQ,SAAS;AAC1C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,IAAI,QAAQ,QAAQ;AACxC,SAASH,OAAO,IAAII,QAAQ,QAAQ,YAAY;AAChD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW;AAC9C,SAASN,OAAO,IAAIO,KAAK,QAAQ,SAAS;AAC1C,SAASP,OAAO,IAAIQ,KAAK,QAAQ,SAAS;AAC1C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,aAAa,EAAEC,WAAW,EAAEC,eAAe,QAAQ,cAAc;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,sBAAsBA,CAC7CC,IAAgB,EACc;EAC9B,IAAK,OAAO,KAAKA,IAAI,EAAG;IACvB,OAAOb,KAAK;EACb;EAEA,IAAK,SAAS,KAAKa,IAAI,EAAG;IACzB,OAAOZ,OAAO;EACf;EAEA,IAAK,MAAM,KAAKY,IAAI,EAAG;IACtB,OAAOX,IAAI;EACZ;EAEA,IAAK,UAAU,KAAKW,IAAI,EAAG;IAC1B,OAAOV,QAAQ;EAChB;EAEA,IAAK,MAAM,KAAKU,IAAI,EAAG;IACtB,OAAOT,IAAI;EACZ;EAEA,IAAK,SAAS,KAAKS,IAAI,EAAG;IACzB,OAAOR,OAAO;EACf;EAEA,IAAK,OAAO,KAAKQ,IAAI,EAAG;IACvB,OAAOP,KAAK;EACb;EAEA,IAAK,OAAO,KAAKO,IAAI,EAAG;IACvB,OAAON,KAAK;EACb;;EAEA;EACA;EACA,OAAO;IACNO,IAAI,EAAEA,CAAEC,CAAM,EAAEC,CAAM,EAAEC,SAAwB,KAAM;MACrD,IAAK,OAAOF,CAAC,KAAK,QAAQ,IAAI,OAAOC,CAAC,KAAK,QAAQ,EAAG;QACrD,OAAOC,SAAS,KAAK,KAAK,GAAGF,CAAC,GAAGC,CAAC,GAAGA,CAAC,GAAGD,CAAC;MAC3C;MAEA,OAAOE,SAAS,KAAK,KAAK,GACvBF,CAAC,CAACG,aAAa,CAAEF,CAAE,CAAC,GACpBA,CAAC,CAACE,aAAa,CAAEH,CAAE,CAAC;IACxB,CAAC;IACDI,OAAO,EAAE;MACRC,MAAM,EAAEA,CAAEC,IAAS,EAAEC,KAA6B,KAAM;QACvD,IAAKA,KAAK,EAAEC,QAAQ,EAAG;UACtB,MAAMC,KAAK,GAAGF,KAAK,CAACG,QAAQ,CAAE;YAAEJ;UAAK,CAAE,CAAC;UACxC,MAAMK,WAAW,GAAGJ,KAAK,EAAEC,QAAQ,EAAEI,GAAG,CACrCC,CAAC,IAAMA,CAAC,CAACJ,KACZ,CAAC;UACD,IAAK,CAAEE,WAAW,CAACG,QAAQ,CAAEL,KAAM,CAAC,EAAG;YACtC,OAAO1B,EAAE,CAAE,oCAAqC,CAAC;UAClD;QACD;QAEA,OAAO,IAAI;MACZ;IACD,CAAC;IACDgC,IAAI,EAAE,IAAI;IACVC,MAAM,EAAEA,CAAE;MAAEV,IAAI;MAAEC;IAAwC,CAAC,KAAM;MAChE,OAAOA,KAAK,CAACC,QAAQ,GAClBf,kBAAkB,CAAE;QAAEa,IAAI;QAAEC;MAAM,CAAE,CAAC,GACrCA,KAAK,CAACG,QAAQ,CAAE;QAAEJ;MAAK,CAAE,CAAC;IAC9B,CAAC;IACDW,aAAa,EAAE,IAAI;IACnBC,QAAQ,EAAE;MACTC,gBAAgB,EAAE,CAAExB,WAAW,EAAEC,eAAe,CAAE;MAClDwB,cAAc,EAAE1B;IACjB;EACD,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["__","default","email","integer","text","datetime","date","boolean","media","array","telephone","renderFromElements","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","getFieldTypeDefinition","type","sort","a","b","direction","localeCompare","isValid","custom","item","field","elements","value","getValue","validValues","map","f","includes","Edit","render","enableSorting","filterBy","defaultOperators","validOperators"],"sources":["@wordpress/dataviews/src/field-types/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataViewRenderFieldProps,\n\tNormalizedField,\n\tFieldType,\n\tFieldTypeDefinition,\n\tSortDirection,\n} from '../types';\nimport { default as email } from './email';\nimport { default as integer } from './integer';\nimport { default as text } from './text';\nimport { default as datetime } from './datetime';\nimport { default as date } from './date';\nimport { default as boolean } from './boolean';\nimport { default as media } from './media';\nimport { default as array } from './array';\nimport { default as telephone } from './telephone';\nimport { renderFromElements } from '../utils';\nimport { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';\n\n/**\n *\n * @param {FieldType} type The field type definition to get.\n *\n * @return A field type definition.\n */\nexport default function getFieldTypeDefinition< Item >(\n\ttype?: FieldType\n): FieldTypeDefinition< Item > {\n\tif ( 'email' === type ) {\n\t\treturn email;\n\t}\n\n\tif ( 'integer' === type ) {\n\t\treturn integer;\n\t}\n\n\tif ( 'text' === type ) {\n\t\treturn text;\n\t}\n\n\tif ( 'datetime' === type ) {\n\t\treturn datetime;\n\t}\n\n\tif ( 'date' === type ) {\n\t\treturn date;\n\t}\n\n\tif ( 'boolean' === type ) {\n\t\treturn boolean;\n\t}\n\n\tif ( 'media' === type ) {\n\t\treturn media;\n\t}\n\n\tif ( 'array' === type ) {\n\t\treturn array;\n\t}\n\n\tif ( 'telephone' === type ) {\n\t\treturn telephone;\n\t}\n\n\t// This is a fallback for fields that don't provide a type.\n\t// It can be removed when the field.type is mandatory.\n\treturn {\n\t\tsort: ( a: any, b: any, direction: SortDirection ) => {\n\t\t\tif ( typeof a === 'number' && typeof b === 'number' ) {\n\t\t\t\treturn direction === 'asc' ? a - b : b - a;\n\t\t\t}\n\n\t\t\treturn direction === 'asc'\n\t\t\t\t? a.localeCompare( b )\n\t\t\t\t: b.localeCompare( a );\n\t\t},\n\t\tisValid: {\n\t\t\tcustom: ( item: any, field: NormalizedField< any > ) => {\n\t\t\t\tif ( field?.elements ) {\n\t\t\t\t\tconst value = field.getValue( { item } );\n\t\t\t\t\tconst validValues = field?.elements?.map(\n\t\t\t\t\t\t( f ) => f.value\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! validValues.includes( value ) ) {\n\t\t\t\t\t\treturn __( 'Value must be one of the elements.' );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t},\n\t\t},\n\t\tEdit: null,\n\t\trender: ( { item, field }: DataViewRenderFieldProps< Item > ) => {\n\t\t\treturn field.elements\n\t\t\t\t? renderFromElements( { item, field } )\n\t\t\t\t: field.getValue( { item } );\n\t\t},\n\t\tenableSorting: true,\n\t\tfilterBy: {\n\t\t\tdefaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],\n\t\t\tvalidOperators: ALL_OPERATORS,\n\t\t},\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/field-types/telephone.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import { renderFromElements } from '../utils';
+import { OPERATOR_IS, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL, OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_NOT, OPERATOR_CONTAINS, OPERATOR_NOT_CONTAINS, OPERATOR_STARTS_WITH } from '../constants';
+function sort(valueA, valueB, direction) {
+  return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+}
+export default {
+  sort,
+  isValid: {
+    custom: (item, field) => {
+      const value = field.getValue({
+        item
+      });
+      if (field?.elements) {
+        const validValues = field.elements.map(f => f.value);
+        if (!validValues.includes(value)) {
+          return __('Value must be one of the elements.');
+        }
+      }
+      return null;
+    }
+  },
+  Edit: 'telephone',
+  render: ({
+    item,
+    field
+  }) => {
+    return field.elements ? renderFromElements({
+      item,
+      field
+    }) : field.getValue({
+      item
+    });
+  },
+  enableSorting: true,
+  filterBy: {
+    defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE],
+    validOperators: [OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_CONTAINS, OPERATOR_NOT_CONTAINS, OPERATOR_STARTS_WITH,
+    // Multiple selection
+    OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL]
+  }
+};
+//# sourceMappingURL=telephone.js.map

package/build-module/field-types/telephone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","renderFromElements","OPERATOR_IS","OPERATOR_IS_ALL","OPERATOR_IS_NOT_ALL","OPERATOR_IS_ANY","OPERATOR_IS_NONE","OPERATOR_IS_NOT","OPERATOR_CONTAINS","OPERATOR_NOT_CONTAINS","OPERATOR_STARTS_WITH","sort","valueA","valueB","direction","localeCompare","isValid","custom","item","field","value","getValue","elements","validValues","map","f","includes","Edit","render","enableSorting","filterBy","defaultOperators","validOperators"],"sources":["@wordpress/dataviews/src/field-types/telephone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDataViewRenderFieldProps,\n\tSortDirection,\n\tNormalizedField,\n\tFieldTypeDefinition,\n} from '../types';\nimport { renderFromElements } from '../utils';\nimport {\n\tOPERATOR_IS,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_CONTAINS,\n\tOPERATOR_NOT_CONTAINS,\n\tOPERATOR_STARTS_WITH,\n} from '../constants';\n\nfunction sort( valueA: any, valueB: any, direction: SortDirection ) {\n\treturn direction === 'asc'\n\t\t? valueA.localeCompare( valueB )\n\t\t: valueB.localeCompare( valueA );\n}\n\nexport default {\n\tsort,\n\tisValid: {\n\t\tcustom: ( item: any, field: NormalizedField< any > ) => {\n\t\t\tconst value = field.getValue( { item } );\n\t\t\tif ( field?.elements ) {\n\t\t\t\tconst validValues = field.elements.map( ( f ) => f.value );\n\t\t\t\tif ( ! validValues.includes( value ) ) {\n\t\t\t\t\treturn __( 'Value must be one of the elements.' );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn null;\n\t\t},\n\t},\n\tEdit: 'telephone',\n\trender: ( { item, field }: DataViewRenderFieldProps< any > ) => {\n\t\treturn field.elements\n\t\t\t? renderFromElements( { item, field } )\n\t\t\t: field.getValue( { item } );\n\t},\n\tenableSorting: true,\n\tfilterBy: {\n\t\tdefaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],\n\t\tvalidOperators: [\n\t\t\tOPERATOR_IS,\n\t\t\tOPERATOR_IS_NOT,\n\t\t\tOPERATOR_CONTAINS,\n\t\t\tOPERATOR_NOT_CONTAINS,\n\t\t\tOPERATOR_STARTS_WITH,\n\t\t\t// Multiple selection\n\t\t\tOPERATOR_IS_ANY,\n\t\t\tOPERATOR_IS_NONE,\n\t\t\tOPERATOR_IS_ALL,\n\t\t\tOPERATOR_IS_NOT_ALL,\n\t\t],\n\t},\n} satisfies FieldTypeDefinition< any >;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAOA,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SACCC,WAAW,EACXC,eAAe,EACfC,mBAAmB,EACnBC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,EACfC,iBAAiB,EACjBC,qBAAqB,EACrBC,oBAAoB,QACd,cAAc;AAErB,SAASC,IAAIA,CAAEC,MAAW,EAAEC,MAAW,EAAEC,SAAwB,EAAG;EACnE,OAAOA,SAAS,KAAK,KAAK,GACvBF,MAAM,CAACG,aAAa,CAAEF,MAAO,CAAC,GAC9BA,MAAM,CAACE,aAAa,CAAEH,MAAO,CAAC;AAClC;AAEA,eAAe;EACdD,IAAI;EACJK,OAAO,EAAE;IACRC,MAAM,EAAEA,CAAEC,IAAS,EAAEC,KAA6B,KAAM;MACvD,MAAMC,KAAK,GAAGD,KAAK,CAACE,QAAQ,CAAE;QAAEH;MAAK,CAAE,CAAC;MACxC,IAAKC,KAAK,EAAEG,QAAQ,EAAG;QACtB,MAAMC,WAAW,GAAGJ,KAAK,CAACG,QAAQ,CAACE,GAAG,CAAIC,CAAC,IAAMA,CAAC,CAACL,KAAM,CAAC;QAC1D,IAAK,CAAEG,WAAW,CAACG,QAAQ,CAAEN,KAAM,CAAC,EAAG;UACtC,OAAOpB,EAAE,CAAE,oCAAqC,CAAC;QAClD;MACD;MAEA,OAAO,IAAI;IACZ;EACD,CAAC;EACD2B,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAEA,CAAE;IAAEV,IAAI;IAAEC;EAAuC,CAAC,KAAM;IAC/D,OAAOA,KAAK,CAACG,QAAQ,GAClBrB,kBAAkB,CAAE;MAAEiB,IAAI;MAAEC;IAAM,CAAE,CAAC,GACrCA,KAAK,CAACE,QAAQ,CAAE;MAAEH;IAAK,CAAE,CAAC;EAC9B,CAAC;EACDW,aAAa,EAAE,IAAI;EACnBC,QAAQ,EAAE;IACTC,gBAAgB,EAAE,CAAE1B,eAAe,EAAEC,gBAAgB,CAAE;IACvD0B,cAAc,EAAE,CACf9B,WAAW,EACXK,eAAe,EACfC,iBAAiB,EACjBC,qBAAqB,EACrBC,oBAAoB;IACpB;IACAL,eAAe,EACfC,gBAAgB,EAChBH,eAAe,EACfC,mBAAmB;EAErB;AACD,CAAC","ignoreList":[]}