@rolster/react-components 18.18.0 → 18.18.2

package/dist/cjs/assets/{index-DIGj2mhy.css → index-DLCk3aif.css}

@@ -51,10 +51,8 @@
   border-radius: 50%;
 }
 .rls-avatar span {
+  align-self: center;
   font-size: inherit;
-  margin: auto;
-  height: inherit;
-  line-height: inherit;
 }
 
 .rls-badge {
@@ -129,7 +127,7 @@
   cursor: pointer;
   color: var(--pvt-link-font-color);
 }
-.rls-breadcrumb__label__a.actionable:hover {
+.rls-breadcrumb__label__a--actionable:hover {
   color: var(--rls-theme-color-500);
   text-decoration: underline;
 }
@@ -918,6 +916,9 @@
   flex-direction: column;
   row-gap: var(--rlc-ballot-component-row-gap);
 }
+.rls-ballot .rls-avatar + .rls-ballot__component {
+  width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
+}
 .rls-ballot__title {
   --rlc-skeleton-text-height: var(--rlc-ballot-title-height);
   --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-title-letter-spacing);

package/dist/cjs/index.js

@@ -1594,18 +1594,20 @@ function RlsMessageFormError({ className, formControl }) {
 }
 
 function RlsFieldMoney({ children, decimals, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
+    const _disabled = formControl?.disabled || disabled;
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
-            focused: formControl?.focused,
+            focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
+            disabled: _disabled
         }, 'rls-field-money'), "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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldNumber({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
+    const _disabled = formControl?.disabled || disabled;
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
-            focused: formControl?.focused,
+            focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
+            disabled: _disabled
         }, 'rls-field-number'), "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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
@@ -1614,18 +1616,20 @@ function RlsFieldPassword({ children, disabled, formControl, identifier, msgErro
     function onToggleInput() {
         setPassword(!password);
     }
+    const _disabled = formControl?.disabled || disabled;
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus(' rls-field-box', {
-            focused: formControl?.focused,
+            focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
+            disabled: _disabled
         }, 'rls-field-password'), "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(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldText({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
+    const _disabled = formControl?.disabled || disabled;
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
-            focused: formControl?.focused,
+            focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
-            disabled: formControl?.disabled || disabled
+            disabled: _disabled
         }, 'rls-field-text'), "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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
@@ -2042,11 +2046,11 @@ function RlsDatatableHeader({ children, identifier }) {
 function RlsDatatableTitle({ children, className, control, identifier }) {
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
-function RlsDatatableRecord({ children, className, error, identifier, warning }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: renderClassStatus('rls-datatable__record', { error, warning }, className).trim(), children: children }));
+function RlsDatatableRecord({ children, className, error, identifier, info, successs, warning }) {
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: renderClassStatus('rls-datatable__record', { error, info, successs, warning }, className).trim(), children: children }));
 }
-function RlsDatatableTotals({ children, className, error, identifier, warning }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-datatable__totals', { error, warning }, className).trim(), children: children }));
+function RlsDatatableTotals({ children, className, error, identifier, info, successs, warning }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, identifier, overflow }) {
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
@@ -2146,7 +2150,7 @@ function useListController(props) {
     }
     function refreshWithProtected(collection, automatic) {
         if (automatic && collection.value[0]) {
-            setFormValue(collection.value[0].value);
+            formControl?.setInitialValue(collection.value[0].value);
             return true;
         }
         if (_protected.current) {
@@ -2162,9 +2166,9 @@ function useListController(props) {
     function refreshState(state) {
         setState((currentState) => ({ ...currentState, ...state }));
     }
-    function setFormValue(value) {
+    const setFormValue = require$$0.useCallback((value) => {
         formControl?.setValue(value);
-    }
+    }, [formControl]);
     function navigationInput(event) {
         if (state.modalIsVisible) {
             const newPosition = components.navigationListFromInput({
@@ -2303,20 +2307,20 @@ function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { controller } = autocomplete;
     const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
-    const disabled = formControl?.disabled || props.disabled;
+    const _disabled = formControl?.disabled || props.disabled;
     const className = renderClassStatus('rls-field-box', {
-        focused: controller.focused,
-        disabled,
+        focused: controller.focused && !_disabled,
         error: formControl?.wrong,
+        disabled: _disabled,
         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 }), 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', {
+    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: (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: () => {
+                                            }, 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 })] })] }));
 }
@@ -2422,7 +2426,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
     const valueInput = value
         ? dates.dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    const _disabled = formControl?.disabled || disabled;
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled: _disabled }), 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2502,7 +2507,8 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         setValue(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    const _disabled = formControl?.disabled || disabled;
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled: _disabled }), 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-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2536,9 +2542,17 @@ function useFieldSelect(props) {
         }
     }
     function onClickAction() {
-        const modalIsVisible = !controller.modalIsVisible;
-        controller.setState({ modalIsVisible });
-        modalIsVisible && controller.inputRef?.current?.focus();
+        const removable = !props.unremovable && !!controller.value;
+        if (removable) {
+            controller.setState({ modalIsVisible: false, value: '' });
+            controller.setFormValue(props.value);
+            props.onValue && props.onValue(props.value);
+        }
+        else {
+            const modalIsVisible = !controller.modalIsVisible;
+            controller.setState({ modalIsVisible });
+            modalIsVisible && controller.inputRef?.current?.focus();
+        }
     }
     function onClickBackdrop() {
         controller.setState({ modalIsVisible: false });
@@ -2584,16 +2598,18 @@ function useFieldSelect(props) {
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
     const { controller } = select;
-    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
-    const disabled = formControl?.disabled || props.disabled;
+    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const _disabled = formControl?.disabled || props.disabled;
     const className = renderClassStatus('rls-field-box', {
-        focused: controller.focused,
-        disabled,
-        error: formControl?.wrong
+        focused: controller.focused && !_disabled,
+        error: formControl?.wrong,
+        disabled: _disabled
     }, 'rls-field-list rls-field-select');
-    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", { ref: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
+    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", { ref: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: controller.modalIsVisible
-                            }), disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                            }), disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!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