sti-antd-package 0.0.11 → 0.0.13

package/dist/components/Button/Group/Add/types.d.ts

@@ -6,4 +6,9 @@ export interface ButtonGroupAddComponentProps {
     loading?: boolean;
     onBack?: ButtonComponentProps['onClick'];
     onSave?: ButtonComponentProps['onClick'];
+    classNames?: string[];
+    className?: {
+        buttonBack?: string[];
+        buttonSave?: string[];
+    };
 }

package/dist/components/Button/Group/Edit/types.d.ts

@@ -9,4 +9,11 @@ export interface ButtonGroupEditComponentProps {
     setEditing?: React.Dispatch<React.SetStateAction<boolean>>;
     onBack?: ButtonComponentProps['onClick'];
     onSave?: ButtonComponentProps['onClick'];
+    classNames?: string[];
+    className?: {
+        buttonBack?: string[];
+        buttonCancel?: string[];
+        buttonSave?: string[];
+        buttonEdit?: string[];
+    };
 }

package/dist/components/DataGrid/Component.d.ts

@@ -1,6 +1,7 @@
+import { DataGridRow } from "../../context/DataGrid";
+import { DataGridComponentProps } from "./types";
 import React from "react";
 import "react-data-grid/lib/styles.css";
 export declare const filterColumnClassName: string;
-declare const DataGridComponent: React.FC;
+declare const DataGridComponent: <Rows extends DataGridRow<Key>, SummaryRows, Key extends React.Key>({ filterHeader, ...props }: DataGridComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default DataGridComponent;
-export declare const FilterRenderer: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataGrid/FilterRenderer/Component.d.ts

@@ -0,0 +1,4 @@
+import { FilterRendererProps } from "./types";
+import React from "react";
+declare const FilterRenderer: React.FC<FilterRendererProps>;
+export default FilterRenderer;

package/dist/components/DataGrid/FilterRenderer/types.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FilterRendererProps {
+    isCellSelected?: boolean;
+    column?: {};
+    children?: React.JSX.Element;
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./Component";
+export type * from "./types";

package/dist/components/DataGrid/types.d.ts

@@ -1,6 +1,14 @@
-import React from "react";
-export interface DataGridComponentProps {
+import { DataGridFilter, DataGridProviderProps } from "../../context/DataGrid";
+import React, { Ref } from "react";
+export interface DataGridComponentRef {
+    inputStopPropagation: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    selectStopPropagation: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    filter: () => DataGridFilter | undefined;
+    setFilter: (filter: DataGridFilter) => void;
+}
+export type DataGridComponentProps = DataGridProviderProps & {
     addRows?: boolean;
-    filterHeader?: boolean;
     extraLeft?: React.ReactNode;
-}
+    ref?: Ref<DataGridComponentRef>;
+};

package/dist/components/DatePicker/types.d.ts

@@ -2,7 +2,7 @@ import { formColLayout } from "../../constants";
 import { Variant } from "antd/es/config-provider";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { DatePickerProps } from "antd/es/date-picker";
-import { Rule, RuleObject } from "antd/es/form";
+import { Rule } from "antd/es/form";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { Dayjs } from "dayjs";
 import { ShouldUpdate } from "rc-field-form/lib/Field";
@@ -34,7 +34,6 @@ export interface DatePickerComponentProps {
     className?: Partial<Record<SemanticStructure, string>>;
     required?: boolean;
     rules?: Rule[];
-    ruleType?: RuleObject['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;

package/dist/components/DateRangePicker/types.d.ts

@@ -6,7 +6,7 @@ import { RangePickerProps } from "antd/es/date-picker";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import dayjs from "dayjs";
 import { ShouldUpdate } from "rc-field-form/lib/Field";
-import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
+import { NamePath, Rule } from "rc-field-form/lib/interface";
 import { SemanticStructure } from "rc-picker/lib/interface";
 import { RangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
 import { Ref } from "react";
@@ -35,7 +35,6 @@ export interface DateRangePickerComponentProps {
     className?: Partial<Record<SemanticStructure, string>>;
     required?: boolean;
     rules?: Rule[];
-    ruleType?: RuleObject['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;

package/dist/context/DataGrid/Context.d.ts

@@ -1,3 +1,3 @@
-import { DataGridContextType } from "./types";
-export declare const DataGridContext: import("react").Context<DataGridContextType>;
-export declare const useDataGrid: () => DataGridContextType;
+import { DataGridContextType, DataGridRow } from "./types";
+export declare const DataGridContext: import("react").Context<{}>;
+export declare const useDataGrid: <Row extends DataGridRow<Key>, SummaryRow, Key extends React.Key>() => DataGridContextType<Row, SummaryRow, Key>;

package/dist/context/DataGrid/Provider.d.ts

@@ -1,4 +1,6 @@
-import { DataGridProviderProps } from "./types";
+import { DataGridProviderProps, DataGridRow } from "./types";
 import React from "react";
-declare const DataGridProvider: React.FC<DataGridProviderProps>;
+declare const DataGridProvider: <Row extends DataGridRow<Key>, SummaryRow, Key extends React.Key>({ filterHeader, children, }: DataGridProviderProps & {
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DataGridProvider;

package/dist/context/DataGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Provider";
+export * from "./Context";
+export type * from "./types";

package/dist/context/DataGrid/types.d.ts

@@ -1,8 +1,38 @@
 import React from "react";
-export interface DataGridContextType {
+import { ColumnOrColumnGroup } from "react-data-grid";
+export type DataGridColumnType = "text" | "select";
+export type DataGridColumn<Row, SummaryRow = unknown> = ColumnOrColumnGroup<Row, SummaryRow> & {
+    hide?: boolean;
+};
+export interface DataGridFilterColumn {
+    type: DataGridColumnType;
+    value: string;
+}
+export interface DataGridFilter {
+    [key: string]: DataGridFilterColumn;
+}
+export interface DataGridRow<Key> {
+    index: Key;
+    read: boolean;
+    extraData?: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+export interface DataGridContextType<Row extends DataGridRow<Key>, SummaryRow, Key extends React.Key> {
+    rows?: Row[];
+    setRows?: React.Dispatch<React.SetStateAction<Row[]>>;
+    columns?: DataGridColumn<Row, SummaryRow>[];
+    setColumns?: React.Dispatch<React.SetStateAction<DataGridColumn<Row, SummaryRow>[]>>;
+    filterHeader?: boolean;
+    filter?: DataGridFilter;
+    setFilter?: React.Dispatch<React.SetStateAction<DataGridFilter>>;
     loading?: boolean;
     setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRows?: ReadonlySet<Key>;
+    setSelectedRows?: React.Dispatch<React.SetStateAction<ReadonlySet<Key> | undefined>>;
+    addRow?: (index: number) => Row[];
 }
 export interface DataGridProviderProps {
-    children?: React.ReactNode;
+    filterHeader?: boolean;
 }

package/dist/context/index.d.ts

@@ -1,5 +1,7 @@
 export { default as ConfigProvider, useConfig } from "./Config";
 export type { ConfigContextType, ConfigProviderProps, LinkType } from "./Config";
+export { useDataGrid } from "./DataGrid";
+export type { DataGridColumn, DataGridColumnType, DataGridContextType, DataGridFilter, DataGridFilterColumn, DataGridRow } from "./DataGrid";
 export { default as FeedbackProvider, useFeedback } from "./Feedback";
 export type { FeedbackContextType } from "./Feedback";
 export { useTableAsyncSearch } from "./TableAsyncSearch";

package/dist/index.d.ts

@@ -29,6 +29,7 @@ import { TableProps } from 'rc-table';
 import { GetRowKey, ExpandableConfig } from 'rc-table/lib/interface';
 import { AxiosResponse } from 'axios';
 import { TabsType, TabsPosition, TabsProps } from 'antd/es/tabs';
+import { ColumnOrColumnGroup } from 'react-data-grid';
 import { MessageInstance } from 'antd/es/message/interface';
 import { HookAPI } from 'antd/es/modal/useModal';
 import { NotificationInstance } from 'antd/es/notification/interface';
@@ -113,6 +114,11 @@ interface ButtonGroupAddComponentProps {
     loading?: boolean;
     onBack?: ButtonComponentProps['onClick'];
     onSave?: ButtonComponentProps['onClick'];
+    classNames?: string[];
+    className?: {
+        buttonBack?: string[];
+        buttonSave?: string[];
+    };
 }
 
 declare const ButtonGroupAddComponent: React.FC<ButtonGroupAddComponentProps>;
@@ -126,6 +132,13 @@ interface ButtonGroupEditComponentProps {
     setEditing?: React.Dispatch<React.SetStateAction<boolean>>;
     onBack?: ButtonComponentProps['onClick'];
     onSave?: ButtonComponentProps['onClick'];
+    classNames?: string[];
+    className?: {
+        buttonBack?: string[];
+        buttonCancel?: string[];
+        buttonSave?: string[];
+        buttonEdit?: string[];
+    };
 }
 
 declare const ButtonGroupEditComponent: React__default.FC<ButtonGroupEditComponentProps>;
@@ -248,7 +261,6 @@ interface DatePickerComponentProps {
     className?: Partial<Record<SemanticStructure, string>>;
     required?: boolean;
     rules?: Rule$2[];
-    ruleType?: RuleObject$2['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
@@ -283,7 +295,6 @@ interface DateRangePickerComponentProps {
     className?: Partial<Record<SemanticStructure, string>>;
     required?: boolean;
     rules?: Rule$1[];
-    ruleType?: RuleObject$1['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
@@ -671,6 +682,42 @@ declare const ConfigProvider: React.FC<ConfigProviderProps>;
 
 declare const useConfig: () => ConfigContextType;
 
+type DataGridColumnType = "text" | "select";
+type DataGridColumn<Row, SummaryRow = unknown> = ColumnOrColumnGroup<Row, SummaryRow> & {
+    hide?: boolean;
+};
+interface DataGridFilterColumn {
+    type: DataGridColumnType;
+    value: string;
+}
+interface DataGridFilter {
+    [key: string]: DataGridFilterColumn;
+}
+interface DataGridRow<Key> {
+    index: Key;
+    read: boolean;
+    extraData?: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+interface DataGridContextType<Row extends DataGridRow<Key>, SummaryRow, Key extends React__default.Key> {
+    rows?: Row[];
+    setRows?: React__default.Dispatch<React__default.SetStateAction<Row[]>>;
+    columns?: DataGridColumn<Row, SummaryRow>[];
+    setColumns?: React__default.Dispatch<React__default.SetStateAction<DataGridColumn<Row, SummaryRow>[]>>;
+    filterHeader?: boolean;
+    filter?: DataGridFilter;
+    setFilter?: React__default.Dispatch<React__default.SetStateAction<DataGridFilter>>;
+    loading?: boolean;
+    setLoading?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    selectedRows?: ReadonlySet<Key>;
+    setSelectedRows?: React__default.Dispatch<React__default.SetStateAction<ReadonlySet<Key> | undefined>>;
+    addRow?: (index: number) => Row[];
+}
+
+declare const useDataGrid: <Row extends DataGridRow<Key>, SummaryRow, Key extends React.Key>() => DataGridContextType<Row, SummaryRow, Key>;
+
 declare const FeedbackProvider: React__default.FC<{
     children?: React__default.ReactNode;
 }>;
@@ -964,5 +1011,5 @@ declare const useRemoveError: (setInputErrors: React.Dispatch<React.SetStateActi
     [key: string]: any;
 }>>) => (name?: string) => void;
 
-export { BaseModel, ButtonComponent, ButtonGroupAddComponent, ButtonGroupEditComponent, CardComponent, CascaderComponent, CheckboxComponent$1 as CheckboxComponent, CheckboxComponent as CheckboxGroupComponent, ConfigProvider, DateFormat, DatePickerComponent, DateRangePickerComponent, DropdownButtonComponent, FeedbackProvider, FormItemComponent, IconCheckOrClose, InputComponent, LinkComponent, NumberFormatComponent, RadioComponent, SelectAsyncComponent, SelectComponent, SwitchComponent, TableAsyncComponent, TableAsyncSearchComponent, TableCellEditableComponent, TableComponent, TableRowProvider, TabsComponent, TagComponent, TextAreaComponent, TransformBoolean, TransformDayjs, TransformNumber, colInline, colLayout, datePickerFormat, _default as formColLayout, getTableAsyncName, getTableFilterStorage, selectAsync, styleCSS, toCamel, useConfig, useFeedback, useFocus, useRemoveError, useTableAsyncSearch, useTableRow };
-export type { ButtonComponentProps, ButtonComponentRef, ButtonGroupAddComponentProps, ButtonGroupEditComponentProps, CardComponentProps, CascaderComponentProps, CascaderComponentRef, CheckboxComponentProps, CheckboxComponentRef, CheckboxGroupComponentProps, CheckboxGroupComponentRef, ConfigContextType, ConfigProviderProps, DatePickerComponentProps, DatePickerComponentRef, DateRangePickerComponentProps, DateRangePickerComponentRef, DefaultColumn, DefaultParams, DropdownButtonComponentProps, DropdownButtonMenuItem, FeedbackContextType, FormColLayout, FormColSizeSpan, FormItemComponentProps, IconCheckOrCloseProps, InputComponentProps, InputComponentRef, LinkComponentProps, LinkType, NumberFormatComponentProps, NumberFormatComponentRef, RadioComponentProps, SelectAsyncComponentProps, SelectAsyncComponentRef, SelectAsyncFormat, SelectAsyncProps, SelectComponentProps, SelectOption, SwitchComponentProps, TableAsyncComponentProps, TableAsyncComponentRef, TableAsyncSearchCheckbox, TableAsyncSearchComponentProps, TableAsyncSearchContextType, TableAsyncSearchDate, TableAsyncSearchDateRange, TableAsyncSearchFetchSelectMultiple, TableAsyncSearchItem, TableAsyncSearchItemType, TableAsyncSearchLocalSelectMultiple, TableAsyncSearchProviderProps, TableAsyncSearchSelect, TableAsyncSearchSelectMultiple, TableAsyncSearchSwitch, TableAsyncSearchText, TableAsyncType, TableButtonMiddle, TableCellEditableProps, TableComponentProps, TableParams, TableParamsFormatter, TableRowContextType, TableRowProviderProps, TabsComponentProps, TagComponentProps, TextAreaComponentProps, TextAreaComponentRef, YajraColumn, YajraColumnParams, YajraOrderParams, YajraParams, YajraSearchParams };
+export { BaseModel, ButtonComponent, ButtonGroupAddComponent, ButtonGroupEditComponent, CardComponent, CascaderComponent, CheckboxComponent$1 as CheckboxComponent, CheckboxComponent as CheckboxGroupComponent, ConfigProvider, DateFormat, DatePickerComponent, DateRangePickerComponent, DropdownButtonComponent, FeedbackProvider, FormItemComponent, IconCheckOrClose, InputComponent, LinkComponent, NumberFormatComponent, RadioComponent, SelectAsyncComponent, SelectComponent, SwitchComponent, TableAsyncComponent, TableAsyncSearchComponent, TableCellEditableComponent, TableComponent, TableRowProvider, TabsComponent, TagComponent, TextAreaComponent, TransformBoolean, TransformDayjs, TransformNumber, colInline, colLayout, datePickerFormat, _default as formColLayout, getTableAsyncName, getTableFilterStorage, selectAsync, styleCSS, toCamel, useConfig, useDataGrid, useFeedback, useFocus, useRemoveError, useTableAsyncSearch, useTableRow };
+export type { ButtonComponentProps, ButtonComponentRef, ButtonGroupAddComponentProps, ButtonGroupEditComponentProps, CardComponentProps, CascaderComponentProps, CascaderComponentRef, CheckboxComponentProps, CheckboxComponentRef, CheckboxGroupComponentProps, CheckboxGroupComponentRef, ConfigContextType, ConfigProviderProps, DataGridColumn, DataGridColumnType, DataGridContextType, DataGridFilter, DataGridFilterColumn, DataGridRow, DatePickerComponentProps, DatePickerComponentRef, DateRangePickerComponentProps, DateRangePickerComponentRef, DefaultColumn, DefaultParams, DropdownButtonComponentProps, DropdownButtonMenuItem, FeedbackContextType, FormColLayout, FormColSizeSpan, FormItemComponentProps, IconCheckOrCloseProps, InputComponentProps, InputComponentRef, LinkComponentProps, LinkType, NumberFormatComponentProps, NumberFormatComponentRef, RadioComponentProps, SelectAsyncComponentProps, SelectAsyncComponentRef, SelectAsyncFormat, SelectAsyncProps, SelectComponentProps, SelectOption, SwitchComponentProps, TableAsyncComponentProps, TableAsyncComponentRef, TableAsyncSearchCheckbox, TableAsyncSearchComponentProps, TableAsyncSearchContextType, TableAsyncSearchDate, TableAsyncSearchDateRange, TableAsyncSearchFetchSelectMultiple, TableAsyncSearchItem, TableAsyncSearchItemType, TableAsyncSearchLocalSelectMultiple, TableAsyncSearchProviderProps, TableAsyncSearchSelect, TableAsyncSearchSelectMultiple, TableAsyncSearchSwitch, TableAsyncSearchText, TableAsyncType, TableButtonMiddle, TableCellEditableProps, TableComponentProps, TableParams, TableParamsFormatter, TableRowContextType, TableRowProviderProps, TabsComponentProps, TagComponentProps, TextAreaComponentProps, TextAreaComponentRef, YajraColumn, YajraColumnParams, YajraOrderParams, YajraParams, YajraSearchParams };

package/dist/index.esm.js

@@ -1861,7 +1861,7 @@ const selectAsync = ({ format, request, initData, }) => {
 };
 
 var css_248z$9 = ".style-module_button-save__CGfus {\n  background-color: var(--color-primary-a0);\n}\n\n@keyframes style-module_zoom-in__HJzbj {\n  from {\n    width: 0;\n    opacity: 0;\n  }\n\n  to {\n    display: inline-flex;\n    transform: scaleX(100%) scaleY(100%);\n    opacity: 1;\n  }\n}\n\n@keyframes style-module_zoom-out__PqWZu {\n  from {\n    display: inline-flex;\n  }\n\n  to {\n    transform: scaleX(0) scaleY(0);\n    width: 0;\n    opacity: 0;\n  }\n}\n\ndiv.style-module_button-group__m4a-F.style-module_button-group-add__J3FOg>button:nth-child(-n + 1) {\n  margin-right: .5rem;\n}\n\ndiv.style-module_button-group__m4a-F.style-module_button-group-edit__-ZIEQ>button:nth-child(-n + 2) {\n  margin-right: .5rem;\n}\n\ndiv.style-module_button-group__m4a-F>button {\n  animation: style-module_zoom-in__HJzbj .5s;\n}\n\n.style-module_button-group__m4a-F .style-module_display-none__y57XG {\n  animation: style-module_zoom-out__PqWZu .5s;\n  display: none;\n}";
-var styleButton = {"button-group":"style-module_button-group__m4a-F","button-group-add":"style-module_button-group-add__J3FOg","button-group-edit":"style-module_button-group-edit__-ZIEQ","display-none":"style-module_display-none__y57XG"};
+var styleButton = {"button-save":"style-module_button-save__CGfus","button-group":"style-module_button-group__m4a-F","button-group-add":"style-module_button-group-add__J3FOg","button-group-edit":"style-module_button-group-edit__-ZIEQ","zoom-in":"style-module_zoom-in__HJzbj","display-none":"style-module_display-none__y57XG","zoom-out":"style-module_zoom-out__PqWZu"};
 styleInject(css_248z$9);
 
 const IconContext$1 = /*#__PURE__*/createContext({});
@@ -3793,31 +3793,71 @@ function requireReactIs () {
 
 var reactIsExports = requireReactIs();
 
-const ButtonGroupAddComponent = ({ formColLayout, disabled, loading, onBack, onSave, }) => {
+const ButtonGroupAddComponent = ({ formColLayout, disabled, loading, onBack, onSave, classNames, className, }) => {
     const saveMethod = onSave
         ? { onClick: onSave }
         : { htmlType: 'submit' };
     const col = useMemo$1(() => {
         return formColLayout ? colLayout(formColLayout) : undefined;
     }, [formColLayout]);
-    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: [
+    const classButton = useMemo$1(() => {
+        const classButtonNames = [
             styleButton['button-group'],
             styleButton['button-group-add'],
-        ].join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: !onBack ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", disabled: disabled, loading: loading }, saveMethod))] }));
+        ];
+        classNames && classButtonNames.push(...classNames);
+        return classButtonNames;
+    }, [styleButton, classNames]);
+    const classButtonBack = useMemo$1(() => {
+        const classButtonBackNames = [];
+        !onBack && classButtonBackNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonBack) && classButtonBackNames.push(...className.buttonBack);
+        return classButtonBackNames;
+    }, [styleButton, className, onBack]);
+    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: classButton.join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: classButtonBack, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: className === null || className === void 0 ? void 0 : className.buttonSave, disabled: disabled, loading: loading }, saveMethod))] }));
     return col ? (jsxRuntimeExports.jsx(Row, { children: jsxRuntimeExports.jsx(Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
-const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit = true, editing, setEditing, onBack, onSave, }) => {
+const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit = true, editing, setEditing, onBack, onSave, classNames, className, }) => {
     const saveMethod = onSave
         ? { onClick: onSave }
         : { htmlType: 'submit' };
     const col = useMemo$1(() => {
         return formColLayout ? colLayout(formColLayout) : undefined;
     }, [formColLayout]);
-    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: [
+    const classButton = useMemo$1(() => {
+        const classButtonNames = [
             styleButton['button-group'],
             styleButton['button-group-edit'],
-        ].join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: !onBack ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Cancel' }, icon: jsxRuntimeExports.jsx(RefIcon$c, {}), classNames: !editing ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(false) }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: !editing ? [styleButton['display-none']] : undefined, disabled: disabled, loading: loading }, saveMethod)), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Edit' }, icon: jsxRuntimeExports.jsx(RefIcon$9, {}), classNames: allowEdit && !editing ? undefined : [styleButton['display-none']], disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(true) })] }));
+        ];
+        classNames && classButtonNames.push(...classNames);
+        return classButtonNames;
+    }, [styleButton, classNames]);
+    const classButtonBack = useMemo$1(() => {
+        const classButtonBackNames = [];
+        !onBack && classButtonBackNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonBack) && classButtonBackNames.push(...className.buttonBack);
+        return classButtonBackNames;
+    }, [styleButton, className, onBack]);
+    const classButtonCancel = useMemo$1(() => {
+        const classButtonCancelNames = [];
+        !editing && classButtonCancelNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonCancel) && classButtonCancelNames.push(...className.buttonCancel);
+        return classButtonCancelNames;
+    }, [styleButton, className, editing]);
+    const classButtonSave = useMemo$1(() => {
+        const classButtonSaveNames = [];
+        !editing && classButtonSaveNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonSave) && classButtonSaveNames.push(...className.buttonSave);
+        return classButtonSaveNames;
+    }, [styleButton, className, editing]);
+    const classButtonEdit = useMemo$1(() => {
+        const classButtonEditNames = [];
+        !(allowEdit && !editing) && classButtonEditNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonEdit) && classButtonEditNames.push(...className.buttonEdit);
+        return classButtonEditNames;
+    }, [styleButton, className, allowEdit, editing]);
+    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: classButton.join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: classButtonBack, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Cancel' }, icon: jsxRuntimeExports.jsx(RefIcon$c, {}), classNames: classButtonCancel, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(false) }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: classButtonSave, disabled: disabled, loading: loading }, saveMethod)), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Edit' }, icon: jsxRuntimeExports.jsx(RefIcon$9, {}), classNames: classButtonEdit, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(true) })] }));
     return col ? (jsxRuntimeExports.jsx(Row, { children: jsxRuntimeExports.jsx(Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
@@ -3927,7 +3967,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = useState(defaultValue);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -3941,12 +3981,12 @@ const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disa
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
     const datePicker = !loading ? (jsxRuntimeExports.jsx(DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: ruleType, ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "date", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = useState(defaultValue);
     const handleChange = (date, dateStrings) => {
@@ -3961,7 +4001,7 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate,
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
     const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: ruleType, ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "array", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
@@ -6044,7 +6084,7 @@ const NumberFormat = ({ noItem, text, size, align, classNames, variant, trailing
     }, [classNames, text, size, validateStatus, status, variant, align]);
     return (jsxRuntimeExports.jsx("div", Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onClick: onClick }, text && align === 'right' && {
         style: { textAlign: 'right' }
-    }, { children: jsxRuntimeExports.jsx(NumericFormat, { thousandSeparator: true, className: classNumberFormat.join(' '), disabled: disabled, readOnly: readOnly, required: required, allowNegative: allowNegative, displayType: text ? 'text' : undefined, prefix: prefix, suffix: suffix, placeholder: placeholder, decimalScale: trailingProps !== null && trailingProps !== void 0 ? trailingProps : trailing, min: ruleMin, max: ruleMax, fixedDecimalScale: true, value: value !== null && value !== void 0 ? value : valueNumberFormat, onChange: event => {
+    }, { children: jsxRuntimeExports.jsx(NumericFormat, { thousandSeparator: true, fixedDecimalScale: true, className: classNumberFormat.join(' '), disabled: disabled, readOnly: readOnly, required: required, allowNegative: allowNegative, displayType: text ? 'text' : undefined, prefix: prefix, suffix: suffix, placeholder: placeholder, decimalScale: trailingProps !== null && trailingProps !== void 0 ? trailingProps : trailing, min: ruleMin, max: ruleMax, value: value !== null && value !== void 0 ? value : valueNumberFormat, onChange: event => {
                 removeError === null || removeError === void 0 ? void 0 : removeError(name);
             }, onValueChange: (values, info) => {
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(values, info);
@@ -6854,6 +6894,9 @@ const TableComponent = ({ noPagination, buttonReload, buttonAdd, buttonMiddle, b
                                 } })), buttonFilter] }))] }), jsxRuntimeExports.jsx(Table, { showSorterTooltip: true, tableLayout: "fixed", className: "table-data", rowClassName: rowClassName, size: size !== null && size !== void 0 ? size : 'middle', columns: columns, rowKey: rowKey !== null && rowKey !== void 0 ? rowKey : 'id', dataSource: data, expandable: expandable, pagination: !noPagination && Object.assign({ pageSizeOptions: ['10', '20', '50', '100', '200'], showSizeChanger: true, showQuickJumper: true, showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items` }, pagination), loading: loading, scroll: scroll !== null && scroll !== void 0 ? scroll : { y: 'calc(100vh - 300px)' }, sticky: sticky, components: components, summary: summary, onChange: onChange, rowSelection: rowSelectionTable, style: style })] }));
 };
 
+const DataGridContext = createContext({});
+const useDataGrid = () => useContext(DataGridContext);
+
 var css_248z$3 = "html {\n  --success-default: #28a745;\n  --danger-default: #dc3545;\n\n  --color-light-a0-default: #ffffff;\n  --color-light-a10-default: #e9e9e9;\n  --color-light-a20-default: #d2d2d2;\n  --color-light-a30-default: #bababa;\n  --color-light-a40-default: #a0a0a0;\n  --color-light-a50-default: #868686;\n\n  --color-dark-a0-default: #121212;\n  --color-dark-a10-default: #282828;\n  --color-dark-a20-default: #3f3f3f;\n  --color-dark-a30-default: #575757;\n  --color-dark-a40-default: #717171;\n  --color-dark-a50-default: #8b8b8b;\n\n  --color-primary-a0-default: #3dc2ec;\n  --color-primary-a10-default: #5fc9ee;\n  --color-primary-a20-default: #79d0f0;\n  --color-primary-a30-default: #90d6f3;\n  --color-primary-a40-default: #a4ddf5;\n  --color-primary-a50-default: #b8e4f7;\n\n  --color-primary-dark-a0-default: #213137;\n  --color-primary-dark-a10-default: #36454a;\n  --color-primary-dark-a20-default: #4d5a5f;\n  --color-primary-dark-a30-default: #646f74;\n  --color-primary-dark-a40-default: #7c8689;\n  --color-primary-dark-a50-default: #959da0;\n\n  --color-secondary-a0-default: #ad49e1;\n  --color-secondary-a10-default: #b860e5;\n  --color-secondary-a20-default: #c274e9;\n  --color-secondary-a30-default: #cc89ec;\n  --color-secondary-a40-default: #d69df0;\n  --color-secondary-a50-default: #dfb0f3;\n\n  --color-secondary-dark-a0-default: #2e1f36;\n  --color-secondary-dark-a10-default: #42344a;\n  --color-secondary-dark-a20-default: #584a5e;\n  --color-secondary-dark-a30-default: #6e6273;\n  --color-secondary-dark-a40-default: #847a89;\n  --color-secondary-dark-a50-default: #9c93a0;\n}\n\n.style_success__OJLGK {\n  color: var(--success, var(--success-default)) !important;\n}\n\n.style_danger__Kkj7I {\n  color: var(--danger, var(--danger-default)) !important;\n}\n\n.style_light-a0__IqAbq {\n  color: var(--color-light-a0, var(--color-light-a0-default)) !important;\n}\n\n.style_light-a10__HmZkj {\n  color: var(--color-light-a10, var(--color-light-a10-default)) !important;\n}\n\n.style_light-a20__jwK9u {\n  color: var(--color-light-a20, var(--color-light-a20-default)) !important;\n}\n\n.style_light-a30__u7-f- {\n  color: var(--color-light-a30, var(--color-light-a30-default)) !important;\n}\n\n.style_light-a40__ozfI4 {\n  color: var(--color-light-a40, var(--color-light-a40-default)) !important;\n}\n\n.style_light-a50__kRA5g {\n  color: var(--color-light-a50, var(--color-light-a50-default)) !important;\n}\n\n.style_dark-a0__9m3yI {\n  color: var(--color-dark-a0, var(--color-dark-a0-default)) !important;\n}\n\n.style_dark-a10__jAtYh {\n  color: var(--color-dark-a10, var(--color-dark-a10-default)) !important;\n}\n\n.style_dark-a20__60nkd {\n  color: var(--color-dark-a20, var(--color-dark-a20-default)) !important;\n}\n\n.style_dark-a30__ED3PC {\n  color: var(--color-dark-a30, var(--color-dark-a30-default)) !important;\n}\n\n.style_dark-a40__rSYy6 {\n  color: var(--color-dark-a40, var(--color-dark-a40-default)) !important;\n}\n\n.style_dark-a50__uIvD- {\n  color: var(--color-dark-a50, var(--color-dark-a50-default)) !important;\n}\n\n.style_primary-a0__bsl-7 {\n  color: var(--color-primary-a0, var(--color-primary-a0-default)) !important;\n}\n\n.style_primary-a10__pr2vt {\n  color: var(--color-primary-a10, var(--color-primary-a10-default)) !important;\n}\n\n.style_primary-a20__HhTmN {\n  color: var(--color-primary-a20, var(--color-primary-a20-default)) !important;\n}\n\n.style_primary-a30__2JV2J {\n  color: var(--color-primary-a30, var(--color-primary-a30-default)) !important;\n}\n\n.style_primary-a40__xeKpG {\n  color: var(--color-primary-a40, var(--color-primary-a40-default)) !important;\n}\n\n.style_primary-a50__moUMf {\n  color: var(--color-primary-a50, var(--color-primary-a50-default)) !important;\n}\n\n.style_primary-dark-a0__-bRAb {\n  color: var(--color-primary-dark-a0, var(--color-primary-dark-a0-default)) !important;\n}\n\n.style_primary-dark-a10__u6chI {\n  color: var(--color-primary-dark-a10, var(--color-primary-dark-a10-default)) !important;\n}\n\n.style_primary-dark-a20__stCee {\n  color: var(--color-primary-dark-a20, var(--color-primary-dark-a20-default)) !important;\n}\n\n.style_primary-dark-a30__zIK00 {\n  color: var(--color-primary-dark-a30, var(--color-primary-dark-a30-default)) !important;\n}\n\n.style_primary-dark-a40__lx9UB {\n  color: var(--color-primary-dark-a40, var(--color-primary-dark-a40-default)) !important;\n}\n\n.style_primary-dark-a50__LoPRz {\n  color: var(--color-primary-dark-a50, var(--color-primary-dark-a50-default)) !important;\n}";
 styleInject(css_248z$3);
 
@@ -6983,12 +7026,18 @@ const TableAsyncSearchProvider = props => {
                     return;
                 if (column.defaultSortOrder) {
                     defaultOrderFound = true;
-                    setTableParams(prevState => (Object.assign(Object.assign({}, prevState), { ['yajra']: {
-                            order: [{
-                                    column: defaultOrder,
-                                    dir: column.defaultSortOrder === 'ascend' ? 'asc' : 'desc',
-                                }],
-                        } })));
+                    setTableParams(prevState => {
+                        var _a, _b, _c;
+                        return (Object.assign(Object.assign({}, prevState), { ['yajra']: {
+                                order: [{
+                                        column: defaultOrder,
+                                        dir: column.defaultSortOrder === 'ascend' ? 'asc' : 'desc',
+                                    }],
+                                start: (_a = prevState['yajra']) === null || _a === void 0 ? void 0 : _a.start,
+                                length: (_b = prevState['yajra']) === null || _b === void 0 ? void 0 : _b.length,
+                                search: (_c = prevState['yajra']) === null || _c === void 0 ? void 0 : _c.search,
+                            } }));
+                    });
                 }
                 yajraColumnParams.push({
                     data: getTableAsyncName(((_a = column.dataIndex) !== null && _a !== void 0 ? _a : column.dataIndexName)),
@@ -23222,4 +23271,4 @@ class BaseModel {
     }
 }
 
-export { BaseModel, ButtonComponent, ButtonGroupAddComponent, ButtonGroupEditComponent, CardComponent, CascaderComponent, CheckboxComponent$1 as CheckboxComponent, CheckboxComponent as CheckboxGroupComponent, ConfigProvider$1 as ConfigProvider, DateFormat$1 as DateFormat, DatePickerComponent, DateRangePickerComponent, DropdownButtonComponent, FeedbackProvider, FormItemComponent, IconCheckOrClose, InputComponent, LinkComponent, NumberFormatComponent, RadioComponent, SelectAsyncComponent, SelectComponent, SwitchComponent, TableAsyncComponent, TableAsyncSearchComponent, TableCellEditableComponent, TableComponent, TableRowProvider, TabsComponent, TagComponent, TextAreaComponent, TransformBoolean, TransformDayjs, TransformNumber, colInline, colLayout, datePickerFormat, formColLayout, getTableAsyncName, getTableFilterStorage, selectAsync, styleCSS, toCamel, useConfig$1 as useConfig, useFeedback, useFocus, useRemoveError, useTableAsyncSearch, useTableRow };
+export { BaseModel, ButtonComponent, ButtonGroupAddComponent, ButtonGroupEditComponent, CardComponent, CascaderComponent, CheckboxComponent$1 as CheckboxComponent, CheckboxComponent as CheckboxGroupComponent, ConfigProvider$1 as ConfigProvider, DateFormat$1 as DateFormat, DatePickerComponent, DateRangePickerComponent, DropdownButtonComponent, FeedbackProvider, FormItemComponent, IconCheckOrClose, InputComponent, LinkComponent, NumberFormatComponent, RadioComponent, SelectAsyncComponent, SelectComponent, SwitchComponent, TableAsyncComponent, TableAsyncSearchComponent, TableCellEditableComponent, TableComponent, TableRowProvider, TabsComponent, TagComponent, TextAreaComponent, TransformBoolean, TransformDayjs, TransformNumber, colInline, colLayout, datePickerFormat, formColLayout, getTableAsyncName, getTableFilterStorage, selectAsync, styleCSS, toCamel, useConfig$1 as useConfig, useDataGrid, useFeedback, useFocus, useRemoveError, useTableAsyncSearch, useTableRow };

package/dist/index.js

@@ -1880,7 +1880,7 @@ const selectAsync = ({ format, request, initData, }) => {
 };
 
 var css_248z$9 = ".style-module_button-save__CGfus {\n  background-color: var(--color-primary-a0);\n}\n\n@keyframes style-module_zoom-in__HJzbj {\n  from {\n    width: 0;\n    opacity: 0;\n  }\n\n  to {\n    display: inline-flex;\n    transform: scaleX(100%) scaleY(100%);\n    opacity: 1;\n  }\n}\n\n@keyframes style-module_zoom-out__PqWZu {\n  from {\n    display: inline-flex;\n  }\n\n  to {\n    transform: scaleX(0) scaleY(0);\n    width: 0;\n    opacity: 0;\n  }\n}\n\ndiv.style-module_button-group__m4a-F.style-module_button-group-add__J3FOg>button:nth-child(-n + 1) {\n  margin-right: .5rem;\n}\n\ndiv.style-module_button-group__m4a-F.style-module_button-group-edit__-ZIEQ>button:nth-child(-n + 2) {\n  margin-right: .5rem;\n}\n\ndiv.style-module_button-group__m4a-F>button {\n  animation: style-module_zoom-in__HJzbj .5s;\n}\n\n.style-module_button-group__m4a-F .style-module_display-none__y57XG {\n  animation: style-module_zoom-out__PqWZu .5s;\n  display: none;\n}";
-var styleButton = {"button-group":"style-module_button-group__m4a-F","button-group-add":"style-module_button-group-add__J3FOg","button-group-edit":"style-module_button-group-edit__-ZIEQ","display-none":"style-module_display-none__y57XG"};
+var styleButton = {"button-save":"style-module_button-save__CGfus","button-group":"style-module_button-group__m4a-F","button-group-add":"style-module_button-group-add__J3FOg","button-group-edit":"style-module_button-group-edit__-ZIEQ","zoom-in":"style-module_zoom-in__HJzbj","display-none":"style-module_display-none__y57XG","zoom-out":"style-module_zoom-out__PqWZu"};
 styleInject(css_248z$9);
 
 const IconContext$1 = /*#__PURE__*/React.createContext({});
@@ -3812,31 +3812,71 @@ function requireReactIs () {
 
 var reactIsExports = requireReactIs();
 
-const ButtonGroupAddComponent = ({ formColLayout, disabled, loading, onBack, onSave, }) => {
+const ButtonGroupAddComponent = ({ formColLayout, disabled, loading, onBack, onSave, classNames, className, }) => {
     const saveMethod = onSave
         ? { onClick: onSave }
         : { htmlType: 'submit' };
     const col = React.useMemo(() => {
         return formColLayout ? colLayout(formColLayout) : undefined;
     }, [formColLayout]);
-    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: [
+    const classButton = React.useMemo(() => {
+        const classButtonNames = [
             styleButton['button-group'],
             styleButton['button-group-add'],
-        ].join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: !onBack ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", disabled: disabled, loading: loading }, saveMethod))] }));
+        ];
+        classNames && classButtonNames.push(...classNames);
+        return classButtonNames;
+    }, [styleButton, classNames]);
+    const classButtonBack = React.useMemo(() => {
+        const classButtonBackNames = [];
+        !onBack && classButtonBackNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonBack) && classButtonBackNames.push(...className.buttonBack);
+        return classButtonBackNames;
+    }, [styleButton, className, onBack]);
+    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: classButton.join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: classButtonBack, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: className === null || className === void 0 ? void 0 : className.buttonSave, disabled: disabled, loading: loading }, saveMethod))] }));
     return col ? (jsxRuntimeExports.jsx(antd.Row, { children: jsxRuntimeExports.jsx(antd.Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
-const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit = true, editing, setEditing, onBack, onSave, }) => {
+const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit = true, editing, setEditing, onBack, onSave, classNames, className, }) => {
     const saveMethod = onSave
         ? { onClick: onSave }
         : { htmlType: 'submit' };
     const col = React.useMemo(() => {
         return formColLayout ? colLayout(formColLayout) : undefined;
     }, [formColLayout]);
-    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: [
+    const classButton = React.useMemo(() => {
+        const classButtonNames = [
             styleButton['button-group'],
             styleButton['button-group-edit'],
-        ].join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: !onBack ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Cancel' }, icon: jsxRuntimeExports.jsx(RefIcon$c, {}), classNames: !editing ? [styleButton['display-none']] : undefined, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(false) }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: !editing ? [styleButton['display-none']] : undefined, disabled: disabled, loading: loading }, saveMethod)), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Edit' }, icon: jsxRuntimeExports.jsx(RefIcon$9, {}), classNames: allowEdit && !editing ? undefined : [styleButton['display-none']], disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(true) })] }));
+        ];
+        classNames && classButtonNames.push(...classNames);
+        return classButtonNames;
+    }, [styleButton, classNames]);
+    const classButtonBack = React.useMemo(() => {
+        const classButtonBackNames = [];
+        !onBack && classButtonBackNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonBack) && classButtonBackNames.push(...className.buttonBack);
+        return classButtonBackNames;
+    }, [styleButton, className, onBack]);
+    const classButtonCancel = React.useMemo(() => {
+        const classButtonCancelNames = [];
+        !editing && classButtonCancelNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonCancel) && classButtonCancelNames.push(...className.buttonCancel);
+        return classButtonCancelNames;
+    }, [styleButton, className, editing]);
+    const classButtonSave = React.useMemo(() => {
+        const classButtonSaveNames = [];
+        !editing && classButtonSaveNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonSave) && classButtonSaveNames.push(...className.buttonSave);
+        return classButtonSaveNames;
+    }, [styleButton, className, editing]);
+    const classButtonEdit = React.useMemo(() => {
+        const classButtonEditNames = [];
+        !(allowEdit && !editing) && classButtonEditNames.push(styleButton['display-none']);
+        (className === null || className === void 0 ? void 0 : className.buttonEdit) && classButtonEditNames.push(...className.buttonEdit);
+        return classButtonEditNames;
+    }, [styleButton, className, allowEdit, editing]);
+    const buttonGroup = (jsxRuntimeExports.jsxs("div", { className: classButton.join(' '), children: [jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Back' }, icon: jsxRuntimeExports.jsx(RefIcon$g, {}), classNames: classButtonBack, disabled: disabled, onClick: onBack }), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Cancel' }, icon: jsxRuntimeExports.jsx(RefIcon$c, {}), classNames: classButtonCancel, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(false) }), jsxRuntimeExports.jsx(ButtonComponent, Object.assign({ tooltip: { title: 'Save' }, icon: jsxRuntimeExports.jsx(RefIcon$3, {}), type: "primary", classNames: classButtonSave, disabled: disabled, loading: loading }, saveMethod)), jsxRuntimeExports.jsx(ButtonComponent, { tooltip: { title: 'Edit' }, icon: jsxRuntimeExports.jsx(RefIcon$9, {}), classNames: classButtonEdit, disabled: disabled, onClick: () => setEditing === null || setEditing === void 0 ? void 0 : setEditing(true) })] }));
     return col ? (jsxRuntimeExports.jsx(antd.Row, { children: jsxRuntimeExports.jsx(antd.Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
@@ -3946,7 +3986,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = React.useState(defaultValue);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -3960,12 +4000,12 @@ const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disa
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
     const datePicker = !loading ? (jsxRuntimeExports.jsx(antd.DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: ruleType, ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "date", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = antd.DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = React.useState(defaultValue);
     const handleChange = (date, dateStrings) => {
@@ -3980,7 +4020,7 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate,
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
     const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: ruleType, ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "array", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
@@ -6063,7 +6103,7 @@ const NumberFormat = ({ noItem, text, size, align, classNames, variant, trailing
     }, [classNames, text, size, validateStatus, status, variant, align]);
     return (jsxRuntimeExports.jsx("div", Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onClick: onClick }, text && align === 'right' && {
         style: { textAlign: 'right' }
-    }, { children: jsxRuntimeExports.jsx(reactNumberFormat.NumericFormat, { thousandSeparator: true, className: classNumberFormat.join(' '), disabled: disabled, readOnly: readOnly, required: required, allowNegative: allowNegative, displayType: text ? 'text' : undefined, prefix: prefix, suffix: suffix, placeholder: placeholder, decimalScale: trailingProps !== null && trailingProps !== void 0 ? trailingProps : trailing, min: ruleMin, max: ruleMax, fixedDecimalScale: true, value: value !== null && value !== void 0 ? value : valueNumberFormat, onChange: event => {
+    }, { children: jsxRuntimeExports.jsx(reactNumberFormat.NumericFormat, { thousandSeparator: true, fixedDecimalScale: true, className: classNumberFormat.join(' '), disabled: disabled, readOnly: readOnly, required: required, allowNegative: allowNegative, displayType: text ? 'text' : undefined, prefix: prefix, suffix: suffix, placeholder: placeholder, decimalScale: trailingProps !== null && trailingProps !== void 0 ? trailingProps : trailing, min: ruleMin, max: ruleMax, value: value !== null && value !== void 0 ? value : valueNumberFormat, onChange: event => {
                 removeError === null || removeError === void 0 ? void 0 : removeError(name);
             }, onValueChange: (values, info) => {
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(values, info);
@@ -6873,6 +6913,9 @@ const TableComponent = ({ noPagination, buttonReload, buttonAdd, buttonMiddle, b
                                 } })), buttonFilter] }))] }), jsxRuntimeExports.jsx(antd.Table, { showSorterTooltip: true, tableLayout: "fixed", className: "table-data", rowClassName: rowClassName, size: size !== null && size !== void 0 ? size : 'middle', columns: columns, rowKey: rowKey !== null && rowKey !== void 0 ? rowKey : 'id', dataSource: data, expandable: expandable, pagination: !noPagination && Object.assign({ pageSizeOptions: ['10', '20', '50', '100', '200'], showSizeChanger: true, showQuickJumper: true, showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items` }, pagination), loading: loading, scroll: scroll !== null && scroll !== void 0 ? scroll : { y: 'calc(100vh - 300px)' }, sticky: sticky, components: components, summary: summary, onChange: onChange, rowSelection: rowSelectionTable, style: style })] }));
 };
 
+const DataGridContext = React.createContext({});
+const useDataGrid = () => React.useContext(DataGridContext);
+
 var css_248z$3 = "html {\n  --success-default: #28a745;\n  --danger-default: #dc3545;\n\n  --color-light-a0-default: #ffffff;\n  --color-light-a10-default: #e9e9e9;\n  --color-light-a20-default: #d2d2d2;\n  --color-light-a30-default: #bababa;\n  --color-light-a40-default: #a0a0a0;\n  --color-light-a50-default: #868686;\n\n  --color-dark-a0-default: #121212;\n  --color-dark-a10-default: #282828;\n  --color-dark-a20-default: #3f3f3f;\n  --color-dark-a30-default: #575757;\n  --color-dark-a40-default: #717171;\n  --color-dark-a50-default: #8b8b8b;\n\n  --color-primary-a0-default: #3dc2ec;\n  --color-primary-a10-default: #5fc9ee;\n  --color-primary-a20-default: #79d0f0;\n  --color-primary-a30-default: #90d6f3;\n  --color-primary-a40-default: #a4ddf5;\n  --color-primary-a50-default: #b8e4f7;\n\n  --color-primary-dark-a0-default: #213137;\n  --color-primary-dark-a10-default: #36454a;\n  --color-primary-dark-a20-default: #4d5a5f;\n  --color-primary-dark-a30-default: #646f74;\n  --color-primary-dark-a40-default: #7c8689;\n  --color-primary-dark-a50-default: #959da0;\n\n  --color-secondary-a0-default: #ad49e1;\n  --color-secondary-a10-default: #b860e5;\n  --color-secondary-a20-default: #c274e9;\n  --color-secondary-a30-default: #cc89ec;\n  --color-secondary-a40-default: #d69df0;\n  --color-secondary-a50-default: #dfb0f3;\n\n  --color-secondary-dark-a0-default: #2e1f36;\n  --color-secondary-dark-a10-default: #42344a;\n  --color-secondary-dark-a20-default: #584a5e;\n  --color-secondary-dark-a30-default: #6e6273;\n  --color-secondary-dark-a40-default: #847a89;\n  --color-secondary-dark-a50-default: #9c93a0;\n}\n\n.style_success__OJLGK {\n  color: var(--success, var(--success-default)) !important;\n}\n\n.style_danger__Kkj7I {\n  color: var(--danger, var(--danger-default)) !important;\n}\n\n.style_light-a0__IqAbq {\n  color: var(--color-light-a0, var(--color-light-a0-default)) !important;\n}\n\n.style_light-a10__HmZkj {\n  color: var(--color-light-a10, var(--color-light-a10-default)) !important;\n}\n\n.style_light-a20__jwK9u {\n  color: var(--color-light-a20, var(--color-light-a20-default)) !important;\n}\n\n.style_light-a30__u7-f- {\n  color: var(--color-light-a30, var(--color-light-a30-default)) !important;\n}\n\n.style_light-a40__ozfI4 {\n  color: var(--color-light-a40, var(--color-light-a40-default)) !important;\n}\n\n.style_light-a50__kRA5g {\n  color: var(--color-light-a50, var(--color-light-a50-default)) !important;\n}\n\n.style_dark-a0__9m3yI {\n  color: var(--color-dark-a0, var(--color-dark-a0-default)) !important;\n}\n\n.style_dark-a10__jAtYh {\n  color: var(--color-dark-a10, var(--color-dark-a10-default)) !important;\n}\n\n.style_dark-a20__60nkd {\n  color: var(--color-dark-a20, var(--color-dark-a20-default)) !important;\n}\n\n.style_dark-a30__ED3PC {\n  color: var(--color-dark-a30, var(--color-dark-a30-default)) !important;\n}\n\n.style_dark-a40__rSYy6 {\n  color: var(--color-dark-a40, var(--color-dark-a40-default)) !important;\n}\n\n.style_dark-a50__uIvD- {\n  color: var(--color-dark-a50, var(--color-dark-a50-default)) !important;\n}\n\n.style_primary-a0__bsl-7 {\n  color: var(--color-primary-a0, var(--color-primary-a0-default)) !important;\n}\n\n.style_primary-a10__pr2vt {\n  color: var(--color-primary-a10, var(--color-primary-a10-default)) !important;\n}\n\n.style_primary-a20__HhTmN {\n  color: var(--color-primary-a20, var(--color-primary-a20-default)) !important;\n}\n\n.style_primary-a30__2JV2J {\n  color: var(--color-primary-a30, var(--color-primary-a30-default)) !important;\n}\n\n.style_primary-a40__xeKpG {\n  color: var(--color-primary-a40, var(--color-primary-a40-default)) !important;\n}\n\n.style_primary-a50__moUMf {\n  color: var(--color-primary-a50, var(--color-primary-a50-default)) !important;\n}\n\n.style_primary-dark-a0__-bRAb {\n  color: var(--color-primary-dark-a0, var(--color-primary-dark-a0-default)) !important;\n}\n\n.style_primary-dark-a10__u6chI {\n  color: var(--color-primary-dark-a10, var(--color-primary-dark-a10-default)) !important;\n}\n\n.style_primary-dark-a20__stCee {\n  color: var(--color-primary-dark-a20, var(--color-primary-dark-a20-default)) !important;\n}\n\n.style_primary-dark-a30__zIK00 {\n  color: var(--color-primary-dark-a30, var(--color-primary-dark-a30-default)) !important;\n}\n\n.style_primary-dark-a40__lx9UB {\n  color: var(--color-primary-dark-a40, var(--color-primary-dark-a40-default)) !important;\n}\n\n.style_primary-dark-a50__LoPRz {\n  color: var(--color-primary-dark-a50, var(--color-primary-dark-a50-default)) !important;\n}";
 styleInject(css_248z$3);
 
@@ -7002,12 +7045,18 @@ const TableAsyncSearchProvider = props => {
                     return;
                 if (column.defaultSortOrder) {
                     defaultOrderFound = true;
-                    setTableParams(prevState => (Object.assign(Object.assign({}, prevState), { ['yajra']: {
-                            order: [{
-                                    column: defaultOrder,
-                                    dir: column.defaultSortOrder === 'ascend' ? 'asc' : 'desc',
-                                }],
-                        } })));
+                    setTableParams(prevState => {
+                        var _a, _b, _c;
+                        return (Object.assign(Object.assign({}, prevState), { ['yajra']: {
+                                order: [{
+                                        column: defaultOrder,
+                                        dir: column.defaultSortOrder === 'ascend' ? 'asc' : 'desc',
+                                    }],
+                                start: (_a = prevState['yajra']) === null || _a === void 0 ? void 0 : _a.start,
+                                length: (_b = prevState['yajra']) === null || _b === void 0 ? void 0 : _b.length,
+                                search: (_c = prevState['yajra']) === null || _c === void 0 ? void 0 : _c.search,
+                            } }));
+                    });
                 }
                 yajraColumnParams.push({
                     data: getTableAsyncName(((_a = column.dataIndex) !== null && _a !== void 0 ? _a : column.dataIndexName)),
@@ -23289,6 +23338,7 @@ exports.selectAsync = selectAsync;
 exports.styleCSS = styleCSS;
 exports.toCamel = toCamel;
 exports.useConfig = useConfig$1;
+exports.useDataGrid = useDataGrid;
 exports.useFeedback = useFeedback;
 exports.useFocus = useFocus;
 exports.useRemoveError = useRemoveError;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sti-antd-package",
   "description": "STI ANT Design",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",