@economic/taco 1.38.1 → 1.39.0

package/dist/taco.cjs.development.js

@@ -3684,7 +3684,7 @@ function createShortcutKeyDownHandler(key, handler) {
     if (typeof key === 'string') {
       condition = event.key.toLowerCase() === key.toLowerCase();
     } else {
-      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
         return;
       }
       if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
@@ -4016,7 +4016,7 @@ const defaultLocalisationTexts = {
     filters: {
       button: 'Filters',
       buttons: {
-        addFilter: 'Add Filter',
+        addNewFilter: 'Add new filter',
         clearFilters: 'Clear all filters'
       },
       comparators: {
@@ -4033,6 +4033,14 @@ const defaultLocalisationTexts = {
         isEmpty: 'Is empty',
         isNotEmpty: 'Is not empty'
       },
+      conditions: {
+        and: 'And',
+        where: 'Where'
+      },
+      emptyFilter: {
+        condition: 'Condition',
+        value: 'Value'
+      },
       tooltip: 'Apply filters',
       total: 'Viewing [CURRENT] of [TOTAL]'
     },
@@ -6285,15 +6293,15 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
     ref: dragHandlerRef
-  })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  })), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.drawer.close,
-    className: "absolute top-0 right-0 mt-4 mr-2",
+    className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
   })) : null);
   const styleProp = {
@@ -7042,7 +7050,7 @@ const replaceWithShortform = key => {
     case ' ':
       return '␣';
     default:
-      return key;
+      return String(key).toLocaleUpperCase();
   }
 };
 const getShortcutText = key => {
@@ -12842,7 +12850,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   const indicatorMountNode = (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.querySelector(':first-child');
   let controlComponent;
   const detailModeClassName = cn({
-    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+    '!yt-focus-dark': detailModeEditing
   });
   if (cellControl) {
     if (typeof cellControl === 'function') {
@@ -13231,7 +13239,8 @@ function useColumnDefinitions(children, options, tableRef) {
           size: child.props.defaultWidth,
           // sorting
           enableSorting: !child.props.disableSorting,
-          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn)
+          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false
         });
       }
     });
@@ -13380,9 +13389,50 @@ const useFilterStateListener = (table, onRowSelect) => {
   }, [table.getState().columnFilters, table.getState().globalFilter]);
 };
 
+function useTableShortcuts(shortcuts, activeRow) {
+  React__default.useEffect(() => {
+    const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
+    const globalHandlers = [];
+    // convert the shortcut into the correct format to register it
+    if (shortcuts && shortcutKeys.length) {
+      shortcutKeys.forEach(key => {
+        const handler = shortcuts[key];
+        let keyDownHandler;
+        let keyDownHandlerOptions;
+        if (typeof handler === 'function') {
+          keyDownHandler = handler;
+          keyDownHandlerOptions = {
+            key
+          };
+        } else {
+          const handlerObject = handler;
+          keyDownHandler = handlerObject.handler;
+          keyDownHandlerOptions = {
+            key,
+            meta: handlerObject.meta,
+            shift: handlerObject.shift
+          };
+        }
+        globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
+          event.preventDefault();
+          keyDownHandler(activeRow);
+        }));
+      });
+    }
+    globalHandlers.forEach(handler => {
+      document.addEventListener('keydown', handler);
+    });
+    return () => {
+      globalHandlers.forEach(handler => {
+        document.removeEventListener('keydown', handler);
+      });
+    };
+  }, [shortcuts, activeRow]);
+}
+
 const ACTIONS_ON_ROW_LENGTH = 4;
 function useTable$1(children, props, ref) {
-  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity, _tableRows$activeRow$;
   const {
     actionsForRow = [],
     actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
@@ -13409,6 +13459,7 @@ function useTable$1(children, props, ref) {
     onRowSelect,
     onSave,
     settings = {},
+    shortcuts,
     // experimental
     _experimentalActionsForTable
   } = props;
@@ -13576,6 +13627,7 @@ function useTable$1(children, props, ref) {
   useFilterStateListener(table, onRowSelect);
   useRowSelectionListener(table, onRowSelect);
   useSettingsStateListener(table, onChangeSettings);
+  useTableShortcuts(shortcuts, (_tableRows$activeRow$ = tableRows[activeRow.activeRowIndex]) === null || _tableRows$activeRow$ === void 0 ? void 0 : _tableRows$activeRow$.original);
   return {
     rows,
     table,
@@ -14262,18 +14314,22 @@ const InferredControl = ({
 };
 
 const ColumnFilter = props => {
-  var _column$columnDef$hea, _column$columnDef$met, _control;
+  var _column$columnDef$hea, _column$columnDef$met;
   const {
     allColumns,
     column,
     index,
-    table
+    table,
+    onRemove
   } = props;
   const {
     comparator,
     value
   } = column.getFilterValue();
   const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
+  const {
+    texts
+  } = useLocalization();
   const ref = React__default.useRef(null);
   let control;
   const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
@@ -14318,13 +14374,16 @@ const ColumnFilter = props => {
       }))
     });
   }
-  const handleRemove = () => column.setFilterValue(undefined);
+  const handleRemove = () => {
+    column.setFilterValue(undefined);
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+  };
   const comparators = guessComparatorsBasedOnControl(control, controlType);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2 flex gap-2"
+    className: "flex gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
-  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$2, {
+  }, index === 0 ? texts.table2.filters.conditions.where : texts.table2.filters.conditions.and), /*#__PURE__*/React__default.createElement(Column$2, {
     className: "!w-32 flex-shrink-0",
     allColumns: allColumns,
     column: column,
@@ -14337,7 +14396,7 @@ const ColumnFilter = props => {
     validComparators: comparators
   }), comparator !== undefined ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-grow items-center"
-  }, (_control = control) !== null && _control !== void 0 ? _control : /*#__PURE__*/React__default.createElement(InferredControl, {
+  }, /*#__PURE__*/React__default.createElement(InferredControl, {
     column: column,
     comparator: comparator,
     value: value
@@ -14370,6 +14429,61 @@ const guessComparatorsBasedOnControl = (instance, control) => {
   }
 };
 
+const EmptyFilter = props => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    onChange,
+    onRemove,
+    allColumns,
+    table,
+    index,
+    filteredColumns,
+    emptyFilterCount
+  } = props;
+  const handleChange = value => {
+    if (value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, filteredColumns.length > 0 || filteredColumns.length === 0 && index > 0 ? texts.table2.filters.conditions.and : texts.table2.filters.conditions.where), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    emptyValue: null,
+    autoFocus: true,
+    onChange: handleChange,
+    value: null
+  }, allColumns.map(c => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: c.id,
+    value: c.id,
+    disabled: !c.getCanFilter() || !!table.getState().columnFilters.find(f => f.id === c.id)
+  }, String(c.columnDef.header)))), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    value: 1,
+    autoFocus: true,
+    disabled: true
+  }, /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition1',
+    value: 1
+  }, texts.table2.filters.emptyFilter.condition), /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition2',
+    value: 2
+  }, "Condition2")), /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": 'Value',
+    className: "flex-grow items-center",
+    disabled: true,
+    value: texts.table2.filters.emptyFilter.value
+  }), (emptyFilterCount > 1 || filteredColumns.length > 0) && /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: onRemove
+  }));
+};
+
 const FiltersButton = ({
   length,
   table
@@ -14378,7 +14492,10 @@ const FiltersButton = ({
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
-  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort((a, b) => {
+    var _a$columnDef, _b$columnDef;
+    return (_a$columnDef = a.columnDef) === null || _a$columnDef === void 0 ? void 0 : _a$columnDef.header.localeCompare((_b$columnDef = b.columnDef) === null || _b$columnDef === void 0 ? void 0 : _b$columnDef.header);
+  });
   const {
     shouldDisableTableActions
   } = table.options.meta;
@@ -14390,17 +14507,11 @@ const FiltersButton = ({
     }
     return columns;
   }, []);
-  const handleAdd = () => {
-    const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));
-    if (firstFilterableColumn) {
-      firstFilterableColumn.setFilterValue({
-        comparator: undefined,
-        value: undefined
-      });
-    }
-  };
+  const [emptyFilterCount, setEmptyFilterCount] = React__default.useState(1);
+  const handleAdd = () => setEmptyFilterCount(emptyFilterCount + 1);
   const handleReset = () => {
     table.resetColumnFilters();
+    setEmptyFilterCount(1);
   };
   useGlobalKeyDown({
     key: 'f',
@@ -14411,37 +14522,94 @@ const FiltersButton = ({
     event.preventDefault();
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
+  const handleEmptyFilterChange = columnId => {
+    // create an actual filter on that column that the user selected
+    const column = allColumns.find(c => c.getCanFilter() && c.id === columnId);
+    if (column) {
+      column.setFilterValue({
+        comparator: undefined,
+        value: undefined
+      });
+    }
+    // hide the empty filter row because we now have a real filter
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleRemove = () => {
+    if (filteredColumns.length === 1 && emptyFilterCount === 0) {
+      setEmptyFilterCount(1);
+    }
+  };
+  const handleRemoveEmptyFilter = () => {
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleOpenChange = () => {
+    const emptyFilterCount = filteredColumns.length === 0 ? 1 : 0;
+    setEmptyFilterCount(emptyFilterCount);
+  };
+  const filters = filteredColumns.length > 0 && filteredColumns.filter(column => {
+    var _column$columnDef$met;
+    const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+    const value = column.getFilterValue().value;
+    const comparator = column.getFilterValue().comparator;
+    if (Array.isArray(value)) {
+      if (value.length > 0 && value.find(item => item !== undefined)) {
+        return true;
+      }
+    } else if (value) {
+      return true;
+    } else if ([Table2FilterComparator.IsEmpty, Table2FilterComparator.IsNotEmpty].includes(comparator)) {
+      if (!controlType) {
+        return true;
+      }
+    }
+    return false;
+  });
+  const filtersApplied = filters && filters.length;
   return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-label": texts.table2.filters.tooltip,
-    appearance: columnFilters.length ? 'primary' : 'default',
+    appearance: filtersApplied ? 'primary' : 'default',
     className: cn({
-      '!wcag-blue-100': columnFilters.length
+      '!wcag-blue-100': filtersApplied
     }),
     disabled: shouldDisableTableActions,
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+      onChange: handleOpenChange
+    }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex h-8"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-full items-center gap-2"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "mb-0 inline-flex"
-    }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
+    }, texts.table2.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), columnFilters.length || emptyFilterCount > 1 ? /*#__PURE__*/React__default.createElement(Button$1, {
+      onClick: handleReset
+    }, texts.table2.filters.buttons.clearFilters) : null), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
       key: `${column.id}_${index}`,
       allColumns: allColumns,
       index: index,
       column: column,
-      table: table
-    }))), /*#__PURE__*/React__default.createElement(Group, {
-      className: "justify-between"
+      table: table,
+      onRemove: handleRemove
+    })), [...Array(emptyFilterCount)].map((_, index) => /*#__PURE__*/React__default.createElement(EmptyFilter, {
+      key: `emptyFilter_${index}`,
+      index: index,
+      allColumns: allColumns,
+      table: table,
+      onChange: value => handleEmptyFilterChange(value),
+      emptyFilterCount: emptyFilterCount,
+      filteredColumns: filteredColumns,
+      onRemove: handleRemoveEmptyFilter
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
       onClick: handleAdd
-    }, "+ ", texts.table2.filters.buttons.addFilter), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
-      onClick: handleReset
-    }, texts.table2.filters.buttons.clearFilters) : null)))),
+    }, "+ ", texts.table2.filters.buttons.addNewFilter)))))),
     ref: ref,
     tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
@@ -14452,8 +14620,8 @@ const FiltersButton = ({
       }
     }))
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: columnFilters.length ? 'filter-solid' : 'filter'
-  }), texts.table2.filters.button, " ", columnFilters.length ? `(${columnFilters.length})` : '');
+    name: filtersApplied ? 'filter-solid' : 'filter'
+  }), texts.table2.filters.button, " ", filtersApplied ? `(${filtersApplied})` : '');
 };
 
 const Search$2 = props => {
@@ -14619,7 +14787,8 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
         resetFiltering: () => table.resetColumnFilters(),
         resetRowExpansion: () => table.resetExpanded(),
         resetRowSelection: () => table.resetRowSelection(),
-        resetSorting: () => table.resetSorting()
+        resetSorting: () => table.resetSorting(),
+        toggleEditing: () => meta.editMode.toggleEditing()
       };
     }
   }, [table, tableRef.current]);