@ctlyst.id/internal-ui 2.0.8 → 2.0.10

package/dist/components/data-table/__stories__/datatable.stories.d.ts

@@ -4,23 +4,9 @@ declare const _default: {
     chakra: {
         theme: Record<string, any>;
     };
-    component: {
-        <P>({ columns, dataSource, isLoading, withSelectedRow, onSelectedRow, onSort, manualSorting, sortingState, styles, ...props }: import("../components/data-table").DataTableProps<P>): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-        defaultProps: {
-            withSelectedRow: boolean;
-            overflowX: string;
-            pos: string;
-            maxW: string;
-            minH: number;
-            w: string;
-            styles: undefined;
-            isLoading: undefined;
-            onSelectedRow: undefined;
-            onSort: undefined;
-            manualSorting: boolean;
-            sortingState: never[];
-        };
-    };
+    component: <T extends unknown>(props: import("../components/data-table").DataTableProps<T> & {
+        ref?: ((instance: Pick<any, "toggleAllRowsSelected"> | null) => void) | React.RefObject<Pick<any, "toggleAllRowsSelected">> | null | undefined;
+    }) => JSX.Element;
     argTypes: {
         selectedRow: {
             options: boolean[];

package/dist/components/data-table/components/data-table.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeadProps, TableProps, TableRowProps } from '@chakra-ui/react';
-import type { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
+import type { ColumnDef, RowSelectionInstance, SortingState } from '@tanstack/react-table';
 import * as React from 'react';
 export interface TableStyleProps {
     table?: TableProps;
@@ -16,25 +16,15 @@ export interface DataTableProps<T = unknown> extends BoxProps {
     isLoading?: boolean;
     withSelectedRow?: boolean | undefined;
     onSelectedRow?: (data: T[]) => void;
-    onSort?: (data: ColumnSort[] | ((prevState: SortingState) => SortingState)) => void;
+    onSort?: (data: SortingState) => void;
     manualSorting?: boolean;
     sortingState?: SortingState;
+    sortDescFirst?: boolean;
+    headerSticky?: boolean;
+    onRowClick?: (data: T) => void;
 }
-declare const DataTable: {
-    <P>({ columns, dataSource, isLoading, withSelectedRow, onSelectedRow, onSort, manualSorting, sortingState, styles, ...props }: DataTableProps<P>): React.ReactElement;
-    defaultProps: {
-        withSelectedRow: boolean;
-        overflowX: string;
-        pos: string;
-        maxW: string;
-        minH: number;
-        w: string;
-        styles: undefined;
-        isLoading: undefined;
-        onSelectedRow: undefined;
-        onSort: undefined;
-        manualSorting: boolean;
-        sortingState: never[];
-    };
-};
-export default DataTable;
+export declare type DataTableRefs<T> = Pick<RowSelectionInstance<T>, 'toggleAllRowsSelected'>;
+declare const _default: <T extends unknown>(props: DataTableProps<T> & {
+    ref?: ((instance: Pick<any, "toggleAllRowsSelected"> | null) => void) | React.RefObject<Pick<any, "toggleAllRowsSelected">> | null | undefined;
+}) => JSX.Element;
+export default _default;

package/dist/components/index.d.ts

@@ -4,16 +4,20 @@ export * from './breadcrumb';
 export * from './button';
 export * from './card';
 export * from './checkbox';
+export * from './chips';
 export * from './data-table';
 export * from './datepicker';
 export * from './field';
 export * from './form';
 export * from './header';
+export * from './image';
 export * from './layouting';
+export * from './list';
 export * from './loader';
 export * from './modal';
 export * from './navigation';
 export * from './pagination';
+export * from './popover';
 export * from './radio';
 export * from './rating';
 export * from './select';

package/dist/components/loader/components/loader.d.ts

@@ -2,6 +2,7 @@ import type { HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
 export interface LoaderProps {
     size?: string;
     variant?: string;
+    thickness?: string;
 }
 export interface CustomBadgeProps extends HTMLChakraProps<'span'>, ThemingProps {
 }

package/dist/internal-ui.cjs.development.js

@@ -520,37 +520,63 @@ CheckboxGroupComponent.defaultProps = {
   errorMessage: ''
 };
 
-const IndeterminateCheckbox = ({
-  indeterminate = false,
+const Chips = ({
+  children,
   ...rest
 }) => {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (ref.current && typeof indeterminate === 'boolean') {
-      ref.current.indeterminate = !rest.checked && indeterminate;
-    }
-  }, [ref, indeterminate]);
-  return /*#__PURE__*/React.createElement(react.Flex, {
-    align: "center"
-  }, /*#__PURE__*/React.createElement("input", Object.assign({
-    type: "checkbox",
-    ref: ref
-  }, rest)));
+  const {
+    isActive,
+    isDisabled,
+    onClose
+  } = rest;
+  const styles = react.useStyleConfig('Chips', rest);
+  const closeColor = React.useMemo(() => {
+    if (isActive) return 'white.high';
+    if (isDisabled) return 'black.low';
+    return 'primary.500';
+  }, [isActive, isDisabled]);
+  return /*#__PURE__*/React__default.createElement(react.Box, Object.assign({
+    __css: styles,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, rest), children, onClose && /*#__PURE__*/React__default.createElement(react.Box, {
+    onClick: isDisabled ? undefined : onClose,
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    ml: 2,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+    color: closeColor,
+    size: 4
+  })));
+};
+Chips.defaultProps = {
+  isDisabled: false,
+  isActive: false,
+  onClose: undefined,
+  children: undefined,
+  size: 'sm'
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
-const DataTable = ({
-  columns,
-  dataSource = [],
-  isLoading,
-  withSelectedRow,
-  onSelectedRow,
-  onSort,
-  manualSorting,
-  sortingState,
-  styles,
-  ...props
-}) => {
+const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    columns,
+    dataSource = [],
+    isLoading,
+    withSelectedRow,
+    onSelectedRow,
+    onSort,
+    sortDescFirst,
+    styles,
+    sortingState,
+    headerSticky,
+    manualSorting,
+    onRowClick
+  } = props;
+  const [isFirstLoad, setIsFirstLoad] = React.useState(true);
   const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = React.useState({});
   const dataColumns = React.useMemo(() => columns, [columns]);
@@ -558,16 +584,20 @@ const DataTable = ({
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
-      checked: table.getIsAllRowsSelected(),
-      indeterminate: table.getIsSomeRowsSelected(),
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
+      "data-test-id": "select-header-data-table"
+    }, {
+      isChecked: table.getIsAllRowsSelected(),
+      isIndeterminate: table.getIsSomeRowsSelected(),
       onChange: table.getToggleAllRowsSelectedHandler()
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
-      checked: row.getIsSelected(),
-      indeterminate: row.getIsSomeSelected(),
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
+      "data-test-id": `select-data-table-${row.index}`
+    }, {
+      isChecked: row.getIsSelected(),
+      isIndeterminate: row.getIsSomeSelected(),
       onChange: row.getToggleSelectedHandler()
     }))
   }], []);
@@ -579,9 +609,6 @@ const DataTable = ({
   };
   const onSortingChange = data => {
     setSorting(data);
-    if (onSort) {
-      onSort(data);
-    }
   };
   const table = reactTable.useReactTable({
     data: dataSource,
@@ -589,24 +616,39 @@ const DataTable = ({
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     manualPagination: true,
-    sortDescFirst: true,
+    manualSorting,
+    sortDescFirst,
     state: {
       sorting,
       rowSelection
     },
     onRowSelectionChange,
-    onSortingChange,
-    manualSorting
+    onSortingChange
   });
+  const {
+    getSelectedRowModel,
+    toggleAllRowsSelected
+  } = table;
   const {
     flatRows
-  } = table.getSelectedRowModel();
+  } = getSelectedRowModel();
   React.useEffect(() => {
     const rowData = flatRows.map(row => row.original);
     if (onSelectedRow) {
       onSelectedRow(rowData);
     }
   }, [flatRows]);
+  React.useImperativeHandle(ref, () => ({
+    toggleAllRowsSelected
+  }));
+  React.useEffect(() => {
+    if (onSort && !isFirstLoad) {
+      onSort(sorting);
+    }
+  }, [sorting]);
+  React.useEffect(() => {
+    setIsFirstLoad(false);
+  }, []);
   return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
     w: "100%",
     h: "100%",
@@ -619,7 +661,12 @@ const DataTable = ({
     color: "primary.500",
     thickness: "4px",
     size: "lg"
-  })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
+  })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
+    position: 'sticky',
+    top: 0,
+    bg: 'white',
+    zIndex: 1
+  } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
     key: headerGroup.id,
     bg: react.useColorModeValue('initial', 'ebony-clay.700')
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
@@ -651,6 +698,7 @@ const DataTable = ({
       h: 2
     }))));
   })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
+    "data-test-id": "6aZAeefGHBA2oG1wLuv-L",
     key: row.id
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
     css: react$1.css`
@@ -659,13 +707,18 @@ const DataTable = ({
                     border-bottom: none;
                   }
                 }
-              `
+              `,
+    onClick: () => {
+      if (onRowClick) {
+        onRowClick(row.original);
+      }
+    }
   }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
     key: cell.id,
     fontSize: "text.sm",
     color: react.useColorModeValue('dark.800', 'dark.300')
   }, styles === null || styles === void 0 ? void 0 : styles.tableCell), reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))))))));
-};
+});
 /* eslint-disable react/default-props-match-prop-types */
 DataTable.defaultProps = {
   withSelectedRow: false,
@@ -679,7 +732,10 @@ DataTable.defaultProps = {
   onSelectedRow: undefined,
   onSort: undefined,
   manualSorting: false,
-  sortingState: []
+  sortingState: [],
+  sortDescFirst: false,
+  headerSticky: false,
+  onRowClick: undefined
 };
 
 const getProperties = props => {
@@ -3942,7 +3998,7 @@ const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
   }
 });
 
-const Chips = /*#__PURE__*/styledSystem.defineStyleConfig({
+const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
     const {
       isDisabled,
@@ -4129,6 +4185,7 @@ const rotate = /*#__PURE__*/react$1.keyframes({
 const getLoaderColor = color => {
   if (color === 'primary') return colors.primary[600];
   if (color === 'danger') return colors.danger[500];
+  if (color === 'warning') return colors.warning[700];
   return colors.white.high;
 };
 const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
@@ -4487,7 +4544,7 @@ var components = {
   Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
-  Chips: Chips,
+  Chips: Chips$1,
   FormLabel: FormLabel,
   Input: Input,
   LoaderStyle: LoaderStyle,
@@ -4734,6 +4791,18 @@ Object.defineProperty(exports, 'Heading', {
     return react.Heading;
   }
 });
+Object.defineProperty(exports, 'Icon', {
+  enumerable: true,
+  get: function () {
+    return react.Icon;
+  }
+});
+Object.defineProperty(exports, 'Image', {
+  enumerable: true,
+  get: function () {
+    return react.Image;
+  }
+});
 Object.defineProperty(exports, 'InputElementLeft', {
   enumerable: true,
   get: function () {
@@ -4746,6 +4815,24 @@ Object.defineProperty(exports, 'InputElementRight', {
     return react.InputRightElement;
   }
 });
+Object.defineProperty(exports, 'List', {
+  enumerable: true,
+  get: function () {
+    return react.List;
+  }
+});
+Object.defineProperty(exports, 'ListIcon', {
+  enumerable: true,
+  get: function () {
+    return react.ListIcon;
+  }
+});
+Object.defineProperty(exports, 'ListItem', {
+  enumerable: true,
+  get: function () {
+    return react.ListItem;
+  }
+});
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
   get: function () {
@@ -4776,6 +4863,72 @@ Object.defineProperty(exports, 'ModalOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'OrderedList', {
+  enumerable: true,
+  get: function () {
+    return react.OrderedList;
+  }
+});
+Object.defineProperty(exports, 'Popover', {
+  enumerable: true,
+  get: function () {
+    return react.Popover;
+  }
+});
+Object.defineProperty(exports, 'PopoverAnchor', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverAnchor;
+  }
+});
+Object.defineProperty(exports, 'PopoverArrow', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverArrow;
+  }
+});
+Object.defineProperty(exports, 'PopoverBody', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverBody;
+  }
+});
+Object.defineProperty(exports, 'PopoverCloseButton', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverCloseButton;
+  }
+});
+Object.defineProperty(exports, 'PopoverContent', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverContent;
+  }
+});
+Object.defineProperty(exports, 'PopoverFooter', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverFooter;
+  }
+});
+Object.defineProperty(exports, 'PopoverHeader', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverHeader;
+  }
+});
+Object.defineProperty(exports, 'PopoverTrigger', {
+  enumerable: true,
+  get: function () {
+    return react.PopoverTrigger;
+  }
+});
+Object.defineProperty(exports, 'Portal', {
+  enumerable: true,
+  get: function () {
+    return react.Portal;
+  }
+});
 Object.defineProperty(exports, 'Stack', {
   enumerable: true,
   get: function () {
@@ -4824,6 +4977,12 @@ Object.defineProperty(exports, 'Tooltip', {
     return react.Tooltip;
   }
 });
+Object.defineProperty(exports, 'UnorderedList', {
+  enumerable: true,
+  get: function () {
+    return react.UnorderedList;
+  }
+});
 Object.defineProperty(exports, 'VStack', {
   enumerable: true,
   get: function () {
@@ -4962,6 +5121,7 @@ exports.Button = Button;
 exports.Card = CardCustom;
 exports.Checkbox = CheckboxComponent;
 exports.CheckboxGroup = CheckboxGroupComponent;
+exports.Chips = Chips;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;
 exports.Datepicker = Datepicker;