@rolster/react-components 18.18.1 → 18.18.2

package/dist/es/assets/{index-Bco_fVV_.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 {
@@ -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/es/index.js

@@ -1,4 +1,4 @@
-import require$$0, { useState, useRef, useEffect, createContext } from 'react';
+import require$$0, { useState, useRef, useEffect, useCallback, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
 import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, verifyDateRange, dateOutRange, PickerListenerEvent } from '@rolster/components';
@@ -2044,11 +2044,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 }));
@@ -2127,7 +2127,7 @@ function useListController(props) {
         refresh(collection.current, formControl?.value, automatic);
     }, [suggestions]);
     useEffect(() => {
-        refresh(collection.current, formControl?.value, automatic);
+        refresh(collection.current, formControl?.value);
     }, [formControl?.value]);
     function refresh(collection, state, automatic) {
         if (!state) {
@@ -2148,7 +2148,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) {
@@ -2164,9 +2164,9 @@ function useListController(props) {
     function refreshState(state) {
         setState((currentState) => ({ ...currentState, ...state }));
     }
-    function setFormValue(value) {
+    const setFormValue = useCallback((value) => {
         formControl?.setValue(value);
-    }
+    }, [formControl]);
     function navigationInput(event) {
         if (state.modalIsVisible) {
             const newPosition = navigationListFromInput({
@@ -2540,9 +2540,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 });
@@ -2588,7 +2596,7 @@ function useFieldSelect(props) {
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
     const { controller } = select;
-    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
+    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,
@@ -2597,7 +2605,9 @@ function RlsFieldSelectTemplate(props) {
     }, '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', {
                                 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