@rolster/react-components 18.21.31 → 18.21.33

package/dist/cjs/assets/{index-DsP20SgC.css → index-D3ZlI-1N.css}

@@ -120,18 +120,16 @@
   vertical-align: top;
   -webkit-font-smoothing: antialiased;
 }
-.rls-breadcrumb__label--active {
-  --pvt-link-font-color: var(--rls-theme-color-500);
-}
 .rls-breadcrumb__label__a {
   display: inline-block;
-  color: var(--pvt-link-font-color);
+}
+.rls-breadcrumb__label__a[rls-theme] {
+  color: var(--rls-theme-color-500);
 }
 .rls-breadcrumb__label__a--actionable {
   cursor: pointer;
 }
 .rls-breadcrumb__label__a--actionable:hover {
-  color: var(--rls-theme-color-500);
   text-decoration: underline;
 } /*# sourceMappingURL=Breadcrumb.css.map */
 
@@ -251,6 +249,7 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
   line-height: var(--rls-sizing-x20);
   height: var(--rls-sizing-x20);
   padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
@@ -1771,12 +1770,14 @@
 } /*# sourceMappingURL=Toolbar.css.map */
 
 .rls-card {
+  --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-100);
   --pvt-border: var(--rls-app-border-2-300);
   background: var(--pvt-background);
   border-radius: var(--rls-sizing-x4);
 }
 .rls-card[rls-theme] {
+  --rlc-divider-background: var(--rls-theme-color-300);
   --pvt-background: var(--rls-theme-color-100);
 }
 .rls-card--outline {
@@ -1786,6 +1787,7 @@
 .rls-card__content {
   display: flex;
   flex-direction: column;
+  row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
   padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
   box-sizing: border-box;
 } /*# sourceMappingURL=Card.css.map */

package/dist/cjs/index.js

@@ -1502,10 +1502,13 @@ function RlsBreadcrumbLabel({ label }) {
             actionable: !!label.onClick
         });
     }, [label.onClick]);
-    return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, children: label.label }) }));
+    return (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: label.onClick, children: jsxRuntimeExports.jsx("a", { className: className, "rls-theme": label.rlsTheme, children: label.label }) }));
 }
 function RlsBreadcrumb({ labels }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index))) }));
+    const children = require$$0.useMemo(() => {
+        return labels.map((label, index) => (jsxRuntimeExports.jsx(RlsBreadcrumbLabel, { label: label }, index)));
+    }, [labels]);
+    return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
 }
 
 function RlsIcon({ value, skeleton }) {
@@ -1606,7 +1609,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     }, [formControl, onValue]);
     const _onKeyDown = require$$0.useCallback((event) => {
         onKeyDown && onKeyDown(event);
-        event.code === 'NumpadEnter' && onEnter && onEnter();
+        event.key === 'Enter' && onEnter && onEnter();
     }, [onKeyDown, onEnter]);
     const _onKeyUp = require$$0.useCallback((event) => {
         onKeyUp && onKeyUp(event);
@@ -2421,8 +2424,11 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
+function calculateMinHeightList(count, height) {
+    return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
+}
 function useListController(props) {
-    const { limit, suggestions, automatic, formControl, reference } = props;
+    const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
     const listIsOpen = require$$0.useRef(false);
     const contentRef = require$$0.useRef(null);
     const listRef = require$$0.useRef(null);
@@ -2485,7 +2491,7 @@ function useListController(props) {
         changeValueInternal.current = false;
     }, [collection, formControl?.value]);
     const setState = require$$0.useCallback((state) => {
-        const minHeightList = limit > 0 ? (limit < 6 ? limit * 48 : 300) : 160;
+        const minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
         const _state = state.modalIsVisible
             ? {
                 ...state,
@@ -2493,7 +2499,7 @@ function useListController(props) {
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
-    }, [limit]);
+    }, [count]);
     const setFormValue = require$$0.useCallback((element, initialValue = false) => {
         refreshState((state) => ({
             ...state,
@@ -2538,10 +2544,10 @@ function useListController(props) {
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
-    const limit = require$$0.useRef(props.suggestions.length);
+    const count = require$$0.useRef(props.suggestions.length);
     const controller = useListController({
         ...props,
-        limit: limit.current
+        count: count.current
     });
     const [coincidences, setCoincidences] = require$$0.useState([]);
     const [pattern, setPattern] = require$$0.useState('');
@@ -2560,7 +2566,7 @@ function useFieldAutocomplete(props) {
         _store.current = store;
         const coincidences = collection.slice(0, MAX_ELEMENTS);
         setCoincidences(coincidences);
-        limit.current = coincidences.length;
+        count.current = coincidences.length;
     }, []);
     require$$0.useEffect(() => {
         refreshCoincidences(props.suggestions, pattern, true);
@@ -2687,16 +2693,17 @@ function RlsFieldAutocompleteTemplate(props) {
             visible: autocomplete.modalIsVisible
         });
     }, [autocomplete.higher, autocomplete.modalIsVisible]);
-    const onInputSearch = require$$0.useCallback((event) => {
+    const onChangePattern = require$$0.useCallback((event) => {
         autocomplete.setPattern(event.target.value);
     }, [autocomplete.setPattern]);
-    const onClickSearch = require$$0.useCallback(() => {
+    const onClickPattern = require$$0.useCallback(() => {
         onSearch && onSearch(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput, disabled: _disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
+    const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
 function RlsModal({ children, overflow, visible, rlsTheme }) {
@@ -2948,13 +2955,13 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
 }
 
 function useFieldSelect(props) {
-    const limit = require$$0.useRef(props.suggestions.length);
+    const count = require$$0.useRef(props.suggestions.length);
     const controller = useListController({
         ...props,
-        limit: limit.current
+        count: count.current
     });
     require$$0.useEffect(() => {
-        limit.current = props.suggestions.length;
+        count.current = props.suggestions.length;
     }, [props.suggestions]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
@@ -3060,26 +3067,27 @@ function RlsFieldSelectTemplate(props) {
             });
         });
     }, []);
-    const _disabled = require$$0.useMemo(() => {
+    const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled: disabled,
             error: formControl?.wrong,
-            focused: select.focused && !_disabled
+            focused: select.focused && !disabled
         }, 'rls-field-list rls-field-select');
-    }, [formControl?.wrong, select.focused, _disabled]);
+    }, [formControl?.wrong, select.focused, disabled]);
     const classNameList = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: select.higher,
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
+    const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
 function RlsFormNavigation({ children, visible, rlsTheme }) {
@@ -3251,6 +3259,8 @@ exports.renderClassStatus = renderClassStatus;
 exports.setErrorsI18n = setErrorsI18n;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
+exports.useFieldAutocomplete = useFieldAutocomplete;
+exports.useFieldSelect = useFieldSelect;
 exports.useListController = useListController;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.js.map