@rolster/react-components 18.17.2 → 18.18.0

package/dist/es/assets/{index-CQEyyT3g.css → index-DIGj2mhy.css}

@@ -129,7 +129,7 @@
   cursor: pointer;
   color: var(--pvt-link-font-color);
 }
-.rls-breadcrumb__label__a:hover {
+.rls-breadcrumb__label__a.actionable:hover {
   color: var(--rls-theme-color-500);
   text-decoration: underline;
 }

package/dist/es/index.js

@@ -1393,8 +1393,18 @@ function RlsBadge({ children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
 }
 
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
+
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
 function RlsBreadcrumb({ labels }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntimeExports.jsx("a", { className: "rls-breadcrumb__label__a", children: label }) }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntimeExports.jsx("a", { className: renderClassStatus('rls-breadcrumb__label__a', {
+                    actionable: !!onClick
+                }), children: label }) }, index))) }));
 }
 
 function RlsIcon({ value, skeleton }) {
@@ -1480,7 +1490,11 @@ function RlsInputPassword({ disabled, formControl, identifier, onValue, placehol
 }
 
 function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+    const [value, setValue] = useState('');
+    function onValueInput(value) {
+        !formControl && setValue(value);
+    }
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
 }
 
 function RlsInputText({ disabled, formControl, identifier, onValue, placeholder, value }) {
@@ -1500,14 +1514,6 @@ function RlsMessageIcon({ icon, children, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
 }
 
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
-
-function rangeFormatTemplate({ maxDate, minDate }) {
-    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-
 function RlsPoster({ children, contrast, outline, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-poster', { contrast, outline }), "rls-theme": rlsTheme, children: children }));
 }
@@ -1992,28 +1998,30 @@ function useConfirmationService() {
     const [config, setConfig] = useState({});
     const [visible, setVisible] = useState(false);
     const rlsConfirmation = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
-    function confirmation(config) {
+    function confirmation(options) {
         return new Promise((resolve) => {
-            const { content, rlsTheme, subtitle, title, approved, reject } = config;
+            const { content, rlsTheme, subtitle, title, approved, reject } = options;
             setConfig({
                 content,
                 rlsTheme,
                 subtitle,
                 title,
                 approved: {
-                    label: approved || reactI18n('confirmationActionApproved'),
+                    label: approved?.label ?? reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
-                    }
+                    },
+                    identifier: approved?.identifier
                 },
                 reject: reject
                     ? {
-                        label: reject,
+                        label: reject.label,
                         onClick: () => {
                             setVisible(false);
                             resolve(ConfirmationResult.reject());
-                        }
+                        },
+                        identifier: reject.identifier
                     }
                     : undefined
             });
@@ -2074,7 +2082,7 @@ function useDatatable() {
 }
 
 function useListController(props) {
-    const { suggestions, formControl, value } = props;
+    const { suggestions, automatic, formControl, value } = props;
     const listIsOpen = useRef(false);
     const contentRef = useRef(null);
     const listRef = useRef(null);
@@ -2087,7 +2095,7 @@ function useListController(props) {
     });
     const collection = useRef(new ListCollection([]));
     const position = useRef(0);
-    const protectedValue = useRef();
+    const _protected = useRef();
     useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
@@ -2112,31 +2120,38 @@ function useListController(props) {
     }, [state.modalIsVisible]);
     useEffect(() => {
         collection.current = new ListCollection(suggestions);
+        refresh(collection.current, formControl?.value, automatic);
+    }, [suggestions]);
+    useEffect(() => {
         refresh(collection.current, formControl?.value);
-    }, [suggestions, formControl?.value]);
-    function refresh(collection, state) {
+    }, [formControl?.value]);
+    function refresh(collection, state, automatic) {
         if (!state) {
-            return refreshProtected(collection)
-                ? undefined
-                : refreshState({ value: '' });
+            !refreshWithProtected(collection, automatic) &&
+                refreshState({ value: '' });
+            return undefined;
         }
         const element = collection.find(state);
         if (element) {
-            protectedValue.current = undefined;
+            _protected.current = undefined;
             return refreshState({ value: element.description });
         }
-        if (!refreshProtected(collection)) {
-            protectedValue.current = state;
+        if (!refreshWithProtected(collection, automatic)) {
+            _protected.current = state;
             setFormValue(value);
             refreshState({ value: '' });
         }
     }
-    function refreshProtected(collection) {
-        if (protectedValue.current) {
-            const element = collection.find(protectedValue.current);
+    function refreshWithProtected(collection, automatic) {
+        if (automatic && collection.value[0]) {
+            setFormValue(collection.value[0].value);
+            return true;
+        }
+        if (_protected.current) {
+            const element = collection.find(_protected.current);
             if (element) {
-                formControl?.setValue(protectedValue.current);
-                protectedValue.current = undefined;
+                formControl?.setValue(_protected.current);
+                _protected.current = undefined;
                 return true;
             }
         }
@@ -2190,21 +2205,12 @@ function useFieldAutocomplete(props) {
         pattern: '',
         previous: null
     });
-    const disabled = props.formControl?.disabled || props.disabled;
     useEffect(() => {
         refreshCoincidences(pattern, true);
     }, [props.suggestions]);
     useEffect(() => {
         refreshCoincidences(pattern);
     }, [pattern]);
-    function onClickControl() {
-        if (!disabled) {
-            controller.setState({ modalIsVisible: true });
-            setTimeout(() => {
-                controller.inputRef?.current?.focus();
-            }, DURATION_ANIMATION$1);
-        }
-    }
     function onFocusInput() {
         controller.setState({ focused: true });
     }
@@ -2222,10 +2228,21 @@ function useFieldAutocomplete(props) {
                 break;
         }
     }
+    function onClickControl() {
+        controller.setState({ modalIsVisible: true });
+        setTimeout(() => {
+            controller.inputRef?.current?.focus();
+        }, DURATION_ANIMATION$1);
+    }
     function onClickAction() {
-        controller.setState({ modalIsVisible: false, value: '' });
-        controller.setFormValue(props.value);
-        props.onValue && props.onValue(props.value);
+        if (controller.value) {
+            controller.setState({ modalIsVisible: false, value: '' });
+            controller.setFormValue(props.value);
+            props.onValue && props.onValue(props.value);
+        }
+        else {
+            onClickControl();
+        }
     }
     function onClickBackdrop() {
         controller.setState({ modalIsVisible: false });
@@ -2243,15 +2260,16 @@ function useFieldAutocomplete(props) {
         };
     }
     function onChange({ description, value }) {
-        if (props.onSelect) {
+        const { onSelect, onValue } = props;
+        if (onSelect) {
             controller.setState({ modalIsVisible: false });
-            value && props.onSelect(value);
+            value && onSelect(value);
         }
         else {
             controller.setState({ modalIsVisible: false, value: description });
             controller.setFormValue(value);
         }
-        props.onValue && props.onValue(value);
+        onValue && onValue(value);
     }
     function refreshCoincidences(pattern, reboot = false) {
         const { collection, store } = createAutocompleteStore({
@@ -2282,7 +2300,7 @@ function useFieldAutocomplete(props) {
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { controller } = autocomplete;
-    const { render, children, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const disabled = formControl?.disabled || props.disabled;
     const className = renderClassStatus('rls-field-box', {
         focused: controller.focused,
@@ -2290,12 +2308,12 @@ function RlsFieldAutocompleteTemplate(props) {
         error: formControl?.wrong,
         selected: !!controller.value
     }, 'rls-field-list rls-field-autocomplete');
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: controller.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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: controller.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: controller.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: controller.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: controller.modalIsVisible,
                     higher: controller.higher,
                     hide: !controller.modalIsVisible
-                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: ({ target: { value } }) => {
-                                                autocomplete.setPattern(value);
+                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: (event) => {
+                                                autocomplete.setPattern(event.target.value);
                                             }, disabled: disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(autocomplete.pattern);
                                             }, 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: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
@@ -2536,16 +2554,17 @@ function useFieldSelect(props) {
         };
     }
     function onChange({ description, value }) {
+        const { onSelect, onValue } = props;
         controller.inputRef?.current?.focus();
-        if (props.onSelect) {
+        if (onSelect) {
             controller.setState({ modalIsVisible: false });
-            value && props.onSelect(value);
+            value && onSelect(value);
         }
         else {
             controller.setFormValue(value);
             controller.setState({ modalIsVisible: false, value: description });
         }
-        props.onValue && props.onValue(value);
+        onValue && onValue(value);
     }
     return {
         controller,