hrm_ui_lib 2.1.0 → 2.2.0

package/components/Table/utils.js

@@ -1,78 +1,19 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import React from 'react';
-import { IndeterminateCheckbox } from './IndeterminateCheckbox.js';
-import '../../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 '../../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 CHECKBOX_HEADER_ID = 'selection';
-var CHECKBOX_DEFAULT_WIDTH = 48;
-function setSelectedRows(hooks, withSelect) {
-  if (withSelect) {
-    hooks.visibleColumns.push(function (columns) {
-      return [{
-        id: CHECKBOX_HEADER_ID,
-        Header: function Header(_ref) {
-          var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, getToggleAllRowsSelectedProps());
-        },
-        Cell: function Cell(_ref2) {
-          var row = _ref2.row;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, row.getToggleRowSelectedProps());
-        }
-      }].concat(_toConsumableArray(columns));
-    });
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IndeterminateCheckbox } from './IndeterminateCheckbox';
+export const CHECKBOX_HEADER_ID = 'selection';
+export const CHECKBOX_DEFAULT_WIDTH = 48;
+export function setSelectedRows(hooks, withSelect) {
+    if (withSelect) {
+        hooks.visibleColumns.push((columns) => [
+            {
+                id: CHECKBOX_HEADER_ID,
+                Header: ({ getToggleAllRowsSelectedProps }) => (_jsx(IndeterminateCheckbox, Object.assign({}, getToggleAllRowsSelectedProps()))),
+                Cell: ({ row }) => _jsx(IndeterminateCheckbox, Object.assign({}, row.getToggleRowSelectedProps()))
+            },
+            ...columns
+        ]);
+    }
 }
-function calcColumnWidth(percent, tableWidth) {
-  return percent * tableWidth / 100;
+export function calcColumnWidth(percent, tableWidth) {
+    return (percent * tableWidth) / 100;
 }
-
-export { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID, calcColumnWidth, setSelectedRows };

package/components/TableV2/AdvancedPagination.js

@@ -1,271 +1,62 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useEffect } from 'react';
-import { Input } from '../Input/Input.js';
-import { B as Button } from '../../Alert-BslI0aA0.js';
-import { Select } from '../Select/Select/Select.js';
-import '../Select/MultiSelect/MultiSelect.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import { Text } from '../Text/Text.js';
-import 'dayjs';
-import classNames from 'classnames';
-import '@babel/runtime/helpers/extends';
-import '../../consts/index.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-syntax-highlighter';
-import 'react-dom';
-import 'framer-motion';
-import { IconChevronRight } from '../SVGIcons/IconChevronRight.js';
-import '../Collapse/CollapseGroup/CollapseGroup.js';
-import { IconMore } from '../SVGIcons/IconMore.js';
-import '../Select/SharedComponents/ContentTop.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import { OPTIONS } from './constants/index.js';
-import { IconChevronLeft } from '../SVGIcons/IconChevronLeft.js';
-import { IconChevronDoubleLeft } from '../SVGIcons/IconChevronDoubleLeft.js';
-import { IconChevronDoubleRight } from '../SVGIcons/IconChevronDoubleRight.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../helperComponents/Label/Label.js';
-import '../../utils/helpers.js';
-import '../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../type/file-upload.js';
-import '../Alert/consts.js';
-import '../../helperComponents/Loader/Loader.js';
-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 '../../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 '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.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 '../Select/Select/SelectDesktop/index.js';
-import 'react-window';
-import '../../helperComponents/OptionItem/OptionItem.js';
-import '../Avatar/Avatar.js';
-import '../FileUpload/FileUpload.js';
-import '../FileUpload/UploadItems.js';
-import '../../hooks/useFormProps.js';
-import '../../context/types.js';
-import '../SVGIcons/IconEditFilled.js';
-import '../SVGIcons/IconEdit.js';
-import '../SVGIcons/IconAttach.js';
-import '../SVGIcons/IconCheckmark.js';
-import '../../hooks/useGetHasBottomSpace.js';
-import '../../hooks/useChangePositionsOnScroll.js';
-import '../Empty/Empty.js';
-import '../Image/Image.js';
-import '../Select/SharedComponents/Loading.js';
-import '../Select/constants.js';
-import '../Select/Select/helpers.js';
-import '../Collapse/CollapseItem/CollapseItem.js';
-import '../Divider/Divider.js';
-import '../SVGIcons/IconChevronDown.js';
-import '../Select/SharedComponents/Actions.js';
-import '../Menu/Menu.js';
-import '../SVGIcons/IconSearchFilled.js';
-import '../SVGIcons/IconSelectAllOff.js';
-import '../Select/Select/SelectMobile/index.js';
-import '../Select/Select/SelectMobile/MobileTopContent.js';
-import '../SVGIcons/IconChevronUp.js';
-import '../Select/localization.js';
-import '../Select/MultiSelect/OptionsWrapper.js';
-import '../Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js';
-import '../SVGIcons/IconCaretUpFilled.js';
-import '../SVGIcons/IconCaretDownFilled.js';
-import '../Select/MultiSelect/MultiBase/MultiBase.js';
-import '../Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js';
-import '../Tab/Tab.js';
-import '../Tab/TabItem.js';
-import '../Badge/Badge.js';
-import '../Select/SharedComponents/Footer.js';
-import '../Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js';
-import '../Select/MultiSelect/MobileWrapper.js';
-import '../Select/MultiSelect/DesktopWrapper.js';
-import '../Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
-import '../Select/SharedComponents/ButtonSelectWrapper/Button/Button.js';
-
-function AdvancedPagination(_ref) {
-  var table = _ref.table,
-    totalCount = _ref.totalCount,
-    buttonText = _ref.buttonText;
-  var _useState = useState('1'),
-    _useState2 = _slicedToArray(_useState, 2),
-    navigatePage = _useState2[0],
-    setNavigatePage = _useState2[1];
-  var pageIndex = table.getState().pagination.pageIndex;
-  var pageSize = table.getState().pagination.pageSize;
-  var onNavigateToPage = function onNavigateToPage(page) {
-    if (!page || /^[1-9]\d*$/.test(page) && table.getPageCount() >= Number(page)) {
-      setNavigatePage(page);
-    }
-  };
-  var onGoToPage = function onGoToPage() {
-    var page = navigatePage ? Number(navigatePage) - 1 : 0;
-    table.setPageIndex(page);
-  };
-  var onRowCountChange = function onRowCountChange(value) {
-    if (value) {
-      table.setPagination({
-        pageIndex: 0,
-        pageSize: Number(value)
-      });
-    }
-  };
-  var getVisiblePageNumbers = function getVisiblePageNumbers() {
-    var currentPage = pageIndex;
-    var totalPages = table.getPageCount();
-    var visiblePages = [];
-    if (totalPages <= 7) {
-      return Array.from({
-        length: totalPages
-      }, function (_, i) {
-        return i + 1;
-      });
-    }
-    visiblePages.push(1);
-    if (currentPage <= 3) {
-      visiblePages.push(2, 3, 4, 5, '+++', totalPages);
-    } else if (currentPage > totalPages - 5) {
-      visiblePages.push('---', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
-    } else {
-      visiblePages.push('---', currentPage, currentPage + 1, currentPage + 2, '+++', totalPages);
-    }
-    return visiblePages;
-  };
-  useEffect(function () {
-    if (table.getPageCount() < Number(navigatePage)) {
-      setNavigatePage('1');
-    }
-  }, [table.getPageCount(), table.getState().pagination]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "advanced-table__pagination"
-  }, /*#__PURE__*/React.createElement(Select, {
-    setSelectedItem: function setSelectedItem(value) {
-      return onRowCountChange(value);
-    },
-    selectedItem: "".concat(pageSize),
-    className: 'no-border',
-    options: OPTIONS
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'advanced-table__pagination__right'
-  }, /*#__PURE__*/React.createElement(Text, {
-    type: 'tertiary'
-  }, pageIndex * pageSize + 1, " - ", (pageIndex + 1) * pageSize, " / ", totalCount), /*#__PURE__*/React.createElement("div", {
-    className: "flexbox align-items--center"
-  }, /*#__PURE__*/React.createElement(Input, {
-    currentValue: navigatePage,
-    size: "small",
-    onChange: function onChange(e) {
-      return onNavigateToPage(e.target.value);
-    },
-    className: "advanced-table__pagination__right__input mr-8"
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: onGoToPage,
-    type: "secondary",
-    size: "medium",
-    buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page'
-  })), /*#__PURE__*/React.createElement("ul", {
-    className: "pagination"
-  }, /*#__PURE__*/React.createElement("li", {
-    className: "previous ".concat(!table.getCanPreviousPage() ? 'disabled' : '')
-  }, /*#__PURE__*/React.createElement("a", {
-    rel: 'prev',
-    role: 'button',
-    onClick: function onClick() {
-      return table.firstPage();
-    }
-  }, /*#__PURE__*/React.createElement(IconChevronDoubleLeft, {
-    size: 'small'
-  }))), /*#__PURE__*/React.createElement("li", {
-    className: "previous ".concat(!table.getCanPreviousPage() ? 'disabled' : '')
-  }, /*#__PURE__*/React.createElement("a", {
-    rel: 'prev',
-    role: 'button',
-    onClick: function onClick() {
-      return table.previousPage();
-    }
-  }, /*#__PURE__*/React.createElement(IconChevronLeft, {
-    size: 'small'
-  }))), getVisiblePageNumbers().map(function (pageNumber, index) {
-    return pageNumber === '---' ? /*#__PURE__*/React.createElement("li", {
-      key: "ellipsis-".concat(index),
-      className: 'pagination__more'
-    }, /*#__PURE__*/React.createElement("a", {
-      role: 'button',
-      onClick: function onClick() {
-        return table.setPageIndex(+pageIndex - 3);
-      }
-    }, /*#__PURE__*/React.createElement(IconMore, {
-      size: 'small'
-    }))) : pageNumber === '+++' ? /*#__PURE__*/React.createElement("li", {
-      key: "ellipsis-".concat(index),
-      className: 'pagination__more'
-    }, /*#__PURE__*/React.createElement("a", {
-      role: 'button',
-      onClick: function onClick() {
-        return table.setPageIndex(+pageIndex + 3);
-      }
-    }, /*#__PURE__*/React.createElement(IconMore, {
-      size: 'small'
-    }))) : /*#__PURE__*/React.createElement("li", {
-      className: classNames(_defineProperty({}, 'active', pageNumber === pageIndex + 1)),
-      key: pageNumber
-    }, /*#__PURE__*/React.createElement("a", {
-      role: 'button',
-      onClick: function onClick() {
-        return table.setPageIndex(+pageNumber - 1);
-      }
-    }, pageNumber));
-  }), /*#__PURE__*/React.createElement("li", {
-    className: "next ".concat(!table.getCanNextPage() ? 'disabled' : '')
-  }, /*#__PURE__*/React.createElement("a", {
-    rel: 'next',
-    role: 'button',
-    onClick: function onClick() {
-      return table.nextPage();
-    }
-  }, /*#__PURE__*/React.createElement(IconChevronRight, {
-    size: 'small'
-  }))), /*#__PURE__*/React.createElement("li", {
-    className: "next ".concat(!table.getCanNextPage() ? 'disabled' : '')
-  }, /*#__PURE__*/React.createElement("a", {
-    rel: 'next',
-    role: 'button',
-    onClick: function onClick() {
-      return table.lastPage();
-    }
-  }, /*#__PURE__*/React.createElement(IconChevronDoubleRight, {
-    size: 'small'
-  }))))));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Input } from '../Input';
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { Text } from '../Text';
+import classnames from 'classnames';
+import { OPTIONS } from './constants';
+import IconChevronLeft from '../SVGIcons/IconChevronLeft';
+import IconChevronRight from '../SVGIcons/IconChevronRight';
+import IconChevronDoubleLeft from '../SVGIcons/IconChevronDoubleLeft';
+import IconChevronDoubleRight from '../SVGIcons/IconChevronDoubleRight';
+import IconMore from '../SVGIcons/IconMore';
+export function AdvancedPagination({ table, totalCount, buttonText }) {
+    const [navigatePage, setNavigatePage] = useState('1');
+    const pageIndex = table.getState().pagination.pageIndex;
+    const pageSize = table.getState().pagination.pageSize;
+    const onNavigateToPage = (page) => {
+        if (!page || (/^[1-9]\d*$/.test(page) && table.getPageCount() >= Number(page))) {
+            setNavigatePage(page);
+        }
+    };
+    const onGoToPage = () => {
+        const page = navigatePage ? Number(navigatePage) - 1 : 0;
+        table.setPageIndex(page);
+    };
+    const onRowCountChange = (value) => {
+        if (value) {
+            table.setPagination({
+                pageIndex: 0,
+                pageSize: Number(value)
+            });
+        }
+    };
+    const getVisiblePageNumbers = () => {
+        const currentPage = pageIndex;
+        const totalPages = table.getPageCount();
+        const visiblePages = [];
+        if (totalPages <= 7) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        visiblePages.push(1);
+        if (currentPage <= 3) {
+            visiblePages.push(2, 3, 4, 5, '+++', totalPages);
+        }
+        else if (currentPage > totalPages - 5) {
+            visiblePages.push('---', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+        }
+        else {
+            visiblePages.push('---', currentPage, currentPage + 1, currentPage + 2, '+++', totalPages);
+        }
+        return visiblePages;
+    };
+    useEffect(() => {
+        if (table.getPageCount() < Number(navigatePage)) {
+            setNavigatePage('1');
+        }
+    }, [table.getPageCount(), table.getState().pagination]);
+    return (_jsxs("div", { className: "advanced-table__pagination", children: [_jsx(Select, { setSelectedItem: (value) => onRowCountChange(value), selectedItem: `${pageSize}`, className: 'no-border', options: OPTIONS }), _jsxs("div", { className: 'advanced-table__pagination__right', children: [_jsxs(Text, { type: 'tertiary', children: [pageIndex * pageSize + 1, " - ", (pageIndex + 1) * pageSize, " / ", totalCount] }), _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Input, { currentValue: navigatePage, size: "small", onChange: (e) => onNavigateToPage(e.target.value), className: "advanced-table__pagination__right__input mr-8" }), _jsx(Button, { onClick: onGoToPage, type: "secondary", size: "medium", buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page' })] }), _jsxs("ul", { className: "pagination", children: [_jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.firstPage(), children: _jsx(IconChevronDoubleLeft, { size: 'small' }) }) }), _jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.previousPage(), children: _jsx(IconChevronLeft, { size: 'small' }) }) }), getVisiblePageNumbers().map((pageNumber, index) => pageNumber === '---' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex - 3), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : pageNumber === '+++' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex + 3), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : (_jsx("li", { className: classnames({
+                                    ['active']: pageNumber === pageIndex + 1
+                                }), children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageNumber - 1), children: pageNumber }) }, pageNumber))), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.nextPage(), children: _jsx(IconChevronRight, { size: 'small' }) }) }), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.lastPage(), children: _jsx(IconChevronDoubleRight, { size: 'small' }) }) })] })] })] }));
 }
-
-export { AdvancedPagination };

package/components/TableV2/ColumnHeader.js

@@ -1,64 +1,32 @@
-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 { flexRender } from '@tanstack/react-table';
 import { useSortable } from '@dnd-kit/sortable';
-import { IconArrowDown } from '../SVGIcons/IconArrowDown.js';
-import { IconArrowSort } from '../SVGIcons/IconArrowSort.js';
-import { IconArrowUp } from '../SVGIcons/IconArrowUp.js';
-import { Text } from '../Text/Text.js';
-import classNames from 'classnames';
-import '../../utils/helpers.js';
-import 'dayjs';
-
-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 ColumnHeader(_ref) {
-  var header = _ref.header,
-    pinnedStyles = _ref.pinnedStyles;
-  var _useSortable = useSortable({
-      id: header.id
-    }),
-    attributes = _useSortable.attributes,
-    listeners = _useSortable.listeners,
-    setNodeRef = _useSortable.setNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition,
-    isDragging = _useSortable.isDragging;
-  var style = transform ? {
-    transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
-    transition: transition,
-    minWidth: header.getSize(),
-    position: 'relative',
-    zIndex: isDragging ? 1 : 0
-  } : {
-    minWidth: header.getSize(),
-    position: 'relative',
-    zIndex: isDragging ? 1 : 0
-  };
-  return /*#__PURE__*/React.createElement("th", _extends({
-    ref: setNodeRef,
-    style: _objectSpread(_objectSpread({}, style), pinnedStyles),
-    className: classNames('select-none', _defineProperty(_defineProperty(_defineProperty({}, 'with-checkbox', header.column.id === 'select'), 'actions-header', header.column.id === 'actions'), 'cursor-pointer', header.column.getCanSort()))
-  }, attributes), /*#__PURE__*/React.createElement("div", {
-    onClick: header.column.getToggleSortingHandler(),
-    className: "flexbox align-items--center"
-  }, /*#__PURE__*/React.createElement("div", listeners, /*#__PURE__*/React.createElement(Text, {
-    className: "text-left",
-    weight: 'bold'
-  }, flexRender(header.column.columnDef.header, header.getContext()))), /*#__PURE__*/React.createElement("span", {
-    className: "ml-4"
-  }, header.column.getCanSort() && (header.column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(IconArrowUp, {
-    size: "xsmall"
-  }) : header.column.getIsSorted() === 'desc' ? /*#__PURE__*/React.createElement(IconArrowDown, {
-    size: "xsmall"
-  }) : /*#__PURE__*/React.createElement(IconArrowSort, {
-    size: "xsmall"
-  })))), /*#__PURE__*/React.createElement("div", {
-    onMouseDown: header.getResizeHandler(),
-    onTouchStart: header.getResizeHandler(),
-    className: "resize-icon select-none touch-none"
-  }));
+import IconArrowDown from '../SVGIcons/IconArrowDown';
+import IconArrowSort from '../SVGIcons/IconArrowSort';
+import IconArrowUp from '../SVGIcons/IconArrowUp';
+import { Text } from '../Text';
+import classnames from 'classnames';
+export function ColumnHeader({ header, pinnedStyles }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: header.id
+    });
+    const style = transform
+        ? {
+            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+            transition,
+            minWidth: header.getSize(),
+            position: 'relative',
+            zIndex: isDragging ? 1 : 0
+        }
+        : {
+            minWidth: header.getSize(),
+            position: 'relative',
+            zIndex: isDragging ? 1 : 0
+        };
+    return (_jsxs("th", Object.assign({ ref: setNodeRef, style: Object.assign(Object.assign({}, style), pinnedStyles), className: classnames('select-none', {
+            ['with-checkbox']: header.column.id === 'select',
+            ['actions-header']: header.column.id === 'actions',
+            ['cursor-pointer']: header.column.getCanSort()
+        }) }, attributes, { children: [_jsxs("div", { onClick: header.column.getToggleSortingHandler(), className: "flexbox align-items--center", children: [_jsx("div", Object.assign({}, listeners, { children: _jsx(Text, { className: "text-left", weight: 'bold', children: flexRender(header.column.columnDef.header, header.getContext()) }) })), _jsx("span", { className: "ml-4", children: header.column.getCanSort() &&
+                            (header.column.getIsSorted() === 'asc' ? (_jsx(IconArrowUp, { size: "xsmall" })) : header.column.getIsSorted() === 'desc' ? (_jsx(IconArrowDown, { size: "xsmall" })) : (_jsx(IconArrowSort, { size: "xsmall" }))) })] }), _jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: "resize-icon select-none touch-none" })] })));
 }
-
-export { ColumnHeader };