@rolster/react-components 19.6.4 → 19.6.7

package/dist/es/index.mjs

@@ -1,4 +1,4 @@
-import require$$0, { useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext } from 'react';
+import require$$0, { useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 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';
@@ -1571,9 +1571,9 @@ function RlsFieldArea(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+function RlsFieldFile({ accept, children, disabled: _disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = useRef(null);
-    const disabled = useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
+    const disabled = useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = useMemo(() => renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
@@ -1605,7 +1605,7 @@ function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, i
     const onClickControl = useCallback(() => {
         !readOnly && !disabled && inputRef.current?.click();
     }, [readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach-2', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 const reactI18n = i18n({
@@ -2593,7 +2593,7 @@ function useListController(props) {
     };
 }
 
-const DURATION_ANIMATION$1 = 240;
+const DURATION_ANIMATION$2 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
@@ -2650,7 +2650,7 @@ function useFieldAutocomplete(props) {
             clearTimeout(focusTimeoutId.current);
             focusTimeoutId.current = setTimeout(() => {
                 controller.refInput?.current?.focus();
-            }, DURATION_ANIMATION$1);
+            }, DURATION_ANIMATION$2);
         }
     }, [controller.setState, props.readOnly]);
     useEffect(() => {
@@ -4300,6 +4300,60 @@ function RlsModalSheet({ autoclose, children, className, controller, onAutoClose
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+const DURATION_ANIMATION$1 = 240;
+const DURATION_DEFAULT = 4000;
+let _id = 0;
+function generateId() {
+    return `rls-notification-${++_id}`;
+}
+function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-notification', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
+}
+function useNotifications() {
+    const [notifications, setNotifications] = useState([]);
+    const timersRef = useRef(new Map());
+    useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const remove = useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((notifications) => notifications.map((notification) => notification.id === id
+            ? { ...notification, visible: false }
+            : notification));
+        setTimeout(() => {
+            setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
+        }, DURATION_ANIMATION$1);
+    }, []);
+    const notify = useCallback((config) => {
+        const id = generateId();
+        const duration = config.duration ?? DURATION_DEFAULT;
+        setNotifications((notifications) => [
+            ...notifications,
+            { id, config, visible: true }
+        ]);
+        const timer = setTimeout(() => {
+            remove(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, [remove]);
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    return {
+        RlsNotifications,
+        notify
+    };
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -4363,17 +4417,17 @@ function useSnackbar() {
     };
 }
 
-const RlsContext = createContext({
-    confirmation: () => {
-        return Promise.resolve(ConfirmationResult.approved());
-    },
-    snackbar: () => { },
-    setIsMobile: () => { },
-    setNavbarInApp: () => { },
-    setNavbarIsCondense: () => { }
-});
+const RlsContext = createContext(null);
+function useRlsContext() {
+    const state = useContext(RlsContext);
+    if (!state) {
+        throw new Error('RlsApplication not wrapped in Project');
+    }
+    return state;
+}
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
     const [navbarInApp, setNavbarInApp] = useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = useState(false);
@@ -4387,11 +4441,12 @@ function RlsApplication({ children }) {
     }, [appIsMobile, navbarInApp, navbarIsCondense]);
     return (jsxRuntimeExports.jsxs(RlsContext, { value: {
             confirmation,
+            notify,
             snackbar,
             setIsMobile,
             setNavbarInApp,
             setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
+        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4517,5 +4572,5 @@ function usePortalController() {
     return { close, open, visible };
 }
 
-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, 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, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, 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, 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, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
 //# sourceMappingURL=index.mjs.map