@ctlyst.id/internal-ui 2.0.9 → 2.0.10

package/dist/internal-ui.esm.js

@@ -1,6 +1,6 @@
 import { cx, dataAttr } from '@chakra-ui/shared-utils';
 import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
-import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useRef, useEffect, useState, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext } from 'react';
+import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
 import { createContext } from '@chakra-ui/react-context';
 import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
 import { cx as cx$1 } from '@chakra-ui/utils';
@@ -554,48 +554,6 @@ Chips.defaultProps = {
   size: 'sm'
 };
 
-const useCombinedRefs = (...refs) => {
-  const targetRef = useRef();
-  useEffect(() => {
-    refs.forEach(ref => {
-      /* eslint-disable no-param-reassign */
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};
-const IndeterminateCheckbox = /*#__PURE__*/forwardRef$2(({
-  isIndeterminate,
-  isChecked,
-  ...rest
-}, ref) => {
-  const defaultRef = useRef(null);
-  const combinedRef = useCombinedRefs(ref, defaultRef);
-  useEffect(() => {
-    if (combinedRef !== null && combinedRef !== void 0 && combinedRef.current) {
-      combinedRef.current.indeterminate = isIndeterminate !== null && isIndeterminate !== void 0 ? isIndeterminate : false;
-    }
-  }, [combinedRef, isIndeterminate]);
-  return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({
-    ref: combinedRef,
-    focusBorderColor: "0",
-    isIndeterminate: isIndeterminate,
-    isChecked: isChecked,
-    inputProps: {
-      'data-test-id': `CT_component_indeterminate-checkbox_${rest.id || rest.name}`
-    }
-  }, rest));
-});
-IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';
-IndeterminateCheckbox.defaultProps = {
-  isIndeterminate: false
-};
-
 /* eslint-disable react-hooks/rules-of-hooks */
 const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   const {
@@ -612,6 +570,7 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
     manualSorting,
     onRowClick
   } = props;
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
   const [sorting, setSorting] = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = useState({});
   const dataColumns = useMemo(() => columns, [columns]);
@@ -619,20 +578,20 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({
-      name: "select-header"
+    }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
+      "data-test-id": "select-header-data-table"
     }, {
-      checked: table.getIsAllRowsSelected(),
-      indeterminate: table.getIsSomeRowsSelected(),
+      isChecked: table.getIsAllRowsSelected(),
+      isIndeterminate: table.getIsSomeRowsSelected(),
       onChange: table.getToggleAllRowsSelectedHandler()
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({
-      name: `select-${row.index}`
+    }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
+      "data-test-id": `select-data-table-${row.index}`
     }, {
-      checked: row.getIsSelected(),
-      indeterminate: row.getIsSomeSelected(),
+      isChecked: row.getIsSelected(),
+      isIndeterminate: row.getIsSomeSelected(),
       onChange: row.getToggleSelectedHandler()
     }))
   }], []);
@@ -644,9 +603,6 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   };
   const onSortingChange = data => {
     setSorting(data);
-    if (onSort) {
-      onSort(data);
-    }
   };
   const table = useReactTable({
     data: dataSource,
@@ -679,6 +635,14 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
+  useEffect(() => {
+    if (onSort && !isFirstLoad) {
+      onSort(sorting);
+    }
+  }, [sorting]);
+  useEffect(() => {
+    setIsFirstLoad(false);
+  }, []);
   return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Flex, {
     w: "100%",
     h: "100%",
@@ -732,12 +696,12 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
     key: row.id
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
     css: css`
-                  &:last-child {
-                    td {
-                      border-bottom: none;
-                    }
+                &:last-child {
+                  td {
+                    border-bottom: none;
                   }
-                `,
+                }
+              `,
     onClick: () => {
       if (onRowClick) {
         onRowClick(row.original);