@ballistix.digital/react-components 0.4.113 → 0.4.114

package/dist/index.d.ts

@@ -12,7 +12,7 @@ import { Option, SelectValue } from 'react-tailwindcss-select/dist/components/ty
 export { fromSelectMenuOptionToStringValue } from 'helpers/format';
 import { FormikProps, FormikValues } from 'formik';
 
-declare const base$l: {
+declare const base$m: {
     loading: string;
     spinner: string;
     empty: string;
@@ -20,7 +20,7 @@ declare const base$l: {
     container: string;
     indicator: string;
 };
-type TAvatarElementStyles = DeepPartialType$1<typeof base$l>;
+type TAvatarElementStyles = DeepPartialType$1<typeof base$m>;
 
 type TProps$f = {
     src?: string | undefined;
@@ -36,12 +36,12 @@ type TProps$f = {
 };
 declare const AvatarElement: FC<TProps$f>;
 
-declare const base$k: {
+declare const base$l: {
     container: string;
     indicator: string;
     button: string;
 };
-type TBadgeElementStyles = DeepPartialType$1<typeof base$k>;
+type TBadgeElementStyles = DeepPartialType$1<typeof base$l>;
 
 type TProps$e = {
     children: string | ReactNode;
@@ -70,21 +70,21 @@ type TButtonElementProps = {
 };
 declare const ButtonElement: FC<TButtonElementProps>;
 
-declare const base$j: {
+declare const base$k: {
     container: string;
     content: string;
     icon: string;
     spinner: string;
 };
-type TButtonElementStyles = DeepPartialType$1<typeof base$j>;
+type TButtonElementStyles = DeepPartialType$1<typeof base$k>;
 
-declare const base$i: {
+declare const base$j: {
     container: string;
     firstButton: string;
     button: string;
     lastButton: string;
 };
-type TButtonGroupElementStyles = DeepPartialType$1<typeof base$i>;
+type TButtonGroupElementStyles = DeepPartialType$1<typeof base$j>;
 
 type TProps$d = {
     children: ReactElement[];
@@ -92,14 +92,14 @@ type TProps$d = {
 };
 declare const ButtonGroupElement: FC<TProps$d>;
 
-declare const base$h: {
+declare const base$i: {
     container: string;
     button: string;
     compact: string;
     dots: string;
     items: string;
 };
-type TDropdownElementStyles = DeepPartialType$1<typeof base$h>;
+type TDropdownElementStyles = DeepPartialType$1<typeof base$i>;
 
 type TProps$c = {
     children: ReactElement | ReactElement[];
@@ -155,7 +155,7 @@ type TInputGroupFormProps = {
 };
 declare const InputGroupForm: FC<TInputGroupFormProps>;
 
-declare const base$g: {
+declare const base$h: {
     container: string;
     head: string;
     body: string;
@@ -168,13 +168,13 @@ declare const base$g: {
     description: string;
     error: string;
 };
-type TInputGroupStyles = DeepPartialType$1<typeof base$g>;
+type TInputGroupStyles = DeepPartialType$1<typeof base$h>;
 
-declare const base$f: {
+declare const base$g: {
     container: string;
     content: string;
 };
-type TContainerLayoutStyles = DeepPartialType$1<typeof base$f>;
+type TContainerLayoutStyles = DeepPartialType$1<typeof base$g>;
 
 type TProps$a = {
     children: ReactNode;
@@ -183,14 +183,14 @@ type TProps$a = {
 };
 declare const ContainerLayout: FC<TProps$a>;
 
-declare const base$e: {
+declare const base$f: {
     container: string;
     head: string;
     line: string;
     body: string;
     content: string;
 };
-type TDividerLayoutStyles = DeepPartialType$1<typeof base$e>;
+type TDividerLayoutStyles = DeepPartialType$1<typeof base$f>;
 
 type TProps$9 = {
     children?: ReactNode;
@@ -199,12 +199,12 @@ type TProps$9 = {
 };
 declare const DividerLayout: FC<TProps$9>;
 
-declare const base$d: {
+declare const base$e: {
     container: string;
     list: string;
     item: string;
 };
-type TListContainerLayoutStyles = DeepPartialType$1<typeof base$d>;
+type TListContainerLayoutStyles = DeepPartialType$1<typeof base$e>;
 
 type TProps$8 = {
     children: ReactElement | ReactElement[];
@@ -213,14 +213,14 @@ type TProps$8 = {
 };
 declare const ListContainerLayout: FC<TProps$8>;
 
-declare const base$c: {
+declare const base$d: {
     container: string;
     figure: string;
     svg: string;
     title: string;
     paragraph: string;
 };
-type TMediaObjectLayoutStyles = DeepPartialType$1<typeof base$c>;
+type TMediaObjectLayoutStyles = DeepPartialType$1<typeof base$d>;
 
 type TProps$7 = {
     title: string;
@@ -231,11 +231,11 @@ type TProps$7 = {
 };
 declare const MediaObjectLayout: FC<TProps$7>;
 
-declare const base$b: {
+declare const base$c: {
     container: string;
     section: string;
 };
-type TPanelLayoutStyles = DeepPartialType$1<typeof base$b>;
+type TPanelLayoutStyles = DeepPartialType$1<typeof base$c>;
 
 type TContainerProps$2 = {
     children: ReactNode;
@@ -280,7 +280,7 @@ type TTableListProps$1<TData> = {
     hasStickyHeader?: boolean;
     hasVerticalSeparators?: boolean;
     areControlsVisible?: boolean;
-    styles?: TTableListStyles & {
+    styles?: TTableListStyles$1 & {
         components: {
             buttonElement: TButtonElementStyles$1;
             dropdownElement: TDropdownElementStyles$1;
@@ -296,7 +296,7 @@ type TTableListProps$1<TData> = {
 };
 declare const TableList: FC<TTableListProps$1<TData$1>>;
 
-declare const base$a: {
+declare const base$b: {
     container: string;
     head: {
         container: string;
@@ -350,7 +350,7 @@ declare const base$a: {
         };
     };
 };
-type TTableListStyles = DeepPartialType$1<typeof base$a>;
+type TTableListStyles$1 = DeepPartialType$1<typeof base$b>;
 
 type TData = any;
 type VisibilityState = {
@@ -386,9 +386,47 @@ type TTableListProps<TData> = {
     head?: (params: Params) => ReactNode;
     foot?: (params: Params) => ReactNode;
     onChange?: (params: Params) => void;
+    styles?: TTableListStyles;
 };
 declare const TableList2: FC<TTableListProps<TData>>;
 
+declare const base$a: {
+    container: string;
+    head: string;
+    body: {
+        container: string;
+        wrapper: string;
+        content: string;
+        styleWrapper: string;
+        table: {
+            container: string;
+            head: {
+                container: string;
+                row: string;
+                cell: string;
+                checkbox: string;
+            };
+            body: {
+                container: string;
+                row: string;
+                cell: string;
+                checkbox: string;
+                indicator: string;
+            };
+        };
+    };
+    foot: string;
+    sortIndicator: {
+        container: string;
+        isSorted: string;
+        isNotSorted: string;
+        icon: {
+            container: string;
+        };
+    };
+};
+type TTableListStyles = DeepPartialType$1<typeof base$a>;
+
 declare const base$9: {
     container: string;
     list: string;
@@ -922,4 +960,4 @@ declare const base: {
 };
 type TCheckboxInputGroupFormStyles = DeepPartialType$1<typeof base>;
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputGroupForm as CheckboxInputFormGroup, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, type TButtonElementProps, type TCheckboxInputGroupFormProps, type TCheckboxInputGroupFormStyles, type TDateMenuFormProps, type TDateMenuFormStyles, type TInputGroupFormProps, type TInputGroupStyles, type TModalOverlayProps, type TSelectMenuFormProps, type TSelectMenuFormStyles, type TTableListProps as TTableList2Props, type TTableListProps$1 as TTableListProps, type TTableListStyles, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputGroupForm as CheckboxInputFormGroup, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, type TButtonElementProps, type TCheckboxInputGroupFormProps, type TCheckboxInputGroupFormStyles, type TDateMenuFormProps, type TDateMenuFormStyles, type TInputGroupFormProps, type TInputGroupStyles, type TModalOverlayProps, type TSelectMenuFormProps, type TSelectMenuFormStyles, type TTableListProps as TTableList2Props, type TTableListProps$1 as TTableListProps, type TTableListStyles$1 as TTableListStyles, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation };

package/dist/index.esm.js

@@ -118,7 +118,7 @@ var AvatarElement = function (props) {
     return (jsx("a", { href: url, children: jsxs("div", { className: "flex items-center", children: [jsxs("span", { className: "flex items-center justify-center", children: [jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsx("span", { className: styles.indicator })] }), children && jsx("div", { className: "ml-3", children: children })] }) }));
 };
 
-var base$l = {
+var base$m = {
     loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
     spinner: 'w-5 h-5 animate-spin text-gray-400',
     empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
@@ -197,7 +197,7 @@ var blocked = {
     indicator: 'bg-red-400',
 };
 var styles$o = {
-    base: base$l,
+    base: base$m,
     xs: xs$4,
     sm: sm$5,
     md: md$4,
@@ -230,7 +230,7 @@ var BadgeElement = function (props) {
     return (jsxs("span", { className: styles.container, children: [type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
 };
 
-var base$k = {
+var base$l = {
     container: 'inline-flex items-center font-medium py-0.5',
     indicator: '',
     button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
@@ -314,7 +314,7 @@ var loading$1 = {
     container: 'cursor-progress',
 };
 var styles$n = {
-    base: base$k,
+    base: base$l,
     normal: normal$5,
     indicator: indicator,
     close: close,
@@ -383,7 +383,7 @@ var ButtonElement = function (props) {
     return (jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] })), status === 'error' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] })), status === 'success' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsx("div", { children: children })] }))] }));
 };
 
-var base$j = {
+var base$k = {
     container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 duration-300',
     content: 'flex gap-2',
     icon: '',
@@ -436,7 +436,7 @@ var disabled$4 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
 var styles$m = {
-    base: base$j,
+    base: base$k,
     primary: primary,
     secondary: secondary,
     outline: outline,
@@ -478,14 +478,14 @@ var ButtonGroupElement = function (props) {
         }) }));
 };
 
-var base$i = {
+var base$j = {
     container: 'relative z-0 inline-flex shadow-sm rounded-md',
     firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
 };
 var styles$l = {
-    base: base$i,
+    base: base$j,
 };
 
 var Container$3 = function (props) {
@@ -507,7 +507,7 @@ var DropdownElement = {
     Item: Menu.Item,
 };
 
-var base$h = {
+var base$i = {
     container: 'inline-block text-left',
     button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
@@ -529,7 +529,7 @@ var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
 var styles$k = {
-    base: base$h,
+    base: base$i,
     button: button,
     compact: compact,
     'bottom-left': bottomLeft,
@@ -558,10 +558,10 @@ var InputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     var invalidIcon = (jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.body, children: [leading && jsx("div", { className: styles.leading, children: leading }), !htmlType ||
-                        (htmlType !== 'area' && (jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && 'h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && jsx("p", { className: styles.error, children: error })] })] }));
+                        (htmlType !== 'area' && (jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && jsx("p", { className: styles.error, children: error })] })] }));
 };
 
-var base$g = {
+var base$h = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -625,7 +625,7 @@ var disabled$3 = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
 };
 var styles$j = {
-    base: base$g,
+    base: base$h,
     leading: leading$2,
     trailing: trailing$2,
     normal: normal$4,
@@ -666,7 +666,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$f = {
+var base$g = {
     container: '',
     content: '',
 };
@@ -681,7 +681,7 @@ var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
 var styles$i = {
-    base: base$f,
+    base: base$g,
     break: breakStyles,
     center: center$3,
     fill: fill$1,
@@ -702,7 +702,7 @@ var DividerLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, "aria-hidden": "true", children: jsx("div", { className: styles.line }) }), jsx("div", { className: styles.body, children: jsx("div", { className: styles.content, children: children }) })] }));
 };
 
-var base$e = {
+var base$f = {
     container: 'relative',
     head: 'absolute inset-0 flex items-center',
     line: 'w-full border-t border-gray-300',
@@ -719,7 +719,7 @@ var right = {
     body: 'justify-end',
 };
 var styles$h = {
-    base: base$e,
+    base: base$f,
     left: left,
     center: center$2,
     right: right,
@@ -742,7 +742,7 @@ var ListContainerLayout = function (props) {
             }) }) }));
 };
 
-var base$d = {
+var base$e = {
     container: '',
     list: '',
     item: '',
@@ -774,7 +774,7 @@ var cardSticky = {
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
 var styles$g = {
-    base: base$d,
+    base: base$e,
     fill: fill,
     'fill-sticky': fillSticky,
     center: center$1,
@@ -807,7 +807,7 @@ var MediaObjectLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.figure, children: $svg }), jsxs("div", { children: [jsx("h4", { className: styles.title, children: title }), jsx("p", { className: styles.paragraph, children: paragraph })] })] }));
 };
 
-var base$c = {
+var base$d = {
     container: '',
     figure: 'mr-4 flex-shrink-0',
     svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
@@ -863,7 +863,7 @@ var wideReversed = {
     svg: 'h-32 w-full sm:w-32',
 };
 var styles$f = {
-    base: base$c,
+    base: base$d,
     top: top,
     'top-reversed': topReversed,
     center: center,
@@ -909,7 +909,7 @@ var LayoutPanel = {
     Section: Section,
 };
 
-var base$b = {
+var base$c = {
     container: 'bg-white overflow-hidden shadow',
     section: 'px-4 py-5 sm:px-6',
 };
@@ -920,7 +920,7 @@ var sticky$1 = {
     container: 'sm:rounded-lg',
 };
 var styles$e = {
-    base: base$b,
+    base: base$c,
     normal: normal$3,
     sticky: sticky$1,
 };
@@ -1068,7 +1068,7 @@ var PanelPaginationNavigation = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxs("div", { className: styles.desktop.container, children: [jsx("div", { children: jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
 };
 
-var base$a = {
+var base$b = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -1090,7 +1090,7 @@ var base$a = {
     icon: 'w-5 h-5',
 };
 var styles$d = {
-    base: base$a,
+    base: base$b,
 };
 
 var TableList = function (props) {
@@ -1226,7 +1226,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate, children: children })] }) }));
 };
 
-var base$9 = {
+var base$a = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -1339,7 +1339,7 @@ var controlled = {
     },
 };
 var styles$c = {
-    base: base$9,
+    base: base$a,
     normal: normal$2,
     panel: panel$1,
     full: full,
@@ -1349,10 +1349,27 @@ var styles$c = {
 };
 
 var TableList2 = function (props) {
-    var config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onChange = props.onChange;
-    var _a = useState([]), sorting = _a[0], setSorting = _a[1];
-    var _b = useState({}), columnVisibility = _b[0], setColumnVisibility = _b[1];
-    var _c = useState([]), columnOrder = _c[0], setColumnOrder = _c[1];
+    var _a, _b;
+    var config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onChange = props.onChange, stylesOverrides = props.styles;
+    var _c = useState([]), sorting = _c[0], setSorting = _c[1];
+    var _d = useState({
+        title: false,
+    }), columnVisibility = _d[0], setColumnVisibility = _d[1];
+    var _e = useState([]), columnOrder = _e[0], setColumnOrder = _e[1];
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$b.base, key), 
+            // type && get(defaultStyles[type], key),
+            // hasStickyHeader && get(defaultStyles.sticky, key),
+            // hasVerticalSeparators && get(defaultStyles.separated, key),
+            // areControlsVisible && get(defaultStyles.controlled, key),
+            get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
     var table = useReactTable({
         getCoreRowModel: getCoreRowModel(),
         columns: config.columns,
@@ -1385,31 +1402,57 @@ var TableList2 = function (props) {
             onChange && onChange(state);
         }
     }, [onChange, state]);
-    return (jsxs("div", { className: styles$b.container, children: [jsx("div", { className: styles$b.head, children: head && head(state) }), jsx("div", { className: "", children: jsx("div", { className: "flow-root relative", children: jsx("div", { className: "overflow-x-scroll overflow-y-visible", children: jsxs("div", { className: "inline-block min-w-full align-middle", children: [jsxs("table", { className: "min-w-full border-separate border-spacing-0 ", children: [jsx("thead", { className: "", children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", { colSpan: header.colSpan, className: toClassName(styles$b.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
+    // Set column visibility state on mount.
+    useEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility)) {
+            return;
+        }
+        var base = (_b = table
+            .getAllColumns()) === null || _b === void 0 ? void 0 : _b.map(function (column) { return ((column === null || column === void 0 ? void 0 : column.id) ? column === null || column === void 0 ? void 0 : column.id : column === null || column === void 0 ? void 0 : column.accessorKey); }).map(function (key) {
+            var _a;
+            return (_a = {}, _a[key] = false, _a);
+        }).reduce(function (a, b) { return (__assign(__assign({}, a), b)); });
+        var current = ((_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility) &&
+            ((_e = (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultVisibility) === null || _e === void 0 ? void 0 : _e.length) > 0
+            ? (_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.defaultVisibility.map(function (key) {
+                var _a;
+                return (_a = {}, _a[key] = true, _a);
+            }).reduce(function (a, b) { return (__assign(__assign({}, a), b)); })
+            : {};
+        setColumnVisibility(__assign(__assign({}, base), current));
+    }, [(_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility, table]);
+    useEffect(function () {
+        var _a, _b;
+        if ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultOrder) {
+            setColumnOrder((_b = config === null || config === void 0 ? void 0 : config.options) === null || _b === void 0 ? void 0 : _b.defaultOrder);
+        }
+    }, [(_b = config === null || config === void 0 ? void 0 : config.options) === null || _b === void 0 ? void 0 : _b.defaultOrder]);
+    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: head && head(state) }), jsx("div", { className: "", children: jsx("div", { className: "flow-root relative", children: jsx("div", { className: "overflow-x-scroll overflow-y-visible", children: jsxs("div", { className: "inline-block min-w-full align-middle", children: [jsxs("table", { className: "min-w-full border-separate border-spacing-0 ", children: [jsx("thead", { className: "", children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
                                                         minWidth: !!header.column.columnDef.size &&
                                                             header.column.columnDef.size !== 150
                                                             ? "".concat(header.column.columnDef.size, "px")
                                                             : 'auto',
                                                     }, children: [header.isPlaceholder
                                                             ? null
-                                                            : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: toClassName(styles$b.sortIndicator.container, header.column.getIsSorted()
-                                                                ? styles$b.sortIndicator.isSorted
-                                                                : styles$b.sortIndicator.isNotSorted), children: jsx(ChevronDownIcon, { className: toClassName(styles$b.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
+                                                            : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: toClassName(styles.sortIndicator.container, header.column.getIsSorted()
+                                                                ? styles.sortIndicator.isSorted
+                                                                : styles.sortIndicator.isNotSorted), children: jsx(ChevronDownIcon, { className: toClassName(styles.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
                                                                     '-scale-100'), "aria-hidden": "true" }) }))] }, header.id)); }) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: "border", children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
                                                 var _a;
-                                                return (jsx("tr", { className: toClassName(styles$b.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
+                                                return (jsx("tr", { className: toClassName(styles.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
                                                         index % 2 === 0 &&
                                                         'bg-gray-50'), children: row.getVisibleCells().map(function (cell) {
                                                         var _a, _b, _c;
-                                                        return (jsx("td", { className: toClassName(styles$b.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
+                                                        return (jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
                                                                 index !==
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles$b.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
-var styles$b = {
+var base$9 = {
     container: '',
     head: '',
     body: {
@@ -1444,6 +1487,9 @@ var styles$b = {
         },
     },
 };
+var styles$b = {
+    base: base$9,
+};
 
 var createColumnHelper = function () {
     return createColumnHelper$1();

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}