@rolster/react-components 19.8.22 → 19.10.0

package/dist/cjs/index.cjs

@@ -486,6 +486,17 @@ const RlsAmount = require$$0.memo(RlsAmountComponent);
 
 const AREA_TEXT_MAX_ROWS = 8;
 const AREA_TEXT_MIN_ROWS = 3;
+function writeAreaValue(element, valueArea) {
+    const rawArea = element.value;
+    if (rawArea === valueArea) {
+        return;
+    }
+    const selection = element.selectionStart;
+    const offset = valueArea.length - rawArea.length;
+    const caret = Math.max(0, Math.min(selection + offset, valueArea.length));
+    element.value = valueArea;
+    element.setSelectionRange(caret, caret);
+}
 function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
     const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
@@ -494,7 +505,9 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
     const [focused, setFocused] = require$$0.useState(false);
     const elementRef = require$$0.useRef(null);
     const areaRef = formControl?.elementRef ?? elementRef;
-    const changeIsInternal = require$$0.useRef(false);
+    const composing = require$$0.useRef(false);
+    const valueSent = require$$0.useRef(formControl?.value);
+    const valueSource = require$$0.useRef(formControl ? formControl.value : value);
     const heightIsManual = require$$0.useRef(false);
     const heightApplied = require$$0.useRef(0);
     const refreshHeight = require$$0.useCallback(() => {
@@ -520,13 +533,16 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         heightApplied.current = height;
     }, [areaRef, rowsMax, rowsMin]);
     require$$0.useEffect(() => {
-        if (!changeIsInternal.current) {
-            const nextValue = String(formControl?.value ?? value ?? '');
+        const source = formControl ? formControl.value : value;
+        const isEcho = Object.is(source, valueSent.current);
+        const isSame = Object.is(source, valueSource.current);
+        valueSource.current = source;
+        if (!isEcho && !isSame) {
+            const nextValue = String(source ?? '');
             if (valueArea !== nextValue) {
                 setValueArea(nextValue);
             }
         }
-        changeIsInternal.current = false;
     }, [formControl?.value, value, valueArea]);
     require$$0.useEffect(() => {
         refreshHeight();
@@ -550,13 +566,28 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         observer.observe(element);
         return () => observer.disconnect();
     }, [areaRef, resize]);
-    const onChangeArea = require$$0.useCallback((event) => {
-        const nextValue = event.target.value;
-        changeIsInternal.current = true;
+    const applyArea = require$$0.useCallback((element) => {
+        const rawArea = element.value;
+        const formatter = formControl?.formatter;
+        const nextValue = formatter && formControl?.formatOn !== 'blur' && !composing.current
+            ? (formatter(rawArea) ?? '')
+            : rawArea;
+        writeAreaValue(element, nextValue);
+        valueSent.current = nextValue;
         onValue?.(nextValue);
         setValueArea(nextValue);
         formControl?.setValue(nextValue);
     }, [formControl, onValue]);
+    const onChangeArea = require$$0.useCallback((event) => {
+        applyArea(event.target);
+    }, [applyArea]);
+    const onCompositionStart = require$$0.useCallback(() => {
+        composing.current = true;
+    }, []);
+    const onCompositionEnd = require$$0.useCallback((event) => {
+        composing.current = false;
+        applyArea(event.currentTarget);
+    }, [applyArea]);
     const onKeyDownArea = require$$0.useCallback((event) => {
         onKeyDown?.(event);
         if (event.key === 'Enter') {
@@ -583,7 +614,7 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         readonly: readOnly,
         resizable: resize !== 'none' && !disabledArea && !readOnly
     });
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 const RlsAreaText = require$$0.memo(RlsAreaTextComponent);
 
@@ -712,30 +743,82 @@ function RlsImageComponent({ src, rlsTheme }) {
 }
 const RlsImage = require$$0.memo(RlsImageComponent);
 
+function valueToInput(value) {
+    return value ? String(value) : '';
+}
+function selectionStartOf(element) {
+    try {
+        // Lanza o retorna null en inputs sin selección (number, email, etc.)
+        return element.selectionStart;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Escribe el valor formateado directamente en el DOM y conserva la posición
+ * del cursor, corrigiéndola por la diferencia de longitud. Es necesario
+ * porque, cuando el formateador rechaza un carácter, el estado del control
+ * no cambia y React no vuelve a escribir el input.
+ */
+function writeInputValue(element, valueInput) {
+    const rawInput = element.value;
+    if (rawInput === valueInput) {
+        return;
+    }
+    const selection = selectionStartOf(element);
+    element.value = valueInput;
+    if (selection !== null) {
+        const offset = valueInput.length - rawInput.length;
+        const caret = Math.max(0, Math.min(selection + offset, valueInput.length));
+        element.setSelectionRange(caret, caret);
+    }
+}
 function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
-    const valueInitial = (formControl?.value ?? value) ? String(value) : '';
-    const [valueInput, setValueInput] = require$$0.useState(valueInitial);
+    const [valueInput, setValueInput] = require$$0.useState(() => valueToInput(formControl?.value ?? value));
     const [focused, setFocused] = require$$0.useState(false);
-    const changeIsInternal = require$$0.useRef(false);
+    const composing = require$$0.useRef(false);
+    const valueSent = require$$0.useRef(formControl?.value);
     require$$0.useEffect(() => {
-        if (!changeIsInternal.current && formControl) {
-            const valueControl = formControl.value ? String(formControl.value) : '';
+        if (formControl && !Object.is(formControl.value, valueSent.current)) {
+            const valueControl = valueToInput(formControl.value);
             if (valueInput !== valueControl) {
                 setValueInput(valueControl);
             }
         }
-        changeIsInternal.current = false;
     }, [formControl?.value]);
-    const onChangeInput = require$$0.useCallback((event) => {
-        const valueInput = event.target.value;
-        const value = type === 'number'
-            ? parseFloat((+valueInput).toFixed(decimals))
-            : valueInput;
-        changeIsInternal.current = true;
+    const applyInput = require$$0.useCallback((element) => {
+        const rawInput = element.value;
+        const parsed = type === 'number'
+            ? parseFloat((+rawInput).toFixed(decimals))
+            : rawInput;
+        const formatter = formControl?.formatter;
+        const value = formatter && formControl?.formatOn !== 'blur' && !composing.current
+            ? formatter(parsed)
+            : parsed;
+        const textInput = Object.is(value, parsed)
+            ? rawInput
+            : type === 'number'
+                ? Number.isNaN(value)
+                    ? ''
+                    : String(value)
+                : valueToInput(value);
+        writeInputValue(element, textInput);
+        valueSent.current = value;
         onValue?.(value);
-        setValueInput(valueInput);
+        setValueInput(textInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
+    const onChangeInput = require$$0.useCallback((event) => {
+        applyInput(event.target);
+    }, [applyInput]);
+    const onCompositionStart = require$$0.useCallback(() => {
+        composing.current = true;
+    }, []);
+    const onCompositionEnd = require$$0.useCallback((event) => {
+        composing.current = false;
+        applyInput(event.currentTarget);
+    }, [applyInput]);
     const onKeyDownInput = require$$0.useCallback((event) => {
         onKeyDown?.(event);
         if (event.key === 'Enter') {
@@ -759,7 +842,7 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
         disabled: formControl?.disabled || disabled,
         focused: formControl?.focused ?? focused
     });
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 const RlsInput = require$$0.memo(RlsInputComponent);
 
@@ -1389,6 +1472,132 @@ function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
 }
 const RlsAlert = require$$0.memo(RlsAlertComponent);
 
+const APP_THEME_ATTRIBUTE = 'app-theme';
+function getAppTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    const theme = document.body.getAttribute(APP_THEME_ATTRIBUTE);
+    return theme === 'dark' || theme === 'dim' ? theme : 'light';
+}
+function setAppTheme(theme) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
+}
+function toggleAppTheme() {
+    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
+    setAppTheme(theme);
+    return theme;
+}
+
+const reactI18n = i18n.i18n({
+    es: {
+        appThemeDark: 'Oscuro',
+        appThemeDim: 'Intermedio',
+        appThemeLight: 'Claro',
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        chooserImageActionCancel: 'Cancelar',
+        editorImageActionRestore: 'Restaurar',
+        editorImageActionSelect: 'Seleccionar',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
+    },
+    en: {
+        appThemeDark: 'Dark',
+        appThemeDim: 'Dim',
+        appThemeLight: 'Light',
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Enter keyword to filter...'
+    }
+});
+
+function RlsTab({ disabled, onSelect, tab, value }) {
+    const className = renderClassStatus('rls-tabs__children', {
+        active: tab.value === value,
+        disabled: disabled || tab.disabled
+    });
+    const onClick = require$$0.useCallback(() => {
+        if (!disabled && !tab.disabled) {
+            onSelect(tab.value);
+        }
+    }, [disabled, tab.disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = require$$0.useState();
+    const valueSelected = require$$0.useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
+    const onSelect = require$$0.useCallback((value) => {
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
+        onValue?.(value);
+    }, [formControl, onValue]);
+    require$$0.useEffect(() => {
+        if (formControl?.value !== undefined) {
+            return setValueInternal(formControl.value);
+        }
+        if (value !== undefined) {
+            return setValueInternal(value);
+        }
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        if (initial) {
+            onSelect(initial.value);
+        }
+    }, [value, formControl?.value]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
+        }) }));
+}
+const RlsTabs = require$$0.memo(RlsTabsComponent);
+
+const APP_THEMES = ['light', 'dim', 'dark'];
+const LABELS = {
+    light: () => reactI18n('appThemeLight'),
+    dim: () => reactI18n('appThemeDim'),
+    dark: () => reactI18n('appThemeDark')
+};
+function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEMES, value }) {
+    const [appTheme, setAppThemeValue] = require$$0.useState(() => value ?? getAppTheme());
+    require$$0.useEffect(() => {
+        if (value !== undefined) {
+            setAppTheme(value);
+            setAppThemeValue(value);
+        }
+    }, [value]);
+    const tabs = require$$0.useMemo(() => {
+        return themes.map((theme) => ({
+            label: labels?.[theme] ?? LABELS[theme](),
+            value: theme
+        }));
+    }, [labels, themes]);
+    const onSelect = require$$0.useCallback((theme) => {
+        setAppTheme(theme);
+        setAppThemeValue(theme);
+        onValue?.(theme);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+}
+const RlsAppThemeTabs = require$$0.memo(RlsAppThemeTabsComponent);
+
 function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
     const classNameBallot = renderClassStatus('rls-ballot', { bordered, skeleton }, className);
     return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
@@ -1676,33 +1885,6 @@ function RlsFieldFileComponent({ accept, children, disabled: _disabled, formCont
 }
 const RlsFieldFile = require$$0.memo(RlsFieldFileComponent);
 
-const reactI18n = i18n.i18n({
-    es: {
-        confirmationActionApproved: 'Aceptar',
-        dateActionCancel: 'Cancelar',
-        dateActionSelect: 'Establecer',
-        dateActionToday: 'Hoy',
-        chooserImageActionCancel: 'Cancelar',
-        editorImageActionRestore: 'Restaurar',
-        editorImageActionSelect: 'Seleccionar',
-        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
-        listEmptyTitle: 'Selección no disponible',
-        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
-    },
-    en: {
-        confirmationActionApproved: 'Approved',
-        dateActionCancel: 'Cancel',
-        dateActionSelect: 'Select',
-        dateActionToday: 'Today',
-        chooserImageActionCancel: 'Cancel',
-        editorImageActionRestore: 'Restore',
-        editorImageActionSelect: 'Select',
-        listEmptyDescription: 'Sorry, there are currently no items in the list',
-        listEmptyTitle: 'Selection not available',
-        listInputPlaceholder: 'Enter keyword to filter...'
-    }
-});
-
 function useEventCallback(callback) {
     const refCallback = require$$0.useRef(callback);
     require$$0.useInsertionEffect(() => {
@@ -2613,50 +2795,6 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = require$$0.memo(RlsSliderComponent);
 
-function RlsTab({ disabled, onSelect, tab, value }) {
-    const className = renderClassStatus('rls-tabs__children', {
-        active: tab.value === value,
-        disabled: disabled || tab.disabled
-    });
-    const onClick = require$$0.useCallback(() => {
-        if (!disabled && !tab.disabled) {
-            onSelect(tab.value);
-        }
-    }, [disabled, tab.disabled, onSelect]);
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
-}
-function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
-    const [valueInternal, setValueInternal] = require$$0.useState();
-    const valueSelected = require$$0.useMemo(() => {
-        return formControl ? formControl.value : valueInternal;
-    }, [formControl?.value, valueInternal]);
-    const onSelect = require$$0.useCallback((value) => {
-        if (formControl) {
-            formControl?.setValue(value);
-        }
-        else {
-            setValueInternal(value);
-        }
-        onValue?.(value);
-    }, [formControl, onValue]);
-    require$$0.useEffect(() => {
-        if (formControl?.value !== undefined) {
-            return setValueInternal(formControl.value);
-        }
-        if (value !== undefined) {
-            return setValueInternal(value);
-        }
-        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
-        if (initial) {
-            onSelect(initial.value);
-        }
-    }, [value, formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
-            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
-        }) }));
-}
-const RlsTabs = require$$0.memo(RlsTabsComponent);
-
 function RlsToolbarComponent({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
@@ -5141,6 +5279,24 @@ function RlsApplication({ children }) {
     return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, jsxRuntimeExports.jsx(RlsSnackbar, {})] }), jsxRuntimeExports.jsx(RlsConfirmation, {}), jsxRuntimeExports.jsx(RlsNotifications, {})] }));
 }
 
+function useAppThemeController(initialTheme, primaryTheme = 'light', secondaryTheme = 'dark') {
+    const [appTheme, setAppThemeValue] = require$$0.useState(() => {
+        if (initialTheme) {
+            setAppTheme(initialTheme);
+            return initialTheme;
+        }
+        return getAppTheme();
+    });
+    const setValue = require$$0.useCallback((value) => {
+        setAppTheme(value);
+        setAppThemeValue(value);
+    }, []);
+    const toggle = require$$0.useCallback(() => {
+        setValue(appTheme === primaryTheme ? secondaryTheme : primaryTheme);
+    }, [appTheme, primaryTheme, secondaryTheme, setValue]);
+    return { setValue, toggle, value: appTheme };
+}
+
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
 
 const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
@@ -5274,32 +5430,13 @@ function useTabsController(options) {
     return require$$0.useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
-const APP_THEME_ATTRIBUTE = 'app-theme';
-function getAppTheme() {
-    if (typeof document === 'undefined') {
-        return 'light';
-    }
-    return document.body.getAttribute(APP_THEME_ATTRIBUTE) === 'dark'
-        ? 'dark'
-        : 'light';
-}
-function setAppTheme(theme) {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
-}
-function toggleAppTheme() {
-    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
-    setAppTheme(theme);
-    return theme;
-}
-
+exports.APP_THEMES = APP_THEMES;
 exports.ConfirmationResult = ConfirmationResult;
 exports.DEFAULT_COLOR = DEFAULT_COLOR;
 exports.RlsAccordion = RlsAccordion;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
+exports.RlsAppThemeTabs = RlsAppThemeTabs;
 exports.RlsApplication = RlsApplication;
 exports.RlsAreaText = RlsAreaText;
 exports.RlsAvatar = RlsAvatar;
@@ -5433,6 +5570,7 @@ exports.setDesignSystem = setDesignSystem;
 exports.setErrorsI18n = setErrorsI18n;
 exports.setThemeColor = setThemeColor;
 exports.toggleAppTheme = toggleAppTheme;
+exports.useAppThemeController = useAppThemeController;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useDesingSystemController = useDesingSystemController;