@ctlyst.id/internal-ui 5.6.4 → 5.6.6

package/dist/index.d.mts

@@ -5,7 +5,7 @@ export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, Accord
 import * as _chakra_ui_system from '@chakra-ui/system';
 import { SystemStyleObject, HTMLChakraProps, ThemingProps, ColorMode } from '@chakra-ui/system';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, ReactNode, FC } from 'react';
+import React__default, { PropsWithChildren, ElementType, ReactNode, FC } from 'react';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { ColumnDef, RowSelectionState, OnChangeFn, SortingState, ColumnPinningState, RowSelectionInstance, Row } from '@tanstack/react-table';
 import { DatePickerProps } from 'react-datepicker';
@@ -136,7 +136,7 @@ interface BreadCrumbParentProps {
 }
 interface BreadCrumbProps {
     title: string;
-    children?: React$1.ReactNode;
+    children?: React__default.ReactNode;
     parents?: BreadCrumbParentProps[];
     className?: string;
     disableHome?: boolean;
@@ -144,8 +144,9 @@ interface BreadCrumbProps {
     backButton?: () => void;
     hideTitle?: boolean;
     homeButton?: () => void;
+    as?: ElementType;
 }
-declare const BreadCrumb: React$1.FC<BreadCrumbProps>;
+declare const BreadCrumb: React__default.FC<BreadCrumbProps>;
 
 type ButtonProps = ButtonProps$1;
 declare const Button: _chakra_ui_react.ComponentWithAs<"button", ButtonProps$1>;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, Accord
 import * as _chakra_ui_system from '@chakra-ui/system';
 import { SystemStyleObject, HTMLChakraProps, ThemingProps, ColorMode } from '@chakra-ui/system';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, ReactNode, FC } from 'react';
+import React__default, { PropsWithChildren, ElementType, ReactNode, FC } from 'react';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { ColumnDef, RowSelectionState, OnChangeFn, SortingState, ColumnPinningState, RowSelectionInstance, Row } from '@tanstack/react-table';
 import { DatePickerProps } from 'react-datepicker';
@@ -136,7 +136,7 @@ interface BreadCrumbParentProps {
 }
 interface BreadCrumbProps {
     title: string;
-    children?: React$1.ReactNode;
+    children?: React__default.ReactNode;
     parents?: BreadCrumbParentProps[];
     className?: string;
     disableHome?: boolean;
@@ -144,8 +144,9 @@ interface BreadCrumbProps {
     backButton?: () => void;
     hideTitle?: boolean;
     homeButton?: () => void;
+    as?: ElementType;
 }
-declare const BreadCrumb: React$1.FC<BreadCrumbProps>;
+declare const BreadCrumb: React__default.FC<BreadCrumbProps>;
 
 type ButtonProps = ButtonProps$1;
 declare const Button: _chakra_ui_react.ComponentWithAs<"button", ButtonProps$1>;

package/dist/index.js

@@ -738,8 +738,18 @@ var badge_default = Badge;
 var import_react9 = require("@chakra-ui/react");
 var import_internal_icon4 = require("@ctlyst.id/internal-icon");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var BreadCrumb = (props) => {
-  const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton, homeButton, hideTitle } = props;
+var BreadCrumb = ({
+  title,
+  children,
+  parents,
+  className,
+  disableHome,
+  spacing: spacing2 = 2,
+  backButton,
+  homeButton,
+  hideTitle,
+  as
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_react9.Box,
     {
@@ -763,7 +773,7 @@ var BreadCrumb = (props) => {
                   minW: "9",
                   bg: "white",
                   variant: "ghost",
-                  "aria-label": "Edit",
+                  "aria-label": "Back",
                   icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_internal_icon4.ChevronLeft, { size: 5 }),
                   onClick: backButton
                 }
@@ -781,33 +791,19 @@ var BreadCrumb = (props) => {
               pr: "4",
               spacing: spacing2,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_react9.BreadcrumbLink,
-                  {
-                    "data-test-id": "",
-                    alignItems: "center",
-                    href: homeButton || disableHome ? void 0 : "/",
-                    style: { ...disableHome && { cursor: "default" } },
-                    onClick: homeButton,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Box, { boxSize: "3.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_internal_icon4.Home, { size: 3.5, color: "primary.500" }) })
-                  }
-                ) }),
-                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { children: disableHome ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Box, { boxSize: "3.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_internal_icon4.Home, { size: 3.5, color: "neutral.600" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbLink, { "data-test-id": "", as, href: "/", onClick: homeButton, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Box, { boxSize: "3.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_internal_icon4.Home, { size: 3.5, color: "primary.500" }) }) }) }),
+                parents == null ? void 0 : parents.map((parent) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { children: parent.disable || !parent.link ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Text, { color: "neutral.600", textStyle: "text.sm", children: parent.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   import_react9.BreadcrumbLink,
                   {
                     "data-test-id": "",
-                    href: !val.disable && val.link ? val.link : void 0,
-                    onClick: val.onClick,
-                    style: {
-                      ...val.disable && {
-                        cursor: "default"
-                      }
-                    },
+                    as,
+                    href: parent.link,
+                    onClick: parent.onClick,
                     _hover: { textDecoration: "none" },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Text, { color: val.disable ? "neutral.600" : "primary.500", textStyle: "text.sm", children: val.name })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Text, { color: "primary.500", textStyle: "text.sm", children: parent.name })
                   }
-                ) }, val.name)),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
+                ) }, parent.name)),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbItem, { isCurrentPage: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.BreadcrumbLink, { cursor: "default", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react9.Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
               ]
             }
           )
@@ -821,7 +817,7 @@ BreadCrumb.defaultProps = {
   children: void 0,
   parents: void 0,
   className: void 0,
-  disableHome: void 0,
+  disableHome: false,
   spacing: 2,
   backButton: void 0,
   hideTitle: false
@@ -1687,22 +1683,24 @@ var DataTable = React5.forwardRef((props, ref) => {
             colSpan: header.colSpan,
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            sx: getCommonPinningStyles(header.column, paddingRowX),
             ...styles == null ? void 0 : styles.tableColumnHeader,
             ...getTableHeaderSize(header, index, headerGroup.headers.length),
             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Flex, { "data-test-id": "CT_component_data-table_loader", align: "center", gap: 2, children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) })
           },
           header.id
         )) }, headerGroup.id)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react30.Td,
           {
             width: "100%",
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            sx: getCommonPinningStyles(column, paddingRowX),
             ...styles == null ? void 0 : styles.tableCell,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i)
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" })
           },
-          i
+          column.id
         )) }, num)) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react30.Table, { ...styles == null ? void 0 : styles.table, children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(