@ctlyst.id/internal-ui 2.1.10 → 2.1.11-canary.1

package/dist/internal-ui.esm.js

@@ -1,7 +1,7 @@
 import { useAccordionItemState } from '@chakra-ui/accordion';
-import { Box, forwardRef as forwardRef$1, useStyleConfig, Button as Button$2, Badge as Badge$2, useToken, theme as theme$1, Text, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, InputLeftAddon, InputRightAddon, defineStyle, InputGroup, Input as Input$1, Textarea as Textarea$1, HStack, IconButton, Flex, Spinner, Table, Thead, Tr, useColorModeValue, Th, Tbody, Td, InputRightElement, Modal, ModalOverlay, ModalContent, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, Image, useDisclosure, Popover as Popover$1, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, ModalCloseButton as ModalCloseButton$1, createIcon, Icon, Portal, Link as Link$1, VisuallyHidden, Select as Select$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
+import { Box, forwardRef as forwardRef$1, useStyleConfig, Button as Button$2, Badge as Badge$2, useToken, theme as theme$1, Text, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, InputLeftAddon, InputRightAddon, defineStyle, InputGroup, Input as Input$1, Textarea as Textarea$1, HStack, IconButton, Table, Thead, Tr, Th, Flex, Tbody, Td, Skeleton, useColorModeValue, InputRightElement, Modal, ModalOverlay, ModalContent, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, Image, useDisclosure, Popover as Popover$1, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, ModalCloseButton as ModalCloseButton$1, createIcon, Icon, Portal, Link as Link$1, VisuallyHidden, Select as Select$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Grid, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
 export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Avatar, AvatarBadge, AvatarGroup, Box, ButtonGroup, Center, ChakraProvider, Table as ChakraTable, CloseButton, Code, Collapse, ColorModeScript, Container, Divider, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, Fade, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Link, List, ListIcon, ListItem, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RequiredIndicator, ScaleFade, Show, SimpleGrid, Skeleton, Slide, SlideFade, Spacer, Stack, Step, StepDescription, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, TabIndicator, TabList, TabPanel, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, Tbody, Td, Text, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, extendTheme, forwardRef, useAccordion, useAccordionContext, useAccordionItem, useAccordionItemState, useAccordionStyles, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useDimensions, useDisclosure, useDrawerContext, useImage, useMediaQuery, useMergeRefs, useModal, useModalContext, useModalStyles, useOutsideClick, usePrefersReducedMotion, useQuery, useSteps, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles, useTheme, useToken } from '@chakra-ui/react';
-import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
+import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, useRef, Fragment, useCallback, createContext as createContext$1, useContext } from 'react';
 import { cx, dataAttr } from '@chakra-ui/shared-utils';
 import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
 import { createContext } from '@chakra-ui/react-context';
@@ -878,27 +878,39 @@ const Counter = ({
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
-const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
-  const {
-    columns,
-    dataSource = [],
-    isLoading,
-    withSelectedRow,
-    onSelectedRow,
-    onSort,
-    sortDescFirst,
-    styles,
-    sortingState,
-    headerSticky,
-    manualSorting,
-    onRowClick
-  } = props;
+const getCommonPinningStyles = column => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  return {
+    // eslint-disable-next-line no-nested-ternary
+    boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : isFirstRightPinnedColumn ? '4px 0 4px -4px gray inset' : undefined,
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    opacity: isPinned ? 0.95 : 1,
+    position: isPinned ? 'sticky' : 'relative',
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0
+  };
+};
+const useDataTable = ({
+  columns,
+  dataSource = [],
+  withSelectedRow,
+  onSelectedRow,
+  onSort,
+  sortDescFirst,
+  sortingState,
+  manualSorting,
+  columnPinning
+}) => {
   const [isFirstLoad, setIsFirstLoad] = useState(true);
   const [sorting, setSorting] = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = useState({});
   const dataColumns = useMemo(() => columns, [columns]);
   const checkboxColumn = useMemo(() => [{
     id: 'select',
+    size: 32,
     header: ({
       table
     }) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
@@ -936,6 +948,7 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
     manualSorting,
     sortDescFirst,
     state: {
+      columnPinning,
       sorting,
       rowSelection
     },
@@ -955,9 +968,6 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
       onSelectedRow(rowData);
     }
   }, [flatRows]);
-  useImperativeHandle(ref, () => ({
-    toggleAllRowsSelected
-  }));
   useEffect(() => {
     if (onSort && !isFirstLoad) {
       onSort(sorting);
@@ -966,19 +976,57 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   useEffect(() => {
     setIsFirstLoad(false);
   }, []);
-  return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Flex, {
-    w: "100%",
-    h: "100%",
-    pos: "absolute",
-    bg: "white",
+  return {
+    table,
+    toggleAllRowsSelected,
+    generateColumn
+  };
+};
+const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
+  const {
+    isLoading,
+    styles,
+    headerSticky,
+    onRowClick
+  } = props;
+  const {
+    table,
+    toggleAllRowsSelected,
+    generateColumn
+  } = useDataTable(props);
+  useImperativeHandle(ref, () => ({
+    toggleAllRowsSelected
+  }));
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/createElement(Thead, Object.assign({}, (headerSticky ? {
+    position: 'sticky',
+    top: 0,
+    bg: 'white',
+    zIndex: 1
+  } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/createElement(Tr, Object.assign({
+    mx: "2",
+    key: headerGroup.id
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => /*#__PURE__*/createElement(Th, Object.assign({
+    key: header.id,
+    colSpan: header.colSpan,
+    width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`
+  }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/createElement(Flex, {
+    "data-test-id": "CT_component_data-table_loader",
+    textTransform: "capitalize",
     align: "center",
-    justify: "center",
-    zIndex: 2
-  }, /*#__PURE__*/createElement(Spinner, {
-    color: "primary.500",
-    thickness: "4px",
-    size: "lg"
-  })), /*#__PURE__*/createElement(Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/createElement(Thead, Object.assign({}, (headerSticky ? {
+    gap: 2
+  }, flexRender(header.column.columnDef.header, header.getContext()))))))), /*#__PURE__*/createElement(Tbody, null, [...Array(5)].map(num => /*#__PURE__*/createElement(Tr, {
+    mx: "2",
+    key: num
+  }, [...Array(generateColumn().length)].map(i => /*#__PURE__*/createElement(Td, {
+    key: i,
+    width: 210
+  }, /*#__PURE__*/createElement(Skeleton, {
+    startColor: "gray.50",
+    endColor: "gray.100",
+    key: i,
+    h: "30px",
+    w: "100%"
+  }))))))), /*#__PURE__*/createElement(Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/createElement(Thead, Object.assign({}, (headerSticky ? {
     position: 'sticky',
     top: 0,
     bg: 'white',
@@ -986,11 +1034,15 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
   } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/createElement(Tr, Object.assign({
     key: headerGroup.id,
     bg: useColorModeValue('initial', 'ebony-clay.700')
-  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => {
     var _ref;
     return /*#__PURE__*/createElement(Th, Object.assign({
       key: header.id,
-      colSpan: header.colSpan
+      colSpan: header.colSpan,
+      width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+      style: {
+        ...getCommonPinningStyles(header.column)
+      }
     }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/createElement(Flex, {
       "data-test-id": `CT_Container_TableHeader_${header.id}`,
       textTransform: "capitalize",
@@ -1008,27 +1060,54 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
     }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/createElement(UpDownIcon, {
       h: 2
     }))));
-  })))), /*#__PURE__*/createElement(Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/createElement(Tr, Object.assign({
-    "data-test-id": "6aZAeefGHBA2oG1wLuv-L",
-    key: row.id
-  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
-    css: css`
-                &:last-child {
-                  td {
-                    border-bottom: none;
+  })))), /*#__PURE__*/createElement(Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => {
+    const trRef = useRef();
+    return /*#__PURE__*/createElement(Tr, Object.assign({
+      "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+      tabindex: "0",
+      ref: trRef,
+      key: row.id
+    }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
+      css: css`
+                  &:last-child {
+                    td {
+                      border-bottom: none;
+                    }
                   }
-                }
-              `,
-    onClick: () => {
-      if (onRowClick) {
-        onRowClick(row.original);
+                `,
+      onMouseDown: () => {
+        var _trRef$current;
+        (_trRef$current = trRef.current) === null || _trRef$current === void 0 ? void 0 : _trRef$current.setAttribute('data-active', 'true');
+      },
+      onMouseUp: () => {
+        var _trRef$current2;
+        (_trRef$current2 = trRef.current) === null || _trRef$current2 === void 0 ? void 0 : _trRef$current2.removeAttribute('data-active');
+      },
+      onClick: () => {
+        if (onRowClick) {
+          onRowClick(row.original);
+        }
       }
-    }
-  }), row.getVisibleCells().map(cell => /*#__PURE__*/createElement(Td, Object.assign({
-    key: cell.id,
-    fontSize: "text.sm",
-    color: useColorModeValue('dark.800', 'dark.300')
-  }, styles === null || styles === void 0 ? void 0 : styles.tableCell), flexRender(cell.column.columnDef.cell, cell.getContext()))))))));
+    }), row.getVisibleCells().map(cell => /*#__PURE__*/createElement(Td, Object.assign({
+      "data-test-id": `CT_Component_TableCell_${cell.id}`,
+      key: cell.id,
+      fontSize: "text.sm",
+      color: useColorModeValue('dark.800', 'dark.300'),
+      style: {
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, styles === null || styles === void 0 ? void 0 : styles.tableCell), /*#__PURE__*/createElement(Box, {
+      tabIndex: 0,
+      display: "inline-block",
+      cursor: "auto",
+      "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+      onMouseUp: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation(),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, flexRender(cell.column.columnDef.cell, cell.getContext())))));
+  }))));
 });
 /* eslint-disable react/default-props-match-prop-types */
 DataTable.defaultProps = {
@@ -1046,7 +1125,8 @@ DataTable.defaultProps = {
   sortingState: [],
   sortDescFirst: false,
   headerSticky: false,
-  onRowClick: undefined
+  onRowClick: undefined,
+  columnPinning: undefined
 };
 
 const Styles = () => {
@@ -4651,7 +4731,8 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
   table: {
     fontVariantNumeric: 'lining-nums tabular-nums',
     borderCollapse: 'collapse',
-    width: 'full'
+    width: 'full',
+    tableLayout: 'fixed'
   },
   th: {
     fontFamily: 'heading',
@@ -4662,11 +4743,39 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
     height: '50px',
     color: /*#__PURE__*/mode('neutral.900', 'white'),
     fontSize: 'text.sm',
-    lineHeight: '18px'
+    lineHeight: '18px',
+    backgroundColor: 'neutral.50',
+    '&:first-of-type': {
+      pl: 6
+    },
+    '&:last-of-type': {
+      pr: 6
+    }
+  },
+  tbody: {
+    tr: {
+      cursor: 'pointer',
+      _hover: {
+        backgroundColor: 'neutral.200'
+      },
+      '&[data-active="true"]': {
+        backgroundColor: 'neutral.100'
+      }
+    }
   },
   td: {
+    backgroundColor: 'neutral.50',
     textAlign: 'start',
-    height: '56px'
+    height: '56px',
+    '&:first-of-type': {
+      pl: 6
+    },
+    '&:last-of-type': {
+      pr: 6
+    },
+    _disabled: {
+      opacity: 0.5
+    }
   },
   caption: {
     mt: 4,
@@ -4761,14 +4870,14 @@ const variants$4 = {
 const sizes$2 = {
   sm: /*#__PURE__*/definePartsStyle$7({
     th: {
-      px: '4',
-      py: '1',
+      px: '2',
+      py: '4',
       lineHeight: '4',
       fontSize: 'xs'
     },
     td: {
-      px: '4',
-      py: '2',
+      px: '2',
+      py: '4',
       fontSize: 'sm',
       lineHeight: '4'
     },
@@ -4783,24 +4892,12 @@ const sizes$2 = {
       px: '2',
       py: '4',
       lineHeight: '4',
-      fontSize: 'xs',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
+      fontSize: 'xs'
     },
     td: {
       px: '2',
       py: '4',
-      lineHeight: '5',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
+      lineHeight: '5'
     },
     caption: {
       px: '6',
@@ -4810,14 +4907,14 @@ const sizes$2 = {
   }),
   lg: /*#__PURE__*/definePartsStyle$7({
     th: {
-      px: '8',
+      px: '2',
       py: '4',
       lineHeight: '5',
       fontSize: 'sm'
     },
     td: {
-      px: '8',
-      py: '5',
+      px: '2',
+      py: '4',
       lineHeight: '6'
     },
     caption: {
@@ -5078,5 +5175,5 @@ function useFetcher() {
   };
 }
 
-export { AccordionIndicator, Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Anchor, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, Counter, DataTable, DatePickerMonth, Datepicker, Dialog, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, NavigationBar, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Radio, RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TextareaField, Uploader, getTheme, theme, useAlertStyles, useFetcher, useInternalUI };
+export { AccordionIndicator, Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Anchor, Badge, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Chips, Counter, DataTable, DatePickerMonth, Datepicker, Dialog, Field, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, NavigationBar, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Radio, RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Switch, Tab, TextareaField, Uploader, getTheme, theme, useAlertStyles, useDataTable, useFetcher, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map