@wordpress/dataviews 1.1.0 → 2.0.0

package/build/view-table.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
@@ -17,6 +16,7 @@ var _itemActions = _interopRequireDefault(require("./item-actions"));
 var _utils = require("./utils");
 var _constants = require("./constants");
 var _bulkActions = require("./bulk-actions");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -40,15 +40,11 @@ const {
 function WithDropDownMenuSeparators({
   children
 }) {
-  return _element.Children.toArray(children).filter(Boolean).map((child, i) => (0, _react.createElement)(_element.Fragment, {
-    key: i
-  }, i > 0 && (0, _react.createElement)(DropdownMenuSeparator, null), child));
+  return _element.Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+    children: [i > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuSeparator, {}), child]
+  }, i));
 }
-const sortArrows = {
-  asc: '↑',
-  desc: '↓'
-};
-const HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
+const _HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
   field,
   view,
   onChangeView,
@@ -67,72 +63,91 @@ const HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
   if (!isSortable && !isHidable && !canAddFilter) {
     return field.header;
   }
-  return (0, _react.createElement)(DropdownMenu, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
     align: "start",
-    trigger: (0, _react.createElement)(_components.Button, {
+    trigger: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
       size: "compact",
       className: "dataviews-view-table-header-button",
       ref: ref,
-      variant: "tertiary"
-    }, field.header, isSorted && (0, _react.createElement)("span", {
-      "aria-hidden": "true"
-    }, isSorted && sortArrows[view.sort.direction])),
+      variant: "tertiary",
+      children: [field.header, view.sort && isSorted && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": "true",
+        children: _constants.sortArrows[view.sort.direction]
+      })]
+    }),
     style: {
       minWidth: '240px'
-    }
-  }, (0, _react.createElement)(WithDropDownMenuSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroup, null, Object.entries(_constants.SORTING_DIRECTIONS).map(([direction, info]) => {
-    const isChecked = isSorted && view.sort.direction === direction;
-    const value = `${field.id}-${direction}`;
-    return (0, _react.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
-          }
-        });
-      }
-    }, (0, _react.createElement)(DropdownMenuItemLabel, null, info.label));
-  })), canAddFilter && (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(DropdownMenuItem, {
-    prefix: (0, _react.createElement)(_components.Icon, {
-      icon: _icons.funnel
-    }),
-    onClick: () => {
-      setOpenedFilter(field.id);
-      onChangeView({
-        ...view,
-        page: 1,
-        filters: [...(view.filters || []), {
-          field: field.id,
-          value: undefined,
-          operator: operators[0]
-        }]
-      });
-    }
-  }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Add filter')))), isHidable && (0, _react.createElement)(DropdownMenuItem, {
-    prefix: (0, _react.createElement)(_components.Icon, {
-      icon: _icons.unseen
-    }),
-    onClick: () => {
-      onHide(field);
-      onChangeView({
-        ...view,
-        hiddenFields: view.hiddenFields.concat(field.id)
-      });
-    }
-  }, (0, _react.createElement)(DropdownMenuItemLabel, null, (0, _i18n.__)('Hide')))));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(WithDropDownMenuSeparators, {
+      children: [isSortable && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuGroup, {
+        children: _constants.SORTING_DIRECTIONS.map(direction => {
+          const isChecked = view.sort && isSorted && view.sort.direction === direction;
+          const value = `${field.id}-${direction}`;
+          return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+              children: _constants.sortLabels[direction]
+            })
+          }, value);
+        })
+      }), canAddFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuGroup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+          prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+            icon: _icons.funnel
+          }),
+          onClick: () => {
+            setOpenedFilter(field.id);
+            onChangeView({
+              ...view,
+              page: 1,
+              filters: [...(view.filters || []), {
+                field: field.id,
+                value: undefined,
+                operator: operators[0]
+              }]
+            });
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+            children: (0, _i18n.__)('Add filter')
+          })
+        })
+      }), isHidable && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+          icon: _icons.unseen
+        }),
+        onClick: () => {
+          onHide(field);
+          onChangeView({
+            ...view,
+            hiddenFields: view.hiddenFields.concat(field.id)
+          });
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+          children: (0, _i18n.__)('Hide')
+        })
+      })]
+    })
+  });
 });
+
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const HeaderMenu = _HeaderMenu;
 function BulkSelectionCheckbox({
   selection,
   onSelectionChange,
@@ -141,15 +156,15 @@ function BulkSelectionCheckbox({
 }) {
   const selectableItems = (0, _element.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 (0, _react.createElement)(_components.CheckboxControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
     className: "dataviews-view-table-selection-checkbox",
     __nextHasNoMarginBottom: true,
     checked: areAllSelected,
-    indeterminate: !areAllSelected && selection.length,
+    indeterminate: !areAllSelected && !!selection.length,
     onChange: () => {
       if (areAllSelected) {
         onSelectionChange([]);
@@ -186,8 +201,8 @@ function TableRow({
   // `onClick` and can be used to exclude touchscreen devices from certain
   // behaviours.
   const isTouchDevice = (0, _element.useRef)(false);
-  return (0, _react.createElement)("tr", {
-    className: (0, _classnames.default)('dataviews-view-table__row', {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+    className: (0, _clsx.default)('dataviews-view-table__row', {
       'is-selected': hasPossibleBulkAction && isSelected,
       'is-hovered': isHovered,
       'has-bulk-actions': hasPossibleBulkAction
@@ -198,7 +213,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);
@@ -211,64 +226,68 @@ function TableRow({
           }));
         }
       }
-    }
-  }, hasBulkActions && (0, _react.createElement)("td", {
-    className: "dataviews-view-table__checkbox-column",
-    style: {
-      width: '1%'
-    }
-  }, (0, _react.createElement)("div", {
-    className: "dataviews-view-table__cell-content-wrapper"
-  }, (0, _react.createElement)(_singleSelectionCheckbox.default, {
-    id: id,
-    item: item,
-    selection: selection,
-    onSelectionChange: onSelectionChange,
-    getItemId: getItemId,
-    data: data,
-    primaryField: primaryField,
-    disabled: !hasPossibleBulkAction
-  }))), visibleFields.map(field => (0, _react.createElement)("td", {
-    key: field.id,
-    style: {
-      width: field.width || undefined,
-      minWidth: field.minWidth || undefined,
-      maxWidth: field.maxWidth || undefined
-    }
-  }, (0, _react.createElement)("div", {
-    className: (0, _classnames.default)('dataviews-view-table__cell-content-wrapper', {
-      'dataviews-view-table__primary-field': primaryField?.id === field.id
+    },
+    children: [hasBulkActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      className: "dataviews-view-table__checkbox-column",
+      style: {
+        width: '1%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dataviews-view-table__cell-content-wrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_singleSelectionCheckbox.default, {
+          item: item,
+          selection: selection,
+          onSelectionChange: onSelectionChange,
+          getItemId: getItemId,
+          data: data,
+          primaryField: primaryField,
+          disabled: !hasPossibleBulkAction
+        })
+      })
+    }), visibleFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      style: {
+        width: field.width || undefined,
+        minWidth: field.minWidth || undefined,
+        maxWidth: field.maxWidth || undefined
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)('dataviews-view-table__cell-content-wrapper', {
+          'dataviews-view-table__primary-field': primaryField?.id === field.id
+        }),
+        children: 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 */
+    (0, _jsxRuntime.jsx)("td", {
+      className: "dataviews-view-table__actions-column",
+      onClick: e => e.stopPropagation(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemActions.default, {
+        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 */
-  (0, _react.createElement)("td", {
-    className: "dataviews-view-table__actions-column",
-    onClick: e => e.stopPropagation()
-  }, (0, _react.createElement)(_itemActions.default, {
-    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 = (0, _element.useRef)(new Map());
   const headerMenuToFocusRef = (0, _element.useRef)();
@@ -287,89 +306,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 (0, _react.createElement)(_element.Fragment, null, (0, _react.createElement)("table", {
-    className: "dataviews-view-table",
-    "aria-busy": isLoading,
-    "aria-describedby": tableNoticeId
-  }, (0, _react.createElement)("thead", null, (0, _react.createElement)("tr", {
-    className: "dataviews-view-table__row"
-  }, hasBulkActions && (0, _react.createElement)("th", {
-    className: "dataviews-view-table__checkbox-column",
-    style: {
-      width: '1%'
-    },
-    "data-field-id": "selection",
-    scope: "col"
-  }, (0, _react.createElement)(BulkSelectionCheckbox, {
-    selection: selection,
-    onSelectionChange: onSelectionChange,
-    data: data,
-    actions: actions
-  })), visibleFields.map((field, index) => (0, _react.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"
-  }, (0, _react.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 && (0, _react.createElement)("th", {
-    "data-field-id": "actions",
-    className: "dataviews-view-table__actions-column"
-  }, (0, _react.createElement)("span", {
-    className: "dataviews-view-table-header"
-  }, (0, _i18n.__)('Actions'))))), (0, _react.createElement)("tbody", null, hasData && data.map((item, index) => (0, _react.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
-  })))), (0, _react.createElement)("div", {
-    className: (0, _classnames.default)({
-      'dataviews-loading': isLoading,
-      'dataviews-no-results': !hasData && !isLoading
-    }),
-    id: tableNoticeId
-  }, !hasData && (0, _react.createElement)("p", null, isLoading ? (0, _react.createElement)(_components.Spinner, null) : (0, _i18n.__)('No results'))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+      className: "dataviews-view-table",
+      "aria-busy": isLoading,
+      "aria-describedby": tableNoticeId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+          className: "dataviews-view-table__row",
+          children: [hasBulkActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            className: "dataviews-view-table__checkbox-column",
+            style: {
+              width: '1%'
+            },
+            "data-field-id": "selection",
+            scope: "col",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BulkSelectionCheckbox, {
+              selection: selection,
+              onSelectionChange: onSelectionChange,
+              data: data,
+              actions: actions
+            })
+          }), visibleFields.map((field, index) => /*#__PURE__*/(0, _jsxRuntime.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 ? _constants.sortValues[view.sort.direction] : undefined,
+            scope: "col",
+            children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("th", {
+            "data-field-id": "actions",
+            className: "dataviews-view-table__actions-column",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dataviews-view-table-header",
+              children: (0, _i18n.__)('Actions')
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: hasData && data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableRow, {
+          item: item,
+          hasBulkActions: hasBulkActions,
+          actions: actions,
+          id: getItemId(item) || index.toString(),
+          visibleFields: visibleFields,
+          primaryField: primaryField,
+          selection: selection,
+          getItemId: getItemId,
+          onSelectionChange: onSelectionChange,
+          data: data
+        }, getItemId(item)))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)({
+        'dataviews-loading': isLoading,
+        'dataviews-no-results': !hasData && !isLoading
+      }),
+      id: tableNoticeId,
+      children: !hasData && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}) : (0, _i18n.__)('No results')
+      })
+    })]
+  });
 }
 var _default = exports.default = ViewTable;
 //# sourceMappingURL=view-table.js.map