@rolster/react-components 18.24.11 → 18.25.1

package/dist/es/assets/{index-A_JkPXhq.css → index-ItWqNiAF.css}

@@ -739,6 +739,13 @@
   box-sizing: border-box;
   background: var(--rlc-input-search-background, var(--rls-app-color-100));
   border-radius: var(--rls-sizing-x4);
+}
+.rls-input-search--disabled {
+  opacity: 0.5;
+}
+.rls-input-search .rls-input__component:disabled,
+.rls-input-search .rls-button-action:disabled {
+  opacity: 1 !important;
 } /*# sourceMappingURL=InputSearch.css.map */
 
 .rls-input-text {

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createContext } from 'react';
-import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
+import { currencyFormat, valueIsDefined, PartialSealed } from '@rolster/commons';
 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';
@@ -1576,12 +1576,15 @@ function RlsInputPercentage(props) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
 }
 
-function RlsInputSearch({ formControl, identifier, onEnter, onSearch, placeholder }) {
+function RlsInputSearch({ formControl, disabled, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = useState('');
+    const className = useMemo(() => {
+        return renderClassStatus('rls-input-search', { disabled });
+    }, [disabled]);
     const onValue = useCallback((value) => {
         !formControl && setValue(() => value);
     }, [formControl]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, children: formControl?.value ?? value }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onEnter: onEnter, onValue: onValue, disabled: disabled, children: formControl?.value ?? value }), onSearch && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch, disabled: disabled }))] }));
 }
 
 function RlsInputText(props) {
@@ -2179,7 +2182,7 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
         });
     }, [month.disabled, month.focused, month.selected, disabled]);
     const onClick = useCallback(() => {
-        itIsDefined(month.value) &&
+        valueIsDefined(month.value) &&
             !month.disabled &&
             !disabled &&
             onSelect(month.value);
@@ -2210,7 +2213,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             maxDate
         };
         const month = verifyMonthPicker(options);
-        itIsDefined(month)
+        valueIsDefined(month)
             ? setMonthValue(month)
             : setMonths(createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
@@ -2222,7 +2225,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             minDate,
             maxDate
         });
-        itIsDefined(month)
+        valueIsDefined(month)
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
@@ -2248,7 +2251,8 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         setLabel(MONTH_NAMES(monthControl.value ?? Month.January));
     }, [monthControl.value]);
     const onPreviousMonth = useCallback(() => {
-        if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
             if (monthControl.value > Month.January) {
                 monthControl.setValue(monthControl.value - 1);
             }
@@ -2259,14 +2263,15 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onPreviousYear = useCallback(() => {
-        itIsDefined(yearControl.value) &&
+        valueIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value - 1);
     }, [yearControl.value]);
     const onPrevious = useCallback(() => {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
     }, [type, onPreviousMonth, onPreviousYear]);
     const onNextMonth = useCallback(() => {
-        if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
             if (monthControl.value < Month.December) {
                 monthControl.setValue(monthControl.value + 1);
             }
@@ -2277,7 +2282,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onNextYear = useCallback(() => {
-        itIsDefined(yearControl.value) &&
+        valueIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value + 1);
     }, [yearControl.value]);
     const onNext = useCallback(() => {
@@ -2331,7 +2336,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     }, [template.years, onSelect, disabled]);
     useEffect(() => {
         const year = verifyYearPicker(createPickerOptions());
-        itIsDefined(year)
+        valueIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
@@ -2828,11 +2833,12 @@ function RlsFieldAutocompleteTemplate(props) {
             disabled,
             readonly: readOnly,
             selected: !!autocomplete.value
-        }, 'rls-field-list rls-field-autocomplete');
+        }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
     }, [
         formControl?.wrong,
         autocomplete.value,
         autocomplete.focused,
+        props.className,
         disabled,
         readOnly
     ]);
@@ -3038,14 +3044,14 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     }, []);
     useEffect(() => {
         setDate((date) => {
-            return itIsDefined(yearControl.value)
+            return valueIsDefined(yearControl.value)
                 ? assignYearInDate(date, yearControl.value)
                 : date;
         });
     }, [yearControl.value]);
     useEffect(() => {
         setDate((date) => {
-            return itIsDefined(monthControl.value)
+            return valueIsDefined(monthControl.value)
                 ? assignMonthInDate(date, monthControl.value)
                 : date;
         });
@@ -3243,8 +3249,8 @@ function RlsFieldSelectTemplate(props) {
             error: formControl?.wrong,
             disabled: disabled,
             readonly: readOnly
-        }, 'rls-field-list rls-field-select');
-    }, [formControl?.wrong, select.focused, disabled, readOnly]);
+        }, `rls-field-list rls-field-select ${props.className ?? ''}`);
+    }, [formControl?.wrong, select.focused, props.className, disabled, readOnly]);
     const classNameList = useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: select.higher,