@rolster/react-components 18.21.8 → 18.21.10

package/dist/es/index.js

@@ -1358,7 +1358,8 @@ function RlsTabularText({ value }) {
 }
 
 function RlsAmount({ value, decimals, rlsTheme, symbol }) {
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { children: symbol }), jsxRuntimeExports.jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
+    const amount = useMemo(() => currencyFormat({ value, decimals }), [value, decimals]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { children: symbol }), jsxRuntimeExports.jsx(RlsTabularText, { value: amount })] }));
 }
 
 function renderClassStatus(base, status = {}, additionals) {
@@ -1537,10 +1538,18 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
 }
 
 function RlsInput({ children, disabled, formControl, identifier, onValue, placeholder, type, value }) {
+    const valueInitial = formControl?.value ?? value ? String(value) : '';
+    const [valueInput, setValueInput] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
+    useEffect(() => {
+        const valueControl = formControl?.value ? String(formControl.value) : '';
+        (!focused || valueInput !== valueControl) && setValueInput(valueControl);
+    }, [formControl?.value]);
     const onChange = useCallback((event) => {
-        const value = type === 'number' ? +event.target.value : event.target.value;
+        const valueInput = event.target.value;
+        const value = type === 'number' ? +valueInput : valueInput;
         onValue && onValue(value);
+        setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue]);
     const onFocus = useCallback(() => {
@@ -1557,25 +1566,25 @@ function RlsInput({ children, disabled, formControl, identifier, onValue, placeh
             focused: formControl?.focused ?? focused
         });
     }, [formControl?.focused, formControl?.disabled, focused, disabled]);
-    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, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value || value || '' }), 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, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
 function RlsInputMoney({ decimals, disabled, formControl, identifier, onValue, placeholder, symbol, value }) {
-    const [valueInput, setValueInput] = useState(value || 0);
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: valueInput, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
 function RlsInputNumber({ disabled, formControl, identifier, onValue, placeholder, value }) {
-    const [valueInput, setValueInput] = useState(value ?? 0);
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: valueInput, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
 
 function RlsInputPassword({ disabled, formControl, identifier, onValue, placeholder, type }) {
@@ -1610,12 +1619,12 @@ function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
 }
 
 function RlsInputText({ disabled, formControl, identifier, onValue, placeholder, value }) {
-    const [valueInput, setValueInput] = useState(value ?? '');
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }, [formControl, onValue]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: valueInput, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
 
 function RlsLabel({ children, rlsTheme }) {
@@ -2240,7 +2249,7 @@ const reactI18n = i18n({
         dateActionToday: 'Hoy',
         listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
         listEmptyTitle: 'Selección no disponible',
-        listInputPlaceholder: 'Buscar...'
+        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
     },
     en: {
         confirmationActionApproved: 'Approved',
@@ -2249,7 +2258,7 @@ const reactI18n = i18n({
         dateActionToday: 'Today',
         listEmptyDescription: 'Sorry, there are currently no items in the list',
         listEmptyTitle: 'Selection not available',
-        listInputPlaceholder: 'Search...'
+        listInputPlaceholder: 'Enter keyword to filter...'
     }
 });
 
@@ -2307,52 +2316,58 @@ function useConfirmation() {
     };
 }
 
+function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary, toolbar }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-datatable', {
+            scrolleable: datatable?.scrolleable
+        });
+    }, [datatable]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__body", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
+}
 function RlsDatatableHeader({ children, identifier }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", children: children }));
 }
 function RlsDatatableTitle({ children, className, control, identifier }) {
-    const classDatatableName = useMemo(() => {
+    const classNameTitle = useMemo(() => {
         return renderClassStatus('rls-datatable__title', { control }, className);
-    }, [control, className]);
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classDatatableName, children: children }));
+    }, [className, control]);
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, children: children }));
 }
 function RlsDatatableSubheader({ children, className, identifier }) {
-    const classDatatableName = useMemo(() => {
+    const classNameSubheader = useMemo(() => {
         return renderClassStatus('rls-datatable__subheader', {}, className);
     }, [className]);
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classDatatableName, children: children }));
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, children: children }));
 }
-function RlsDatatableRecord({ children, className, error, identifier, info, successs, warning }) {
-    const classDatatableName = useMemo(() => {
-        return renderClassStatus('rls-datatable__record', { error, info, successs, warning }, className);
-    }, [error, info, successs, warning, className]);
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classDatatableName, children: children }));
+function RlsDatatableRecord({ children, className, error, identifier, info, overflow, successs, warning }) {
+    const classNameRecord = useMemo(() => {
+        return renderClassStatus('rls-datatable__record', { error, info, overflow, successs, warning }, className);
+    }, [className, error, info, overflow, successs, warning]);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, children: children }));
 }
-function RlsDatatableTotals({ children, className, error, identifier, info, successs, warning }) {
-    const classDatatableName = useMemo(() => {
-        return renderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className);
-    }, [error, info, successs, warning, className]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classDatatableName, children: children }));
+function RlsDatatableTotals({ children, className, error, identifier, info, overflow, successs, warning }) {
+    const classNameTotals = useMemo(() => {
+        return renderClassStatus('rls-datatable__totals', { error, info, overflow, successs, warning }, className);
+    }, [className, error, info, overflow, successs, warning]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, children: children }));
 }
 function RlsDatatableCell({ children, className, control, identifier, overflow }) {
-    const classDatatableName = useMemo(() => {
+    const classNameCell = useMemo(() => {
         return renderClassStatus('rls-datatable__cell', { control, overflow }, className);
-    }, [control, overflow, className]);
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classDatatableName, children: children }));
+    }, [className, control, overflow]);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, children: children }));
 }
 function RlsDatatableData({ children, className, control, identifier, overflow }) {
-    const classDatatableName = useMemo(() => {
+    const classNameData = useMemo(() => {
         return renderClassStatus('rls-datatable__data', { control, overflow }, className);
-    }, [control, overflow, className]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classDatatableName, children: children }));
+    }, [className, overflow, control]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
-function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary, toolbar }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-datatable', {
-            scrolleable: datatable?.scrolleable
-        });
-    }, [datatable]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__body", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
+function RlsDatatableFloating({ children, className, identifier, invested }) {
+    const classNameFloating = useMemo(() => {
+        return renderClassStatus('rls-datatable__floating', { invested }, className);
+    }, [className, invested]);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, children: children }));
 }
 
 function createObserver(options) {
@@ -2431,7 +2446,7 @@ function useListController(props) {
             }
             else if (valueProtected.current) {
                 const element = collection.find(valueProtected.current);
-                element && setFormValue(element);
+                element ? setFormValue(element) : refreshState({ ...state, value: '' });
             }
             else {
                 automatic
@@ -2639,7 +2654,7 @@ function RlsFieldAutocompleteTemplate(props) {
     }, [autocomplete.higher, autocomplete.modalIsVisible]);
     const onInputSearch = useCallback((event) => {
         autocomplete.setPattern(event.target.value);
-    }, []);
+    }, [autocomplete.setPattern]);
     const onClickSearch = useCallback(() => {
         onSearch && onSearch(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
@@ -3108,5 +3123,5 @@ function RlsApplication({ children }) {
     return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: { confirmation, snackbar, withNavbar }, 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, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, 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, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useListController, useSnackbar };
+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, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, 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, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useListController, useSnackbar };
 //# sourceMappingURL=index.js.map