@ctlyst.id/internal-ui 4.2.6 → 4.3.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { LinkProps, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, BoxProps, CheckboxProps, FormControlProps, CheckboxGroupProps, TableProps, TableHeadProps, TableRowProps, TableBodyProps, TableColumnHeaderProps, TableCellProps, ModalProps, InputProps, TextareaProps, FlexProps, HTMLChakraProps as HTMLChakraProps$1, ThemingProps as ThemingProps$1, As, TextProps, RadioProps as RadioProps$1, RadioGroupProps, UseCheckboxProps, SystemProps, TabProps as TabProps$1, TooltipProps as TooltipProps$1, ColorProps, PopoverContentProps, PopoverProps } from '@chakra-ui/react';
+import { LinkProps, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, BoxProps, CheckboxProps, FormControlProps, CheckboxGroupProps, TableProps, TableHeadProps, TableRowProps, TableBodyProps, TableColumnHeaderProps, TableCellProps, BackgroundProps, ModalProps, InputProps, TextareaProps, FlexProps, HTMLChakraProps as HTMLChakraProps$1, ThemingProps as ThemingProps$1, As, TextProps, RadioProps as RadioProps$1, RadioGroupProps, UseCheckboxProps, SystemProps, TabProps as TabProps$1, TooltipProps as TooltipProps$1, ColorProps, PopoverContentProps, PopoverProps } from '@chakra-ui/react';
 export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionProvider, AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, AlertDialogProps, Avatar, AvatarBadge, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Box, BoxProps, ButtonGroup, ButtonGroupProps, Center, ChakraProvider, ChakraProviderProps, Table as ChakraTable, CheckboxGroupContext, CheckboxGroupProps, CheckboxIcon, CheckboxIconProps, CheckboxState, CloseButton, CloseButtonProps, Code, CodeProps, Collapse, CollapseProps, ColorMode, ColorModeScript, ColorModeScriptProps, Container, ContainerProps, Divider, DividerProps, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, DrawerContentProps, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormControl, FormControlProps, FormErrorMessage, FormHelperText, FormLabel, FormLabelProps, Grid, GridItem, GridItemProps, GridProps, HStack, Heading, HeadingProps, Hide, HideProps, Icon, IconButton, IconButtonProps, IconProps, Image, ImageProps, Img, ImgProps, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputGroupProps, InputLeftAddon, InputLeftAddonProps, InputLeftElement, InputLeftElementProps, InputProps, InputRightAddon, InputRightAddonProps, InputRightElement, InputRightElementProps, Link, LinkProps, List, ListIcon, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalContextProvider, ModalFocusScope, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, PinInput, PinInputContext, PinInputDescendantsProvider, PinInputField, PinInputFieldProps, PinInputProps, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, Progress, ProgressFilledTrackProps, ProgressLabel, ProgressLabelProps, ProgressProps, ProgressTrackProps, RadioGroupContext, RequiredIndicator, RequiredIndicatorProps, ScaleFade, ScaleFadeProps, Show, ShowProps, SimpleGrid, Skeleton, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, Stack, StackProps, Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, TabIndicator, TabIndicatorProps, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeadProps, TableProps, TableRowProps, Tabs, TabsDescendantsProvider, TabsProps, TabsProvider, Tbody, Td, Text, TextProps, Th, Thead, Tr, UnorderedList, UseAccordionItemProps, UseAccordionItemReturn, UseAccordionProps, UseAccordionReturn, UseBreakpointOptions, UseCheckboxGroupProps, UseCheckboxGroupReturn, UseCheckboxProps, UseCheckboxReturn, UseDisclosureProps, UseImageProps, UseImageReturn, UseMediaQueryOptions, UseModalProps, UseModalReturn, UsePinInputFieldProps, UsePinInputProps, UsePinInputReturn, UseQueryProps, UseRadioGroupReturn, UseRadioProps, UseRadioReturn, UseTabListProps, UseTabListReturn, UseTabOptions, UseTabPanelsProps, UseTabProps, UseTabsProps, UseTabsReturn, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, forwardRef, useAccordion, useAccordionContext, useAccordionItem, useAccordionItemState, useAccordionStyles, useBoolean, useBreakpoint, useCheckbox, useCheckboxGroup, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useDimensions, useDisclosure, useDrawerContext, useImage, useMergeRefs, useModal, useModalContext, useModalStyles, useOutsideClick, usePinInput, usePinInputContext, usePinInputField, useProgressStyles, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useSteps, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useTheme, useToken } from '@chakra-ui/react';
 import * as _chakra_ui_system from '@chakra-ui/system';
 import { SystemStyleObject, HTMLChakraProps, ThemingProps, ColorMode } from '@chakra-ui/system';
@@ -257,6 +257,7 @@ interface DataTableProps<T> {
     onRowClick?: (data: T) => void;
     disabledRow?: (row: T) => boolean;
     highlightedRow?: (row: T) => boolean;
+    highlightRowColor?: BackgroundProps['bg'];
 }
 declare const isCellDisabled: (row: DisabledRowData, cellId: string) => boolean;
 type DataTableRefs<T> = Pick<RowSelectionInstance<T>, 'toggleAllRowsSelected'>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { LinkProps, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, BoxProps, CheckboxProps, FormControlProps, CheckboxGroupProps, TableProps, TableHeadProps, TableRowProps, TableBodyProps, TableColumnHeaderProps, TableCellProps, ModalProps, InputProps, TextareaProps, FlexProps, HTMLChakraProps as HTMLChakraProps$1, ThemingProps as ThemingProps$1, As, TextProps, RadioProps as RadioProps$1, RadioGroupProps, UseCheckboxProps, SystemProps, TabProps as TabProps$1, TooltipProps as TooltipProps$1, ColorProps, PopoverContentProps, PopoverProps } from '@chakra-ui/react';
+import { LinkProps, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, BoxProps, CheckboxProps, FormControlProps, CheckboxGroupProps, TableProps, TableHeadProps, TableRowProps, TableBodyProps, TableColumnHeaderProps, TableCellProps, BackgroundProps, ModalProps, InputProps, TextareaProps, FlexProps, HTMLChakraProps as HTMLChakraProps$1, ThemingProps as ThemingProps$1, As, TextProps, RadioProps as RadioProps$1, RadioGroupProps, UseCheckboxProps, SystemProps, TabProps as TabProps$1, TooltipProps as TooltipProps$1, ColorProps, PopoverContentProps, PopoverProps } from '@chakra-ui/react';
 export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionProvider, AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, AlertDialogProps, Avatar, AvatarBadge, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Box, BoxProps, ButtonGroup, ButtonGroupProps, Center, ChakraProvider, ChakraProviderProps, Table as ChakraTable, CheckboxGroupContext, CheckboxGroupProps, CheckboxIcon, CheckboxIconProps, CheckboxState, CloseButton, CloseButtonProps, Code, CodeProps, Collapse, CollapseProps, ColorMode, ColorModeScript, ColorModeScriptProps, Container, ContainerProps, Divider, DividerProps, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, DrawerContentProps, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormControl, FormControlProps, FormErrorMessage, FormHelperText, FormLabel, FormLabelProps, Grid, GridItem, GridItemProps, GridProps, HStack, Heading, HeadingProps, Hide, HideProps, Icon, IconButton, IconButtonProps, IconProps, Image, ImageProps, Img, ImgProps, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputGroupProps, InputLeftAddon, InputLeftAddonProps, InputLeftElement, InputLeftElementProps, InputProps, InputRightAddon, InputRightAddonProps, InputRightElement, InputRightElementProps, Link, LinkProps, List, ListIcon, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalContextProvider, ModalFocusScope, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, PinInput, PinInputContext, PinInputDescendantsProvider, PinInputField, PinInputFieldProps, PinInputProps, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, Progress, ProgressFilledTrackProps, ProgressLabel, ProgressLabelProps, ProgressProps, ProgressTrackProps, RadioGroupContext, RequiredIndicator, RequiredIndicatorProps, ScaleFade, ScaleFadeProps, Show, ShowProps, SimpleGrid, Skeleton, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, Stack, StackProps, Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, TabIndicator, TabIndicatorProps, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeadProps, TableProps, TableRowProps, Tabs, TabsDescendantsProvider, TabsProps, TabsProvider, Tbody, Td, Text, TextProps, Th, Thead, Tr, UnorderedList, UseAccordionItemProps, UseAccordionItemReturn, UseAccordionProps, UseAccordionReturn, UseBreakpointOptions, UseCheckboxGroupProps, UseCheckboxGroupReturn, UseCheckboxProps, UseCheckboxReturn, UseDisclosureProps, UseImageProps, UseImageReturn, UseMediaQueryOptions, UseModalProps, UseModalReturn, UsePinInputFieldProps, UsePinInputProps, UsePinInputReturn, UseQueryProps, UseRadioGroupReturn, UseRadioProps, UseRadioReturn, UseTabListProps, UseTabListReturn, UseTabOptions, UseTabPanelsProps, UseTabProps, UseTabsProps, UseTabsReturn, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, forwardRef, useAccordion, useAccordionContext, useAccordionItem, useAccordionItemState, useAccordionStyles, useBoolean, useBreakpoint, useCheckbox, useCheckboxGroup, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useDimensions, useDisclosure, useDrawerContext, useImage, useMergeRefs, useModal, useModalContext, useModalStyles, useOutsideClick, usePinInput, usePinInputContext, usePinInputField, useProgressStyles, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useSteps, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useTheme, useToken } from '@chakra-ui/react';
 import * as _chakra_ui_system from '@chakra-ui/system';
 import { SystemStyleObject, HTMLChakraProps, ThemingProps, ColorMode } from '@chakra-ui/system';
@@ -257,6 +257,7 @@ interface DataTableProps<T> {
     onRowClick?: (data: T) => void;
     disabledRow?: (row: T) => boolean;
     highlightedRow?: (row: T) => boolean;
+    highlightRowColor?: BackgroundProps['bg'];
 }
 declare const isCellDisabled: (row: DisabledRowData, cellId: string) => boolean;
 type DataTableRefs<T> = Pick<RowSelectionInstance<T>, 'toggleAllRowsSelected'>;

package/dist/index.js

@@ -1288,7 +1288,6 @@ var getCommonPinningStyles = (column) => {
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     zIndex: isPinned ? 1 : 0,
-    backgroundColor: "white",
     ...isFirstLeftPinnedColumn ? {
       pl: "16px"
     } : { pl: "8px" },
@@ -1437,6 +1436,7 @@ var DataTable = React5.forwardRef((props, ref) => {
     columnPinning,
     disabledRow,
     highlightedRow,
+    highlightRowColor,
     cellLineClamp = 2
   } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
@@ -1453,6 +1453,13 @@ var DataTable = React5.forwardRef((props, ref) => {
       (_e2 = refTable.current) == null ? void 0 : _e2.setAttribute("data-pin-right", "true");
     }
   };
+  const getTableHighlightStyle = (highlightColor = "primary.50") => {
+    return {
+      td: {
+        background: `${highlightColor} !important`
+      }
+    };
+  };
   let lastPinnedColumn = 0;
   React5.useEffect(() => {
     var _a2;
@@ -1570,7 +1577,9 @@ var DataTable = React5.forwardRef((props, ref) => {
             {
               "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
               ...styles == null ? void 0 : styles.tableRow,
-              "aria-selected": isHighlightedRow,
+              sx: { ...isHighlightedRow && getTableHighlightStyle() },
+              "aria-disabled": isDisabledRow,
+              "data-highlight": isHighlightedRow ? "true" : "false",
               css: import_react29.css`
                     &:last-child {
                       td {
@@ -1589,6 +1598,8 @@ var DataTable = React5.forwardRef((props, ref) => {
                 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;
@@ -1603,7 +1614,9 @@ var DataTable = React5.forwardRef((props, ref) => {
                   {
                     "data-test-id": `CT_Component_TableCell_${cell.id}`,
                     fontSize: "text.sm",
-                    sx: getCommonPinningStyles(cell.column),
+                    sx: {
+                      ...getCommonPinningStyles(cell.column)
+                    },
                     ...styles == null ? void 0 : styles.tableCell,
                     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       import_react28.Flex,
@@ -7464,7 +7477,7 @@ var baseStyle11 = definePartsStyle10({
     backgroundColor: "neutral.50"
   },
   td: {
-    // backgroundColor: 'neutral.50',
+    backgroundColor: "white",
     textAlign: "start",
     minHeight: "56px",
     _disabled: {
@@ -7489,12 +7502,12 @@ var variantSimple = definePartsStyle10((props) => {
     th: {
       color: "black.high",
       borderBottom: "1px",
-      borderColor: (0, import_theme_tools3.mode)(`${c}.100`, `${c}.700`)(props),
+      borderColor: (0, import_theme_tools3.mode)(`${c}.300`, `${c}.700`)(props),
       ...numericStyles
     },
     td: {
       borderBottom: "1px",
-      borderColor: (0, import_theme_tools3.mode)(`${c}.100`, `${c}.700`)(props),
+      borderColor: (0, import_theme_tools3.mode)(`${c}.300`, `${c}.700`)(props),
       ...numericStyles
     },
     caption: {
@@ -7515,12 +7528,12 @@ var variantStripe = definePartsStyle10((props) => {
     th: {
       color: "black.high",
       borderBottom: "1px",
-      borderColor: (0, import_theme_tools3.mode)(`${c}.100`, `${c}.700`)(props),
+      borderColor: (0, import_theme_tools3.mode)(`${c}.300`, `${c}.700`)(props),
       ...numericStyles
     },
     td: {
       borderBottom: "1px",
-      borderColor: (0, import_theme_tools3.mode)(`${c}.100`, `${c}.700`)(props),
+      borderColor: (0, import_theme_tools3.mode)(`${c}.300`, `${c}.700`)(props),
       ...numericStyles
     },
     caption: {
@@ -7617,7 +7630,7 @@ var tableTheme = defineMultiStyleConfig10({
   defaultProps: {
     variant: "simple",
     size: "md",
-    colorScheme: "gray"
+    colorScheme: "neutral"
   }
 });
 var table_default = tableTheme;