@ctlyst.id/internal-ui 2.0.9 → 2.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { cx, dataAttr } from '@chakra-ui/shared-utils';
2
2
  import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
3
- import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useRef, useEffect, useState, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext } from 'react';
3
+ import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
4
4
  import { createContext } from '@chakra-ui/react-context';
5
5
  import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
6
6
  import { cx as cx$1 } from '@chakra-ui/utils';
@@ -554,48 +554,6 @@ Chips.defaultProps = {
554
554
  size: 'sm'
555
555
  };
556
556
 
557
- const useCombinedRefs = (...refs) => {
558
- const targetRef = useRef();
559
- useEffect(() => {
560
- refs.forEach(ref => {
561
- /* eslint-disable no-param-reassign */
562
- if (!ref) return;
563
- if (typeof ref === 'function') {
564
- ref(targetRef.current);
565
- } else {
566
- ref.current = targetRef.current;
567
- }
568
- });
569
- }, [refs]);
570
- return targetRef;
571
- };
572
- const IndeterminateCheckbox = /*#__PURE__*/forwardRef$2(({
573
- isIndeterminate,
574
- isChecked,
575
- ...rest
576
- }, ref) => {
577
- const defaultRef = useRef(null);
578
- const combinedRef = useCombinedRefs(ref, defaultRef);
579
- useEffect(() => {
580
- if (combinedRef !== null && combinedRef !== void 0 && combinedRef.current) {
581
- combinedRef.current.indeterminate = isIndeterminate !== null && isIndeterminate !== void 0 ? isIndeterminate : false;
582
- }
583
- }, [combinedRef, isIndeterminate]);
584
- return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({
585
- ref: combinedRef,
586
- focusBorderColor: "0",
587
- isIndeterminate: isIndeterminate,
588
- isChecked: isChecked,
589
- inputProps: {
590
- 'data-test-id': `CT_component_indeterminate-checkbox_${rest.id || rest.name}`
591
- }
592
- }, rest));
593
- });
594
- IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';
595
- IndeterminateCheckbox.defaultProps = {
596
- isIndeterminate: false
597
- };
598
-
599
557
  /* eslint-disable react-hooks/rules-of-hooks */
600
558
  const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
601
559
  const {
@@ -612,6 +570,7 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
612
570
  manualSorting,
613
571
  onRowClick
614
572
  } = props;
573
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
615
574
  const [sorting, setSorting] = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
616
575
  const [rowSelection, onRowSelectionChange] = useState({});
617
576
  const dataColumns = useMemo(() => columns, [columns]);
@@ -619,20 +578,20 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
619
578
  id: 'select',
620
579
  header: ({
621
580
  table
622
- }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({
623
- name: "select-header"
581
+ }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
582
+ "data-test-id": "select-header-data-table"
624
583
  }, {
625
- checked: table.getIsAllRowsSelected(),
626
- indeterminate: table.getIsSomeRowsSelected(),
584
+ isChecked: table.getIsAllRowsSelected(),
585
+ isIndeterminate: table.getIsSomeRowsSelected(),
627
586
  onChange: table.getToggleAllRowsSelectedHandler()
628
587
  })),
629
588
  cell: ({
630
589
  row
631
- }) => /*#__PURE__*/createElement(IndeterminateCheckbox, Object.assign({
632
- name: `select-${row.index}`
590
+ }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
591
+ "data-test-id": `select-data-table-${row.index}`
633
592
  }, {
634
- checked: row.getIsSelected(),
635
- indeterminate: row.getIsSomeSelected(),
593
+ isChecked: row.getIsSelected(),
594
+ isIndeterminate: row.getIsSomeSelected(),
636
595
  onChange: row.getToggleSelectedHandler()
637
596
  }))
638
597
  }], []);
@@ -644,9 +603,6 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
644
603
  };
645
604
  const onSortingChange = data => {
646
605
  setSorting(data);
647
- if (onSort) {
648
- onSort(data);
649
- }
650
606
  };
651
607
  const table = useReactTable({
652
608
  data: dataSource,
@@ -679,6 +635,14 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
679
635
  useImperativeHandle(ref, () => ({
680
636
  toggleAllRowsSelected
681
637
  }));
638
+ useEffect(() => {
639
+ if (onSort && !isFirstLoad) {
640
+ onSort(sorting);
641
+ }
642
+ }, [sorting]);
643
+ useEffect(() => {
644
+ setIsFirstLoad(false);
645
+ }, []);
682
646
  return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Flex, {
683
647
  w: "100%",
684
648
  h: "100%",
@@ -732,12 +696,12 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
732
696
  key: row.id
733
697
  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
734
698
  css: css`
735
- &:last-child {
736
- td {
737
- border-bottom: none;
738
- }
699
+ &:last-child {
700
+ td {
701
+ border-bottom: none;
739
702
  }
740
- `,
703
+ }
704
+ `,
741
705
  onClick: () => {
742
706
  if (onRowClick) {
743
707
  onRowClick(row.original);