@rolster/react-components 18.20.5 → 18.20.7

package/dist/cjs/assets/{index-DYtIRACv.css → index-Cp7p-Y-D.css}

@@ -124,9 +124,11 @@
 }
 .rls-breadcrumb__label__a {
   display: inline-block;
-  cursor: pointer;
   color: var(--pvt-link-font-color);
 }
+.rls-breadcrumb__label__a--actionable {
+  cursor: pointer;
+}
 .rls-breadcrumb__label__a--actionable:hover {
   color: var(--rls-theme-color-500);
   text-decoration: underline;
@@ -906,6 +908,36 @@
   border-radius: var(--rlc-switch-bar-radius);
 }
 
+.rls-alert {
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: var(--rls-sizing-x6);
+  border-radius: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  background: var(--rls-theme-color-100);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+}
+.rls-alert--bordered {
+  border: var(--rls-theme-border-1-500);
+}
+.rls-alert__icon {
+  --rlc-icon-color: var(--rls-theme-color-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  border-radius: 50%;
+  background: var(--rls-theme-color-500);
+}
+.rls-alert__icon + .rls-alert__content {
+  max-width: calc(100% - 22rem);
+}
+.rls-alert__content {
+  width: auto;
+}
+
 .rls-ballot {
   --rlc-avatar-width: var(--rls-sizing-x20);
   --rlc-avatar-height: var(--rls-sizing-x20);

package/dist/cjs/index.js

@@ -1678,6 +1678,10 @@ function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
         }, rlsTheme: rlsTheme }));
 }
 
+function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-alert', { bordered }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
+}
+
 function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
 }
@@ -2126,11 +2130,11 @@ class ConfirmationResult extends commons.PartialSealed {
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
     return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('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() {
+function useConfirmation() {
     const [config, setConfig] = require$$0.useState({});
     const [visible, setVisible] = require$$0.useState(false);
     const rlsConfirmation = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
-    function confirmation(options) {
+    const confirmation = require$$0.useCallback((options) => {
         return new Promise((resolve) => {
             const { content, rlsTheme, subtitle, title, approved, reject } = options;
             setConfig({
@@ -2159,7 +2163,7 @@ function useConfirmationService() {
             });
             setVisible(true);
         });
-    }
+    }, []);
     return {
         RlsConfirmation: rlsConfirmation,
         confirmation
@@ -2628,7 +2632,7 @@ function calculateDuration({ length }) {
 function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-snackbar', { visible }), "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 })] })] }));
 }
-function useSnackbarService() {
+function useSnackbar() {
     const [config, setConfig] = require$$0.useState({});
     const [duration, setDuration] = require$$0.useState(4000);
     const [timeoutId, setTimeoutId] = require$$0.useState();
@@ -2647,12 +2651,12 @@ function useSnackbarService() {
             setTimeout(() => snackbar(config), DURATION_ANIMATION);
         }
     }, [visible]);
-    function snackbar(config) {
+    const snackbar = require$$0.useCallback((config) => {
         const { content } = config;
         setConfig(config);
         setDuration(calculateDuration(String(content)));
-        setVisible(!visible);
-    }
+        setVisible((visible) => !visible);
+    }, []);
     return {
         RlsSnackbar: rlsSnackbar,
         snackbar
@@ -2667,8 +2671,8 @@ const RlsContext = require$$0.createContext({
     withNavbar: () => { }
 });
 function RlsApplication({ children }) {
-    const { RlsConfirmation, confirmation } = useConfirmationService();
-    const { RlsSnackbar, snackbar } = useSnackbarService();
+    const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsSnackbar, snackbar } = useSnackbar();
     const [currentWithNavbar, withNavbar] = require$$0.useState(false);
     return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: { confirmation, snackbar, withNavbar }, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-app__body', {
                     snackbar: currentWithNavbar
@@ -2676,6 +2680,7 @@ function RlsApplication({ children }) {
 }
 
 exports.ConfirmationResult = ConfirmationResult;
+exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;
 exports.RlsAvatar = RlsAvatar;
@@ -2745,9 +2750,9 @@ exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
-exports.useConfirmationService = useConfirmationService;
+exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useListController = useListController;
 exports.useRenderClassStatus = useRenderClassStatus;
-exports.useSnackbarService = useSnackbarService;
+exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.js.map