@rolster/react-components 18.17.0 → 18.17.3

package/dist/es/index.js

@@ -1438,25 +1438,25 @@ function RlsInput({ children, disabled, formControl, identifier, onValue, placeh
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-input', {
             focused: formControl?.focused ?? focused,
             disabled: formControl?.disabled || disabled
-        }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value ?? value ?? '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+        }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value || value || '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
 function RlsInputMoney({ decimals, disabled, formControl, identifier, onValue, placeholder, symbol, value }) {
     const [valueInput, setValueInput] = useState(value || 0);
-    function onChange(value) {
+    function onValueInput(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
 function RlsInputNumber({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = useState(value ?? 0);
-    function onChange(value) {
+    function onValueInput(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
 function RlsInputPassword({ disabled, formControl, identifier, onValue, placeholder, type }) {
@@ -1485,11 +1485,11 @@ function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
 
 function RlsInputText({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = useState(value ?? '');
-    function onChange(value) {
+    function onValueInput(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
 function RlsLabel({ children, rlsTheme }) {
@@ -1986,34 +1986,36 @@ class ConfirmationResult extends PartialSealed {
     }
 }
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "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, { type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "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: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 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
             });
@@ -2026,28 +2028,28 @@ function useConfirmationService() {
     };
 }
 
-function RlsDatatableHeader({ children }) {
-    return jsxRuntimeExports.jsx("tr", { className: "rls-datatable__header", children: children });
+function RlsDatatableHeader({ children, identifier }) {
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", children: children }));
 }
-function RlsDatatableTitle({ children, className, control }) {
-    return (jsxRuntimeExports.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+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, warning }) {
-    return (jsxRuntimeExports.jsx("tr", { className: renderClassStatus('rls-datatable__record', { error, warning }, 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 RlsDatatableTotals({ children, className, error, warning }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error, 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 RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntimeExports.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, 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 }));
 }
-function RlsDatatableData({ children, className, control, overflow }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
+function RlsDatatableData({ children, className, control, identifier, overflow }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
+function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
 function createObserver(options) {