@synerise/ds-table 0.60.2 → 0.60.4

package/dist/TableHeader/TableHeader.js

@@ -4,37 +4,32 @@ import * as S from '../Table.styles';
 import FilterTrigger from '../FilterTrigger/FilterTrigger';
 import TableSelection from './TableSelection';
 import { TableLimit } from './TableLimit';
-
 var TableHeader = function TableHeader(_ref) {
   var title = _ref.title,
-      filters = _ref.filters,
-      searchComponent = _ref.searchComponent,
-      filterComponent = _ref.filterComponent,
-      selectedRows = _ref.selectedRows,
-      itemsMenu = _ref.itemsMenu,
-      selection = _ref.selection,
-      dataSource = _ref.dataSource,
-      dataSourceFull = _ref.dataSourceFull,
-      dataSourceTotalCount = _ref.dataSourceTotalCount,
-      rowKey = _ref.rowKey,
-      withBorderTop = _ref.withBorderTop,
-      headerButton = _ref.headerButton,
-      locale = _ref.locale,
-      renderSelectionTitle = _ref.renderSelectionTitle,
-      hideTitlePart = _ref.hideTitlePart,
-      childrenColumnName = _ref.childrenColumnName,
-      isLoading = _ref.isLoading;
-
+    filters = _ref.filters,
+    searchComponent = _ref.searchComponent,
+    filterComponent = _ref.filterComponent,
+    selectedRows = _ref.selectedRows,
+    itemsMenu = _ref.itemsMenu,
+    selection = _ref.selection,
+    dataSource = _ref.dataSource,
+    dataSourceFull = _ref.dataSourceFull,
+    dataSourceTotalCount = _ref.dataSourceTotalCount,
+    rowKey = _ref.rowKey,
+    withBorderTop = _ref.withBorderTop,
+    headerButton = _ref.headerButton,
+    locale = _ref.locale,
+    renderSelectionTitle = _ref.renderSelectionTitle,
+    hideTitlePart = _ref.hideTitlePart,
+    childrenColumnName = _ref.childrenColumnName,
+    isLoading = _ref.isLoading;
   var _useDataFormat = useDataFormat(),
-      formatValue = _useDataFormat.formatValue;
-
+    formatValue = _useDataFormat.formatValue;
   var renderLeftSide = useMemo(function () {
     var _locale$pagination;
-
     var _ref2 = selection || {},
-        limit = _ref2.limit,
-        hideSelectAll = _ref2.hideSelectAll;
-
+      limit = _ref2.limit,
+      hideSelectAll = _ref2.hideSelectAll;
     if (limit) return /*#__PURE__*/React.createElement(TableLimit, {
       total: dataSourceTotalCount || dataSource.length,
       selection: selection,
@@ -86,8 +81,7 @@ var TableHeader = function TableHeader(_ref) {
       iconComponent: filter.icon,
       tooltips: filter.tooltips,
       openedLabel: filter.openedLabel
-      /* eslint-disable-next-line react/jsx-handler-names */
-      ,
+      /* eslint-disable-next-line react/jsx-handler-names */,
       handleClear: filter.handleClear,
       show: filter.show,
       showList: filter.showList,
@@ -96,5 +90,4 @@ var TableHeader = function TableHeader(_ref) {
     });
   }), filterComponent, searchComponent));
 };
-
 export default TableHeader;

package/dist/TableHeader/TableLimit/TableLimit.js

@@ -4,13 +4,11 @@ import { useDataFormat } from '@synerise/ds-data-format';
 import * as S from './TableLimit.styles';
 export function TableLimit(_ref) {
   var total = _ref.total,
-      locale = _ref.locale,
-      itemsMenu = _ref.itemsMenu,
-      selection = _ref.selection;
-
+    locale = _ref.locale,
+    itemsMenu = _ref.itemsMenu,
+    selection = _ref.selection;
   var _useDataFormat = useDataFormat(),
-      formatValue = _useDataFormat.formatValue;
-
+    formatValue = _useDataFormat.formatValue;
   var selectedRows = useMemo(function () {
     return (selection == null ? void 0 : selection.selectedRowKeys.length) || 0;
   }, [selection]);
@@ -22,7 +20,6 @@ export function TableLimit(_ref) {
   }, [locale, selectedRows, selection]);
   var selected = useMemo(function () {
     var _locale$pagination, _locale$pagination2;
-
     return selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", locale.selected, " /", ' ', formatValue(total) + " " + ((_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items)) : /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination2 = locale.pagination) == null ? void 0 : _locale$pagination2.items);
   }, [formatValue, locale.pagination, locale.selected, selectedRows, total]);
   return /*#__PURE__*/React.createElement(S.TableLimit, null, selected, limitReachedInfo, selectedRows > 0 && /*#__PURE__*/React.createElement(S.ItemsMenu, null, itemsMenu));

package/dist/TableHeader/TableSelection.d.ts

@@ -1,7 +1,8 @@
-import type { ReactElement, ReactText } from 'react';
-import { Props } from './TableSelection.types';
-declare function TableSelection<T extends {
+import React from 'react';
+import type { ReactText } from 'react';
+import type { Props } from './TableSelection.types';
+declare const TableSelection: <T extends {
     key: ReactText;
-    children?: T[];
-}>({ dataSource, dataSourceFull, selection, rowKey, locale, childrenColumnName, }: Props<T>): ReactElement | null;
+    children?: T[] | undefined;
+}>({ dataSource, dataSourceFull, selection, rowKey, locale, childrenColumnName, }: Props<T>) => React.JSX.Element | null;
 export default TableSelection;

package/dist/TableHeader/TableSelection.js

@@ -1,25 +1,26 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { useCallback, useMemo } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
-import Menu from '@synerise/ds-menu';
 import Button from '@synerise/ds-button';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { OptionVerticalM } from '@synerise/ds-icon';
 import * as S from '../Table.styles';
 import { SELECTION_ALL, SELECTION_INVERT } from '../Table';
 import { useRowKey } from '../hooks/useRowKey';
-import { isRecordSelectable } from '../utils'; // @ts-ignore
-
-function TableSelection(_ref) {
+import { isRecordSelectable } from '../utils';
+var TableSelection = function TableSelection(_ref) {
   var dataSource = _ref.dataSource,
-      dataSourceFull = _ref.dataSourceFull,
-      selection = _ref.selection,
-      rowKey = _ref.rowKey,
-      locale = _ref.locale,
-      childrenColumnName = _ref.childrenColumnName;
-
+    dataSourceFull = _ref.dataSourceFull,
+    selection = _ref.selection,
+    rowKey = _ref.rowKey,
+    locale = _ref.locale,
+    childrenColumnName = _ref.childrenColumnName;
   var _useRowKey = useRowKey(rowKey),
-      getRowKey = _useRowKey.getRowKey;
-
+    getRowKey = _useRowKey.getRowKey;
   var allData = dataSourceFull || dataSource;
   var isShowingSubset = dataSourceFull && dataSourceFull.length !== dataSource.length;
   var getRowsForKeys = useCallback(function (keys) {
@@ -27,20 +28,16 @@ function TableSelection(_ref) {
       var rows = [];
       allData.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
-
         if (Array.isArray(rowChildren)) {
           rowChildren.forEach(function (child) {
             var key = getRowKey(child);
-
             if (rowChildren && key && keys.includes(key)) {
               rows = [].concat(rows, [record]);
             }
           });
         }
-
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
-
           if (key && keys.includes(key)) {
             rows = [].concat(rows, [record]);
           }
@@ -48,24 +45,21 @@ function TableSelection(_ref) {
       });
       return rows;
     }
-
     return [];
   }, [allData, getRowKey, selection, childrenColumnName]);
   var selectAll = useCallback(function () {
     if (dataSource && selection) {
       var selectedRowKeys = selection.selectedRowKeys,
-          checkRowSelectionStatus = selection.checkRowSelectionStatus;
+        checkRowSelectionStatus = selection.checkRowSelectionStatus;
       var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
-
         if (Array.isArray(rowChildren)) {
           keys = [].concat(keys, rowChildren.reduce(function (acc, child) {
             var key = getRowKey(child);
             return key && isRecordSelectable(child, checkRowSelectionStatus) ? [].concat(acc, [key]) : acc;
           }, []));
         }
-
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
           keys = key !== undefined && isRecordSelectable(record, checkRowSelectionStatus) ? [].concat(keys, [key]) : [].concat(keys);
@@ -83,14 +77,12 @@ function TableSelection(_ref) {
         var keysToUnselect = [];
         dataSource.forEach(function (record) {
           var rowChildren = record[childrenColumnName];
-
           if (Array.isArray(rowChildren)) {
             keysToUnselect = [].concat(keysToUnselect, rowChildren.reduce(function (acc, child) {
               var key = getRowKey(child);
               return key ? [].concat(acc, [key]) : acc;
             }, []));
           }
-
           if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
             var key = getRowKey(record);
             keysToUnselect = key !== undefined ? [].concat(keysToUnselect, [key]) : [].concat(keysToUnselect);
@@ -111,22 +103,21 @@ function TableSelection(_ref) {
     return children ? children.filter(function (child) {
       return isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== undefined;
     }) : [];
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
   var selectInvert = useCallback(function () {
     if (dataSource && selection) {
       var selectedRowKeys = selection.selectedRowKeys,
-          checkRowSelectionStatus = selection.checkRowSelectionStatus;
+        checkRowSelectionStatus = selection.checkRowSelectionStatus;
       var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
         var hasChildren = Array.isArray(rowChildren);
         var selectableChildren = hasChildren ? getSelectableChildren(rowChildren) : false;
-
         if (selectableChildren) {
           selectableChildren.forEach(function (child) {
             var key = getRowKey(child);
-
             if (selectedRowKeys.includes(key)) {
               if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
             } else {
@@ -134,10 +125,8 @@ function TableSelection(_ref) {
             }
           });
         }
-
         if (!selectableChildren || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
-
           if (selectedRowKeys.includes(key)) {
             if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
           } else if (isRecordSelectable(record, checkRowSelectionStatus)) {
@@ -155,15 +144,13 @@ function TableSelection(_ref) {
   var allSelectableRecordsCount = useMemo(function () {
     if (isEmpty || !selection) return 0;
     var independentSelectionExpandedRows = selection.independentSelectionExpandedRows,
-        checkRowSelectionStatus = selection.checkRowSelectionStatus;
+      checkRowSelectionStatus = selection.checkRowSelectionStatus;
     return dataSource.reduce(function (count, record) {
       var isSelectable = +isRecordSelectable(record, checkRowSelectionStatus);
       var rowChildren = record[childrenColumnName];
-
       if (independentSelectionExpandedRows) {
         return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length + isSelectable : count + isSelectable;
       }
-
       return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length : count + isSelectable;
     }, 0);
   }, [childrenColumnName, dataSource, getSelectableChildren, isEmpty, selection]);
@@ -172,24 +159,52 @@ function TableSelection(_ref) {
     var selectedRowKeys = selection.selectedRowKeys;
     var selectedKeysInDataSourceCount = isShowingSubset ? dataSource.reduce(function (count, record) {
       var rowChildren = record[childrenColumnName];
-
       if (Array.isArray(rowChildren)) {
         return rowChildren.reduce(function (childCount, child) {
           var key = getRowKey(child);
           return selectedRowKeys.includes(key) ? childCount + 1 : childCount;
         }, 0);
       }
-
       if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
         var key = getRowKey(record);
         return selectedRowKeys.includes(key) ? count + 1 : count;
       }
-
       return count;
     }, 0) : selectedRowKeys.length;
     return allSelectableRecordsCount === selectedKeysInDataSourceCount;
   }, [isEmpty, selection, isShowingSubset, dataSource, allSelectableRecordsCount, childrenColumnName, getRowKey]);
   var selectionTooltipTitle = !allSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
+  var menuDataSource = useMemo(function () {
+    var _selection$selections;
+    return selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).map(function (selectionMenuElement) {
+      switch (selectionMenuElement) {
+        case SELECTION_ALL:
+          {
+            return !allSelected ? {
+              onClick: selectAll,
+              text: locale == null ? void 0 : locale.selectAll
+            } : {
+              onClick: unselectAll,
+              text: locale == null ? void 0 : locale.unselectAll
+            };
+          }
+        case SELECTION_INVERT:
+          {
+            return {
+              onClick: selectInvert,
+              text: locale == null ? void 0 : locale.selectInvert
+            };
+          }
+        default:
+          {
+            var sel = selectionMenuElement;
+            return _objectSpread({}, sel, {
+              text: sel.label
+            });
+          }
+      }
+    });
+  }, [allSelected, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.selectInvert, locale == null ? void 0 : locale.unselectAll, selectAll, selectInvert, selection == null ? void 0 : selection.selections, unselectAll]);
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {
@@ -209,38 +224,9 @@ function TableSelection(_ref) {
   })), (selection == null ? void 0 : selection.selections) && /*#__PURE__*/React.createElement(Dropdown, {
     disabled: isEmpty || allSelectableRecordsCount === 0,
     trigger: ['click'],
-    overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, null, selection == null ? void 0 : selection.selections.filter(Boolean).map(function (selectionMenuElement) {
-      switch (selectionMenuElement) {
-        case SELECTION_ALL:
-          {
-            return !allSelected ? /*#__PURE__*/React.createElement(Menu.Item, {
-              onClick: selectAll
-            }, locale == null ? void 0 : locale.selectAll) : /*#__PURE__*/React.createElement(Menu.Item, {
-              onClick: unselectAll
-            }, locale == null ? void 0 : locale.unselectAll);
-          }
-
-        case SELECTION_INVERT:
-          {
-            return /*#__PURE__*/React.createElement(Menu.Item, {
-              onClick: selectInvert
-            }, locale == null ? void 0 : locale.selectInvert);
-          }
-
-        default:
-          {
-            var sel = selectionMenuElement;
-            return (
-              /*#__PURE__*/
-              // eslint-disable-next-line react/jsx-handler-names
-              React.createElement(Menu.Item, {
-                key: sel.key,
-                onClick: sel.onClick
-              }, sel.label)
-            );
-          }
-      }
-    }))
+    overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, {
+      dataSource: menuDataSource
+    })
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: locale == null ? void 0 : locale.selectionOptionsTooltip
   }, /*#__PURE__*/React.createElement(Button, {
@@ -249,6 +235,5 @@ function TableSelection(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(OptionVerticalM, null)
   }))))) : null;
-}
-
+};
 export default TableSelection;

package/dist/TreeTable/TreeTable.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import classNames from 'classnames';
@@ -9,31 +8,31 @@ import { theme } from '@synerise/ds-core';
 import { v4 as uuid } from 'uuid';
 import DSTable from '../Table';
 import * as S from './TreeTable.styles';
-var INDENT_SIZE = 42; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var INDENT_SIZE = 42;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function TreeTable(props) {
   var className = props.className,
-      selection = props.selection; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selection = props.selection;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var RenderRow = React.useCallback(function (row) {
     return /*#__PURE__*/React.createElement(S.TreeTableRow, {
       className: row.className + " ds-table-row"
     }, row.children);
   }, []);
-  var RenderCell = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var RenderCell = React.useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (cell) {
     var _cell$children$;
-
     var indentLevel = (_cell$children$ = cell.children[0]) == null || (_cell$children$ = _cell$children$.props) == null || (_cell$children$ = _cell$children$.children[0]) == null || (_cell$children$ = _cell$children$.props) == null || (_cell$children$ = _cell$children$.className.split(' ').find(function (value) {
       return value.includes('indent-level-');
     })) == null ? void 0 : _cell$children$.split('-').pop();
-
     if (indentLevel === undefined) {
       return /*#__PURE__*/React.createElement("td", {
         className: cell.className
       }, cell.children);
     }
-
     var maxIndent = parseInt(indentLevel, 10);
     var indents = [].concat(new Array(maxIndent)).map(function (indentElement, index) {
       return /*#__PURE__*/React.createElement(S.Indent, {
@@ -63,9 +62,9 @@ function TreeTable(props) {
     },
     expandIcon: function expandIcon(expandIconProps) {
       var expandable = expandIconProps.expandable,
-          expanded = expandIconProps.expanded,
-          onExpand = expandIconProps.onExpand,
-          record = expandIconProps.record;
+        expanded = expandIconProps.expanded,
+        onExpand = expandIconProps.onExpand,
+        record = expandIconProps.record;
       return expandable ? /*#__PURE__*/React.createElement(S.RowExpander, null, /*#__PURE__*/React.createElement(Button.Expander, {
         expanded: expanded,
         onClick: function onClick(e) {
@@ -81,5 +80,4 @@ function TreeTable(props) {
     })
   }));
 }
-
 export default TreeTable;

package/dist/TreeTable/TreeTable.styles.js

@@ -1,11 +1,9 @@
 import styled from 'styled-components';
 var LEVELS = ['yellow', 'green', 'cyan', 'violet', 'orange', 'purple', 'blue', 'grey'];
-
 var getColor = function getColor(active, level) {
   if (level === LEVELS.indexOf('cyan') && active) return '500';
   return active ? '600' : '200';
 };
-
 export var Indents = styled.div.withConfig({
   displayName: "TreeTablestyles__Indents",
   componentId: "sc-14bdrex-0"