@rolster/react-components 18.22.5 → 18.23.4

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
-import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
+import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, dateFormatTemplate, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
 import { useReactControl } from '@rolster/react-forms';
 
@@ -1354,115 +1354,6 @@ function renderClassStatus(base, status = {}, additionals) {
     return _classElement.join(' ').trim();
 }
 
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
-
-function rangeFormatTemplate({ maxDate, minDate }) {
-    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-
-const errorsDictionary = {
-    es: {
-        alphabetic: 'Campo solo permite caracteres',
-        alphanumber: 'Campo solo permite caracteres y número',
-        decimal: 'Campo debe ser número decimal',
-        defined: 'Campo debe estar definido',
-        email: 'Campo debe ser correo electrónico',
-        greaterThanValue: 'Campo debe tener un valor mayor a {thanValue}',
-        greaterOrEqualsThanValue: 'Campo debe tener un valor mayor o igual a {thanValue}',
-        lessThanValue: 'Campo debe tener un valor menor a {thanValue}',
-        lessOrEqualsThanValue: 'Campo debe tener un valor menor o igual a {thanValue}',
-        maxValue: 'Campo debe tener un valor máximo de {thanValue}',
-        minValue: 'Campo debe tener un valor mínimo de {thanValue}',
-        nickname: 'Campo inválido para nombre de usuario',
-        onlynumber: 'Campo debe ser númerico',
-        password: 'Campo no permitido para password',
-        reqlength: 'Campo debe tener {length} caracter(es)',
-        required: 'Campo es requerido',
-        strMinlength: 'Campo debe tener mínimo {length} caracter(es)',
-        strMaxlength: 'Campo debe tener máximo {length} caracter(es)',
-        textonly: 'Campo solo permite caracteres (sin espacio)',
-        _unknown: 'Campo inválido {error}'
-    },
-    en: {
-        alphabetic: 'Field only allows characters',
-        alphanumber: 'Field only allows characters and number',
-        decimal: 'Field must be decimal number',
-        defined: 'Field must be defined',
-        email: 'Field must be email',
-        greaterThanValue: 'Field must have a value greater than {thanValue}',
-        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
-        lessThanValue: 'Field must have a value less than {thanValue}',
-        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
-        minValue: 'Field must have a minimum value of {thanValue}',
-        maxValue: 'Field must have a maximum value of {thanValue}',
-        nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
-        password: 'Field not allowed for password',
-        reqlength: 'Field must be {length} characters',
-        required: 'Field is required',
-        strMinlength: 'Field must have minimum {length} characters',
-        strMaxlength: 'Field must have maximum {length} characters',
-        textonly: 'Field only allows characters (no space)',
-        _unknown: 'Invalid field {error}'
-    },
-    fr: {
-        alphabetic: 'Field only allows characters',
-        alphanumber: 'Field only allows characters and number',
-        decimal: 'Field must be decimal number',
-        defined: 'Field must be defined',
-        email: 'Field must be email',
-        greaterThanValue: 'Field must have a value greater than {thanValue}',
-        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
-        lessThanValue: 'Field must have a value less than {thanValue}',
-        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
-        minValue: 'Field must have a minimum value of {thanValue}',
-        maxValue: 'Field must have a maximum value of {thanValue}',
-        nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
-        password: 'Field not allowed for password',
-        reqlength: 'Field must be {length} characters',
-        required: 'Field is required',
-        strMinlength: 'Field must have minimum {length} characters',
-        strMaxlength: 'Field must have maximum {length} characters',
-        textonly: 'Field only allows characters (no space)',
-        _unknown: 'Invalid field {error}'
-    },
-    pt: {
-        alphabetic: 'Field only allows characters',
-        alphanumber: 'Field only allows characters and number',
-        decimal: 'Field must be decimal number',
-        defined: 'Field must be defined',
-        email: 'Field must be email',
-        greaterThanValue: 'Field must have a value greater than {thanValue}',
-        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
-        lessThanValue: 'Field must have a value less than {thanValue}',
-        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
-        minValue: 'Field must have a minimum value of {thanValue}',
-        maxValue: 'Field must have a maximum value of {thanValue}',
-        nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
-        password: 'Field not allowed for password',
-        reqlength: 'Field must be {thanValue} characters',
-        required: 'Field is required',
-        strMinlength: 'Field must have minimum {thanValue} characters',
-        strMaxlength: 'Field must have maximum {thanValue} characters',
-        textonly: 'Field only allows characters (no space)',
-        _unknown: 'Invalid field {error}'
-    }
-};
-let _msgErrorsI18n = i18n(errorsDictionary);
-function setErrorsI18n(dictionary) {
-    _msgErrorsI18n = i18n(Object.entries(errorsDictionary).reduce((_dictionary, [key, value]) => {
-        _dictionary[key] = { ...value, ...dictionary[key] };
-        return _dictionary;
-    }, {}));
-}
-function msgErrorsI18n(key, language, interpolators) {
-    return _msgErrorsI18n(key, { language, interpolators });
-}
-
 const className = 'rls-tabular-text';
 const pointers = ['.', ','];
 function getCharClass(char) {
@@ -1795,6 +1686,107 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
                         }, children: action.label }, index))) }) })] }));
 }
 
+const errorsDictionary = {
+    es: {
+        alphabetic: 'Campo solo permite caracteres',
+        alphanumber: 'Campo solo permite caracteres y número',
+        decimal: 'Campo debe ser número decimal',
+        defined: 'Campo debe estar definido',
+        email: 'Campo debe ser correo electrónico',
+        greaterThanValue: 'Campo debe tener un valor mayor a {thanValue}',
+        greaterOrEqualsThanValue: 'Campo debe tener un valor mayor o igual a {thanValue}',
+        lessThanValue: 'Campo debe tener un valor menor a {thanValue}',
+        lessOrEqualsThanValue: 'Campo debe tener un valor menor o igual a {thanValue}',
+        maxValue: 'Campo debe tener un valor máximo de {thanValue}',
+        minValue: 'Campo debe tener un valor mínimo de {thanValue}',
+        nickname: 'Campo inválido para nombre de usuario',
+        onlynumber: 'Campo debe ser númerico',
+        password: 'Campo no permitido para password',
+        reqlength: 'Campo debe tener {length} caracter(es)',
+        required: 'Campo es requerido',
+        strMinlength: 'Campo debe tener mínimo {length} caracter(es)',
+        strMaxlength: 'Campo debe tener máximo {length} caracter(es)',
+        textonly: 'Campo solo permite caracteres (sin espacio)',
+        _unknown: 'Campo inválido {error}'
+    },
+    en: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    fr: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {length} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    },
+    pt: {
+        alphabetic: 'Field only allows characters',
+        alphanumber: 'Field only allows characters and number',
+        decimal: 'Field must be decimal number',
+        defined: 'Field must be defined',
+        email: 'Field must be email',
+        greaterThanValue: 'Field must have a value greater than {thanValue}',
+        greaterOrEqualsThanValue: 'Field must have a value greater than or equal to {thanValue}',
+        lessThanValue: 'Field must have a value less than {thanValue}',
+        lessOrEqualsThanValue: 'Field must have a value less than or equal to {thanValue}',
+        minValue: 'Field must have a minimum value of {thanValue}',
+        maxValue: 'Field must have a maximum value of {thanValue}',
+        nickname: 'Invalid field for username',
+        onlynumber: 'Field must be numeric',
+        password: 'Field not allowed for password',
+        reqlength: 'Field must be {thanValue} characters',
+        required: 'Field is required',
+        strMinlength: 'Field must have minimum {thanValue} characters',
+        strMaxlength: 'Field must have maximum {thanValue} characters',
+        textonly: 'Field only allows characters (no space)',
+        _unknown: 'Invalid field {error}'
+    }
+};
+let _msgErrorsI18n = i18n(errorsDictionary);
+function setErrorsI18n(dictionary) {
+    _msgErrorsI18n = i18n(Object.entries(errorsDictionary).reduce((_dictionary, [key, value]) => {
+        _dictionary[key] = { ...value, ...dictionary[key] };
+        return _dictionary;
+    }, {}));
+}
+function msgErrorsI18n(key, language, interpolators) {
+    return _msgErrorsI18n(key, { language, interpolators });
+}
+
 function RlsMessageFormError({ className, formControl }) {
     const [language, setLanguage] = useState('es');
     useEffect(() => {
@@ -2499,29 +2491,6 @@ function RlsDatatableFloating({ children, className, identifier, invested, rlsTh
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
 }
 
-function createObserver(options) {
-    const { setScrolleable, table } = options;
-    const observer = new ResizeObserver(() => {
-        const scrollHeight = table.scrollHeight || 0;
-        const clientHeight = table.clientHeight || 0;
-        setScrolleable(scrollHeight > clientHeight);
-    });
-    observer.observe(table);
-    return observer;
-}
-function useDatatable() {
-    const [scrolleable, setScrolleable] = useState(false);
-    const tableRef = useRef(null);
-    useEffect(() => {
-        const observer = tableRef?.current &&
-            createObserver({ setScrolleable, table: tableRef?.current });
-        return () => {
-            observer?.disconnect();
-        };
-    }, []);
-    return { scrolleable, tableRef };
-}
-
 function calculateMinHeightList(count, height) {
     return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
 }
@@ -2639,126 +2608,6 @@ function useListController(props) {
     };
 }
 
-function useRelocationOnComponent({ container, element, onDrag }) {
-    const position = useRef({ x: 0, y: 0 });
-    const dragOffset = useRef({ x: 0, y: 0 });
-    const dragging = useRef(false);
-    const getClientX = useCallback((positionX) => {
-        let clientX = position.current.x + positionX - dragOffset.current.x;
-        if (clientX < 0) {
-            clientX = 0;
-        }
-        else {
-            const width = clientX + element.current.offsetWidth;
-            if (width > container.current.offsetWidth) {
-                clientX = container.current.offsetWidth - element.current.offsetWidth;
-            }
-        }
-        return clientX;
-    }, []);
-    const getClientY = useCallback((positionY) => {
-        let clientY = position.current.y + positionY - dragOffset.current.y;
-        if (clientY < 0) {
-            clientY = 0;
-        }
-        else {
-            const height = clientY + element.current.offsetHeight;
-            if (height > container.current.offsetHeight) {
-                clientY = container.current.offsetHeight - element.current.offsetHeight;
-            }
-        }
-        return clientY;
-    }, []);
-    const start = useCallback((positionX, positionY) => {
-        dragOffset.current = {
-            x: positionX,
-            y: positionY
-        };
-        position.current = {
-            x: element.current.offsetLeft,
-            y: element.current.offsetTop
-        };
-        dragging.current = true;
-    }, []);
-    const relocation = useCallback((positionX, positionY) => {
-        const clientX = getClientX(positionX);
-        const clientY = getClientY(positionY);
-        element.current.style.top = `${clientY}px`;
-        element.current.style.left = `${clientX}px`;
-        onDrag && onDrag();
-    }, []);
-    useEffect(() => {
-        const mousedown = (event) => {
-            start(event.clientX, event.clientY);
-        };
-        const mousemove = (event) => {
-            if (dragging.current) {
-                relocation(event.clientX, event.clientY);
-                event.preventDefault();
-            }
-        };
-        const mouseup = () => {
-            dragging.current = false;
-        };
-        const touchstart = (event) => {
-            if (event.touches[0]) {
-                start(event.touches[0].clientX, event.touches[0].clientY);
-            }
-        };
-        const touchmove = (event) => {
-            if (event.touches[0] && dragging.current) {
-                relocation(event.touches[0].clientX, event.touches[0].clientY);
-                event.preventDefault();
-            }
-        };
-        const touchend = () => {
-            dragging.current = false;
-        };
-        element.current.addEventListener('mousedown', mousedown);
-        element.current.addEventListener('mousemove', mousemove);
-        element.current.addEventListener('mouseup', mouseup);
-        element.current.addEventListener('touchstart', touchstart);
-        element.current.addEventListener('touchmove', touchmove);
-        element.current.addEventListener('touchend', touchend);
-        return () => {
-            element.current?.removeEventListener('mousedown', mousedown);
-            element.current?.removeEventListener('mousemove', mousemove);
-            element.current?.removeEventListener('mouseup', mouseup);
-            element.current?.removeEventListener('touchstart', touchstart);
-            element.current?.removeEventListener('touchmove', touchmove);
-            element.current?.removeEventListener('touchend', touchend);
-        };
-    }, []);
-}
-
-function useResize(props) {
-    const { refElement, onResize } = props;
-    const dimension = useRef({ height: 0, width: 0 });
-    const observer = useCallback((entries) => {
-        const { height, width } = entries[0].contentRect;
-        onResize &&
-            onResize({
-                current: dimension.current,
-                dimension: {
-                    height,
-                    width
-                }
-            });
-        dimension.current = { height, width };
-    }, []);
-    useEffect(() => {
-        dimension.current = {
-            height: refElement.current.offsetHeight,
-            width: refElement.current.offsetWidth
-        };
-        const resizeObserver = new ResizeObserver(observer);
-        resizeObserver.observe(refElement.current);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-}
-
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
@@ -3076,6 +2925,14 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
+
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
 function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const _date = useMemo(() => normalizeMinTime(_picker ?? new Date()), [_picker]);
     const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
@@ -3333,6 +3190,126 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
+function useRelocationOnComponent({ container, element, onDrag }) {
+    const position = useRef({ x: 0, y: 0 });
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const dragging = useRef(false);
+    const getClientX = useCallback((positionX) => {
+        let clientX = position.current.x + positionX - dragOffset.current.x;
+        if (clientX < 0) {
+            clientX = 0;
+        }
+        else {
+            const width = clientX + element.current.offsetWidth;
+            if (width > container.current.offsetWidth) {
+                clientX = container.current.offsetWidth - element.current.offsetWidth;
+            }
+        }
+        return clientX;
+    }, []);
+    const getClientY = useCallback((positionY) => {
+        let clientY = position.current.y + positionY - dragOffset.current.y;
+        if (clientY < 0) {
+            clientY = 0;
+        }
+        else {
+            const height = clientY + element.current.offsetHeight;
+            if (height > container.current.offsetHeight) {
+                clientY = container.current.offsetHeight - element.current.offsetHeight;
+            }
+        }
+        return clientY;
+    }, []);
+    const start = useCallback((positionX, positionY) => {
+        dragOffset.current = {
+            x: positionX,
+            y: positionY
+        };
+        position.current = {
+            x: element.current.offsetLeft,
+            y: element.current.offsetTop
+        };
+        dragging.current = true;
+    }, []);
+    const relocation = useCallback((positionX, positionY) => {
+        const clientX = getClientX(positionX);
+        const clientY = getClientY(positionY);
+        element.current.style.top = `${clientY}px`;
+        element.current.style.left = `${clientX}px`;
+        onDrag && onDrag();
+    }, []);
+    useEffect(() => {
+        const mousedown = (event) => {
+            start(event.clientX, event.clientY);
+        };
+        const mousemove = (event) => {
+            if (dragging.current) {
+                relocation(event.clientX, event.clientY);
+                event.preventDefault();
+            }
+        };
+        const mouseup = () => {
+            dragging.current = false;
+        };
+        const touchstart = (event) => {
+            if (event.touches[0]) {
+                start(event.touches[0].clientX, event.touches[0].clientY);
+            }
+        };
+        const touchmove = (event) => {
+            if (event.touches[0] && dragging.current) {
+                relocation(event.touches[0].clientX, event.touches[0].clientY);
+                event.preventDefault();
+            }
+        };
+        const touchend = () => {
+            dragging.current = false;
+        };
+        element.current.addEventListener('mousedown', mousedown);
+        element.current.addEventListener('mousemove', mousemove);
+        element.current.addEventListener('mouseup', mouseup);
+        element.current.addEventListener('touchstart', touchstart);
+        element.current.addEventListener('touchmove', touchmove);
+        element.current.addEventListener('touchend', touchend);
+        return () => {
+            element.current?.removeEventListener('mousedown', mousedown);
+            element.current?.removeEventListener('mousemove', mousemove);
+            element.current?.removeEventListener('mouseup', mouseup);
+            element.current?.removeEventListener('touchstart', touchstart);
+            element.current?.removeEventListener('touchmove', touchmove);
+            element.current?.removeEventListener('touchend', touchend);
+        };
+    }, []);
+}
+
+function useResize(props) {
+    const { refElement, onResize } = props;
+    const dimension = useRef({ height: 0, width: 0 });
+    const observer = useCallback((entries) => {
+        const { height, width } = entries[0].contentRect;
+        onResize &&
+            onResize({
+                current: dimension.current,
+                dimension: {
+                    height,
+                    width
+                }
+            });
+        dimension.current = { height, width };
+    }, []);
+    useEffect(() => {
+        dimension.current = {
+            height: refElement.current.offsetHeight,
+            width: refElement.current.offsetWidth
+        };
+        const resizeObserver = new ResizeObserver(observer);
+        resizeObserver.observe(refElement.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+}
+
 function getRatioFactor(ratio) {
     switch (ratio) {
         case '16:9':
@@ -3536,7 +3513,11 @@ function RlsImageEditor(props) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: 50, maxValue: 100, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 
-const mimeTypeSupports = [
+function RlsImageEditorModal(props) {
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-editor-modal", visible: props.visible, children: jsxRuntimeExports.jsx(RlsImageEditor, { ...props, children: props.children }) }));
+}
+
+const MIME_TYPE_SUPPORTS = [
     'image/png',
     'image/jpg',
     'image/jpeg',
@@ -3545,16 +3526,13 @@ const mimeTypeSupports = [
     'image/gif',
     'image/svg+xml'
 ];
-function RlsImageChooser(props) {
+
+function useImageEditorController(options) {
     const refInput = useRef(null);
+    const [srcEditor, setSrcEditor] = useState();
     const [labels, setLabels] = useState({
         actionCancel: reactI18n('chooserImageActionCancel')
     });
-    const [src, setSrc] = useState();
-    const [srcEditor, setSrcEditor] = useState();
-    const onSelect = useCallback(() => {
-        refInput.current.click();
-    }, []);
     const processImage = useCallback((file) => {
         const reader = new FileReader();
         reader.onload = function () {
@@ -3564,9 +3542,12 @@ function RlsImageChooser(props) {
         reader.readAsDataURL(file);
     }, []);
     useEffect(() => {
+        refInput.current = document.createElement('input');
+        refInput.current.type = 'file';
+        refInput.current.disabled = true;
         refInput.current.onchange = () => {
             if (refInput.current.files &&
-                mimeTypeSupports.includes(refInput.current.files[0].type)) {
+                MIME_TYPE_SUPPORTS.includes(refInput.current.files[0].type)) {
                 processImage(refInput.current.files[0]);
             }
         };
@@ -3576,18 +3557,48 @@ function RlsImageChooser(props) {
             });
         });
     }, []);
-    useEffect(() => {
-        props.src && setSrc(props.src);
-    }, [props.src]);
     const onEditorValue = useCallback((image) => {
-        setSrc(image.base64);
         setSrcEditor(undefined);
-        props.onValue && props.onValue(image);
-    }, [props.onValue]);
+        options.onValue && options.onValue(image);
+    }, [options.onValue]);
     const onCancel = useCallback(() => {
         setSrcEditor(undefined);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, imgWidth: props.imgWidth, imgQuality: props.imgQuality, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
+    const component = useMemo(() => {
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { src: srcEditor, formControl: options.formControl, imgWidth: options.imgWidth, imgQuality: options.imgQuality, onValue: onEditorValue, visible: true, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+    }, [
+        srcEditor,
+        labels,
+        options.formControl,
+        options.imgWidth,
+        options.imgQuality,
+        options.disabled,
+        onEditorValue,
+        onCancel
+    ]);
+    const onImageChooser = useCallback(() => {
+        refInput.current.click();
+    }, []);
+    return { RlsImageEditorChooser: component, onImageChooser };
+}
+
+function RlsImageChooser(props) {
+    const [src, setSrc] = useState();
+    const onValue = useCallback((image) => {
+        setSrc(image.base64);
+        props.onValue && props.onValue(image);
+    }, [props.onValue]);
+    const { RlsImageEditorChooser, onImageChooser } = useImageEditorController({
+        disabled: props.disabled,
+        formControl: props.formControl,
+        imgQuality: props.imgQuality,
+        imgWidth: props.imgWidth,
+        onValue
+    });
+    useEffect(() => {
+        props.src && setSrc(props.src);
+    }, [props.src]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onImageChooser, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), RlsImageEditorChooser] }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -3676,5 +3687,28 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, useRelocationOnComponent, useResize, useSnackbar };
+function createObserver(options) {
+    const { setScrolleable, table } = options;
+    const observer = new ResizeObserver(() => {
+        const scrollHeight = table.scrollHeight || 0;
+        const clientHeight = table.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    });
+    observer.observe(table);
+    return observer;
+}
+function useDatatable() {
+    const [scrolleable, setScrolleable] = useState(false);
+    const tableRef = useRef(null);
+    useEffect(() => {
+        const observer = tableRef?.current &&
+            createObserver({ setScrolleable, table: tableRef?.current });
+        return () => {
+            observer?.disconnect();
+        };
+    }, []);
+    return { scrolleable, tableRef };
+}
+
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map