@rolster/react-components 18.21.32 → 18.21.34

package/dist/cjs/assets/{index-BQ758ZeF.css → index-D3ZlI-1N.css}

@@ -249,6 +249,7 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
   line-height: var(--rls-sizing-x20);
   height: var(--rls-sizing-x20);
   padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));

package/dist/cjs/index.js

@@ -1502,10 +1502,13 @@ function RlsBreadcrumbLabel({ label }) {
             actionable: !!label.onClick
         });
     }, [label.onClick]);
-    return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, "rls-theme": label.rlsTheme, children: jsxRuntimeExports.jsx("a", { className: className, children: label.label }) }));
+    return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, "rls-theme": label.rlsTheme, children: label.label }) }));
 }
 function RlsBreadcrumb({ labels }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index))) }));
+    const children = require$$0.useMemo(() => {
+        return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
+    }, [labels]);
+    return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
 }
 
 function RlsIcon({ value, skeleton }) {
@@ -1539,21 +1542,28 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
-function RlsInput({ children, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
+function RlsInput({ children, decimals, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
     const valueInitial = formControl?.value ?? value ? String(value) : '';
     const [valueInput, setValueInput] = require$$0.useState(valueInitial);
     const [focused, setFocused] = require$$0.useState(false);
+    const isChangeInternal = require$$0.useRef(false);
     require$$0.useEffect(() => {
-        const valueControl = formControl?.value ? String(formControl.value) : '';
-        (!focused || valueInput !== valueControl) && setValueInput(valueControl);
+        if (!isChangeInternal.current) {
+            const control = formControl?.value ? String(formControl.value) : '';
+            valueInput !== control && setValueInput(control);
+        }
+        isChangeInternal.current = false;
     }, [formControl?.value]);
     const _onChange = require$$0.useCallback((event) => {
         const valueInput = event.target.value;
-        const value = type === 'number' ? +valueInput : valueInput;
+        const value = type === 'number'
+            ? commons.floorDecimals(+valueInput, decimals || 0)
+            : valueInput;
+        isChangeInternal.current = true;
         onValue && onValue(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
-    }, [formControl, onValue]);
+    }, [formControl, onValue, type, decimals]);
     const _onKeyDown = require$$0.useCallback((event) => {
         onKeyDown && onKeyDown(event);
         event.key === 'Enter' && onEnter && onEnter();
@@ -1606,7 +1616,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     }, [formControl, onValue]);
     const _onKeyDown = require$$0.useCallback((event) => {
         onKeyDown && onKeyDown(event);
-        event.code === 'NumpadEnter' && onEnter && onEnter();
+        event.key === 'Enter' && onEnter && onEnter();
     }, [onKeyDown, onEnter]);
     const _onKeyUp = require$$0.useCallback((event) => {
         onKeyUp && onKeyUp(event);
@@ -2421,8 +2431,11 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
+function calculateMinHeightList(count, height) {
+    return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
+}
 function useListController(props) {
-    const { limit, suggestions, automatic, formControl, reference } = props;
+    const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
     const listIsOpen = require$$0.useRef(false);
     const contentRef = require$$0.useRef(null);
     const listRef = require$$0.useRef(null);
@@ -2485,7 +2498,7 @@ function useListController(props) {
         changeValueInternal.current = false;
     }, [collection, formControl?.value]);
     const setState = require$$0.useCallback((state) => {
-        const minHeightList = limit > 0 ? (limit < 6 ? limit * 48 : 300) : 160;
+        const minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
         const _state = state.modalIsVisible
             ? {
                 ...state,
@@ -2493,7 +2506,7 @@ function useListController(props) {
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
-    }, [limit]);
+    }, [count]);
     const setFormValue = require$$0.useCallback((element, initialValue = false) => {
         refreshState((state) => ({
             ...state,
@@ -2538,10 +2551,10 @@ function useListController(props) {
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
-    const limit = require$$0.useRef(props.suggestions.length);
+    const count = require$$0.useRef(props.suggestions.length);
     const controller = useListController({
         ...props,
-        limit: limit.current
+        count: count.current
     });
     const [coincidences, setCoincidences] = require$$0.useState([]);
     const [pattern, setPattern] = require$$0.useState('');
@@ -2560,7 +2573,7 @@ function useFieldAutocomplete(props) {
         _store.current = store;
         const coincidences = collection.slice(0, MAX_ELEMENTS);
         setCoincidences(coincidences);
-        limit.current = coincidences.length;
+        count.current = coincidences.length;
     }, []);
     require$$0.useEffect(() => {
         refreshCoincidences(props.suggestions, pattern, true);
@@ -2670,33 +2683,38 @@ function RlsFieldAutocompleteTemplate(props) {
             });
         });
     }, []);
-    const _disabled = require$$0.useMemo(() => {
+    const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: autocomplete.focused && !_disabled,
+            focused: autocomplete.focused && !disabled,
             error: formControl?.wrong,
-            disabled: _disabled,
+            disabled,
             selected: !!autocomplete.value
         }, 'rls-field-list rls-field-autocomplete');
-    }, [formControl?.wrong, autocomplete.value, autocomplete.focused, _disabled]);
+    }, [formControl?.wrong, autocomplete.value, autocomplete.focused, disabled]);
     const classNameList = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: autocomplete.higher,
             visible: autocomplete.modalIsVisible
         });
     }, [autocomplete.higher, autocomplete.modalIsVisible]);
-    const onInputSearch = require$$0.useCallback((event) => {
+    const onChangePattern = require$$0.useCallback((event) => {
         autocomplete.setPattern(event.target.value);
     }, [autocomplete.setPattern]);
-    const onClickSearch = require$$0.useCallback(() => {
+    const onClickPattern = require$$0.useCallback(() => {
         onSearch && onSearch(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, 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-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    const onKeyDownPattern = require$$0.useCallback((event) => {
+        event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
+        autocomplete.onKeydownInput(event);
+    }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, 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-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
+    const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
 function RlsModal({ children, overflow, visible, rlsTheme }) {
@@ -2948,13 +2966,13 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
 }
 
 function useFieldSelect(props) {
-    const limit = require$$0.useRef(props.suggestions.length);
+    const count = require$$0.useRef(props.suggestions.length);
     const controller = useListController({
         ...props,
-        limit: limit.current
+        count: count.current
     });
     require$$0.useEffect(() => {
-        limit.current = props.suggestions.length;
+        count.current = props.suggestions.length;
     }, [props.suggestions]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
@@ -3060,26 +3078,27 @@ function RlsFieldSelectTemplate(props) {
             });
         });
     }, []);
-    const _disabled = require$$0.useMemo(() => {
+    const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled: disabled,
             error: formControl?.wrong,
-            focused: select.focused && !_disabled
+            focused: select.focused && !disabled
         }, 'rls-field-list rls-field-select');
-    }, [formControl?.wrong, select.focused, _disabled]);
+    }, [formControl?.wrong, select.focused, disabled]);
     const classNameList = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: select.higher,
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, 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", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, 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", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
+    const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
 function RlsFormNavigation({ children, visible, rlsTheme }) {
@@ -3251,6 +3270,8 @@ exports.renderClassStatus = renderClassStatus;
 exports.setErrorsI18n = setErrorsI18n;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
+exports.useFieldAutocomplete = useFieldAutocomplete;
+exports.useFieldSelect = useFieldSelect;
 exports.useListController = useListController;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.js.map