@wordpress/dataviews 1.1.0 → 2.0.0

package/build-module/view-table.js

@@ -1,9 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -19,8 +17,11 @@ import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { sanitizeOperators } from './utils';
-import { SORTING_DIRECTIONS } from './constants';
+import { SORTING_DIRECTIONS, sortArrows, sortLabels, sortValues } from './constants';
 import { useSomeItemHasAPossibleBulkAction, useHasAPossibleBulkAction } from './bulk-actions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
   DropdownMenuV2: DropdownMenu,
   DropdownMenuGroupV2: DropdownMenuGroup,
@@ -32,15 +33,11 @@ const {
 function WithDropDownMenuSeparators({
   children
 }) {
-  return Children.toArray(children).filter(Boolean).map((child, i) => createElement(Fragment, {
-    key: i
-  }, i > 0 && createElement(DropdownMenuSeparator, null), child));
+  return Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/_jsxs(Fragment, {
+    children: [i > 0 && /*#__PURE__*/_jsx(DropdownMenuSeparator, {}), child]
+  }, i));
 }
-const sortArrows = {
-  asc: '↑',
-  desc: '↓'
-};
-const HeaderMenu = forwardRef(function HeaderMenu({
+const _HeaderMenu = forwardRef(function HeaderMenu({
   field,
   view,
   onChangeView,
@@ -59,72 +56,91 @@ const HeaderMenu = forwardRef(function HeaderMenu({
   if (!isSortable && !isHidable && !canAddFilter) {
     return field.header;
   }
-  return createElement(DropdownMenu, {
+  return /*#__PURE__*/_jsx(DropdownMenu, {
     align: "start",
-    trigger: createElement(Button, {
+    trigger: /*#__PURE__*/_jsxs(Button, {
       size: "compact",
       className: "dataviews-view-table-header-button",
       ref: ref,
-      variant: "tertiary"
-    }, field.header, isSorted && createElement("span", {
-      "aria-hidden": "true"
-    }, isSorted && sortArrows[view.sort.direction])),
+      variant: "tertiary",
+      children: [field.header, view.sort && isSorted && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: sortArrows[view.sort.direction]
+      })]
+    }),
     style: {
       minWidth: '240px'
-    }
-  }, createElement(WithDropDownMenuSeparators, null, isSortable && createElement(DropdownMenuGroup, null, Object.entries(SORTING_DIRECTIONS).map(([direction, info]) => {
-    const isChecked = isSorted && view.sort.direction === direction;
-    const value = `${field.id}-${direction}`;
-    return createElement(DropdownMenuRadioItem, {
-      key: value
-      // All sorting radio items share the same name, so that
-      // selecting a sorting option automatically deselects the
-      // previously selected one, even if it is displayed in
-      // another submenu. The field and direction are passed via
-      // the `value` prop.
-      ,
-      name: "view-table-sorting",
-      value: value,
-      checked: isChecked,
-      onChange: () => {
-        onChangeView({
-          ...view,
-          sort: {
-            field: field.id,
-            direction
-          }
-        });
-      }
-    }, createElement(DropdownMenuItemLabel, null, info.label));
-  })), canAddFilter && createElement(DropdownMenuGroup, null, createElement(DropdownMenuItem, {
-    prefix: createElement(Icon, {
-      icon: funnel
-    }),
-    onClick: () => {
-      setOpenedFilter(field.id);
-      onChangeView({
-        ...view,
-        page: 1,
-        filters: [...(view.filters || []), {
-          field: field.id,
-          value: undefined,
-          operator: operators[0]
-        }]
-      });
-    }
-  }, createElement(DropdownMenuItemLabel, null, __('Add filter')))), isHidable && createElement(DropdownMenuItem, {
-    prefix: createElement(Icon, {
-      icon: unseen
-    }),
-    onClick: () => {
-      onHide(field);
-      onChangeView({
-        ...view,
-        hiddenFields: view.hiddenFields.concat(field.id)
-      });
-    }
-  }, createElement(DropdownMenuItemLabel, null, __('Hide')))));
+    },
+    children: /*#__PURE__*/_jsxs(WithDropDownMenuSeparators, {
+      children: [isSortable && /*#__PURE__*/_jsx(DropdownMenuGroup, {
+        children: SORTING_DIRECTIONS.map(direction => {
+          const isChecked = view.sort && isSorted && view.sort.direction === direction;
+          const value = `${field.id}-${direction}`;
+          return /*#__PURE__*/_jsx(DropdownMenuRadioItem, {
+            // All sorting radio items share the same name, so that
+            // selecting a sorting option automatically deselects the
+            // previously selected one, even if it is displayed in
+            // another submenu. The field and direction are passed via
+            // the `value` prop.
+            name: "view-table-sorting",
+            value: value,
+            checked: isChecked,
+            onChange: () => {
+              onChangeView({
+                ...view,
+                sort: {
+                  field: field.id,
+                  direction
+                }
+              });
+            },
+            children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+              children: sortLabels[direction]
+            })
+          }, value);
+        })
+      }), canAddFilter && /*#__PURE__*/_jsx(DropdownMenuGroup, {
+        children: /*#__PURE__*/_jsx(DropdownMenuItem, {
+          prefix: /*#__PURE__*/_jsx(Icon, {
+            icon: funnel
+          }),
+          onClick: () => {
+            setOpenedFilter(field.id);
+            onChangeView({
+              ...view,
+              page: 1,
+              filters: [...(view.filters || []), {
+                field: field.id,
+                value: undefined,
+                operator: operators[0]
+              }]
+            });
+          },
+          children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+            children: __('Add filter')
+          })
+        })
+      }), isHidable && /*#__PURE__*/_jsx(DropdownMenuItem, {
+        prefix: /*#__PURE__*/_jsx(Icon, {
+          icon: unseen
+        }),
+        onClick: () => {
+          onHide(field);
+          onChangeView({
+            ...view,
+            hiddenFields: view.hiddenFields.concat(field.id)
+          });
+        },
+        children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+          children: __('Hide')
+        })
+      })]
+    })
+  });
 });
+
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const HeaderMenu = _HeaderMenu;
 function BulkSelectionCheckbox({
   selection,
   onSelectionChange,
@@ -133,15 +149,15 @@ function BulkSelectionCheckbox({
 }) {
   const selectableItems = useMemo(() => {
     return data.filter(item => {
-      return actions.some(action => action.supportsBulk && action.isEligible(item));
+      return actions.some(action => action.supportsBulk && (!action.isEligible || action.isEligible(item)));
     });
   }, [data, actions]);
   const areAllSelected = selection.length === selectableItems.length;
-  return createElement(CheckboxControl, {
+  return /*#__PURE__*/_jsx(CheckboxControl, {
     className: "dataviews-view-table-selection-checkbox",
     __nextHasNoMarginBottom: true,
     checked: areAllSelected,
-    indeterminate: !areAllSelected && selection.length,
+    indeterminate: !areAllSelected && !!selection.length,
     onChange: () => {
       if (areAllSelected) {
         onSelectionChange([]);
@@ -178,8 +194,8 @@ function TableRow({
   // `onClick` and can be used to exclude touchscreen devices from certain
   // behaviours.
   const isTouchDevice = useRef(false);
-  return createElement("tr", {
-    className: classnames('dataviews-view-table__row', {
+  return /*#__PURE__*/_jsxs("tr", {
+    className: clsx('dataviews-view-table__row', {
       'is-selected': hasPossibleBulkAction && isSelected,
       'is-hovered': isHovered,
       'has-bulk-actions': hasPossibleBulkAction
@@ -190,7 +206,7 @@ function TableRow({
       isTouchDevice.current = true;
     },
     onClick: () => {
-      if (!isTouchDevice.current && document.getSelection().type !== 'Range') {
+      if (!isTouchDevice.current && document.getSelection()?.type !== 'Range') {
         if (!isSelected) {
           onSelectionChange(data.filter(_item => {
             const itemId = getItemId?.(_item);
@@ -203,64 +219,68 @@ function TableRow({
           }));
         }
       }
-    }
-  }, hasBulkActions && createElement("td", {
-    className: "dataviews-view-table__checkbox-column",
-    style: {
-      width: '1%'
-    }
-  }, createElement("div", {
-    className: "dataviews-view-table__cell-content-wrapper"
-  }, createElement(SingleSelectionCheckbox, {
-    id: id,
-    item: item,
-    selection: selection,
-    onSelectionChange: onSelectionChange,
-    getItemId: getItemId,
-    data: data,
-    primaryField: primaryField,
-    disabled: !hasPossibleBulkAction
-  }))), visibleFields.map(field => createElement("td", {
-    key: field.id,
-    style: {
-      width: field.width || undefined,
-      minWidth: field.minWidth || undefined,
-      maxWidth: field.maxWidth || undefined
-    }
-  }, createElement("div", {
-    className: classnames('dataviews-view-table__cell-content-wrapper', {
-      'dataviews-view-table__primary-field': primaryField?.id === field.id
+    },
+    children: [hasBulkActions && /*#__PURE__*/_jsx("td", {
+      className: "dataviews-view-table__checkbox-column",
+      style: {
+        width: '1%'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "dataviews-view-table__cell-content-wrapper",
+        children: /*#__PURE__*/_jsx(SingleSelectionCheckbox, {
+          item: item,
+          selection: selection,
+          onSelectionChange: onSelectionChange,
+          getItemId: getItemId,
+          data: data,
+          primaryField: primaryField,
+          disabled: !hasPossibleBulkAction
+        })
+      })
+    }), visibleFields.map(field => /*#__PURE__*/_jsx("td", {
+      style: {
+        width: field.width || undefined,
+        minWidth: field.minWidth || undefined,
+        maxWidth: field.maxWidth || undefined
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: clsx('dataviews-view-table__cell-content-wrapper', {
+          'dataviews-view-table__primary-field': primaryField?.id === field.id
+        }),
+        children: field.render({
+          item
+        })
+      })
+    }, field.id)), !!actions?.length &&
+    /*#__PURE__*/
+    // Disable reason: we are not making the element interactive,
+    // but preventing any click events from bubbling up to the
+    // table row. This allows us to add a click handler to the row
+    // itself (to toggle row selection) without erroneously
+    // intercepting click events from ItemActions.
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+    _jsx("td", {
+      className: "dataviews-view-table__actions-column",
+      onClick: e => e.stopPropagation(),
+      children: /*#__PURE__*/_jsx(ItemActions, {
+        item: item,
+        actions: actions
+      })
     })
-  }, field.render({
-    item
-  })))), !!actions?.length &&
-  // Disable reason: we are not making the element interactive,
-  // but preventing any click events from bubbling up to the
-  // table row. This allows us to add a click handler to the row
-  // itself (to toggle row selection) without erroneously
-  // intercepting click events from ItemActions.
-
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-  createElement("td", {
-    className: "dataviews-view-table__actions-column",
-    onClick: e => e.stopPropagation()
-  }, createElement(ItemActions, {
-    item: item,
-    actions: actions
-  }))
-  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */);
+    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */]
+  });
 }
 function ViewTable({
-  view,
-  onChangeView,
-  fields,
   actions,
   data,
+  fields,
   getItemId,
   isLoading = false,
-  selection,
+  onChangeView,
   onSelectionChange,
-  setOpenedFilter
+  selection,
+  setOpenedFilter,
+  view
 }) {
   const headerMenuRefs = useRef(new Map());
   const headerMenuToFocusRef = useRef();
@@ -279,89 +299,98 @@ function ViewTable({
     // Clearing out the focus directive is necessary to make sure
     // future renders don't cause unexpected focus jumps.
     headerMenuToFocusRef.current = nextHeaderMenuToFocus;
-    setNextHeaderMenuToFocus();
+    setNextHeaderMenuToFocus(undefined);
     return;
   }
   const onHide = field => {
     const hidden = headerMenuRefs.current.get(field.id);
-    const fallback = headerMenuRefs.current.get(hidden.fallback);
+    const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : undefined;
     setNextHeaderMenuToFocus(fallback?.node);
   };
   const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField].includes(field.id));
   const hasData = !!data?.length;
-  const sortValues = {
-    asc: 'ascending',
-    desc: 'descending'
-  };
   const primaryField = fields.find(field => field.id === view.layout.primaryField);
-  return createElement(Fragment, null, createElement("table", {
-    className: "dataviews-view-table",
-    "aria-busy": isLoading,
-    "aria-describedby": tableNoticeId
-  }, createElement("thead", null, createElement("tr", {
-    className: "dataviews-view-table__row"
-  }, hasBulkActions && createElement("th", {
-    className: "dataviews-view-table__checkbox-column",
-    style: {
-      width: '1%'
-    },
-    "data-field-id": "selection",
-    scope: "col"
-  }, createElement(BulkSelectionCheckbox, {
-    selection: selection,
-    onSelectionChange: onSelectionChange,
-    data: data,
-    actions: actions
-  })), visibleFields.map((field, index) => createElement("th", {
-    key: field.id,
-    style: {
-      width: field.width || undefined,
-      minWidth: field.minWidth || undefined,
-      maxWidth: field.maxWidth || undefined
-    },
-    "data-field-id": field.id,
-    "aria-sort": view.sort?.field === field.id && sortValues[view.sort.direction],
-    scope: "col"
-  }, createElement(HeaderMenu, {
-    ref: node => {
-      if (node) {
-        headerMenuRefs.current.set(field.id, {
-          node,
-          fallback: visibleFields[index > 0 ? index - 1 : 1]?.id
-        });
-      } else {
-        headerMenuRefs.current.delete(field.id);
-      }
-    },
-    field: field,
-    view: view,
-    onChangeView: onChangeView,
-    onHide: onHide,
-    setOpenedFilter: setOpenedFilter
-  }))), !!actions?.length && createElement("th", {
-    "data-field-id": "actions",
-    className: "dataviews-view-table__actions-column"
-  }, createElement("span", {
-    className: "dataviews-view-table-header"
-  }, __('Actions'))))), createElement("tbody", null, hasData && data.map((item, index) => createElement(TableRow, {
-    key: getItemId(item),
-    item: item,
-    hasBulkActions: hasBulkActions,
-    actions: actions,
-    id: getItemId(item) || index,
-    visibleFields: visibleFields,
-    primaryField: primaryField,
-    selection: selection,
-    getItemId: getItemId,
-    onSelectionChange: onSelectionChange,
-    data: data
-  })))), createElement("div", {
-    className: classnames({
-      'dataviews-loading': isLoading,
-      'dataviews-no-results': !hasData && !isLoading
-    }),
-    id: tableNoticeId
-  }, !hasData && createElement("p", null, isLoading ? createElement(Spinner, null) : __('No results'))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("table", {
+      className: "dataviews-view-table",
+      "aria-busy": isLoading,
+      "aria-describedby": tableNoticeId,
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsxs("tr", {
+          className: "dataviews-view-table__row",
+          children: [hasBulkActions && /*#__PURE__*/_jsx("th", {
+            className: "dataviews-view-table__checkbox-column",
+            style: {
+              width: '1%'
+            },
+            "data-field-id": "selection",
+            scope: "col",
+            children: /*#__PURE__*/_jsx(BulkSelectionCheckbox, {
+              selection: selection,
+              onSelectionChange: onSelectionChange,
+              data: data,
+              actions: actions
+            })
+          }), visibleFields.map((field, index) => /*#__PURE__*/_jsx("th", {
+            style: {
+              width: field.width || undefined,
+              minWidth: field.minWidth || undefined,
+              maxWidth: field.maxWidth || undefined
+            },
+            "data-field-id": field.id,
+            "aria-sort": view.sort?.field === field.id ? sortValues[view.sort.direction] : undefined,
+            scope: "col",
+            children: /*#__PURE__*/_jsx(HeaderMenu, {
+              ref: node => {
+                if (node) {
+                  headerMenuRefs.current.set(field.id, {
+                    node,
+                    fallback: visibleFields[index > 0 ? index - 1 : 1]?.id
+                  });
+                } else {
+                  headerMenuRefs.current.delete(field.id);
+                }
+              },
+              field: field,
+              view: view,
+              onChangeView: onChangeView,
+              onHide: onHide,
+              setOpenedFilter: setOpenedFilter
+            })
+          }, field.id)), !!actions?.length && /*#__PURE__*/_jsx("th", {
+            "data-field-id": "actions",
+            className: "dataviews-view-table__actions-column",
+            children: /*#__PURE__*/_jsx("span", {
+              className: "dataviews-view-table-header",
+              children: __('Actions')
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: hasData && data.map((item, index) => /*#__PURE__*/_jsx(TableRow, {
+          item: item,
+          hasBulkActions: hasBulkActions,
+          actions: actions,
+          id: getItemId(item) || index.toString(),
+          visibleFields: visibleFields,
+          primaryField: primaryField,
+          selection: selection,
+          getItemId: getItemId,
+          onSelectionChange: onSelectionChange,
+          data: data
+        }, getItemId(item)))
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: clsx({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !hasData && !isLoading
+      }),
+      id: tableNoticeId,
+      children: !hasData && /*#__PURE__*/_jsx("p", {
+        children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : __('No results')
+      })
+    })]
+  });
 }
 export default ViewTable;
 //# sourceMappingURL=view-table.js.map