@rolster/react-components 18.21.33 → 18.21.34

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import require$$0, { useState, useEffect, useMemo, useCallback, useRef, createContext } from 'react';
-import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
+import { currencyFormat, floorDecimals, 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';
@@ -1540,21 +1540,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] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
+    const isChangeInternal = useRef(false);
     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 = useCallback((event) => {
         const valueInput = event.target.value;
-        const value = type === 'number' ? +valueInput : valueInput;
+        const value = type === 'number'
+            ? floorDecimals(+valueInput, decimals || 0)
+            : valueInput;
+        isChangeInternal.current = true;
         onValue && onValue(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
-    }, [formControl, onValue]);
+    }, [formControl, onValue, type, decimals]);
     const _onKeyDown = useCallback((event) => {
         onKeyDown && onKeyDown(event);
         event.key === 'Enter' && onEnter && onEnter();
@@ -2674,17 +2681,17 @@ function RlsFieldAutocompleteTemplate(props) {
             });
         });
     }, []);
-    const _disabled = useMemo(() => {
+    const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = 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 = useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: autocomplete.higher,
@@ -2697,7 +2704,11 @@ function RlsFieldAutocompleteTemplate(props) {
     const onClickPattern = 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: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput, 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 })] })] }));
+    const onKeyDownPattern = 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) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);