@ctlyst.id/internal-ui 4.3.2 → 5.0.1

package/dist/index.mjs

@@ -923,6 +923,83 @@ import { Box as Box11, Checkbox as Checkbox2, Flex as Flex2, Skeleton as Skeleto
 import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
+
+// src/hooks/use-drag-threshold/use-drag-or-click.ts
+import { useRef } from "react";
+
+// src/hooks/use-drag-threshold/drag-threshold.ts
+var DragThreshold = class {
+  constructor() {
+    __publicField(this, "isDrag");
+    __publicField(this, "mouseDown");
+    __publicField(this, "x0");
+    __publicField(this, "y0");
+    /** threshold for dragging behavior in pixel
+     * @type {number}
+     */
+    __publicField(this, "threshold");
+    this.isDrag = false;
+    this.x0 = 0;
+    this.y0 = 0;
+    this.threshold = 20;
+    this.mouseDown = false;
+  }
+  reset() {
+    this.isDrag = false;
+    this.x0 = 0;
+    this.y0 = 0;
+    this.mouseDown = false;
+  }
+  start(x, y) {
+    this.x0 = x;
+    this.y0 = y;
+    this.mouseDown = true;
+  }
+  move(x, y) {
+    if (!this.mouseDown) return;
+    const dx = Math.abs(x - this.x0);
+    const dy = Math.abs(y - this.y0);
+    this.isDrag = Math.abs(dx) > this.threshold || Math.abs(dy) > this.threshold;
+  }
+  isDragged() {
+    return this.isDrag;
+  }
+};
+
+// src/hooks/use-drag-threshold/use-drag-or-click.ts
+var useDragOrClick = () => {
+  const clickOrDragged = useRef(new DragThreshold());
+  const getDragOrClickProps = ({
+    onClick,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp
+  }) => {
+    return {
+      onMouseDown: (e) => {
+        clickOrDragged.current.start(e.clientX, e.clientY);
+        onMouseDown == null ? void 0 : onMouseDown(e);
+      },
+      onMouseMove: (e) => {
+        clickOrDragged.current.move(e.clientX, e.clientY);
+        onMouseMove == null ? void 0 : onMouseMove(e);
+      },
+      onMouseUp: (e) => {
+        if (!clickOrDragged.current.isDragged()) {
+          onClick == null ? void 0 : onClick(e);
+        }
+        clickOrDragged.current.reset();
+        onMouseUp == null ? void 0 : onMouseUp(e);
+      }
+    };
+  };
+  return {
+    clickOrDragged: clickOrDragged.current,
+    getDragOrClickProps
+  };
+};
+
+// src/components/data-table/components/data-table.tsx
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var isCellDisabled = (row, cellId) => {
   if (row.disabled) {
@@ -994,11 +1071,13 @@ var useDataTable = ({
   sortDescFirst,
   sortingState,
   manualSorting,
+  selectedRow,
+  disabledRow,
+  onRowSelectionChange,
   columnPinning
 }) => {
   const [isFirstLoad, setIsFirstLoad] = React5.useState(true);
   const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
-  const [rowSelection, onRowSelectionChange] = React5.useState({});
   const dataColumns = React5.useMemo(() => columns, [columns]);
   const checkboxColumn = React5.useMemo(
     () => [
@@ -1010,9 +1089,24 @@ var useDataTable = ({
           {
             "data-test-id": "select-header-data-table",
             ...{
+              isDisabled: table2.getPaginationRowModel().rows.filter((row) => !(disabledRow == null ? void 0 : disabledRow(row.original))).length === 0,
               isChecked: table2.getIsAllRowsSelected(),
               isIndeterminate: table2.getIsSomeRowsSelected(),
-              onChange: table2.getToggleAllRowsSelectedHandler()
+              onChange: () => {
+                if (table2.getIsAllRowsSelected()) {
+                  table2.getToggleAllRowsSelectedHandler();
+                } else if (disabledRow) {
+                  const prevSelected = table2.getFilteredSelectedRowModel().rows.length;
+                  const rows = table2.getPaginationRowModel().rows.filter((row) => !disabledRow(row.original));
+                  if (prevSelected === rows.length) {
+                    table2.setRowSelection(Object.fromEntries(rows.map((row) => [row.id, false])));
+                  } else {
+                    table2.setRowSelection(Object.fromEntries(rows.map((row) => [row.id, true])));
+                  }
+                } else {
+                  table2.getToggleAllRowsSelectedHandler();
+                }
+              }
             }
           }
         ) }),
@@ -1022,8 +1116,7 @@ var useDataTable = ({
             "data-test-id": `select-data-table-${row.index}`,
             ...{
               isChecked: row.getIsSelected(),
-              isIndeterminate: row.getIsSomeSelected(),
-              onChange: row.getToggleSelectedHandler()
+              isIndeterminate: row.getIsSomeSelected()
             }
           }
         ) })
@@ -1050,15 +1143,17 @@ var useDataTable = ({
     sortDescFirst,
     state: {
       sorting,
-      rowSelection,
+      ...selectedRow ? { rowSelection: selectedRow } : {},
       ...columnPinning ? { columnPinning } : {}
     },
+    enableRowSelection: withSelectedRow,
     onRowSelectionChange,
     onSortingChange
   });
   const { getSelectedRowModel, toggleAllRowsSelected } = table;
   const { flatRows } = getSelectedRowModel();
   React5.useEffect(() => {
+    console.log("changed");
     const rowData = flatRows.map((row) => row.original);
     if (onSelectedRow) {
       onSelectedRow(rowData);
@@ -1089,9 +1184,11 @@ var DataTable = React5.forwardRef((props, ref) => {
     columnPinning,
     disabledRow,
     highlightedRow,
+    withSelectedRow,
     highlightRowColor,
     cellLineClamp = 2
   } = props;
+  const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
   React5.useImperativeHandle(ref, () => ({
@@ -1142,8 +1239,8 @@ var DataTable = React5.forwardRef((props, ref) => {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 4,
-      pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 4,
+      pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 2,
+      pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 2,
       maxW: "100%",
       w: "full",
       ref: refTable,
@@ -1230,7 +1327,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             {
               "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
               ...styles == null ? void 0 : styles.tableRow,
-              sx: { ...isHighlightedRow && getTableHighlightStyle() },
+              sx: { ...isHighlightedRow && getTableHighlightStyle(highlightRowColor) },
               "aria-disabled": isDisabledRow,
               "data-highlight": isHighlightedRow ? "true" : "false",
               css: css`
@@ -1241,24 +1338,27 @@ var DataTable = React5.forwardRef((props, ref) => {
                     }
                   `,
               cursor: isDisabledRow ? "default" : "pointer",
-              onMouseDown: (e) => {
-                var _a2;
-                if (!isDisabledRow && !isHighlightedRow) {
-                  (_a2 = e.currentTarget) == null ? void 0 : _a2.setAttribute("data-active", "true");
+              ...getDragOrClickProps({
+                onMouseDown: (e) => {
+                  var _a2;
+                  if (!isDisabledRow && !isHighlightedRow) {
+                    (_a2 = e.currentTarget) == null ? void 0 : _a2.setAttribute("data-active", "true");
+                  }
+                },
+                onMouseUp: (e) => {
+                  var _a2;
+                  (_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
+                },
+                onClick: () => {
+                  if (withSelectedRow) row.toggleSelected();
+                  if (onRowClick) {
+                    if (isDisabledRow) return;
+                    onRowClick(row.original);
+                  }
                 }
-              },
-              onMouseUp: (e) => {
-                var _a2;
-                (_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
-              },
+              }),
               opacity: isDisabledRow ? 0.4 : 1,
               pointerEvents: isDisabledRow ? "none" : "auto",
-              onClick: () => {
-                if (onRowClick) {
-                  if (isDisabledRow) return;
-                  onRowClick(row.original);
-                }
-              },
               children: row.getVisibleCells().map((cell) => {
                 const meta = cell.column.columnDef.meta;
                 const isDisabled = isCellDisabled(row.original, cell.column.id);
@@ -1274,31 +1374,20 @@ var DataTable = React5.forwardRef((props, ref) => {
                     children: /* @__PURE__ */ jsx24(
                       Flex2,
                       {
+                        tabIndex: 0,
                         height: "100%",
                         width: "100%",
                         align: "center",
+                        "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
                         opacity: isDisabled ? 0.5 : 1,
-                        sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
-                        children: /* @__PURE__ */ jsx24(
-                          Flex2,
-                          {
-                            tabIndex: 0,
-                            cursor: "auto",
-                            "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
-                            onMouseUp: (e) => e.stopPropagation(),
-                            onMouseDown: (e) => e.stopPropagation(),
-                            onClick: (e) => {
-                              e.stopPropagation();
-                            },
-                            ...cellLineClamp > 0 ? {
-                              noOfLines: cellLineClamp,
-                              sx: {
-                                display: "-webkit-inline-box"
-                              }
-                            } : {},
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                        ...cellLineClamp > 0 ? {
+                          noOfLines: cellLineClamp,
+                          sx: {
+                            display: "-webkit-inline-box"
                           }
-                        )
+                        } : {},
+                        sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
+                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
                       }
                     )
                   },
@@ -1315,6 +1404,16 @@ var DataTable = React5.forwardRef((props, ref) => {
 });
 var data_table_default = DataTable;
 
+// src/components/data-table/hook/use-select-table.ts
+import React6 from "react";
+var useSelectTable = (intialRowSelection) => {
+  const [rowSelection, onRowSelectionChange] = React6.useState(intialRowSelection != null ? intialRowSelection : {});
+  return {
+    rowSelection,
+    onRowSelectionChange
+  };
+};
+
 // src/components/datepicker/components/datepicker.tsx
 import { FormControl as FormControl3, FormErrorMessage as FormErrorMessage3, FormHelperText as FormHelperText3, IconButton as IconButton4 } from "@chakra-ui/react";
 import { cx as cx8 } from "@chakra-ui/shared-utils";
@@ -2698,10 +2797,10 @@ var styles_default = Styles;
 
 // src/components/datepicker/components/time-input.tsx
 import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text4 } from "@chakra-ui/react";
-import React6 from "react";
+import React7 from "react";
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var TimeInput = ({ value, onChange, label, rightAddon }) => {
-  const [time, setTime] = React6.useState(value || "00:00");
+  const [time, setTime] = React7.useState(value || "00:00");
   const handleChange = (e) => {
     var _a, _b;
     setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
@@ -2861,10 +2960,10 @@ var datepicker_default = Datepicker;
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
 import { Box as Box12, Input as Input2 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
-import React7 from "react";
+import React8 from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var DatePickerMonth = ({ onChange, min, max, ...props }) => {
-  const [date, setDate] = React7.useState(null);
+  const [date, setDate] = React8.useState(null);
   return /* @__PURE__ */ jsx28(
     Box12,
     {
@@ -2920,7 +3019,7 @@ var datepicker_month_default = DatePickerMonth;
 // src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
 import { Box as Box13 } from "@chakra-ui/react";
 import styled from "@emotion/styled";
-import React8 from "react";
+import React9 from "react";
 import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 var MultiDateWrapper = styled(Box13)`
   display: flex;
@@ -2937,7 +3036,7 @@ var MultiDatePickerMonth = ({
   min = "2020-01-01",
   max = "2020-12-31"
 }) => {
-  const [date, setDate] = React8.useState([null, null]);
+  const [date, setDate] = React9.useState([null, null]);
   return /* @__PURE__ */ jsxs11(MultiDateWrapper, { isError, children: [
     /* @__PURE__ */ jsx29(
       datepicker_month_default,
@@ -4036,7 +4135,7 @@ var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
 import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
-import * as React9 from "react";
+import * as React10 from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var PaginationFilter = ({
@@ -4046,7 +4145,7 @@ var PaginationFilter = ({
   onChange,
   ...rest
 }) => {
-  const [value, setValue] = React9.useState(limit);
+  const [value, setValue] = React10.useState(limit);
   return /* @__PURE__ */ jsxs22(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
     /* @__PURE__ */ jsx49(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
     /* @__PURE__ */ jsx49(
@@ -5310,14 +5409,14 @@ import { marry } from "@zamiru/timescape";
 import {
   useEffect as useEffect2,
   useLayoutEffect,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState4
 } from "react";
 var useTimescape = (options = {}) => {
   var _a;
   const { date, onChangeDate, ...rest } = options;
   const [manager] = useState4(() => new TimescapeManager(date, rest));
-  const onChangeDateRef = useRef2(onChangeDate);
+  const onChangeDateRef = useRef3(onChangeDate);
   useLayoutEffect(() => {
     onChangeDateRef.current = onChangeDate;
   }, [onChangeDate]);
@@ -7742,7 +7841,7 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef3 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -7753,7 +7852,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef3(axios.create(config2));
+  const instanceRef = useRef4(axios.create(config2));
   useEffect5(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
@@ -8177,6 +8276,7 @@ export {
   useRadio,
   useRadioGroup,
   useRadioGroupContext,
+  useSelectTable,
   useSteps,
   useTab2 as useTab,
   useTabIndicator,