@rolster/react-components 19.7.3 → 19.7.10

package/dist/es/index.mjs

@@ -4,7 +4,7 @@ import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
 import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, Time, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
-import { useReactControl } from '@rolster/react-forms';
+import { useReactControl, useFormControl } from '@rolster/react-forms';
 
 var jsxRuntime = {exports: {}};
 
@@ -2298,32 +2298,46 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = memo(RlsSliderComponent);
 
-function RlsTab({ onSelect, tab, value }) {
+function RlsTab({ disabled, onSelect, tab, value }) {
     const className = renderClassStatus('rls-tabs__children', {
         active: tab.value === value,
-        disabled: tab.disabled
+        disabled: disabled || tab.disabled
     });
     const onClick = useCallback(() => {
-        if (!tab.disabled) {
+        if (!disabled && !tab.disabled) {
             onSelect(tab.value);
         }
-    }, [tab.disabled]);
+    }, [disabled, tab.disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
 }
-function RlsTabsComponent({ tabs, onValue, rlsTheme }) {
-    const [value, setValue] = useState();
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = useState();
+    const valueSelected = useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
     const onSelect = useCallback((value) => {
-        setValue(value);
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
         onValue?.(value);
-    }, [onValue]);
+    }, [formControl, onValue]);
     useEffect(() => {
+        if (formControl?.value !== undefined) {
+            return setValueInternal(formControl.value);
+        }
+        if (value !== undefined) {
+            return setValueInternal(value);
+        }
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
         if (initial) {
             onSelect(initial.value);
         }
-    }, []);
+    }, [value, formControl?.value]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
-            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
         }) }));
 }
 const RlsTabs = memo(RlsTabsComponent);
@@ -2364,10 +2378,19 @@ function RlsConfirmationComponent({ approved, className, content, reject, rlsThe
     return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 const RlsConfirmation = memo(RlsConfirmationComponent);
+const RlsConfirmationBase = RlsConfirmation;
 function useConfirmation() {
     const [config, setConfig] = useState({});
     const [visible, setVisible] = useState(false);
-    const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    const configRef = useRef(config);
+    configRef.current = config;
+    const visibleRef = useRef(visible);
+    visibleRef.current = visible;
+    const RlsConfirmation = useMemo(() => {
+        return function RlsConfirmation(props) {
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmationBase, { ...props, ...configRef.current, visible: visibleRef.current }), document.body);
+        };
+    }, []);
     const confirmation = useCallback((options) => {
         return new Promise((resolve) => {
             setConfig({
@@ -2401,8 +2424,8 @@ function useConfirmation() {
         });
     }, []);
     return {
-        RlsConfirmation: component,
-        confirmation
+        confirmation,
+        RlsConfirmation
     };
 }
 
@@ -2540,7 +2563,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
     const refInput = useRef(null);
     const listIsOpen = useRef(false);
     const stableSuggestions = useStableSuggestions(suggestions);
-    const collection = useMemo(() => new ListCollection(stableSuggestions, reference), [stableSuggestions]);
+    const collection = useMemo(() => new ListCollection(stableSuggestions, reference), [stableSuggestions, reference]);
     const [state, refreshState] = useState({
         focused: false,
         higher: false,
@@ -2649,7 +2672,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             position: position.current
         });
     }, [state.higher]);
-    return {
+    return useMemo(() => ({
         ...state,
         navigationElement,
         navigationInput,
@@ -2658,7 +2681,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
         refList,
         setFormValue,
         setState
-    };
+    }), [state, navigationElement, navigationInput, setFormValue, setState]);
 }
 
 const DURATION_ANIMATION$2 = 240;
@@ -2788,7 +2811,7 @@ function useFieldAutocomplete(props) {
             }
         };
     }, [onChange, controller.navigationElement]);
-    return {
+    return useMemo(() => ({
         ...controller,
         coincidences,
         onBlurInput,
@@ -2801,7 +2824,20 @@ function useFieldAutocomplete(props) {
         onKeydownInput,
         pattern,
         setPattern
-    };
+    }), [
+        controller,
+        coincidences,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput,
+        pattern,
+        setPattern
+    ]);
 }
 
 function RlsFieldAutocompleteTemplateComponent(props) {
@@ -3811,7 +3847,7 @@ function useFieldList(props) {
             }
         };
     }, [toggleElement]);
-    return {
+    return useMemo(() => ({
         ...state,
         selected,
         refContent,
@@ -3823,7 +3859,17 @@ function useFieldList(props) {
         onClickInput,
         onKeydownElement,
         onRemoveElement
-    };
+    }), [
+        state,
+        selected,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    ]);
 }
 
 function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...props }) {
@@ -3946,7 +3992,7 @@ function useFieldSelect(props) {
             }
         };
     }, [onChange, controller.navigationElement]);
-    return {
+    return useMemo(() => ({
         ...controller,
         onBlurInput,
         onClickAction,
@@ -3956,7 +4002,17 @@ function useFieldSelect(props) {
         onFocusInput,
         onKeydownElement,
         onKeydownInput
-    };
+    }), [
+        controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    ]);
 }
 
 function RlsFieldSelectTemplateComponent(props) {
@@ -4453,6 +4509,8 @@ function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
 function useNotifications() {
     const [notifications, setNotifications] = useState([]);
     const timersRef = useRef(new Map());
+    const notificationsRef = useRef(notifications);
+    notificationsRef.current = notifications;
     useEffect(() => {
         const timers = timersRef.current;
         return () => {
@@ -4473,6 +4531,14 @@ function useNotifications() {
             setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
         }, DURATION_ANIMATION$1);
     }, []);
+    const RlsNotifications = useMemo(() => {
+        return function RlsNotifications(props) {
+            const className = renderClassStatus('rls-notifications', {
+                visible: notificationsRef.current.length > 0
+            });
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, ...props, children: notificationsRef.current.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+        };
+    }, [remove]);
     const notify = useCallback((config) => {
         const id = generateId();
         const duration = config.duration ?? DURATION_DEFAULT;
@@ -4492,10 +4558,6 @@ function useNotifications() {
         }, duration);
         timersRef.current.set(id, timer);
     }, [remove]);
-    const className = renderClassStatus('rls-notifications', {
-        visible: notifications.length > 0
-    });
-    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
     return {
         RlsNotifications,
         notify
@@ -4522,6 +4584,7 @@ function RlsSnackbarComponent({ content, onClose, icon, rlsTheme, title, visible
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 const RlsSnackbar = memo(RlsSnackbarComponent);
+const RlsSnackbarNode = RlsSnackbar;
 function useSnackbar() {
     const timeoutId = useRef(undefined);
     const duration = useRef(4000);
@@ -4529,6 +4592,8 @@ function useSnackbar() {
         config: {},
         visible: false
     });
+    const stateRef = useRef(state);
+    stateRef.current = state;
     const onClose = useCallback(() => {
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
@@ -4536,7 +4601,13 @@ function useSnackbar() {
         timeoutId.current = undefined;
         setState((state) => ({ ...state, visible: false }));
     }, []);
-    const rlsSnackbar = (jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible, onClose: onClose }));
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const RlsSnackbar = useMemo(() => {
+        return function RlsSnackbar(props) {
+            return (jsxRuntimeExports.jsx(RlsSnackbarNode, { ...props, ...stateRef.current.config, visible: stateRef.current.visible, onClose: onCloseRef.current }));
+        };
+    }, []);
     useEffect(() => {
         if (state.visible) {
             timeoutId.current = setTimeout(() => {
@@ -4560,10 +4631,7 @@ function useSnackbar() {
             visible: !state.visible
         }));
     }, []);
-    return {
-        RlsSnackbar: rlsSnackbar,
-        snackbar
-    };
+    return { RlsSnackbar, snackbar };
 }
 
 const RlsContext = createContext(null);
@@ -4576,8 +4644,8 @@ function useRlsContext() {
 }
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
-    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
+    const { RlsNotifications, notify } = useNotifications();
     const [navbarInApp, setNavbarInApp] = useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = useState(false);
     const [appIsMobile, setIsMobile] = useState(false);
@@ -4594,7 +4662,7 @@ function RlsApplication({ children }) {
         setNavbarIsCondense,
         snackbar
     }), [confirmation, notify, snackbar]);
-    return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
+    return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, jsxRuntimeExports.jsx(RlsSnackbar, {})] }), jsxRuntimeExports.jsx(RlsConfirmation, {}), jsxRuntimeExports.jsx(RlsNotifications, {})] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4700,13 +4768,7 @@ function useDropdownController(effect = '0% 0%') {
     const close = useCallback(() => {
         setVisible(false);
     }, []);
-    return {
-        close,
-        component,
-        open,
-        openWithEvent,
-        visible
-    };
+    return useMemo(() => ({ close, component, open, openWithEvent, visible }), [close, open, openWithEvent, visible]);
 }
 
 function usePortalController() {
@@ -4717,7 +4779,23 @@ function usePortalController() {
     const close = useCallback(() => {
         setVisible(false);
     }, []);
-    return { close, open, visible };
+    return useMemo(() => ({ close, open, visible }), [close, open, visible]);
+}
+
+function useTabsController(options) {
+    const formControl = useFormControl(options.value);
+    const tabsRef = useRef(options.tabs);
+    tabsRef.current = options.tabs;
+    const onValueRef = useRef(options.onValue);
+    onValueRef.current = options.onValue;
+    const formControlRef = useRef(formControl);
+    formControlRef.current = formControl;
+    const Tabs = useMemo(() => {
+        return function Tabs(props) {
+            return (jsxRuntimeExports.jsx(RlsTabs, { ...props, tabs: tabsRef.current, formControl: formControlRef.current, onValue: onValueRef.current }));
+        };
+    }, []);
+    return useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
 const APP_THEME_ATTRIBUTE = 'app-theme';
@@ -4741,5 +4819,5 @@ function toggleAppTheme() {
     return theme;
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map