@ctlyst.id/internal-ui 2.0.8 → 2.0.9

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, ColumnSort, 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: ColumnSort[] | SortingState | ((prevState: SortingState) => 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/data-table/components/indeterminate-checkbox.d.ts

@@ -1,5 +1,8 @@
-import * as React from 'react';
-declare const IndeterminateCheckbox: ({ indeterminate, ...rest }: {
-    indeterminate: boolean;
-} & React.HTMLProps<HTMLInputElement>) => JSX.Element;
+import type { CheckboxProps } from '@chakra-ui/react';
+import React from 'react';
+interface IndeterminateCheckboxProps extends CheckboxProps {
+    isIndeterminate?: boolean;
+    name: string;
+}
+declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default IndeterminateCheckbox;

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,104 @@ CheckboxGroupComponent.defaultProps = {
   errorMessage: ''
 };
 
-const IndeterminateCheckbox = ({
-  indeterminate = false,
+const Chips = ({
+  children,
   ...rest
 }) => {
-  const ref = React.useRef(null);
+  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'
+};
+
+const useCombinedRefs = (...refs) => {
+  const targetRef = React.useRef();
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      /* eslint-disable no-param-reassign */
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};
+const IndeterminateCheckbox = /*#__PURE__*/React.forwardRef(({
+  isIndeterminate,
+  isChecked,
+  ...rest
+}, ref) => {
+  const defaultRef = React.useRef(null);
+  const combinedRef = useCombinedRefs(ref, defaultRef);
   React.useEffect(() => {
-    if (ref.current && typeof indeterminate === 'boolean') {
-      ref.current.indeterminate = !rest.checked && indeterminate;
+    if (combinedRef !== null && combinedRef !== void 0 && combinedRef.current) {
+      combinedRef.current.indeterminate = isIndeterminate !== null && isIndeterminate !== void 0 ? isIndeterminate : false;
     }
-  }, [ref, indeterminate]);
-  return /*#__PURE__*/React.createElement(react.Flex, {
-    align: "center"
-  }, /*#__PURE__*/React.createElement("input", Object.assign({
-    type: "checkbox",
-    ref: ref
-  }, rest)));
+  }, [combinedRef, isIndeterminate]);
+  return /*#__PURE__*/React__default.createElement(react.Checkbox, Object.assign({
+    ref: combinedRef,
+    focusBorderColor: "0",
+    isIndeterminate: isIndeterminate,
+    isChecked: isChecked,
+    inputProps: {
+      'data-test-id': `CT_component_indeterminate-checkbox_${rest.id || rest.name}`
+    }
+  }, rest));
+});
+IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';
+IndeterminateCheckbox.defaultProps = {
+  isIndeterminate: false
 };
 
 /* 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 [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = React.useState({});
   const dataColumns = React.useMemo(() => columns, [columns]);
@@ -558,14 +625,18 @@ const DataTable = ({
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
+    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({
+      name: "select-header"
+    }, {
       checked: table.getIsAllRowsSelected(),
       indeterminate: table.getIsSomeRowsSelected(),
       onChange: table.getToggleAllRowsSelectedHandler()
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
+    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({
+      name: `select-${row.index}`
+    }, {
       checked: row.getIsSelected(),
       indeterminate: row.getIsSomeSelected(),
       onChange: row.getToggleSelectedHandler()
@@ -589,24 +660,31 @@ 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
+  }));
   return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
     w: "100%",
     h: "100%",
@@ -619,7 +697,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,21 +734,27 @@ 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`
-                &:last-child {
-                  td {
-                    border-bottom: none;
+                  &:last-child {
+                    td {
+                      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 +768,10 @@ DataTable.defaultProps = {
   onSelectedRow: undefined,
   onSort: undefined,
   manualSorting: false,
-  sortingState: []
+  sortingState: [],
+  sortDescFirst: false,
+  headerSticky: false,
+  onRowClick: undefined
 };
 
 const getProperties = props => {
@@ -3942,7 +4034,7 @@ const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
   }
 });
 
-const Chips = /*#__PURE__*/styledSystem.defineStyleConfig({
+const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
     const {
       isDisabled,
@@ -4129,6 +4221,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 +4580,7 @@ var components = {
   Button: Button$1,
   Card: CardStyle,
   Checkbox: Checkbox,
-  Chips: Chips,
+  Chips: Chips$1,
   FormLabel: FormLabel,
   Input: Input,
   LoaderStyle: LoaderStyle,
@@ -4734,6 +4827,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 +4851,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 +4899,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 +5013,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 +5157,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;