@synerise/ds-table 1.9.11 → 1.9.13

package/dist/TableHeader/TableSelection.js

@@ -1,44 +1,52 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo } from 'react';
-import Button from '@synerise/ds-button';
-import { DropdownMenu } from '@synerise/ds-dropdown';
-import Icon, { OptionVerticalM } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from '../Table.styles';
-import { SELECTION_ALL, SELECTION_INVERT } from '../constants/Table.constants';
-import { useBulkSelectionCount } from '../hooks/useBulkSelection';
-import { useRowKey } from '../hooks/useRowKey';
-import { isRecordSelectable } from '../utils';
-var TableSelection = function TableSelection(_ref) {
-  var _selection$globalSele7;
-  var dataSource = _ref.dataSource,
-    dataSourceFull = _ref.dataSourceFull,
-    selection = _ref.selection,
-    rowKey = _ref.rowKey,
-    locale = _ref.locale,
-    hasSelectionLimit = _ref.hasSelectionLimit,
-    childrenColumnName = _ref.childrenColumnName;
-  var _useRowKey = useRowKey(rowKey),
-    getRowKey = _useRowKey.getRowKey;
-  var allData = dataSourceFull || dataSource;
-  var isShowingSubset = dataSourceFull && dataSourceFull.length !== dataSource.length;
-  var getRowsForKeys = useCallback(function (keys) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { OptionVerticalM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Selection } from "../Table.styles.js";
+import { SELECTION_INVERT, SELECTION_ALL } from "../constants/Table.constants.js";
+import { useBulkSelectionCount } from "../hooks/useBulkSelection/useBulkSelection.js";
+import { useRowKey } from "../hooks/useRowKey/useRowKey.js";
+import "unit-to-px";
+import "@synerise/ds-skeleton";
+import "uuid";
+import "styled-components";
+import "@synerise/ds-typography";
+import "ramda";
+import { isRecordSelectable } from "../utils/isRecordSelectable.js";
+import "../utils/locale.js";
+const TableSelection = ({
+  dataSource,
+  dataSourceFull,
+  selection,
+  rowKey,
+  locale,
+  hasSelectionLimit,
+  childrenColumnName
+}) => {
+  const {
+    getRowKey
+  } = useRowKey(rowKey);
+  const allData = dataSourceFull || dataSource;
+  const isShowingSubset = dataSourceFull && dataSourceFull.length !== dataSource.length;
+  const getRowsForKeys = useCallback((keys) => {
     if (selection) {
-      var rows = [];
-      allData.forEach(function (record) {
-        var rowChildren = record[childrenColumnName];
+      let rows = [];
+      allData.forEach((record) => {
+        const rowChildren = record[childrenColumnName];
         if (Array.isArray(rowChildren)) {
-          rowChildren.forEach(function (child) {
-            var key = getRowKey(child);
+          rowChildren.forEach((child) => {
+            const key = getRowKey(child);
             if (rowChildren && key && keys.includes(key)) {
-              rows = [].concat(rows, [record]);
+              rows = [...rows, record];
             }
           });
         }
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
-          var key = getRowKey(record);
+          const key = getRowKey(record);
           if (key && keys.includes(key)) {
-            rows = [].concat(rows, [record]);
+            rows = [...rows, record];
           }
         }
       });
@@ -46,211 +54,186 @@ var TableSelection = function TableSelection(_ref) {
     }
     return [];
   }, [allData, getRowKey, selection, childrenColumnName]);
-  var selectAll = useCallback(function () {
+  const selectAll = useCallback(() => {
     if (dataSource && selection) {
-      var _selection$globalSele;
-      var selectedRowKeys = selection.selectedRowKeys,
-        checkRowSelectionStatus = selection.checkRowSelectionStatus;
-      var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
-      dataSource.forEach(function (record) {
-        var rowChildren = record[childrenColumnName];
+      const {
+        selectedRowKeys,
+        checkRowSelectionStatus
+      } = selection;
+      let keys = isShowingSubset ? [...selectedRowKeys] : [];
+      dataSource.forEach((record) => {
+        const rowChildren = record[childrenColumnName];
         if (Array.isArray(rowChildren)) {
-          keys = [].concat(keys, rowChildren.reduce(function (acc, child) {
-            var key = getRowKey(child);
-            return key && (isRecordSelectable(child, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [].concat(acc, [key]) : acc;
-          }, []));
+          keys = [...keys, ...rowChildren.reduce((acc, child) => {
+            const key = getRowKey(child);
+            return key && (isRecordSelectable(child, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [...acc, key] : acc;
+          }, [])];
         }
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
-          var key = getRowKey(record);
-          keys = key !== undefined && (isRecordSelectable(record, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [].concat(keys, [key]) : [].concat(keys);
+          const key = getRowKey(record);
+          keys = key !== void 0 && (isRecordSelectable(record, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [...keys, key] : [...keys];
         }
       });
-      var uniqueKeys = Array.from(new Set(keys));
-      var rows = getRowsForKeys(uniqueKeys);
-      (_selection$globalSele = selection.globalSelection) == null || _selection$globalSele.onChange(false);
+      const uniqueKeys = Array.from(new Set(keys));
+      const rows = getRowsForKeys(uniqueKeys);
+      selection.globalSelection?.onChange(false);
       selection.onChange(uniqueKeys, rows);
     }
   }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
-  var unselectAll = useCallback(function () {
+  const unselectAll = useCallback(() => {
     if (selection) {
-      var selectedRowKeys = selection.selectedRowKeys,
-        checkRowSelectionStatus = selection.checkRowSelectionStatus;
-      var keysToUnselect = [];
-      dataSource.forEach(function (record) {
-        var rowChildren = record[childrenColumnName];
+      const {
+        selectedRowKeys,
+        checkRowSelectionStatus
+      } = selection;
+      let keysToUnselect = [];
+      dataSource.forEach((record) => {
+        const rowChildren = record[childrenColumnName];
         if (Array.isArray(rowChildren)) {
-          keysToUnselect = [].concat(keysToUnselect, rowChildren.reduce(function (acc, child) {
-            var key = getRowKey(child);
-            return key && isRecordSelectable(child, checkRowSelectionStatus) ? [].concat(acc, [key]) : acc;
-          }, []));
+          keysToUnselect = [...keysToUnselect, ...rowChildren.reduce((acc, child) => {
+            const key = getRowKey(child);
+            return key && isRecordSelectable(child, checkRowSelectionStatus) ? [...acc, key] : acc;
+          }, [])];
         }
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
-          var key = getRowKey(record);
-          keysToUnselect = key !== undefined && isRecordSelectable(record, checkRowSelectionStatus) ? [].concat(keysToUnselect, [key]) : [].concat(keysToUnselect);
+          const key = getRowKey(record);
+          keysToUnselect = key !== void 0 && isRecordSelectable(record, checkRowSelectionStatus) ? [...keysToUnselect, key] : [...keysToUnselect];
         }
       });
-      var keysLeft = selectedRowKeys.filter(function (key) {
-        return !keysToUnselect.includes(key);
-      });
-      var rows = getRowsForKeys(keysLeft);
+      const keysLeft = selectedRowKeys.filter((key) => !keysToUnselect.includes(key));
+      const rows = getRowsForKeys(keysLeft);
       selection.onChange(keysLeft, rows);
     }
   }, [dataSource, getRowKey, getRowsForKeys, selection, childrenColumnName]);
-  var selectGlobalAll = useCallback(function () {
-    var _selection$globalSele2;
+  const selectGlobalAll = useCallback(() => {
     unselectAll();
-    (_selection$globalSele2 = selection.globalSelection) == null || _selection$globalSele2.onChange(true);
+    selection.globalSelection?.onChange(true);
   }, [unselectAll, selection.globalSelection]);
-  var unselectGlobalAll = useCallback(function () {
-    var _selection$globalSele3;
-    (_selection$globalSele3 = selection.globalSelection) == null || _selection$globalSele3.onChange(false);
+  const unselectGlobalAll = useCallback(() => {
+    selection.globalSelection?.onChange(false);
   }, [selection.globalSelection]);
-  var getSelectableChildren = useCallback(function (children) {
-    var selectionStatusValidator = (selection == null ? void 0 : selection.checkRowSelectionStatus) || undefined;
-    return children ? children.filter(function (child) {
-      return isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== undefined;
-    }) : [];
-  }, [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
-  var selectInvert = useCallback(function () {
+  const getSelectableChildren = useCallback((children) => {
+    const selectionStatusValidator = selection?.checkRowSelectionStatus || void 0;
+    return children ? children.filter((child) => isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== void 0) : [];
+  }, [getRowKey, selection?.checkRowSelectionStatus]);
+  const selectInvert = useCallback(() => {
     if (dataSource && selection) {
-      var selectedRowKeys = selection.selectedRowKeys,
-        checkRowSelectionStatus = selection.checkRowSelectionStatus;
-      var keys = [].concat(selectedRowKeys);
-      dataSource.forEach(function (record) {
-        var rowChildren = record[childrenColumnName];
-        var hasChildren = Array.isArray(rowChildren);
-        var selectableChildren = hasChildren ? getSelectableChildren(rowChildren) : false;
+      const {
+        selectedRowKeys,
+        checkRowSelectionStatus
+      } = selection;
+      let keys = [...selectedRowKeys];
+      dataSource.forEach((record) => {
+        const rowChildren = record[childrenColumnName];
+        const hasChildren = Array.isArray(rowChildren);
+        const selectableChildren = hasChildren ? getSelectableChildren(rowChildren) : false;
         if (selectableChildren) {
-          selectableChildren.forEach(function (child) {
-            var key = getRowKey(child);
+          selectableChildren.forEach((child) => {
+            const key = getRowKey(child);
             if (selectedRowKeys.includes(key)) {
               keys.splice(keys.indexOf(key), 1);
             } else {
-              keys = [].concat(keys, [key]);
+              keys = [...keys, key];
             }
           });
         }
         if (!selectableChildren || selection.independentSelectionExpandedRows) {
-          var key = getRowKey(record);
-          var isSelectable = isRecordSelectable(record, checkRowSelectionStatus);
+          const key = getRowKey(record);
+          const isSelectable = isRecordSelectable(record, checkRowSelectionStatus);
           if (!isSelectable) {
             return;
           }
           if (selectedRowKeys.includes(key)) {
             keys.splice(keys.indexOf(key), 1);
           } else {
-            keys = [].concat(keys, [key]);
+            keys = [...keys, key];
           }
         }
       });
-      var rows = getRowsForKeys(keys);
+      const rows = getRowsForKeys(keys);
       selection.onChange(keys, rows);
     }
   }, [childrenColumnName, dataSource, selection, getRowsForKeys, getSelectableChildren, getRowKey]);
-  var _useBulkSelectionCoun = useBulkSelectionCount({
-      dataSource: dataSource,
-      selection: selection,
-      childrenColumnName: childrenColumnName,
-      rowKey: rowKey
-    }),
-    allRecordsCount = _useBulkSelectionCoun.allRecordsCount,
-    selectableRecordsCount = _useBulkSelectionCoun.selectableRecordsCount,
-    selectableAndSelectedRecordsCount = _useBulkSelectionCoun.selectableAndSelectedRecordsCount,
-    selectedRecordsCount = _useBulkSelectionCoun.selectedRecordsCount;
-  var isIndeterminate = selectedRecordsCount > 0 && selectableRecordsCount !== selectableAndSelectedRecordsCount;
-  var disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0;
-  var isAllSelected = !disabledBulkSelection && selectableRecordsCount === selectableAndSelectedRecordsCount;
-  var isAnySelected = allRecordsCount > 0 && selectedRecordsCount > 0;
-  var selectionTooltipTitle = useMemo(function () {
+  const {
+    allRecordsCount,
+    selectableRecordsCount,
+    selectableAndSelectedRecordsCount,
+    selectedRecordsCount
+  } = useBulkSelectionCount({
+    dataSource,
+    selection,
+    childrenColumnName,
+    rowKey
+  });
+  const isIndeterminate = selectedRecordsCount > 0 && selectableRecordsCount !== selectableAndSelectedRecordsCount;
+  const disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0;
+  const isAllSelected = !disabledBulkSelection && selectableRecordsCount === selectableAndSelectedRecordsCount;
+  const isAnySelected = allRecordsCount > 0 && selectedRecordsCount > 0;
+  const selectionTooltipTitle = useMemo(() => {
     if (selection.globalSelection) {
-      return selection.globalSelection.isSelected ? locale == null ? void 0 : locale.unselectGlobalAll : locale == null ? void 0 : locale.selectGlobalAll;
+      return selection.globalSelection.isSelected ? locale?.unselectGlobalAll : locale?.selectGlobalAll;
     }
-    return isAllSelected ? locale == null ? void 0 : locale.unselectAll : locale == null ? void 0 : locale.selectAllTooltip;
-  }, [isAllSelected, locale == null ? void 0 : locale.selectAllTooltip, locale == null ? void 0 : locale.selectGlobalAll, locale == null ? void 0 : locale.unselectAll, locale == null ? void 0 : locale.unselectGlobalAll, selection.globalSelection]);
-  var dropdownDataSource = useMemo(function () {
-    var _selection$globalSele4, _selection$selections;
-    var isGlobalAllSelected = (_selection$globalSele4 = selection.globalSelection) == null ? void 0 : _selection$globalSele4.isSelected;
-    var globalSelectionItem = selection.globalSelection ? [isGlobalAllSelected ? {
+    return isAllSelected ? locale?.unselectAll : locale?.selectAllTooltip;
+  }, [isAllSelected, locale?.selectAllTooltip, locale?.selectGlobalAll, locale?.unselectAll, locale?.unselectGlobalAll, selection.globalSelection]);
+  const dropdownDataSource = useMemo(() => {
+    const isGlobalAllSelected = selection.globalSelection?.isSelected;
+    const globalSelectionItem = selection.globalSelection ? [isGlobalAllSelected ? {
       onClick: unselectGlobalAll,
-      text: locale == null ? void 0 : locale.unselectGlobalAll
+      text: locale?.unselectGlobalAll
     } : {
       onClick: selectGlobalAll,
-      text: locale == null ? void 0 : locale.selectGlobalAll
+      text: locale?.selectGlobalAll
     }] : [];
-    var menuItems = selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).flatMap(function (selectionMenuElement) {
+    const menuItems = selection?.selections?.filter(Boolean).flatMap((selectionMenuElement) => {
       switch (selectionMenuElement) {
-        case SELECTION_ALL:
-          {
-            var items = [];
-            if (!isAllSelected && !hasSelectionLimit) {
-              items.push({
-                onClick: selectAll,
-                text: locale == null ? void 0 : locale.selectAll
-              });
-            }
-            if (isAnySelected) {
-              items.push({
-                onClick: unselectAll,
-                text: locale == null ? void 0 : locale.unselectAll
-              });
-            }
-            return items;
-          }
-        case SELECTION_INVERT:
-          {
-            return !hasSelectionLimit ? {
-              onClick: selectInvert,
-              text: locale == null ? void 0 : locale.selectInvert
-            } : [];
+        case SELECTION_ALL: {
+          const items = [];
+          if (!isAllSelected && !hasSelectionLimit) {
+            items.push({
+              onClick: selectAll,
+              text: locale?.selectAll
+            });
           }
-        default:
-          {
-            var sel = selectionMenuElement;
-            return _extends({}, sel, {
-              text: sel.label
+          if (isAnySelected) {
+            items.push({
+              onClick: unselectAll,
+              text: locale?.unselectAll
             });
           }
+          return items;
+        }
+        case SELECTION_INVERT: {
+          return !hasSelectionLimit ? {
+            onClick: selectInvert,
+            text: locale?.selectInvert
+          } : [];
+        }
+        default: {
+          const sel = selectionMenuElement;
+          return {
+            ...sel,
+            text: sel.label
+          };
+        }
       }
     });
-    return [].concat(globalSelectionItem, menuItems || []);
-  }, [selection.globalSelection, selection == null ? void 0 : selection.selections, unselectGlobalAll, locale == null ? void 0 : locale.unselectGlobalAll, locale == null ? void 0 : locale.selectGlobalAll, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.unselectAll, locale == null ? void 0 : locale.selectInvert, selectGlobalAll, isAllSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
-  var handleBatchSelectionChange = function handleBatchSelectionChange() {
-    var _selection$globalSele5, _selection$globalSele6;
-    var isSelected = (_selection$globalSele5 = (_selection$globalSele6 = selection.globalSelection) == null ? void 0 : _selection$globalSele6.isSelected) != null ? _selection$globalSele5 : isAllSelected;
+    return [...globalSelectionItem, ...menuItems || []];
+  }, [selection.globalSelection, selection?.selections, unselectGlobalAll, locale?.unselectGlobalAll, locale?.selectGlobalAll, locale?.selectAll, locale?.unselectAll, locale?.selectInvert, selectGlobalAll, isAllSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
+  const handleBatchSelectionChange = () => {
+    const isSelected = selection.globalSelection?.isSelected ?? isAllSelected;
     if (selection.globalSelection) {
       isSelected ? unselectGlobalAll() : selectGlobalAll();
     } else {
       isSelected ? unselectAll() : selectAll();
     }
   };
-  return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
-    "data-popup-container": true
-  }, !hasSelectionLimit && /*#__PURE__*/React.createElement(Tooltip, {
-    title: selectionTooltipTitle
-  }, /*#__PURE__*/React.createElement(Button.Checkbox, {
-    disabled: disabledBulkSelection,
-    "data-testid": "ds-table-batch-selection-button",
-    checked: ((_selection$globalSele7 = selection.globalSelection) == null ? void 0 : _selection$globalSele7.isSelected) || isAllSelected,
-    onChange: handleBatchSelectionChange,
-    indeterminate: isIndeterminate
-  })), selection.selections && /*#__PURE__*/React.createElement(DropdownMenu, {
-    disabled: disabledBulkSelection || (dropdownDataSource == null ? void 0 : dropdownDataSource.length) === 0,
-    getPopupContainer: function getPopupContainer() {
-      return document.body;
-    },
-    dataSource: dropdownDataSource || [],
-    popoverProps: {
-      testId: 'table-selection'
-    }
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: locale == null ? void 0 : locale.selectionOptionsTooltip
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: disabledBulkSelection || (dropdownDataSource == null ? void 0 : dropdownDataSource.length) === 0,
-    mode: "single-icon",
-    type: "ghost",
-    "data-testid": "ds-table-batch-selection-options"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(OptionVerticalM, null)
-  }))))) : null;
+  return selection?.selectedRowKeys ? /* @__PURE__ */ jsxs(Selection, { "data-popup-container": true, children: [
+    !hasSelectionLimit && /* @__PURE__ */ jsx(Tooltip, { title: selectionTooltipTitle, children: /* @__PURE__ */ jsx(Button.Checkbox, { disabled: disabledBulkSelection, "data-testid": "ds-table-batch-selection-button", checked: selection.globalSelection?.isSelected || isAllSelected, onChange: handleBatchSelectionChange, indeterminate: isIndeterminate }) }),
+    selection.selections && /* @__PURE__ */ jsx(DropdownMenu, { disabled: disabledBulkSelection || dropdownDataSource?.length === 0, getPopupContainer: () => document.body, dataSource: dropdownDataSource || [], popoverProps: {
+      testId: "table-selection"
+    }, children: /* @__PURE__ */ jsx(Tooltip, { title: locale?.selectionOptionsTooltip, children: /* @__PURE__ */ jsx(Button, { disabled: disabledBulkSelection || dropdownDataSource?.length === 0, mode: "single-icon", type: "ghost", "data-testid": "ds-table-batch-selection-options", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionVerticalM, {}) }) }) }) })
+  ] }) : null;
+};
+export {
+  TableSelection as default
 };
-export default TableSelection;

package/dist/TableHeader/TableSelection.types.d.ts

@@ -1,4 +1,4 @@
-import type { Locale, RowSelection } from '../Table.types';
+import { Locale, RowSelection } from '../Table.types';
 export type TableSelectionProps<T extends object> = {
     selection: RowSelection<T>;
     dataSource: readonly T[];

package/dist/TableHeader/TableSelection.types.js

@@ -1 +1 @@
-export {};
+

package/dist/TreeTable/TreeTable.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import { type DSTableProps } from '../Table.types';
+import { default as React } from 'react';
+import { DSTableProps } from '../Table.types';
 declare function TreeTable<T extends object = any>(props: DSTableProps<T>): React.ReactElement;
 export default TreeTable;

package/dist/TreeTable/TreeTable.js

@@ -1,83 +1,56 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classNames from 'classnames';
-import React from 'react';
-import { v4 as uuid } from 'uuid';
-import Button from '@synerise/ds-button';
-import { theme } from '@synerise/ds-core';
-import '@synerise/ds-core/dist/js/style';
-import Icon, { ChildRowLeftDownM } from '@synerise/ds-icon';
-import DSTable from '../Table';
-import * as S from './TreeTable.styles';
-var INDENT_SIZE = 42;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import React from "react";
+import { v4 } from "uuid";
+import Button from "@synerise/ds-button";
+import { theme } from "@synerise/ds-core";
+import Icon, { ChildRowLeftDownM } from "@synerise/ds-icon";
+import DSTable from "../Table.js";
+import { TreeTableRow, Indent, TreeTableCell, Indents, RowExpander } from "./TreeTable.styles.js";
+const INDENT_SIZE = 42;
 function TreeTable(props) {
-  var className = props.className,
-    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);
+  const {
+    className,
+    selection
+  } = props;
+  const RenderRow = React.useCallback((row) => {
+    return /* @__PURE__ */ jsx(TreeTableRow, { className: `${row.className} ds-table-row`, children: row.children });
   }, []);
-  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, {
-        key: uuid(),
-        width: INDENT_SIZE,
-        level: index,
-        active: index + 1 === maxIndent
-      });
-    });
-    return /*#__PURE__*/React.createElement(S.TreeTableCell, {
-      className: cell.className + " ds-table-cell"
-    }, /*#__PURE__*/React.createElement(S.Indents, {
-      width: indents.length * INDENT_SIZE,
-      withSelection: Boolean(selection)
-    }, indents), cell.children);
-  }, [selection]);
-  return /*#__PURE__*/React.createElement(DSTable, _extends({}, props, {
-    indentSize: INDENT_SIZE,
-    components: {
-      body: {
-        row: RenderRow,
-        cell: RenderCell
+  const RenderCell = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (cell) => {
+      const indentLevel = cell.children[0]?.props?.children[0]?.props?.className.split(" ").find((value) => value.includes("indent-level-"))?.split("-").pop();
+      if (indentLevel === void 0) {
+        return /* @__PURE__ */ jsx("td", { className: cell.className, children: cell.children });
       }
+      const maxIndent = parseInt(indentLevel, 10);
+      const indents = [...new Array(maxIndent)].map((indentElement, index) => /* @__PURE__ */ jsx(Indent, { width: INDENT_SIZE, level: index, active: index + 1 === maxIndent }, v4()));
+      return /* @__PURE__ */ jsxs(TreeTableCell, { className: `${cell.className} ds-table-cell`, children: [
+        /* @__PURE__ */ jsx(Indents, { width: indents.length * INDENT_SIZE, withSelection: Boolean(selection), children: indents }),
+        cell.children
+      ] });
     },
-    expandable: {
-      expandIconColumnIndex: 0
-    },
-    expandIcon: function expandIcon(expandIconProps) {
-      var expandable = expandIconProps.expandable,
-        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) {
-          return onExpand(record, e);
-        }
-      })) : /*#__PURE__*/React.createElement(S.RowExpander, null, /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(ChildRowLeftDownM, null),
-        color: theme.palette['grey-400']
-      }));
-    },
-    className: classNames(className, 'ds-tree-table', {
-      'ds-tree-table-with-selection': Boolean(selection)
-    })
-  }));
+    [selection]
+  );
+  return /* @__PURE__ */ jsx(DSTable, { ...props, indentSize: INDENT_SIZE, components: {
+    body: {
+      row: RenderRow,
+      cell: RenderCell
+    }
+  }, expandable: {
+    expandIconColumnIndex: 0
+  }, expandIcon: (expandIconProps) => {
+    const {
+      expandable,
+      expanded,
+      onExpand,
+      record
+    } = expandIconProps;
+    return expandable ? /* @__PURE__ */ jsx(RowExpander, { children: /* @__PURE__ */ jsx(Button.Expander, { expanded, onClick: (e) => onExpand(record, e) }) }) : /* @__PURE__ */ jsx(RowExpander, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ChildRowLeftDownM, {}), color: theme.palette["grey-400"] }) });
+  }, className: classNames(className, "ds-tree-table", {
+    "ds-tree-table-with-selection": Boolean(selection)
+  }) });
 }
-export default TreeTable;
+export {
+  TreeTable as default
+};

package/dist/TreeTable/TreeTable.styles.d.ts

@@ -1,12 +1,12 @@
-export declare const Indents: import("styled-components").StyledComponent<"div", any, {
+export declare const Indents: import('styled-components').StyledComponent<"div", any, {
     width: number;
     withSelection: boolean;
 }, never>;
-export declare const Indent: import("styled-components").StyledComponent<"span", any, {
+export declare const Indent: import('styled-components').StyledComponent<"span", any, {
     width: number;
     active: boolean;
     level: number;
 }, never>;
-export declare const RowExpander: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const TreeTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
-export declare const TreeTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const RowExpander: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const TreeTableRow: import('styled-components').StyledComponent<"tr", any, {}, never>;
+export declare const TreeTableCell: import('styled-components').StyledComponent<"td", any, {}, never>;