hrm_ui_lib 2.1.0 → 2.2.0

package/components/Table/Header.js

@@ -1,123 +1,21 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { CHECKBOX_DEFAULT_WIDTH, calcColumnWidth, CHECKBOX_HEADER_ID } from './utils.js';
-import { Text } from '../Text/Text.js';
-import { IconArrowDown } from '../SVGIcons/IconArrowDown.js';
-import { IconArrowUp } from '../SVGIcons/IconArrowUp.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import './IndeterminateCheckbox.js';
-import '../../Alert-BslI0aA0.js';
-import '../Alert/consts.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import 'dayjs';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import '../../utils/helpers.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function Header(_ref) {
-  var headerGroup = _ref.headerGroup,
-    tableWidth = _ref.tableWidth,
-    withSelect = _ref.withSelect,
-    _ref$fixedHeader = _ref.fixedHeader,
-    fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
-  return /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
-    className: classNames({
-      fixed_header: fixedHeader
-    })
-  }), headerGroup.headers.map(function (_ref2, i, arr) {
-    var _arr;
-    var id = _ref2.id,
-      minWidth = _ref2.minWidth,
-      maxWidth = _ref2.maxWidth,
-      width = _ref2.width,
-      widthInPercent = _ref2.widthInPercent,
-      getHeaderProps = _ref2.getHeaderProps,
-      fixed = _ref2.fixed,
-      columnProps = _ref2.columnProps,
-      render = _ref2.render,
-      isSorted = _ref2.isSorted,
-      isSortedDesc = _ref2.isSortedDesc,
-      getSortByToggleProps = _ref2.getSortByToggleProps;
-    var isSelection = id === CHECKBOX_HEADER_ID;
-    var style = _objectSpread(_objectSpread(_objectSpread({
-      width: isSelection ? CHECKBOX_DEFAULT_WIDTH : calcColumnWidth(widthInPercent, tableWidth),
-      left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
-    }, !isSelection && minWidth ? {
-      minWidth: minWidth
-    } : {}), !isSelection && maxWidth ? {
-      maxWidth: maxWidth
-    } : {}), !isSelection && width ? {
-      width: width
-    } : {});
-    return /*#__PURE__*/React.createElement("th", _extends({
-      key: i
-    }, getHeaderProps(columnProps !== null && columnProps !== void 0 && columnProps.sortable ? getSortByToggleProps() : undefined), {
-      className: classNames({
-        fixed_column_left: fixed === 'left',
-        fixed_column_right: fixed === 'right',
-        fixed_checkbox: isSelection && ((_arr = arr[i + 1]) === null || _arr === void 0 ? void 0 : _arr.fixed) === 'left',
-        pointer: columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable
-      }),
-      style: style
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "flexbox align-items--center"
-    }, /*#__PURE__*/React.createElement(Text, {
-      weight: "bold",
-      className: "table-header-title"
-    }, render('Header')), isSorted && isSortedDesc && /*#__PURE__*/React.createElement(IconArrowDown, {
-      size: "xsmall",
-      className: "ml-4"
-    }), isSorted && !isSortedDesc && /*#__PURE__*/React.createElement(IconArrowUp, {
-      size: "xsmall",
-      className: "ml-4"
-    }), !isSorted && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) && /*#__PURE__*/React.createElement(IconArrowDown, {
-      size: "xsmall",
-      className: "ml-4 unsorted__icon"
-    })));
-  }));
+import { calcColumnWidth, CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils';
+import { Text } from '../Text';
+import IconArrowDown from '../SVGIcons/IconArrowDown';
+import IconArrowUp from '../SVGIcons/IconArrowUp';
+export function Header({ headerGroup, tableWidth, withSelect, fixedHeader = false }) {
+    return (_jsx("tr", Object.assign({}, headerGroup.getHeaderGroupProps(), { className: classNames({ fixed_header: fixedHeader }), children: headerGroup.headers.map(({ id, minWidth, maxWidth, width, widthInPercent, getHeaderProps, fixed, columnProps, render, isSorted, isSortedDesc, getSortByToggleProps }, i, arr) => {
+            var _a;
+            const isSelection = id === CHECKBOX_HEADER_ID;
+            const style = Object.assign(Object.assign(Object.assign({ width: isSelection
+                    ? CHECKBOX_DEFAULT_WIDTH
+                    : calcColumnWidth(widthInPercent, tableWidth), left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0 }, (!isSelection && minWidth ? { minWidth } : {})), (!isSelection && maxWidth ? { maxWidth } : {})), (!isSelection && width ? { width } : {}));
+            return (_jsx("th", Object.assign({}, getHeaderProps((columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) ? getSortByToggleProps() : undefined), { className: classNames({
+                    fixed_column_left: fixed === 'left',
+                    fixed_column_right: fixed === 'right',
+                    fixed_checkbox: isSelection && ((_a = arr[i + 1]) === null || _a === void 0 ? void 0 : _a.fixed) === 'left',
+                    pointer: columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable
+                }), style: style, children: _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Text, { weight: "bold", className: "table-header-title", children: render('Header') }), isSorted && isSortedDesc && _jsx(IconArrowDown, { size: "xsmall", className: "ml-4" }), isSorted && !isSortedDesc && _jsx(IconArrowUp, { size: "xsmall", className: "ml-4" }), !isSorted && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) && (_jsx(IconArrowDown, { size: "xsmall", className: "ml-4 unsorted__icon" }))] }) }), i));
+        }) })));
 }
-
-export { Header };

package/components/Table/IndeterminateCheckbox.js

@@ -1,78 +1,15 @@
-import React, { forwardRef, useRef, useEffect } from 'react';
-import { C as Checkbox } from '../../Alert-BslI0aA0.js';
-import '@babel/runtime/helpers/extends';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-
-var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var indeterminate = _ref.indeterminate,
-    checked = _ref.checked,
-    onChange = _ref.onChange;
-  var defaultRef = useRef(null);
-  var resolvedRef = ref || defaultRef;
-  useEffect(function () {
-    resolvedRef.current.indeterminate = indeterminate;
-  }, [resolvedRef, indeterminate]);
-  var handleChange = function handleChange(v) {
-    onChange({
-      target: {
-        checked: v
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(Checkbox, {
-    value: checked,
-    onClick: handleChange,
-    ref: resolvedRef
-  });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { Checkbox } from '../Checkbox';
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange }, ref) => {
+    const defaultRef = useRef(null);
+    const resolvedRef = ref || defaultRef;
+    useEffect(() => {
+        resolvedRef.current.indeterminate = indeterminate;
+    }, [resolvedRef, indeterminate]);
+    const handleChange = (v) => {
+        onChange({ target: { checked: v } });
+    };
+    return _jsx(Checkbox, { value: checked, onClick: handleChange, ref: resolvedRef });
 });
 IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';
-
-export { IndeterminateCheckbox };

package/components/Table/Row.js

@@ -1,94 +1,18 @@
-import _extends from '@babel/runtime/helpers/extends';
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import classNames from 'classnames';
-import { CHECKBOX_HEADER_ID, CHECKBOX_DEFAULT_WIDTH } from './utils.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import './IndeterminateCheckbox.js';
-import '../../Alert-BslI0aA0.js';
-import '../Alert/consts.js';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-
-function Row(_ref) {
-  var row = _ref.row,
-    selectedFlatRows = _ref.selectedFlatRows,
-    withSelect = _ref.withSelect,
-    handleRowClick = _ref.handleRowClick;
-  var isRowSelected = useMemo(function () {
-    return selectedFlatRows.find(function (r) {
-      return r.id === row.id;
-    });
-  }, [selectedFlatRows]);
-  return /*#__PURE__*/React.createElement("tr", _extends({}, row.getRowProps(), {
-    className: classNames({
-      selected: Boolean(isRowSelected)
-    }),
-    onClick: function onClick() {
-      return handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original);
-    }
-  }), row.cells.map(function (_ref2, i, arr) {
-    var _arr$column;
-    var getCellProps = _ref2.getCellProps,
-      column = _ref2.column,
-      render = _ref2.render;
-    var isSelection = column.id === CHECKBOX_HEADER_ID;
-    return /*#__PURE__*/React.createElement("td", _extends({
-      key: i
-    }, getCellProps(), {
-      style: {
-        left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
-      },
-      className: classNames({
-        fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',
-        fixed_column_right: (column === null || column === void 0 ? void 0 : column.fixed) === 'right',
-        fixed_checkbox: isSelection && ((_arr$column = arr[i + 1].column) === null || _arr$column === void 0 ? void 0 : _arr$column.fixed) === 'left'
-      })
-    }), render('Cell'));
-  }));
+import { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils';
+export function Row({ row, selectedFlatRows, withSelect, handleRowClick }) {
+    const isRowSelected = useMemo(() => selectedFlatRows.find((r) => r.id === row.id), [selectedFlatRows]);
+    return (_jsx("tr", Object.assign({}, row.getRowProps(), { className: classNames({ selected: Boolean(isRowSelected) }), onClick: () => handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original), children: row.cells.map(({ getCellProps, column, render }, i, arr) => {
+            var _a;
+            const isSelection = column.id === CHECKBOX_HEADER_ID;
+            return (_jsx("td", Object.assign({}, getCellProps(), { style: {
+                    left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
+                }, className: classNames({
+                    fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',
+                    fixed_column_right: (column === null || column === void 0 ? void 0 : column.fixed) === 'right',
+                    fixed_checkbox: isSelection && ((_a = arr[i + 1].column) === null || _a === void 0 ? void 0 : _a.fixed) === 'left'
+                }), children: render('Cell') }), i));
+        }) })));
 }
-
-export { Row };

package/components/Table/Table.js

@@ -1,163 +1,63 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useState, useMemo, useEffect } from 'react';
-import { useTable, useSortBy, useRowSelect } from 'react-table';
-import { setSelectedRows } from './utils.js';
-import { Row } from './Row.js';
-import { Header } from './Header.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSortBy, useTable, useRowSelect } from 'react-table';
+import { setSelectedRows } from './utils';
+import { Row } from './Row';
+import { Header } from './Header';
 import classNames from 'classnames';
-import { useDispatchEventOnScroll } from '../../hooks/useDispatchEventOnScroll.js';
-import './IndeterminateCheckbox.js';
-import '../../Alert-BslI0aA0.js';
-import '../Alert/consts.js';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import '../SVGIcons/IconArrowDown.js';
-import '../SVGIcons/IconArrowUp.js';
-
-function Table(_ref) {
-  var columns = _ref.columns,
-    data = _ref.data,
-    onChange = _ref.onChange,
-    fixedHeader = _ref.fixedHeader,
-    _ref$withSelect = _ref.withSelect,
-    withSelect = _ref$withSelect === void 0 ? false : _ref$withSelect,
-    handleRowClick = _ref.handleRowClick,
-    className = _ref.className,
-    containerRefHandler = _ref.containerRefHandler;
-  var tableRef = useRef(null);
-  var _useState = useState(400),
-    _useState2 = _slicedToArray(_useState, 2),
-    tableWidth = _useState2[0],
-    setTableWidth = _useState2[1];
-  var dispatchScrollEvent = useDispatchEventOnScroll();
-  var sortedColumns = useMemo(function () {
-    var condition1 = function condition1(item) {
-      return item.fixed === 'left';
-    }; // Move even numbers to the start
-    var condition2 = function condition2(item) {
-      return item.fixed === 'right';
-    }; // Move numbers greater than 5 to the end
-
-    // Custom sorting function
-    columns.sort(function (a, b) {
-      if (condition1(a) && !condition1(b)) {
-        return -1; // Move 'a' to the start
-      } else if (!condition1(a) && condition1(b)) {
-        return 1; // Move 'b' to the start
-      } else if (condition2(a) && !condition2(b)) {
-        return 1; // Move 'a' to the end
-      } else if (!condition2(a) && condition2(b)) {
-        return -1; // Move 'b' to the end
-      } else {
-        return 0; // Their order doesn't matter
-      }
-    });
-    return _toConsumableArray(columns);
-  }, [columns]);
-  var _ref2 = useTable({
-      columns: sortedColumns,
-      data: data
-    }, useSortBy, useRowSelect, function (hooks) {
-      return setSelectedRows(hooks, withSelect);
-    }),
-    getTableProps = _ref2.getTableProps,
-    getTableBodyProps = _ref2.getTableBodyProps,
-    selectedFlatRows = _ref2.selectedFlatRows,
-    headerGroups = _ref2.headerGroups,
-    rows = _ref2.rows,
-    prepareRow = _ref2.prepareRow,
-    state = _ref2.state;
-  useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(state);
-  }, [JSON.stringify(state)]);
-  var handleResize = function handleResize() {
-    if (tableRef.current) {
-      var _tableRef$current;
-      setTableWidth((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.offsetWidth);
-    }
-  };
-  useEffect(function () {
-    window.addEventListener('resize', handleResize);
-    if (tableRef.current) {
-      var _tableRef$current2;
-      setTableWidth((_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.offsetWidth);
-    }
-    return function () {
-      window.removeEventListener('resize', handleResize);
+import { useDispatchEventOnScroll } from '../../hooks/useDispatchEventOnScroll';
+export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, containerRefHandler }) {
+    const tableRef = useRef(null);
+    const [tableWidth, setTableWidth] = useState(400);
+    const dispatchScrollEvent = useDispatchEventOnScroll();
+    const sortedColumns = useMemo(() => {
+        const condition1 = (item) => item.fixed === 'left'; // Move even numbers to the start
+        const condition2 = (item) => item.fixed === 'right'; // Move numbers greater than 5 to the end
+        // Custom sorting function
+        columns.sort((a, b) => {
+            if (condition1(a) && !condition1(b)) {
+                return -1; // Move 'a' to the start
+            }
+            else if (!condition1(a) && condition1(b)) {
+                return 1; // Move 'b' to the start
+            }
+            else if (condition2(a) && !condition2(b)) {
+                return 1; // Move 'a' to the end
+            }
+            else if (!condition2(a) && condition2(b)) {
+                return -1; // Move 'b' to the end
+            }
+            else {
+                return 0; // Their order doesn't matter
+            }
+        });
+        return [...columns];
+    }, [columns]);
+    const { getTableProps, getTableBodyProps, selectedFlatRows, headerGroups, rows, prepareRow, state } = useTable({
+        columns: sortedColumns,
+        data
+    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect));
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(state);
+    }, [JSON.stringify(state)]);
+    const handleResize = () => {
+        var _a;
+        if (tableRef.current) {
+            setTableWidth((_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+        }
     };
-  }, [tableRef.current]);
-  return /*#__PURE__*/React.createElement("div", {
-    onScroll: dispatchScrollEvent,
-    ref: containerRefHandler,
-    className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className),
-    style: {
-      maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y
-    }
-  }, /*#__PURE__*/React.createElement("table", _extends({}, getTableProps(), {
-    ref: tableRef
-  }), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup, i) {
-    return /*#__PURE__*/React.createElement(Header, {
-      key: i,
-      withSelect: withSelect,
-      fixedHeader: Boolean(fixedHeader),
-      headerGroup: headerGroup,
-      tableWidth: tableWidth
-    });
-  })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
-    prepareRow(row);
-    return /*#__PURE__*/React.createElement(Row, {
-      handleRowClick: handleRowClick,
-      withSelect: withSelect,
-      selectedFlatRows: selectedFlatRows,
-      row: row,
-      key: row.id
-    });
-  }))));
+    useEffect(() => {
+        var _a;
+        window.addEventListener('resize', handleResize);
+        if (tableRef.current) {
+            setTableWidth((_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [tableRef.current]);
+    return (_jsx("div", { onScroll: dispatchScrollEvent, ref: containerRefHandler, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className), style: { maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y }, children: _jsxs("table", Object.assign({}, getTableProps(), { ref: tableRef, children: [_jsx("thead", { children: headerGroups.map((headerGroup, i) => (_jsx(Header, { withSelect: withSelect, fixedHeader: Boolean(fixedHeader), headerGroup: headerGroup, tableWidth: tableWidth }, i))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
+                        prepareRow(row);
+                        return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row }, row.id));
+                    }) }))] })) }));
 }
-
-export { Table };

package/components/Table/index.js

@@ -1,61 +1 @@
-export { Table } from './Table.js';
-import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react';
-import 'react-table';
-import './utils.js';
-import './IndeterminateCheckbox.js';
-import '../../Alert-BslI0aA0.js';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import './Row.js';
-import './Header.js';
-import '../SVGIcons/IconArrowDown.js';
-import '../SVGIcons/IconArrowUp.js';
-import '../../hooks/useDispatchEventOnScroll.js';
+export * from './Table';

package/components/Table/types.js

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