react-table-edit 1.4.34 → 1.4.35

package/dist/index.mjs

@@ -4,8 +4,8 @@ import React__default, { useRef, useState, useEffect, useMemo, useLayoutEffect,
 import { useTranslation } from 'react-i18next';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import { createRoot } from 'react-dom/client';
 import toast from 'react-hot-toast';
+import { createRoot } from 'react-dom/client';
 import { useNavigate, Link } from 'react-router-dom';
 
 /******************************************************************************
@@ -17741,39 +17741,6 @@ const renderLabel = (props) => {
     return (jsx(Fragment, { children: isLabel === false ? '' : jsxs(Label$1, { for: name, children: [t(label ? label : ''), " ", required ? 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 (jsxs(Fragment, { children: [jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (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 && jsx(FormFeedback$1, { children: errors?.message })] }));
-    };
-    return (jsx(Fragment, { children: 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 }), 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 = () => {
@@ -17819,6 +17786,39 @@ const NumberInput = (props) => {
             }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), 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 (jsxs(Fragment, { children: [jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (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 && jsx(FormFeedback$1, { children: errors?.message })] }));
+    };
+    return (jsx(Fragment, { children: 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 }), jsx("div", { className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+};
+
 const defaultMaxHeight$1 = 250;
 const SelectTable = 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;
@@ -18436,7 +18436,7 @@ const EditForm = 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 })] }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
                             minWidth: minWidth ? minWidth : defaultWidth,
@@ -39725,7 +39725,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,
@@ -39746,7 +39746,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,
@@ -40308,7 +40308,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',
@@ -42622,7 +42622,7 @@ const CommandElement = (props) => {
     return (jsx(Fragment, { children: jsx("div", { className: 'd-flex align-items-center', style: { columnGap: 10 }, children: commandItems.map((item, index) => {
                 return (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) {
@@ -43761,7 +43761,7 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
     };
     return (jsxs(Fragment, { children: [renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : '', jsxs("div", { className: classNames$2('tab-custom', { 'tab-parent': tabParent }, { 'tab-child': tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [jsx("div", { onClick: () => handleScroll(-200), className: classNames$2('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsx(SvgChevronLeft, {}) }), jsx("div", { ref: tabComponentRef, className: "tab-component", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsx("div", { ref: contentComponentRef, children: dataMenu.map((item) => {
                                 if (item?.resAttributes?.IS_MENU === '1') {
-                                    return (jsxs(UncontrolledDropdown, { draggable: false, className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: 'down', style: { backgroundColor: openMenu ? '#e0e0e0' : '' }, children: [jsx(DropdownToggle$1, { color: "#00000", style: { border: 'none', boxShadow: 'none', margin: 0, padding: 0 }, className: "background-none", children: jsx("div", { children: item.name }) }), jsx(DropdownMenu$1, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => jsx(DropdownItem$1, { style: { borderRadius: '5px', margin: "0 0.5rem", width: "95%" }, onClick: () => {
+                                    return (jsxs(UncontrolledDropdown, { draggable: false, className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: 'down', style: { backgroundColor: openMenu ? '$border-color' : '' }, children: [jsx(DropdownToggle$1, { color: "$black00", style: { border: 'none', boxShadow: 'none', margin: 0, padding: 0 }, className: "background-none", children: jsx("div", { children: item.name }) }), jsx(DropdownMenu$1, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => jsx(DropdownItem$1, { style: { borderRadius: '5px', margin: "0 0.5rem", width: "95%" }, onClick: () => {
                                                         if (x.resAttributes.MODAL_VALUE) {
                                                             handleModal(x.resAttributes.MODAL_VALUE);
                                                         }
@@ -44653,8 +44653,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 }));
                     } }), jsx("div", { className: classNames$2('ms-25', { 'd-none': disabledFontSize }), style: { width: 60 }, children: 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 });
@@ -44670,9 +44670,9 @@ const InputStyleComponent = (props) => {
                         if (!disabled) {
                             onChange({ ...value, underline: !value.underline });
                         }
-                    }, children: jsx(SvgUnderline, { fontSize: 18 }) }), jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledColor }), children: [jsx(SvgType, { stroke: value.color ?? '#000000', fontSize: 18 }), 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: jsx(SvgUnderline, { fontSize: 18 }) }), jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledColor }), children: [jsx(SvgType, { stroke: value.color ?? '$black', fontSize: 18 }), 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 });
-                            } })] }), jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsx(SvgDroplet, { fill: value.backgroundColor ?? '#ffffff', fontSize: 18 }), 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) => {
+                            } })] }), jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$2('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsx(SvgDroplet, { fill: value.backgroundColor ?? '$white', fontSize: 18 }), 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 });
                             } })] })] }) }));
 };
@@ -46142,8 +46142,8 @@ const CheckboxInput = (props) => {
 
 const defaultStyleExportSetting = {
     title: {
-        color: '#000000',
-        backgroundColor: '#ffffff',
+        color: '$black',
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 18,
         row: 2,
@@ -46152,8 +46152,8 @@ const defaultStyleExportSetting = {
         underline: false
     },
     subtitle: {
-        color: '#000000',
-        backgroundColor: '#ffffff',
+        color: '$black',
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 12,
         row: 3,
@@ -46162,7 +46162,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     header: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#ffe0cc",
         fontFamily: 'Times New Roman',
         fontSize: 14,
@@ -46172,7 +46172,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group1: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#bfbfbf",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46181,7 +46181,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group2: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#d9d9d9",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46190,7 +46190,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     group3: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: "#f2f2f2",
         fontFamily: 'Times New Roman',
         fontSize: 12,
@@ -46199,8 +46199,8 @@ const defaultStyleExportSetting = {
         underline: false
     },
     content: {
-        color: "#000000",
-        backgroundColor: '#ffffff',
+        color: "$black",
+        backgroundColor: '$white',
         fontFamily: 'Times New Roman',
         fontSize: 11,
         bold: false,
@@ -46208,7 +46208,7 @@ const defaultStyleExportSetting = {
         underline: false
     },
     summary: {
-        color: "#000000",
+        color: "$black",
         backgroundColor: '#ffe0cc',
         fontFamily: 'Times New Roman',
         fontSize: 12,