@rolster/react-components 18.21.19 → 18.21.21

package/dist/es/assets/{index-KtbnpnSR.css → index-CiASINsv.css}

@@ -162,6 +162,9 @@
   --pvt-button-content-animation: none;
   --pvt-button-content-visibility: hidden;
   --pvt-button-ripple-background: var(--rls-theme-color-700);
+  --pvt-classic-background: var(--rls-app-color-200);
+  --pvt-classic-font-color: var(--rls-app-color-500);
+  --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-500);
   --pvt-raised-font-color: var(--rls-theme-font-500);
   --pvt-raised-border: none;
@@ -194,11 +197,14 @@
   --pvt-button-content-visibility: visible;
 }
 .rls-button:not(:disabled):hover {
+  --pvt-classic-background: var(--rls-theme-color-200);
+  --pvt-classic-font-color: var(--rls-theme-color-600);
+  --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-700);
   --pvt-raised-font-color: var(--rls-theme-font-900);
   --pvt-raised-border: none;
   --pvt-flat-background: var(--rls-theme-color-600);
-  --pvt-flat-font-color: var(--rls-theme-font-500);
+  --pvt-flat-font-color: var(--rls-theme-color-050);
   --pvt-flat-border: none;
   --pvt-stroked-background: var(--rls-theme-color-100);
   --pvt-stroked-font-color: var(--rls-theme-color-700);
@@ -214,6 +220,9 @@
   --pvt-gradient-border: none;
 }
 .rls-button:disabled {
+  --pvt-classic-background: var(--rls-app-color-100);
+  --pvt-classic-font-color: var(--rls-app-color-400);
+  --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-200);
   --pvt-raised-font-color: var(--rls-theme-color-400);
   --pvt-raised-border: none;
@@ -266,6 +275,12 @@
   animation: var(--pvt-button-content-animation);
   visibility: var(--pvt-button-content-visibility);
 }
+.rls-button__content--classic {
+  --pvt-button-content-background: var(--pvt-classic-background);
+  --pvt-button-content-font-color: var(--pvt-classic-font-color);
+  --pvt-button-content-border: var(--pvt-classic-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-900);
+}
 .rls-button__content--raised {
   --pvt-button-content-background: var(--pvt-raised-background);
   --pvt-button-content-font-color: var(--pvt-raised-font-color);
@@ -2283,9 +2298,7 @@
   padding: var(--rls-sizing-x6);
   box-sizing: border-box;
   border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-color-050);
-  box-shadow: var(--rls-light-shadow-bottom-4);
-  border: var(--rls-theme-border-1-300);
+  background: var(--rls-theme-color-100);
   transform: translate(-50%, 100%);
   transition: transform 160ms 0ms var(--rls-standard-curve);
 }
@@ -2293,7 +2306,7 @@
   transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
 }
 .rls-snackbar__avatar {
-  --rlc-icon-color: var(--rls-app-color-050);
+  --rlc-icon-color: var(--rls-theme-color-050);
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/es/index.js

@@ -2278,27 +2278,26 @@ function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title,
     const className = useMemo(() => {
         return renderClassStatus('rls-confirmation', { visible });
     }, [visible]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "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__message", 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: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "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__message", 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, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmation() {
     const [config, setConfig] = useState({});
     const [visible, setVisible] = useState(false);
-    const rlsConfirmation = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
     const confirmation = useCallback((options) => {
         return new Promise((resolve) => {
-            const { content, rlsTheme, subtitle, title, approved, reject } = options;
+            const { approved, reject } = options;
             setConfig({
-                content,
-                rlsTheme,
-                subtitle,
-                title,
+                ...options,
                 approved: {
                     label: approved?.label ?? reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
                     },
-                    identifier: approved?.identifier
+                    identifier: approved?.identifier,
+                    rlsTheme: approved?.rlsTheme,
+                    type: approved?.type ?? 'raised'
                 },
                 reject: reject
                     ? {
@@ -2307,7 +2306,9 @@ function useConfirmation() {
                             setVisible(false);
                             resolve(ConfirmationResult.reject());
                         },
-                        identifier: reject.identifier
+                        identifier: reject.identifier,
+                        rlsTheme: reject.rlsTheme,
+                        type: reject?.type ?? 'classic'
                     }
                     : undefined
             });
@@ -2315,7 +2316,7 @@ function useConfirmation() {
         });
     }, []);
     return {
-        RlsConfirmation: rlsConfirmation,
+        RlsConfirmation: component,
         confirmation
     };
 }
@@ -2398,7 +2399,7 @@ function useDatatable() {
 }
 
 function useListController(props) {
-    const { suggestions, automatic, formControl, reference } = props;
+    const { limit, suggestions, automatic, formControl, reference } = props;
     const listIsOpen = useRef(false);
     const contentRef = useRef(null);
     const listRef = useRef(null);
@@ -2461,15 +2462,15 @@ function useListController(props) {
         changeValueInternal.current = false;
     }, [collection, formControl?.value]);
     const setState = useCallback((state) => {
-        const length = suggestions.length > 6 ? 6 : suggestions.length;
+        const minHeightList = limit > 0 ? (limit < 6 ? limit * 48 : 300) : 160;
         const _state = state.modalIsVisible
             ? {
                 ...state,
-                higher: locationListCanTop(contentRef.current, listRef.current, length * 48)
+                higher: locationListCanTop(contentRef.current, listRef.current, minHeightList)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
-    }, []);
+    }, [limit]);
     const setFormValue = useCallback((element, initialValue = false) => {
         refreshState((state) => ({
             ...state,
@@ -2514,10 +2515,14 @@ function useListController(props) {
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
-    const controller = useListController(props);
+    const limit = useRef(props.suggestions.length);
+    const controller = useListController({
+        ...props,
+        limit: limit.current
+    });
     const [coincidences, setCoincidences] = useState([]);
     const [pattern, setPattern] = useState('');
-    const currentStore = useRef({
+    const _store = useRef({
         coincidences: [],
         pattern: '',
         previous: null
@@ -2527,10 +2532,12 @@ function useFieldAutocomplete(props) {
             pattern,
             suggestions,
             reboot,
-            store: currentStore.current
+            store: _store.current
         });
-        currentStore.current = store;
-        setCoincidences(collection.slice(0, MAX_ELEMENTS));
+        _store.current = store;
+        const coincidences = collection.slice(0, MAX_ELEMENTS);
+        setCoincidences(coincidences);
+        limit.current = coincidences.length;
     }, []);
     useEffect(() => {
         refreshCoincidences(props.suggestions, pattern, true);
@@ -2918,7 +2925,14 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
 }
 
 function useFieldSelect(props) {
-    const controller = useListController(props);
+    const limit = useRef(props.suggestions.length);
+    const controller = useListController({
+        ...props,
+        limit: limit.current
+    });
+    useEffect(() => {
+        limit.current = props.suggestions.length;
+    }, [props.suggestions]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -3116,16 +3130,26 @@ const RlsContext = createContext({
         return Promise.resolve(ConfirmationResult.approved());
     },
     snackbar: () => { },
-    withNavbar: () => { }
+    setNavbarInApp: () => { },
+    setNavbarIsCondense: () => { }
 });
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
     const { RlsSnackbar, snackbar } = useSnackbar();
-    const [_withNavbar, withNavbar] = useState(false);
+    const [hasNavbar, setNavbarInApp] = useState(false);
+    const [isNavbarCondense, setNavbarIsCondense] = useState(false);
     const className = useMemo(() => {
-        return renderClassStatus('rls-app__body', { snackbar: _withNavbar });
-    }, [_withNavbar]);
-    return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: { confirmation, snackbar, withNavbar }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
+        return renderClassStatus('rls-app__body', {
+            snackbar: hasNavbar,
+            'navbar-condense': isNavbarCondense
+        });
+    }, [hasNavbar]);
+    return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: {
+            confirmation,
+            snackbar,
+            setNavbarInApp,
+            setNavbarIsCondense
+        }, 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, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, 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 };