@ctlyst.id/internal-ui 2.0.9 → 2.0.11

package/dist/components/button/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Button } from './components/button';
 export * from './components/button';
-export { ButtonGroup, ButtonGroupProps, CloseButton, CloseButtonProps } from '@chakra-ui/react';
+export { ButtonGroup, ButtonGroupProps, CloseButton, CloseButtonProps, IconButton, IconButtonProps, } from '@chakra-ui/react';

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, RowSelectionInstance, 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,7 +16,7 @@ export interface DataTableProps<T = unknown> extends BoxProps {
     isLoading?: boolean;
     withSelectedRow?: boolean | undefined;
     onSelectedRow?: (data: T[]) => void;
-    onSort?: (data: ColumnSort[] | SortingState | ((prevState: SortingState) => SortingState)) => void;
+    onSort?: (data: SortingState) => void;
     manualSorting?: boolean;
     sortingState?: SortingState;
     sortDescFirst?: boolean;

package/dist/components/form/index.d.ts

@@ -4,3 +4,4 @@ export { default as InputField } from './components/input-field';
 export * from './components/input-field';
 export { default as TextareaField } from './components/textarea';
 export * from './components/textarea';
+export { FormControl, FormControlProps, FormLabel, FormLabelProps, InputGroup, InputGroupProps, RequiredIndicator, RequiredIndicatorProps, } from '@chakra-ui/react';

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './radio';
 export * from './rating';
 export * from './select';
 export * from './switch';
+export * from './table';
 export * from './tabs';
 export * from './text';
 export * from './tooltip';

package/dist/components/layouting/index.d.ts

@@ -1 +1 @@
-export { Box, BoxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridItem, GridItemProps, GridProps, HStack, Stack, StackProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, } from '@chakra-ui/react';
+export { Box, BoxProps, Center, Collapse, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridItem, GridItemProps, GridProps, HStack, Spacer, Stack, StackProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, } from '@chakra-ui/react';

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

@@ -1,2 +1,3 @@
 export { default as Loader } from './components/loader';
 export * from './components/loader';
+export { ScaleFade, ScaleFadeProps, Skeleton } from '@chakra-ui/react';

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export { Table as ChakraTable, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeadProps, TableProps, TableRowProps, Tbody, Td, Th, Thead, Tr, } from '@chakra-ui/react';

package/dist/components/text/index.d.ts

@@ -1 +1 @@
-export { Heading, HeadingProps, Text, TextProps } from '@chakra-ui/react';
+export { Code, CodeProps, Heading, HeadingProps, Link, LinkProps, Text, TextProps } from '@chakra-ui/react';

package/dist/hooks/index.d.ts

@@ -1,2 +1,2 @@
 export { default as useFetcher } from './useFetcher';
-export { useColorModeValue, useDisclosure, UseDisclosureProps } from '@chakra-ui/react';
+export { useBoolean, useColorModeValue, useDisclosure, UseDisclosureProps, useToken } from '@chakra-ui/react';

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

@@ -560,48 +560,6 @@ Chips.defaultProps = {
   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 (combinedRef !== null && combinedRef !== void 0 && combinedRef.current) {
-      combinedRef.current.indeterminate = isIndeterminate !== null && isIndeterminate !== void 0 ? isIndeterminate : false;
-    }
-  }, [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 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -618,6 +576,7 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     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]);
@@ -625,20 +584,20 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({
-      name: "select-header"
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
+      "data-test-id": "select-header-data-table"
     }, {
-      checked: table.getIsAllRowsSelected(),
-      indeterminate: table.getIsSomeRowsSelected(),
+      isChecked: table.getIsAllRowsSelected(),
+      isIndeterminate: table.getIsSomeRowsSelected(),
       onChange: table.getToggleAllRowsSelectedHandler()
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({
-      name: `select-${row.index}`
+    }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
+      "data-test-id": `select-data-table-${row.index}`
     }, {
-      checked: row.getIsSelected(),
-      indeterminate: row.getIsSomeSelected(),
+      isChecked: row.getIsSelected(),
+      isIndeterminate: row.getIsSomeSelected(),
       onChange: row.getToggleSelectedHandler()
     }))
   }], []);
@@ -650,9 +609,6 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const onSortingChange = data => {
     setSorting(data);
-    if (onSort) {
-      onSort(data);
-    }
   };
   const table = reactTable.useReactTable({
     data: dataSource,
@@ -685,6 +641,14 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   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%",
@@ -738,12 +702,12 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     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);
@@ -4731,18 +4695,48 @@ Object.defineProperty(exports, 'ButtonGroup', {
     return react.ButtonGroup;
   }
 });
+Object.defineProperty(exports, 'Center', {
+  enumerable: true,
+  get: function () {
+    return react.Center;
+  }
+});
 Object.defineProperty(exports, 'ChakraProvider', {
   enumerable: true,
   get: function () {
     return react.ChakraProvider;
   }
 });
+Object.defineProperty(exports, 'ChakraTable', {
+  enumerable: true,
+  get: function () {
+    return react.Table;
+  }
+});
 Object.defineProperty(exports, 'CloseButton', {
   enumerable: true,
   get: function () {
     return react.CloseButton;
   }
 });
+Object.defineProperty(exports, 'Code', {
+  enumerable: true,
+  get: function () {
+    return react.Code;
+  }
+});
+Object.defineProperty(exports, 'Collapse', {
+  enumerable: true,
+  get: function () {
+    return react.Collapse;
+  }
+});
+Object.defineProperty(exports, 'ColorModeScript', {
+  enumerable: true,
+  get: function () {
+    return react.ColorModeScript;
+  }
+});
 Object.defineProperty(exports, 'Container', {
   enumerable: true,
   get: function () {
@@ -4803,6 +4797,18 @@ Object.defineProperty(exports, 'Flex', {
     return react.Flex;
   }
 });
+Object.defineProperty(exports, 'FormControl', {
+  enumerable: true,
+  get: function () {
+    return react.FormControl;
+  }
+});
+Object.defineProperty(exports, 'FormLabel', {
+  enumerable: true,
+  get: function () {
+    return react.FormLabel;
+  }
+});
 Object.defineProperty(exports, 'Grid', {
   enumerable: true,
   get: function () {
@@ -4833,6 +4839,12 @@ Object.defineProperty(exports, 'Icon', {
     return react.Icon;
   }
 });
+Object.defineProperty(exports, 'IconButton', {
+  enumerable: true,
+  get: function () {
+    return react.IconButton;
+  }
+});
 Object.defineProperty(exports, 'Image', {
   enumerable: true,
   get: function () {
@@ -4851,6 +4863,18 @@ Object.defineProperty(exports, 'InputElementRight', {
     return react.InputRightElement;
   }
 });
+Object.defineProperty(exports, 'InputGroup', {
+  enumerable: true,
+  get: function () {
+    return react.InputGroup;
+  }
+});
+Object.defineProperty(exports, 'Link', {
+  enumerable: true,
+  get: function () {
+    return react.Link;
+  }
+});
 Object.defineProperty(exports, 'List', {
   enumerable: true,
   get: function () {
@@ -4965,6 +4989,30 @@ Object.defineProperty(exports, 'Portal', {
     return react.Portal;
   }
 });
+Object.defineProperty(exports, 'RequiredIndicator', {
+  enumerable: true,
+  get: function () {
+    return react.RequiredIndicator;
+  }
+});
+Object.defineProperty(exports, 'ScaleFade', {
+  enumerable: true,
+  get: function () {
+    return react.ScaleFade;
+  }
+});
+Object.defineProperty(exports, 'Skeleton', {
+  enumerable: true,
+  get: function () {
+    return react.Skeleton;
+  }
+});
+Object.defineProperty(exports, 'Spacer', {
+  enumerable: true,
+  get: function () {
+    return react.Spacer;
+  }
+});
 Object.defineProperty(exports, 'Stack', {
   enumerable: true,
   get: function () {
@@ -5001,18 +5049,48 @@ Object.defineProperty(exports, 'TabsProvider', {
     return react.TabsProvider;
   }
 });
+Object.defineProperty(exports, 'Tbody', {
+  enumerable: true,
+  get: function () {
+    return react.Tbody;
+  }
+});
+Object.defineProperty(exports, 'Td', {
+  enumerable: true,
+  get: function () {
+    return react.Td;
+  }
+});
 Object.defineProperty(exports, 'Text', {
   enumerable: true,
   get: function () {
     return react.Text;
   }
 });
+Object.defineProperty(exports, 'Th', {
+  enumerable: true,
+  get: function () {
+    return react.Th;
+  }
+});
+Object.defineProperty(exports, 'Thead', {
+  enumerable: true,
+  get: function () {
+    return react.Thead;
+  }
+});
 Object.defineProperty(exports, 'Tooltip', {
   enumerable: true,
   get: function () {
     return react.Tooltip;
   }
 });
+Object.defineProperty(exports, 'Tr', {
+  enumerable: true,
+  get: function () {
+    return react.Tr;
+  }
+});
 Object.defineProperty(exports, 'UnorderedList', {
   enumerable: true,
   get: function () {
@@ -5043,6 +5121,12 @@ Object.defineProperty(exports, 'extendTheme', {
     return react.extendTheme;
   }
 });
+Object.defineProperty(exports, 'useBoolean', {
+  enumerable: true,
+  get: function () {
+    return react.useBoolean;
+  }
+});
 Object.defineProperty(exports, 'useColorModeValue', {
   enumerable: true,
   get: function () {
@@ -5145,6 +5229,12 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+Object.defineProperty(exports, 'useToken', {
+  enumerable: true,
+  get: function () {
+    return react.useToken;
+  }
+});
 exports.Alert = Alert;
 exports.AlertAction = AlertAction;
 exports.AlertClose = AlertClose;