hrm_ui_lib 2.0.0-alpha.2 → 2.0.0-alpha.21

package/components/Tab/Tab.js

@@ -17,7 +17,9 @@ var Tab = function Tab(props) {
     className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('tabs-container', className)
+    className: "tabs-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('tabs-header-container', className)
   }, tabItems.map(function (tabInfo) {
     return /*#__PURE__*/React.createElement(TabItem, _extends({
       label: tabInfo.label,
@@ -31,7 +33,7 @@ var Tab = function Tab(props) {
       dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || '',
       disabled: tabInfo.disabled
     }, rest));
-  }));
+  })));
 };
 
 export { Tab };

package/components/Table/Header.d.ts

@@ -5,6 +5,7 @@ type Props = {
     withSelect: boolean;
     tableWidth: number;
     headerGroup: HeaderGroup;
+    uniqueKey: string;
 };
-export declare function Header({ headerGroup, tableWidth, withSelect, fixedHeader }: Props): ReactElement;
+export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader }: Props): ReactElement;
 export {};

package/components/Table/Header.js

@@ -1,5 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import classNames from 'classnames';
 import { CHECKBOX_DEFAULT_WIDTH, calcColumnWidth, CHECKBOX_HEADER_ID } from './utils.js';
@@ -8,9 +9,8 @@ import { IconArrowDown } from '../SVGIcons/IconArrowDown.js';
 import { IconArrowUp } from '../SVGIcons/IconArrowUp.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import './IndeterminateCheckbox.js';
-import '../../Alert-w8FkRd9I.js';
+import '../../Alert--0rz5XL1.js';
 import '../Alert/consts.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import 'dayjs';
 import '../../helperComponents/Loader/Loader.js';
 import '@babel/runtime/helpers/slicedToArray';
@@ -22,12 +22,13 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useHideBodyScroll.js';
@@ -41,11 +42,12 @@ import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import '../../utils/helpers.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -55,15 +57,21 @@ import '../SVGIcons/IconArrowDownloadFilled.js';
 import '../../helpers/download-file.js';
 import '../Button/consts.js';
 
+var _excluded = ["key"],
+  _excluded2 = ["key"];
 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,
+    uniqueKey = _ref.uniqueKey,
     _ref$fixedHeader = _ref.fixedHeader,
     fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
-  return /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps();
+    _headerGroup$getHeade.key;
+    var headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({}, headerGroupProps, {
     className: classNames({
       fixed_header: fixedHeader
     })
@@ -92,9 +100,12 @@ function Header(_ref) {
     } : {}), !isSelection && width ? {
       width: width
     } : {});
+    var _getHeaderProps = getHeaderProps(columnProps !== null && columnProps !== void 0 && columnProps.sortable ? getSortByToggleProps() : undefined);
+      _getHeaderProps.key;
+      var headProps = _objectWithoutProperties(_getHeaderProps, _excluded2);
     return /*#__PURE__*/React.createElement("th", _extends({
-      key: i
-    }, getHeaderProps(columnProps !== null && columnProps !== void 0 && columnProps.sortable ? getSortByToggleProps() : undefined), {
+      key: "table_head_".concat(uniqueKey, "_").concat(i)
+    }, headProps, {
       className: classNames({
         fixed_column_left: fixed === 'left',
         fixed_column_right: fixed === 'right',

package/components/Table/IndeterminateCheckbox.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type IndeterminateCheckboxProps = {
     indeterminate: boolean;
     checked: boolean;
+    disabled: boolean;
     onChange: (e: {
         target: {
             checked: boolean;

package/components/Table/IndeterminateCheckbox.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useEffect } from 'react';
-import { C as Checkbox } from '../../Alert-w8FkRd9I.js';
+import { C as Checkbox } from '../../Alert--0rz5XL1.js';
 import '@babel/runtime/helpers/extends';
 import '../Alert/consts.js';
 import 'classnames';
@@ -19,12 +19,13 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useHideBodyScroll.js';
@@ -37,11 +38,12 @@ import '../../hooks/useGetElemPositions.js';
 import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -54,7 +56,9 @@ import '../Button/consts.js';
 var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var indeterminate = _ref.indeterminate,
     checked = _ref.checked,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var defaultRef = useRef(null);
   var resolvedRef = ref || defaultRef;
   useEffect(function () {
@@ -68,9 +72,11 @@ var IndeterminateCheckbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
   };
   return /*#__PURE__*/React.createElement(Checkbox, {
+    disabled: disabled,
     value: checked,
     onClick: handleChange,
-    ref: resolvedRef
+    ref: resolvedRef,
+    stopPropagation: true
   });
 });
 IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

package/components/Table/Row.d.ts

@@ -5,6 +5,7 @@ type Props = {
     handleRowClick?: (row: any) => void;
     withSelect: boolean;
     selectedFlatRows: RowType[];
+    uniqueKey: string;
 };
-export declare function Row({ row, selectedFlatRows, withSelect, handleRowClick }: Props): ReactElement;
+export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }: Props): ReactElement;
 export {};

package/components/Table/Row.js

@@ -1,16 +1,16 @@
 import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { 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-w8FkRd9I.js';
+import '../../Alert--0rz5XL1.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';
@@ -21,12 +21,13 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useHideBodyScroll.js';
@@ -39,11 +40,12 @@ import '../../hooks/useGetElemPositions.js';
 import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -53,17 +55,23 @@ import '../SVGIcons/IconArrowDownloadFilled.js';
 import '../../helpers/download-file.js';
 import '../Button/consts.js';
 
+var _excluded = ["key"],
+  _excluded2 = ["key"];
 function Row(_ref) {
   var row = _ref.row,
     selectedFlatRows = _ref.selectedFlatRows,
     withSelect = _ref.withSelect,
+    uniqueKey = _ref.uniqueKey,
     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(), {
+  var _row$getRowProps = row.getRowProps();
+    _row$getRowProps.key;
+    var rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
     className: classNames({
       selected: Boolean(isRowSelected)
     }),
@@ -76,9 +84,12 @@ function Row(_ref) {
       column = _ref2.column,
       render = _ref2.render;
     var isSelection = column.id === CHECKBOX_HEADER_ID;
+    var _getCellProps = getCellProps();
+      _getCellProps.key;
+      var cellProps = _objectWithoutProperties(_getCellProps, _excluded2);
     return /*#__PURE__*/React.createElement("td", _extends({
-      key: i
-    }, getCellProps(), {
+      key: "table_cell_".concat(uniqueKey, "_").concat(i)
+    }, cellProps, {
       style: {
         left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
       },
@@ -86,7 +97,11 @@ function Row(_ref) {
         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'
-      })
+      }),
+      onClick: function onClick(event) {
+        if (isSelection) event.stopPropagation();
+        cellProps.onClick && cellProps.onClick(event);
+      }
     }), render('Cell'));
   }));
 }

package/components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TTableProps } from './types';
-export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, containerRefHandler }: TTableProps): ReactElement;
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons }: TTableProps): ReactElement;

package/components/Table/Table.js

@@ -1,18 +1,21 @@
 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 React, { useRef, useState, useId, useMemo, useCallback, 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 classNames from 'classnames';
 import { useDispatchEventOnScroll } from '../../hooks/useDispatchEventOnScroll.js';
+import { B as Button } from '../../Alert--0rz5XL1.js';
+import { TABLE_LOCALIZATION } from './localization.js';
+import { setTranslationValue } from '../../utils/helpers.js';
+import { IconCheckmark } from '../SVGIcons/IconCheckmark.js';
+import { IconDismiss } from '../SVGIcons/IconDismiss.js';
 import './IndeterminateCheckbox.js';
-import '../../Alert-w8FkRd9I.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';
@@ -25,16 +28,16 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 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';
@@ -43,11 +46,12 @@ import '../../hooks/useGetElemPositions.js';
 import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -68,12 +72,16 @@ function Table(_ref) {
     withSelect = _ref$withSelect === void 0 ? false : _ref$withSelect,
     handleRowClick = _ref.handleRowClick,
     className = _ref.className,
-    containerRefHandler = _ref.containerRefHandler;
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'en' : _ref$language,
+    containerRefHandler = _ref.containerRefHandler,
+    submitButtons = _ref.submitButtons;
   var tableRef = useRef(null);
   var _useState = useState(400),
     _useState2 = _slicedToArray(_useState, 2),
     tableWidth = _useState2[0],
     setTableWidth = _useState2[1];
+  var uniqueKey = useId();
   var dispatchScrollEvent = useDispatchEventOnScroll();
   var sortedColumns = useMemo(function () {
     var condition1 = function condition1(item) {
@@ -111,16 +119,17 @@ function Table(_ref) {
     headerGroups = _ref2.headerGroups,
     rows = _ref2.rows,
     prepareRow = _ref2.prepareRow,
+    toggleAllRowsSelected = _ref2.toggleAllRowsSelected,
     state = _ref2.state;
-  useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(state);
-  }, [JSON.stringify(state)]);
-  var handleResize = function handleResize() {
+  var handleResize = useCallback(function () {
     if (tableRef.current) {
       var _tableRef$current;
       setTableWidth((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.offsetWidth);
     }
-  };
+  }, [tableRef.current]);
+  useEffect(function () {
+    onChange === null || onChange === void 0 || onChange(state);
+  }, [JSON.stringify(state)]);
   useEffect(function () {
     window.addEventListener('resize', handleResize);
     if (tableRef.current) {
@@ -131,6 +140,9 @@ function Table(_ref) {
       window.removeEventListener('resize', handleResize);
     };
   }, [tableRef.current]);
+  var onClearSelectedRows = useCallback(function () {
+    toggleAllRowsSelected(false);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     onScroll: dispatchScrollEvent,
     ref: containerRefHandler,
@@ -138,15 +150,45 @@ function Table(_ref) {
     style: {
       maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y
     }
-  }, /*#__PURE__*/React.createElement("table", _extends({}, getTableProps(), {
+  }, withSelect && selectedFlatRows.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "table-wrapper__selected-rows"
+  }, /*#__PURE__*/React.createElement(Button, {
+    buttonText: setTranslationValue(TABLE_LOCALIZATION[language].n_selected || '', selectedFlatRows.length),
+    onClick: onClearSelectedRows,
+    type: "tertiary",
+    size: "medium",
+    iconProps: {
+      alignment: 'left',
+      Component: IconDismiss
+    }
+  }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(function (_ref3) {
+    var buttonText = _ref3.buttonText,
+      isLoading = _ref3.isLoading,
+      _onClick = _ref3.onClick;
+    return /*#__PURE__*/React.createElement(Button, {
+      iconProps: {
+        alignment: 'left',
+        Component: IconCheckmark
+      },
+      onClick: function onClick(event) {
+        _onClick(event, state, onClearSelectedRows);
+      },
+      buttonText: buttonText || 'Submit',
+      type: "secondary",
+      size: "medium",
+      className: "mr-8",
+      isLoading: isLoading
+    });
+  })), /*#__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,
+      key: "table_head_".concat(uniqueKey, "_").concat(i),
       withSelect: withSelect,
       fixedHeader: Boolean(fixedHeader),
       headerGroup: headerGroup,
-      tableWidth: tableWidth
+      tableWidth: tableWidth,
+      uniqueKey: uniqueKey
     });
   })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     prepareRow(row);
@@ -155,7 +197,8 @@ function Table(_ref) {
       withSelect: withSelect,
       selectedFlatRows: selectedFlatRows,
       row: row,
-      key: row.id
+      key: "table_row_".concat(uniqueKey, "_").concat(row.id),
+      uniqueKey: uniqueKey
     });
   }))));
 }

package/components/Table/index.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-table';
 import './utils.js';
 import './IndeterminateCheckbox.js';
-import '../../Alert-w8FkRd9I.js';
+import '../../Alert--0rz5XL1.js';
 import '../Alert/consts.js';
 import 'classnames';
 import '../Text/Text.js';
@@ -23,12 +23,13 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useHideBodyScroll.js';
@@ -41,11 +42,12 @@ import '../../hooks/useGetElemPositions.js';
 import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -59,3 +61,5 @@ import './Header.js';
 import '../SVGIcons/IconArrowDown.js';
 import '../SVGIcons/IconArrowUp.js';
 import '../../hooks/useDispatchEventOnScroll.js';
+import './localization.js';
+import '../SVGIcons/IconCheckmark.js';

package/components/Table/localization.d.ts

@@ -0,0 +1,5 @@
+export declare const TABLE_LOCALIZATION: {
+    [key: string]: {
+        [key: string]: string;
+    };
+};

package/components/Table/localization.js

@@ -0,0 +1,13 @@
+var TABLE_LOCALIZATION = {
+  en: {
+    n_selected: '%s selected'
+  },
+  ru: {
+    n_selected: '%s выбранно'
+  },
+  hy: {
+    n_selected: '%s ընտրված'
+  }
+};
+
+export { TABLE_LOCALIZATION };

package/components/Table/types.d.ts

@@ -1,4 +1,5 @@
 import { Column, TableState } from 'react-table';
+import { TButtonPropTypes } from '../Button/types';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 export type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 export type TColumnProps = {
@@ -11,6 +12,9 @@ export type TColumnFields = {
     widthInPercent?: IntRange<0, 100>;
 };
 export type TColumn = Column & TColumnFields;
+export interface IButtonPropTypes extends Omit<TButtonPropTypes, 'onClick'> {
+    onClick: (event: TClickEventType, data: any, clearRowSelection?: () => void) => void;
+}
 export type TTableProps = {
     className?: string;
     columns: TColumn[];
@@ -22,6 +26,8 @@ export type TTableProps = {
     handleRowClick?: (row: any) => void;
     onChange?: (state: TableState) => void;
     containerRefHandler?: (ref: HTMLDivElement) => void;
+    language?: string;
+    submitButtons?: IButtonPropTypes[];
 };
 export type SortBy = {
     id: string;

package/components/Table/utils.js

@@ -1,8 +1,8 @@
+import _extends from '@babel/runtime/helpers/extends';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import React from 'react';
 import { IndeterminateCheckbox } from './IndeterminateCheckbox.js';
-import '../../Alert-w8FkRd9I.js';
-import '@babel/runtime/helpers/extends';
+import '../../Alert--0rz5XL1.js';
 import '../Alert/consts.js';
 import 'classnames';
 import '../Text/Text.js';
@@ -20,12 +20,13 @@ import 'react-dropzone';
 import '../SVGIcons/IconUpload.js';
 import '../FileUpload/types.js';
 import '../../helpers/format-date.js';
+import 'dayjs/plugin/utc';
 import '../../helpers/locale.js';
 import '../../type/locale.js';
 import '../../helpers/storage.js';
 import 'react-toastify';
 import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
+import 'motion/react';
 import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useHideBodyScroll.js';
@@ -38,11 +39,12 @@ import '../../hooks/useGetElemPositions.js';
 import '../../hooks/useGetTooltipPosition.js';
 import '../../hooks/useHideOnScroll.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import '../Link/Link.js';
 import '../Popover/PopoverDesktop.js';
 import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
 import '@babel/runtime/helpers/typeof';
 import '../SVGIcons/IconDismissFilled.js';
 import '../SVGIcons/IconDelete.js';
@@ -60,12 +62,38 @@ function setSelectedRows(hooks, withSelect) {
       return [{
         id: CHECKBOX_HEADER_ID,
         Header: function Header(_ref) {
-          var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, getToggleAllRowsSelectedProps());
+          var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+            rows = _ref.rows,
+            state = _ref.state,
+            toggleRowSelected = _ref.toggleRowSelected;
+          var allEnabledRows = rows.filter(function (row) {
+            return 'enableSelection' in row.original ? row.original.enableSelection : true;
+          });
+          var allSelected = allEnabledRows.every(function (row) {
+            return state.selectedRowIds[row.id];
+          });
+          var someSelected = allEnabledRows.some(function (row) {
+            return state.selectedRowIds[row.id];
+          });
+          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, _extends({}, getToggleAllRowsSelectedProps({
+            checked: allSelected,
+            indeterminate: !allSelected && someSelected,
+            disabled: allEnabledRows.length === 0
+          }), {
+            onChange: function onChange(e) {
+              var checked = e.target.checked;
+              allEnabledRows.forEach(function (row) {
+                toggleRowSelected(row.id, checked);
+              });
+            }
+          }));
         },
         Cell: function Cell(_ref2) {
           var row = _ref2.row;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, row.getToggleRowSelectedProps());
+          var disabled = 'enableSelection' in row.original ? !row.original.enableSelection : false;
+          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, row.getToggleRowSelectedProps({
+            disabled: disabled
+          }));
         }
       }].concat(_toConsumableArray(columns));
     });