@rolster/react-components 18.23.11 → 18.23.13

package/dist/cjs/assets/{index-9GIW7Ggg.css → index-CFQxnpT0.css}

@@ -2033,15 +2033,18 @@
   padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
-.rls-confirmation__message {
-  color: var(--rls-app-color-600);
-  text-align: center;
+.rls-confirmation__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
 }
-.rls-confirmation__message p {
+.rls-confirmation__content > p {
   font-weight: var(--rls-font-weight-medium);
   font-size: var(--pvt-content-font-size);
   line-height: var(--pvt-content-line-height);
   letter-spacing: var(--pvt-content-letter-spacing);
+  text-align: center;
+  color: var(--rls-app-color-600);
 }
 .rls-confirmation__footer {
   position: relative;
@@ -2189,7 +2192,6 @@
 }
 .rls-modal__component {
   position: absolute;
-  width: auto;
   max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
@@ -2352,6 +2354,9 @@
 }
 .rls-field-date__action .rls-icon {
   margin: 1rem;
+}
+.rls-field-date-modal {
+  --rlc-modal-max-width: 150rem;
 } /*# sourceMappingURL=FieldDate.css.map */
 
 .rls-picker-date-range {
@@ -2485,6 +2490,9 @@
 }
 .rls-field-date-range__action .rls-icon {
   margin: 1rem;
+}
+.rls-field-date-modal {
+  --rlc-modal-max-width: 150rem;
 } /*# sourceMappingURL=FieldDateRange.css.map */
 
 .rls-field-select {

package/dist/cjs/index.js

@@ -2423,11 +2423,11 @@ class ConfirmationResult extends commons.PartialSealed {
         return new ConfirmationResult('reject');
     }
 }
-function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-confirmation', { visible });
-    }, [visible]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+function RlsConfirmation({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+    const classConfirmation = require$$0.useMemo(() => {
+        return renderClassStatus('rls-confirmation', { visible }, className);
+    }, [visible, className]);
+    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmation() {
     const [config, setConfig] = require$$0.useState({});
@@ -2435,29 +2435,30 @@ function useConfirmation() {
     const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
     const confirmation = require$$0.useCallback((options) => {
         return new Promise((resolve) => {
-            const { approved, reject } = options;
             setConfig({
                 ...options,
                 approved: {
-                    label: approved?.label ?? reactI18n('confirmationActionApproved'),
+                    label: options.approved?.label ?? reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
                     },
-                    identifier: approved?.identifier,
-                    rlsTheme: approved?.rlsTheme,
-                    type: approved?.type ?? 'raised'
+                    type: options.approved?.type ?? 'raised',
+                    disabled: options.approved?.disabled,
+                    identifier: options.approved?.identifier,
+                    rlsTheme: options.approved?.rlsTheme
                 },
-                reject: reject
+                reject: options.reject
                     ? {
-                        label: reject.label,
+                        label: options.reject.label,
                         onClick: () => {
                             setVisible(false);
                             resolve(ConfirmationResult.reject());
                         },
-                        identifier: reject.identifier,
-                        rlsTheme: reject.rlsTheme,
-                        type: reject?.type ?? 'classic'
+                        type: options.reject.type ?? 'outline',
+                        disabled: options.reject.disabled,
+                        identifier: options.reject.identifier,
+                        rlsTheme: options.reject.rlsTheme
                     }
                     : undefined
             });
@@ -2955,7 +2956,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "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__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: icon }) })] }) }), !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: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "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__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: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: 'rls-field-date-modal', visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';