@ctlyst.id/internal-ui 3.1.8 → 3.1.10

package/dist/index.mjs

@@ -930,7 +930,6 @@ 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";
-import { useRef } from "react";
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var isCellDisabled = (row, cellId) => {
   if (row.disabled) {
@@ -1146,13 +1145,11 @@ var DataTable = React5.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
-      const trRef = useRef();
       return /* @__PURE__ */ jsx24(
         Tr,
         {
           "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
           tabindex: "0",
-          ref: trRef,
           ...styles == null ? void 0 : styles.tableRow,
           css: css`
                     &:last-child {
@@ -1161,13 +1158,13 @@ var DataTable = React5.forwardRef((props, ref) => {
                       }
                     }
                   `,
-          onMouseDown: () => {
+          onMouseDown: (e) => {
             var _a;
-            (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
+            (_a = e.currentTarget) == null ? void 0 : _a.setAttribute("data-active", "true");
           },
-          onMouseUp: () => {
+          onMouseUp: (e) => {
             var _a;
-            (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
+            (_a = e.currentTarget) == null ? void 0 : _a.removeAttribute("data-active");
           },
           onClick: () => {
             if (onRowClick) {
@@ -1175,6 +1172,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             }
           },
           children: row.getVisibleCells().map((cell) => {
+            const meta = cell.column.columnDef.meta;
             const isDisabled = isCellDisabled(row.original, cell.column.id);
             return /* @__PURE__ */ jsx24(
               Td,
@@ -1183,21 +1181,31 @@ var DataTable = React5.forwardRef((props, ref) => {
                 fontSize: "text.sm",
                 sx: getCommonPinningStyles(cell.column),
                 ...styles == null ? void 0 : styles.tableCell,
-                children: /* @__PURE__ */ jsx24(Flex2, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx24(
                   Flex2,
                   {
-                    tabIndex: 0,
-                    display: "inline-flex",
-                    cursor: "auto",
-                    "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
-                    onMouseUp: (e) => e.stopPropagation(),
-                    onMouseDown: (e) => e.stopPropagation(),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                    },
-                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    height: "100%",
+                    width: "100%",
+                    align: "center",
+                    opacity: isDisabled ? 0.5 : 1,
+                    sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
+                    children: /* @__PURE__ */ jsx24(
+                      Flex2,
+                      {
+                        tabIndex: 0,
+                        display: "inline-flex",
+                        cursor: "auto",
+                        "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+                        onMouseUp: (e) => e.stopPropagation(),
+                        onMouseDown: (e) => e.stopPropagation(),
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      }
+                    )
                   }
-                ) })
+                )
               },
               cell.id
             );
@@ -3855,6 +3863,9 @@ function selectStyles(colorMode, _isError) {
     placeholder: (base) => {
       return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
     },
+    clearIndicator: (base) => {
+      return { ...base, cursor: "pointer" };
+    },
     multiValue: (base) => {
       return {
         ...base,
@@ -3912,10 +3923,11 @@ function Select2({
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  const { components } = rest;
+  const { components, value, onChange } = rest;
   return /* @__PURE__ */ jsx53(
     ReactSelect,
     {
+      "data-test-id": "",
       classNamePrefix: "react-select",
       components: {
         DropdownIndicator,
@@ -3924,6 +3936,8 @@ function Select2({
         MultiValueRemove,
         ...components
       },
+      value,
+      onChange,
       styles: { ...selectStyles(colorMode, isError) },
       theme: themeSelect,
       ...rest
@@ -4095,21 +4109,24 @@ var SelectWithCheckboxBase = ({
   isError = false,
   components,
   options,
+  onChange,
+  value,
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
   return /* @__PURE__ */ jsx57(
     ReactSelect2,
     {
+      "data-test-id": "",
       classNamePrefix: "react-select",
       options,
+      value,
+      onChange,
       styles: { ...selectStyles(colorMode, !!isError) },
       theme: themeSelect,
       closeMenuOnSelect: false,
       hideSelectedOptions: false,
-      components: {
-        ...components
-      },
+      components,
       ...rest
     }
   );
@@ -4117,24 +4134,29 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, components, ...rest } = props;
   const selectValue = value || [];
+  const defaultComponents = {
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValue,
+    MultiValueRemove,
+    Option: (optionProps) => {
+      const { isSelected, data } = optionProps;
+      const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
+      const selectedValue = isSelected ? CHECKBOX_STATE.CHECKED : CHECKBOX_STATE.UNCHECKED;
+      const checkedState = data.selectAllCheckbox ? getSelectAllCheckboxState(selectValue == null ? void 0 : selectValue.length, optionLength) : selectedValue;
+      return /* @__PURE__ */ jsx57(InputOption, { ...optionProps, checkedState });
+    }
+  };
   return /* @__PURE__ */ jsx57(
     SelectWithCheckboxBase,
     {
+      "data-test-id": "",
       isMulti,
       options,
+      value,
       components: {
-        DropdownIndicator,
-        ClearIndicator,
-        MultiValue,
-        MultiValueRemove,
-        ...components,
-        Option: (optionProps) => {
-          const { isSelected, data } = optionProps;
-          const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
-          const selectedValue = isSelected ? CHECKBOX_STATE.CHECKED : CHECKBOX_STATE.UNCHECKED;
-          const checkedState = data.selectAllCheckbox ? getSelectAllCheckboxState(selectValue == null ? void 0 : selectValue.length, optionLength) : selectedValue;
-          return /* @__PURE__ */ jsx57(InputOption, { ...optionProps, checkedState });
-        }
+        ...defaultComponents,
+        ...components
       },
       ...rest
     }
@@ -4744,7 +4766,7 @@ import {
   UnorderedList as UnorderedList2
 } from "@chakra-ui/react";
 import { Close as X, Plus } from "@ctlyst.id/internal-icon";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState4 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -4804,7 +4826,7 @@ var Uploader = ({
   size: size2 = "lg",
   ...props
 }) => {
-  const inputRef = useRef2(null);
+  const inputRef = useRef(null);
   const [filePreview, setFilePreview] = useState4();
   const toast2 = useToast();
   const handleRejection = useCallback2(
@@ -6692,7 +6714,7 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -6703,7 +6725,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef3(axios.create(config2));
+  const instanceRef = useRef2(axios.create(config2));
   useEffect3(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);