@ctlyst.id/internal-ui 2.0.9 → 2.0.10

package/dist/components/data-table/components/data-table.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeadProps, TableProps, TableRowProps } from '@chakra-ui/react';
-import type { ColumnDef, ColumnSort, RowSelectionInstance, SortingState } from '@tanstack/react-table';
+import type { ColumnDef, RowSelectionInstance, SortingState } from '@tanstack/react-table';
 import * as React from 'react';
 export interface TableStyleProps {
     table?: TableProps;
@@ -16,7 +16,7 @@ export interface DataTableProps<T = unknown> extends BoxProps {
     isLoading?: boolean;
     withSelectedRow?: boolean | undefined;
     onSelectedRow?: (data: T[]) => void;
-    onSort?: (data: ColumnSort[] | SortingState | ((prevState: SortingState) => SortingState)) => void;
+    onSort?: (data: SortingState) => void;
     manualSorting?: boolean;
     sortingState?: SortingState;
     sortDescFirst?: boolean;

package/dist/internal-ui.cjs.development.js

@@ -560,48 +560,6 @@ Chips.defaultProps = {
   size: 'sm'
 };
 
-const useCombinedRefs = (...refs) => {
-  const targetRef = React.useRef();
-  React.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__*/React.forwardRef(({
-  isIndeterminate,
-  isChecked,
-  ...rest
-}, ref) => {
-  const defaultRef = React.useRef(null);
-  const combinedRef = useCombinedRefs(ref, defaultRef);
-  React.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(react.Checkbox, 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__*/React.forwardRef((props, ref) => {
   const {
@@ -618,6 +576,7 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     manualSorting,
     onRowClick
   } = props;
+  const [isFirstLoad, setIsFirstLoad] = React.useState(true);
   const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = React.useState({});
   const dataColumns = React.useMemo(() => columns, [columns]);
@@ -625,20 +584,20 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({
-      name: "select-header"
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, 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__*/React.createElement(IndeterminateCheckbox, Object.assign({
-      name: `select-${row.index}`
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, 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()
     }))
   }], []);
@@ -650,9 +609,6 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const onSortingChange = data => {
     setSorting(data);
-    if (onSort) {
-      onSort(data);
-    }
   };
   const table = reactTable.useReactTable({
     data: dataSource,
@@ -685,6 +641,14 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
+  React.useEffect(() => {
+    if (onSort && !isFirstLoad) {
+      onSort(sorting);
+    }
+  }, [sorting]);
+  React.useEffect(() => {
+    setIsFirstLoad(false);
+  }, []);
   return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
     w: "100%",
     h: "100%",
@@ -738,12 +702,12 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     key: row.id
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
     css: react$1.css`
-                  &:last-child {
-                    td {
-                      border-bottom: none;
-                    }
+                &:last-child {
+                  td {
+                    border-bottom: none;
                   }
-                `,
+                }
+              `,
     onClick: () => {
       if (onRowClick) {
         onRowClick(row.original);