@ctlyst.id/internal-ui 3.3.8 → 3.3.10

package/dist/index.mjs

@@ -1065,167 +1065,174 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  const { isLoading, styles, headerSticky, onRowClick, container } = props;
+  var _a, _b;
+  const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
-  return /* @__PURE__ */ jsx24(Box11, { overflowX: "auto", position: "relative", px: 4, maxW: "100%", w: "full", ...container, children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
-    /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
-      Th,
-      {
-        colSpan: header.colSpan,
-        width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-        ...styles == null ? void 0 : styles.tableColumnHeader,
-        children: /* @__PURE__ */ jsx24(
-          Flex2,
+  return /* @__PURE__ */ jsx24(
+    Box11,
+    {
+      overflowX: "auto",
+      overflowY: "hidden",
+      position: "relative",
+      pl: ((_a = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _a.length) ? 0 : 4,
+      pr: ((_b = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _b.length) ? 0 : 4,
+      maxW: "100%",
+      w: "full",
+      ...container,
+      children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
+        /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
+          Th,
           {
-            "data-test-id": "CT_component_data-table_loader",
-            textTransform: "capitalize",
-            align: "center",
-            gap: 2,
-            children: flexRender(header.column.columnDef.header, header.getContext())
+            colSpan: header.colSpan,
+            width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+            ...styles == null ? void 0 : styles.tableColumnHeader,
+            children: /* @__PURE__ */ jsx24(
+              Flex2,
+              {
+                "data-test-id": "CT_component_data-table_loader",
+                textTransform: "capitalize",
+                align: "center",
+                gap: 2,
+                children: flexRender(header.column.columnDef.header, header.getContext())
+              }
+            )
+          },
+          header.id
+        )) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx24(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(Td, { width: 210, children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
+      ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
+        /* @__PURE__ */ jsx24(
+          Thead,
+          {
+            maxH: "50px",
+            ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
+            children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
+              var _a2;
+              return /* @__PURE__ */ jsx24(
+                Th,
+                {
+                  colSpan: header.colSpan,
+                  sx: getCommonPinningStyles(header.column),
+                  width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+                  ...styles == null ? void 0 : styles.tableColumnHeader,
+                  children: /* @__PURE__ */ jsxs8(
+                    Flex2,
+                    {
+                      backgroundColor: "white",
+                      height: "100%",
+                      "data-test-id": `CT_Container_TableHeader_${header.id}`,
+                      textTransform: "capitalize",
+                      userSelect: "none",
+                      align: "center",
+                      gap: 2,
+                      children: [
+                        flexRender(header.column.columnDef.header, header.getContext()),
+                        /* @__PURE__ */ jsx24(
+                          Box11,
+                          {
+                            as: "span",
+                            cursor: header.column.getCanSort() ? "pointer" : "default",
+                            "data-test-id": `CT_Container_SortingIcon_${header.id}`,
+                            onClick: header.column.getToggleSortingHandler(),
+                            children: (_a2 = header.column.getCanSort() && {
+                              asc: /* @__PURE__ */ jsx24(ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
+                              desc: /* @__PURE__ */ jsx24(ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
+                            }[header.column.getIsSorted()]) != null ? _a2 : /* @__PURE__ */ jsx24(Box11, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ jsx24(UpDownIcon, { color: "neutral.500" }) })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                header.id
+              );
+            }) }, headerGroup.id))
           }
-        )
-      },
-      header.id
-    )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx24(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(Td, { width: 210, children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
-  ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
-    /* @__PURE__ */ jsx24(
-      Thead,
-      {
-        maxH: "50px",
-        ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
-        children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
-          var _a;
+        ),
+        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
           return /* @__PURE__ */ jsx24(
-            Th,
+            Tr,
             {
-              colSpan: header.colSpan,
-              sx: getCommonPinningStyles(header.column),
-              width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-              ...styles == null ? void 0 : styles.tableColumnHeader,
-              children: /* @__PURE__ */ jsxs8(
-                Flex2,
-                {
-                  backgroundColor: "white",
-                  height: "100%",
-                  "data-test-id": `CT_Container_TableHeader_${header.id}`,
-                  textTransform: "capitalize",
-                  userSelect: "none",
-                  align: "center",
-                  gap: 2,
-                  children: [
-                    flexRender(header.column.columnDef.header, header.getContext()),
-                    /* @__PURE__ */ jsx24(
-                      Box11,
-                      {
-                        as: "span",
-                        cursor: header.column.getCanSort() ? "pointer" : "default",
-                        "data-test-id": `CT_Container_SortingIcon_${header.id}`,
-                        onClick: header.column.getToggleSortingHandler(),
-                        children: (_a = header.column.getCanSort() && {
-                          asc: /* @__PURE__ */ jsx24(ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
-                          desc: /* @__PURE__ */ jsx24(ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                        }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx24(Box11, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ jsx24(UpDownIcon, { color: "neutral.500" }) })
-                      }
-                    )
-                  ]
-                }
-              )
-            },
-            header.id
-          );
-        }) }, headerGroup.id))
-      }
-    ),
-    /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
-      return /* @__PURE__ */ jsx24(
-        Tr,
-        {
-          "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
-          tabindex: "0",
-          ...styles == null ? void 0 : styles.tableRow,
-          css: css`
+              "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+              tabindex: "0",
+              ...styles == null ? void 0 : styles.tableRow,
+              css: css`
                     &:last-child {
                       td {
                         border-bottom: none;
                       }
                     }
                   `,
-          onMouseDown: (e) => {
-            var _a;
-            (_a = e.currentTarget) == null ? void 0 : _a.setAttribute("data-active", "true");
-          },
-          onMouseUp: (e) => {
-            var _a;
-            (_a = e.currentTarget) == null ? void 0 : _a.removeAttribute("data-active");
-          },
-          onClick: () => {
-            if (onRowClick) {
-              onRowClick(row.original);
-            }
-          },
-          children: row.getVisibleCells().map((cell) => {
-            const meta = cell.column.columnDef.meta;
-            const isDisabled = isCellDisabled(row.original, cell.column.id);
-            return /* @__PURE__ */ jsx24(
-              Td,
-              {
-                "data-test-id": `CT_Component_TableCell_${cell.id}`,
-                fontSize: "text.sm",
-                sx: getCommonPinningStyles(cell.column),
-                ...styles == null ? void 0 : styles.tableCell,
-                children: /* @__PURE__ */ jsx24(
-                  Flex2,
+              onMouseDown: (e) => {
+                var _a2;
+                (_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 (onRowClick) {
+                  onRowClick(row.original);
+                }
+              },
+              children: row.getVisibleCells().map((cell) => {
+                const meta = cell.column.columnDef.meta;
+                const isDisabled = isCellDisabled(row.original, cell.column.id);
+                return /* @__PURE__ */ jsx24(
+                  Td,
                   {
-                    height: "100%",
-                    width: "100%",
-                    align: "center",
-                    opacity: isDisabled ? 0.5 : 1,
-                    sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
+                    "data-test-id": `CT_Component_TableCell_${cell.id}`,
+                    fontSize: "text.sm",
+                    sx: getCommonPinningStyles(cell.column),
+                    ...styles == null ? void 0 : styles.tableCell,
                     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();
-                        },
-                        noOfLines: 2,
-                        sx: {
-                          display: "-webkit-inline-box"
-                        },
-                        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,
+                            cursor: "auto",
+                            "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+                            onMouseUp: (e) => e.stopPropagation(),
+                            onMouseDown: (e) => e.stopPropagation(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                            },
+                            noOfLines: 2,
+                            sx: {
+                              display: "-webkit-inline-box"
+                            },
+                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              },
-              cell.id
-            );
-          })
-        },
-        row.id
-      );
-    }) })
-  ] }) });
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          );
+        }) })
+      ] })
+    }
+  );
 });
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
-import {
-  FormControl as FormControl3,
-  FormErrorMessage as FormErrorMessage3,
-  FormHelperText as FormHelperText3,
-  IconButton as IconButton4,
-  InputGroup as InputGroup4,
-  InputRightElement as InputRightElement3
-} from "@chakra-ui/react";
+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";
 import { Calendar, Close as Close3 } from "@ctlyst.id/internal-icon";
 import ReactDatePicker from "react-datepicker";
@@ -2162,7 +2169,33 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx27(input_field_default, { label, isRequired, autoComplete: "off", isError }),
+        customInput: /* @__PURE__ */ jsx27(
+          input_field_default,
+          {
+            label,
+            isRequired,
+            autoComplete: "off",
+            isError,
+            addOnRight: /* @__PURE__ */ jsxs10(InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
+              /* @__PURE__ */ jsx27(Calendar, { size: 4, color: "neutral.400" }),
+              value && /* @__PURE__ */ jsx27(
+                IconButton4,
+                {
+                  "data-test-id": "H0rseVCzGIaqoLho-EPbu",
+                  display: "flex",
+                  alignItems: "center",
+                  variant: "unstyled",
+                  "aria-label": "Remove",
+                  onClick: onClear,
+                  cursor: "pointer",
+                  size: "sm",
+                  minW: "unset",
+                  icon: /* @__PURE__ */ jsx27(Close3, { size: 4, color: "neutral.600" })
+                }
+              )
+            ] })
+          }
+        ),
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
         dropdownMode: "select",
@@ -2180,27 +2213,7 @@ var Datepicker = ({
     return component;
   }
   return /* @__PURE__ */ jsxs10(FormControl3, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    /* @__PURE__ */ jsxs10(InputGroup4, { children: [
-      component,
-      /* @__PURE__ */ jsxs10(InputRightElement3, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
-        /* @__PURE__ */ jsx27(Calendar, { size: 4, color: "neutral.400" }),
-        value && /* @__PURE__ */ jsx27(
-          IconButton4,
-          {
-            "data-test-id": "H0rseVCzGIaqoLho-EPbu",
-            display: "flex",
-            alignItems: "center",
-            variant: "unstyled",
-            "aria-label": "Remove",
-            onClick: onClear,
-            cursor: "pointer",
-            size: "sm",
-            minW: "unset",
-            icon: /* @__PURE__ */ jsx27(Close3, { size: 4, color: "neutral.600" })
-          }
-        )
-      ] })
-    ] }),
+    component,
     !isError ? /* @__PURE__ */ jsx27(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx27(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
   ] });
 };
@@ -4642,7 +4655,7 @@ import {
 import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text17, TextProps } from "@chakra-ui/react";
 
 // src/components/time-input/components/index.tsx
-import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup5 } from "@chakra-ui/react";
+import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup4 } from "@chakra-ui/react";
 import { Clock } from "@ctlyst.id/internal-icon";
 import { useEffect as useEffect3, useImperativeHandle as useImperativeHandle2 } from "react";
 
@@ -4747,7 +4760,8 @@ var InputTimeArea = forwardRef12((props, ref) => {
       boxSizing: "content-box",
       height: "22px",
       ref,
-      p: "2px",
+      px: "2px",
+      py: 0,
       sx: {
         fontVariantNumeric: "tabular-nums"
       },
@@ -4830,7 +4844,7 @@ var TimeInput2 = forwardRef12(
               borderColor: focusColor
             },
             children: /* @__PURE__ */ jsxs29(
-              InputGroup5,
+              InputGroup4,
               {
                 borderRadius: "sm",
                 backgroundColor: isDisabled ? "neutral.300" : "white.high",