react-table-edit 1.4.34 → 1.4.36

package/dist/component/select-table/index.d.ts

@@ -30,6 +30,7 @@ type Props = {
     onCloseMenu?: () => void;
     footerComponent?: () => JSX.Element;
     onChange: (val: any) => void;
+    compareFunction?: (row?: any) => boolean | undefined;
 };
 declare const SelectTable: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
 export { SelectTable };

package/dist/component/type/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction, JSX } from "react";
+import { Dispatch, JSX, ReactNode, SetStateAction } from "react";
 import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form";
 /** Căn lề văn bản trong bảng */
 type ITextAlign = 'center' | 'left' | 'right';
@@ -104,6 +104,8 @@ export type ISettingSelectElement = {
     loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
     /** Sự kiện mở menu */
     onOpenMenu?: (row: any, col: IColumnTable, indexRow: number) => void;
+    /** Tuỳ chỉnh xác định hàng được chọn */
+    compareFunction?: (rowOption?: any, rowData?: any) => boolean;
 };
 /** Cấu hình cho kiểu số */
 export type ISettingNumericElement = {

package/dist/index.d.ts

@@ -108,6 +108,8 @@ type ISettingSelectElement = {
     loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
     /** Sự kiện mở menu */
     onOpenMenu?: (row: any, col: IColumnTable, indexRow: number) => void;
+    /** Tuỳ chỉnh xác định hàng được chọn */
+    compareFunction?: (rowOption?: any, rowData?: any) => boolean;
 };
 /** Cấu hình cho kiểu số */
 type ISettingNumericElement = {
@@ -530,6 +532,7 @@ type Props$1 = {
     onCloseMenu?: () => void;
     footerComponent?: () => JSX.Element;
     onChange: (val: any) => void;
+    compareFunction?: (row?: any) => boolean | undefined;
 };
 declare const SelectTable: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<unknown>>;
 

package/dist/index.js

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React$5 = require('react');
 var reactI18next = require('react-i18next');
 var ReactDOM = require('react-dom');
-var client = require('react-dom/client');
 var toast = require('react-hot-toast');
+var client = require('react-dom/client');
 var reactRouterDom = require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17769,39 +17769,6 @@ const renderLabel = (props) => {
     return (jsxRuntime.jsx(React$5.Fragment, { children: isLabel === false ? '' : jsxRuntime.jsxs(Label$1, { for: name, children: [t(label ? label : ''), " ", required ? jsxRuntime.jsx("span", { className: "text-danger", children: "*" }) : '', " "] }) }));
 };
 
-const TextInput = (props) => {
-    const { control, id, name, min, max, type, label, labelSize, required, errors, height, disabled, row, isLabel, placeholder, autoFocus, inLine, callback, readOnly, classes, ...rest } = props;
-    const renderInput = () => {
-        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (jsxRuntime.jsx(Input$1, { id: id, value: !isNullOrUndefined(value) ? value : '', onChange: (val) => {
-                            if (min || max) {
-                                if (min && Number(val.target.value) >= min) {
-                                    onChange(val.target.value);
-                                    if (callback) {
-                                        callback(val);
-                                    }
-                                }
-                                if (max && Number(val.target.value) <= max) {
-                                    onChange(val.target.value);
-                                    if (callback) {
-                                        callback(val);
-                                    }
-                                }
-                            }
-                            else {
-                                onChange(val.target.value);
-                                if (callback) {
-                                    callback(val);
-                                }
-                            }
-                        }, style: { height: `${height}px` }, autoFocus: autoFocus, disabled: disabled, placeholder: placeholder, type: type ? type : 'text', invalid: errors && true, className: "h-100", rows: row, min: min, max: max, readOnly: readOnly, ...rest })) }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
-    };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$2(' align', {
-                [labelSize ? labelSize : '']: labelSize,
-                [classes ? classes : '']: classes,
-                'form-row-inline-error': errors
-            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
-};
-
 const NumberInput = (props) => {
     const { id, control, fractionCurrency, name, min, max, label, labelSize, required, errors, disabled, isLabel, fixedDecimalScale, placeholder, inLine, callback, decimalSeparator = ',', thousandSeparator = '.', classes, width, allowNegative } = props;
     const renderInput = () => {
@@ -17847,9 +17814,42 @@ const NumberInput = (props) => {
             }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { width: width ? width : undefined }, className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
 };
 
+const TextInput = (props) => {
+    const { control, id, name, min, max, type, label, labelSize, required, errors, height, disabled, row, isLabel, placeholder, autoFocus, inLine, callback, readOnly, classes, ...rest } = props;
+    const renderInput = () => {
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (jsxRuntime.jsx(Input$1, { id: id, value: !isNullOrUndefined(value) ? value : '', onChange: (val) => {
+                            if (min || max) {
+                                if (min && Number(val.target.value) >= min) {
+                                    onChange(val.target.value);
+                                    if (callback) {
+                                        callback(val);
+                                    }
+                                }
+                                if (max && Number(val.target.value) <= max) {
+                                    onChange(val.target.value);
+                                    if (callback) {
+                                        callback(val);
+                                    }
+                                }
+                            }
+                            else {
+                                onChange(val.target.value);
+                                if (callback) {
+                                    callback(val);
+                                }
+                            }
+                        }, style: { height: `${height}px` }, autoFocus: autoFocus, disabled: disabled, placeholder: placeholder, type: type ? type : 'text', invalid: errors && true, className: "h-100", rows: row, min: min, max: max, readOnly: readOnly, ...rest })) }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
+    };
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$2(' align', {
+                [labelSize ? labelSize : '']: labelSize,
+                [classes ? classes : '']: classes,
+                'form-row-inline-error': errors
+            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+};
+
 const defaultMaxHeight$1 = 250;
 const SelectTable = React$5.forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
     const selectTableRef = React$5.useRef(null);
     const selectMenuTableRef = React$5.useRef(null);
     const inputRef = React$5.useRef(null);
@@ -17888,7 +17888,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     React$5.useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
+            const index = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -17995,7 +17995,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
+                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
                     }
                     if (newIndex < (optionsLoad ? optionsLoad : options).length) {
                         setIndexFocus(newIndex);
@@ -18019,7 +18019,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
+                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -18115,9 +18115,9 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     const RenderElement = React__default["default"].memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -18146,14 +18146,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     }
                     return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
-                                className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: {
+                                className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
                                     textAlign: col.textAlign ? col.textAlign : 'left'
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -18198,7 +18198,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                                     }, readOnly: true, className: classNames$2('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
                                             return (renderHeaderCol(col, index));
                                         })] }) }), ((optionsLoad ? optionsLoad : options) && !isLoading) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("tbody", { className: 'r-select-gridcontent', children: [haveCreateNew && jsxRuntime.jsx(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t('Create')} '${searchTerm}'`, isCreated: true } }), (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
-                                        const isSelected = isMulti && value?.some((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                                        const isSelected = isMulti && value?.some((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                                         return (jsxRuntime.jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row: row }, `select-table-${indexRow}`));
                                     })] }) })] }), ((((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0) && !haveCreateNew && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] })] }));
     };
@@ -18464,7 +18464,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                                         height: template ? 0 : 28,
                                         lineHeight: template ? 0 : 19,
                                         padding: template ? 0 : 'auto',
-                                        backgroundColor: '#FFF',
+                                        backgroundColor: '$white',
                                         textAlign: textAlign ?? 'left'
                                     }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
                             minWidth: minWidth ? minWidth : defaultWidth,
@@ -39753,7 +39753,7 @@ const messageHtmlBoxConfirm = (t, message, handle, data, title = 'Important', bt
     MySwal.fire({
         title: t(title),
         html: message.map((item, index) => {
-            return (`<div style="min-width: 448px padding: 7px width:100% border: 1px solid #e0e0e0${index !== 0 ? ' border-top-width: 0px' : ''}">${item}</div>`);
+            return (`<div style="min-width: 448px padding: 7px width:100% border: 1px solid $border-color${index !== 0 ? ' border-top-width: 0px' : ''}">${item}</div>`);
         }).join(''),
         allowOutsideClick: false,
         showCancelButton: true,
@@ -39774,7 +39774,7 @@ const messageHtmlBoxError = (t, message, title = 'Important', btnCancel = 'Ok')
     MySwal.fire({
         title: t(title),
         html: message.map((item, index) => {
-            return (`<div style="min-width: 448px padding: 7px width:100% border: 1px solid #e0e0e0${index !== 0 ? ' border-top-width: 0px' : ''}">${item}</div>`);
+            return (`<div style="min-width: 448px padding: 7px width:100% border: 1px solid $border-color${index !== 0 ? ' border-top-width: 0px' : ''}">${item}</div>`);
         }).join(''),
         allowOutsideClick: false,
         showCancelButton: true,
@@ -40336,7 +40336,7 @@ const Sidebar = (props) => {
                             position: 'fixed',
                             top: '50%',
                             transform: 'translate(-50%, -50%)',
-                            background: '#FFF',
+                            background: '$white',
                             filter: 'drop-shadow(0.9px 0.9px 1.5px)',
                             height: 50,
                             display: 'flex',
@@ -42650,7 +42650,7 @@ const CommandElement = (props) => {
     return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsx("div", { className: 'd-flex align-items-center', style: { columnGap: 10 }, children: commandItems.map((item, index) => {
                 return (jsxRuntime.jsxs(Button$1, { id: `command-item-${indexRow}-${index}`, tabIndex: -1, style: { padding: '5px', minWidth: 45, height: '100%' }, className: classNames$2('command-item', {
                         'btn-icon': item.tooltip === ''
-                    }), color: item.color ? item.color : '#000', onClick: (e) => {
+                    }), color: item.color ? item.color : '$black', onClick: (e) => {
                         handleCommandClick(item.id, rowData, indexRow);
                         if (indexRow === indexFocus) {
                             if (setIndexFocus) {
@@ -42940,10 +42940,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     optionsSelect = col.selectSettings?.options ? (col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options) : [];
                 }
                 if (col.selectSettings?.isMulti) {
-                    valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? 'value'] === y));
+                    valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(x, row) : x[col.selectSettings?.fieldValue ?? 'value'] === y));
                 }
                 else {
-                    valueSelect = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? 'value'] === row[col.field]) : '';
+                    valueSelect = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? optionsSelect?.find((val) => col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(val, row) : val[col.selectSettings?.fieldValue ?? 'value'] === row[col.field]) : '';
                     if (!valueSelect && col.selectSettings?.defaultValue) {
                         valueSelect = col.selectSettings?.defaultValue(row);
                     }
@@ -42973,7 +42973,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             col.callback(val, indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
-                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, compareFunction: (e) => col.selectSettings?.compareFunction?.(e, row), onKeyDown: (e) => {
                         return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onOpenMenu: () => {
                         if (col.selectSettings?.onOpenMenu) {
@@ -43789,7 +43789,7 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
     };
     return (jsxRuntime.jsxs(React$5.Fragment, { children: [renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : '', jsxRuntime.jsxs("div", { className: classNames$2('tab-custom', { 'tab-parent': tabParent }, { 'tab-child': tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [jsxRuntime.jsx("div", { onClick: () => handleScroll(-200), className: classNames$2('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronLeft, {}) }), jsxRuntime.jsx("div", { ref: tabComponentRef, className: "tab-component", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsxRuntime.jsx("div", { ref: contentComponentRef, children: dataMenu.map((item) => {
                                 if (item?.resAttributes?.IS_MENU === '1') {
-                                    return (jsxRuntime.jsxs(UncontrolledDropdown, { draggable: false, className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: 'down', style: { backgroundColor: openMenu ? '#e0e0e0' : '' }, children: [jsxRuntime.jsx(DropdownToggle$1, { color: "#00000", style: { border: 'none', boxShadow: 'none', margin: 0, padding: 0 }, className: "background-none", children: jsxRuntime.jsx("div", { children: item.name }) }), jsxRuntime.jsx(DropdownMenu$1, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => jsxRuntime.jsx(DropdownItem$1, { style: { borderRadius: '5px', margin: "0 0.5rem", width: "95%" }, onClick: () => {
+                                    return (jsxRuntime.jsxs(UncontrolledDropdown, { draggable: false, className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: 'down', style: { backgroundColor: openMenu ? '$border-color' : '' }, children: [jsxRuntime.jsx(DropdownToggle$1, { color: "$black00", style: { border: 'none', boxShadow: 'none', margin: 0, padding: 0 }, className: "background-none", children: jsxRuntime.jsx("div", { children: item.name }) }), jsxRuntime.jsx(DropdownMenu$1, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => jsxRuntime.jsx(DropdownItem$1, { style: { borderRadius: '5px', margin: "0 0.5rem", width: "95%" }, onClick: () => {
                                                         if (x.resAttributes.MODAL_VALUE) {
                                                             handleModal(x.resAttributes.MODAL_VALUE);
                                                         }
@@ -44681,8 +44681,8 @@ const InputStyleComponent = (props) => {
                                 fontWeight: value.bold ? "bold" : 'normal',
                                 fontStyle: value.italic ? "italic" : 'normal',
                                 textDecoration: value.underline ? "underline" : 'normal',
-                                backgroundColor: value.backgroundColor ?? '#ffffff',
-                                color: value.color ?? '#000000'
+                                backgroundColor: value.backgroundColor ?? '$white',
+                                color: value.color ?? '$black'
                             }, children: props.label }));
                     } }), jsxRuntime.jsx("div", { className: classNames$2('ms-25', { 'd-none': disabledFontSize }), style: { width: 60 }, children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })), noHeader: true, isDisabled: disabled, value: value.fontSize ? { value: value.fontSize, label: value.fontSize } : null, onChange: (val) => {
                             onChange({ ...value, fontSize: val.value });
@@ -44698,9 +44698,9 @@ const InputStyleComponent = (props) => {
                         if (!disabled) {
                             onChange({ ...value, underline: !value.underline });
                         }
-                    }, children: jsxRuntime.jsx(SvgUnderline, { fontSize: 18 }) }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledColor }), children: [jsxRuntime.jsx(SvgType, { stroke: value.color ?? '#000000', fontSize: 18 }), jsxRuntime.jsx("input", { type: "color", id: "color", disabled: disabled, value: value.color, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, onChange: (e) => {
+                    }, children: jsxRuntime.jsx(SvgUnderline, { fontSize: 18 }) }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledColor }), children: [jsxRuntime.jsx(SvgType, { stroke: value.color ?? '$black', fontSize: 18 }), jsxRuntime.jsx("input", { type: "color", id: "color", disabled: disabled, value: value.color, style: { color: '$white', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, onChange: (e) => {
                                 onChange({ ...value, color: e.target.value });
-                            } })] }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsxRuntime.jsx(SvgDroplet, { fill: value.backgroundColor ?? '#ffffff', fontSize: 18 }), jsxRuntime.jsx(Input$1, { id: "backgroundColor", type: "color", disabled: disabled, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, value: value.backgroundColor, onChange: (e) => {
+                            } })] }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsxRuntime.jsx(SvgDroplet, { fill: value.backgroundColor ?? '$white', fontSize: 18 }), jsxRuntime.jsx(Input$1, { id: "backgroundColor", type: "color", disabled: disabled, style: { color: '$white', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, value: value.backgroundColor, onChange: (e) => {
                                 onChange({ ...value, backgroundColor: e.target.value });
                             } })] })] }) }));
 };
@@ -46170,8 +46170,8 @@ const CheckboxInput = (props) => {
 
 const defaultStyleExportSetting = {
     title: {
-        color: '#000000',
-        backgroundColor: '#ffffff',
+        color: '$black',
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 18,
         row: 2,
@@ -46180,8 +46180,8 @@ const defaultStyleExportSetting = {
         underline: false
     },
     subtitle: {
-        color: '#000000',
-        backgroundColor: '#ffffff',
+        color: '$black',
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 12,
         row: 3,
@@ -46190,7 +46190,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     header: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#ffe0cc",
         fontFamily: 'Times New Roman',
         fontSize: 14,
@@ -46200,7 +46200,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group1: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#bfbfbf",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46209,7 +46209,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group2: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#d9d9d9",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46218,7 +46218,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group3: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#f2f2f2",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46227,8 +46227,8 @@ const defaultStyleExportSetting = {
         underline: false
     },
     content: {
-        color: "#000000",
-        backgroundColor: '#ffffff',
+        color: "$black",
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 11,
         bold: false,
@@ -46236,7 +46236,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     summary: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: '#ffe0cc',
         fontFamily: 'Times New Roman',
         fontSize: 12,