@ctlyst.id/internal-ui 4.3.1 → 5.0.0

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/useDragOrClick.ts
+import { useRef } from "react";
+
+// src/components/data-table/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/useDragOrClick.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) {
@@ -937,8 +1014,8 @@ var getCommonPinningStyles = (column) => {
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   const isLastRightPinnedColumn = isPinned === "right" && column.getIsLastColumn("right");
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? 8 : 0)}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? 8 : 0)}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     zIndex: isPinned ? 1 : 0,
     ...isFirstLeftPinnedColumn ? {
@@ -994,39 +1071,55 @@ 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(
     () => [
       {
         id: "select",
         size: 32,
-        header: ({ table: table2 }) => /* @__PURE__ */ jsx24(
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
           Checkbox2,
           {
             "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();
+                }
+              }
             }
           }
-        ),
-        cell: ({ row }) => /* @__PURE__ */ jsx24(
+        ) }),
+        cell: ({ row }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
           Checkbox2,
           {
             "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,
@@ -1186,7 +1283,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                 {
                   colSpan: header.colSpan,
                   sx: getCommonPinningStyles(header.column),
-                  width: `${header.getSize()}px`,
+                  width: header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right") ? `${header.getSize() + 8}px` : `${header.getSize()}px`,
                   ...styles == null ? void 0 : styles.tableColumnHeader,
                   children: /* @__PURE__ */ jsxs8(
                     Flex2,
@@ -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())
                       }
                     )
                   },
@@ -5310,14 +5399,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 +7831,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 +7842,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);