@rolster/react-components 18.23.14 → 18.23.15

package/dist/es/assets/{index-3xxUcY8X.css → index-C0VgKdqS.css}

@@ -225,6 +225,7 @@
   --pvt-gradient-border: none;
   position: relative;
   padding: 0rem;
+  width: var(--rlc-button-width, auto);
   overflow: hidden;
   outline: none;
   background: rgba(0, 0, 0, 0);
@@ -2489,7 +2490,7 @@
 .rls-field-date-range__action .rls-icon {
   margin: 1rem;
 }
-.rls-field-date-modal {
+.rls-field-date-range-modal {
   --rlc-modal-max-width: 150rem;
 } /*# sourceMappingURL=FieldDateRange.css.map */
 
@@ -2728,10 +2729,22 @@
   flex-direction: column;
   row-gap: var(--rls-sizing-x2);
 }
+.rls-snackbar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--rls-sizing-x4);
+}
+.rls-snackbar__header > button {
+  background: rgba(0, 0, 0, 0);
+  padding: 0rem;
+  cursor: pointer;
+  color: var(--rls-theme-color-700);
+}
 .rls-snackbar__title {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--rls-theme-color-500);
   font-size: var(--rls-body-font-size);
   font-weight: var(--rls-font-weight-bold);

package/dist/es/index.js

@@ -3073,7 +3073,7 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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: valueInput, 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: icon }) })] }) }), !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: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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: valueInput, 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: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
@@ -3663,11 +3663,11 @@ function calculateDuration({ length }) {
     }
     return duration + DURATION_RESET;
 }
-function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
+function RlsSnackbar({ content, onClose, icon, rlsTheme, title, visible }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-snackbar', { visible });
     }, [visible]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 function useSnackbar() {
     const [state, setState] = useState({
@@ -3676,14 +3676,17 @@ function useSnackbar() {
         timeoutId: undefined,
         visible: false
     });
-    const rlsSnackbar = jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible });
+    const onClose = useCallback(() => {
+        setState((state) => ({ ...state, timeoutId: undefined, visible: false }));
+    }, []);
+    const rlsSnackbar = (jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible, onClose: onClose }));
     useEffect(() => {
         if (state.visible) {
             const timeoutId = setTimeout(() => {
                 setState((state) => ({
                     ...state,
-                    visible: false,
-                    timeoutId: undefined
+                    timeoutId: undefined,
+                    visible: false
                 }));
             }, state.duration);
             setState((state) => ({ ...state, timeoutId }));