@hortiview/shared-components 2.6.1 → 2.8.0

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { jsxs as ft, jsx as C, Fragment as pt } from "react/jsx-runtime";
-import { G as z } from "../../index.es-CbBdaRO2.js";
+import { G as j } from "../../index.es-CbBdaRO2.js";
 import { I as it } from "../../index.es-Kg9soDed.js";
 import { _ as ht, c as B, P as s } from "../../_setToString-Do1lSQTZ.js";
-import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as E, useCallback as j, useMemo as Y, Fragment as Et } from "react";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as E, useCallback as q, useMemo as J, Fragment as Et } from "react";
 import { i as Ct, c as b, a as St } from "../../index.es-DlzwTKbh.js";
 import { b as at, c as ot, d as vt } from "../../tslib.es6-BDCynO9F.js";
 import { M as yt, a as Ot } from "../../component-neHBNHRu.js";
@@ -74,7 +74,7 @@ function kt(i) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var q = "mdc-dom-focus-sentinel", Ht = (
+var $ = "mdc-dom-focus-sentinel", Ht = (
   /** @class */
   function() {
     function i(e, t) {
@@ -86,7 +86,7 @@ var q = "mdc-dom-focus-sentinel", Ht = (
         throw new Error("FocusTrap: Element must have at least one focusable child.");
       this.elFocusedBeforeTrapFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.wrapTabFocus(this.root), this.options.skipInitialFocus || this.focusInitialElement(e, this.options.initialFocusEl);
     }, i.prototype.releaseFocus = function() {
-      [].slice.call(this.root.querySelectorAll("." + q)).forEach(function(e) {
+      [].slice.call(this.root.querySelectorAll("." + $)).forEach(function(e) {
         e.parentElement.removeChild(e);
       }), !this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus && this.elFocusedBeforeTrapFocus.focus();
     }, i.prototype.wrapTabFocus = function(e) {
@@ -104,16 +104,16 @@ var q = "mdc-dom-focus-sentinel", Ht = (
     }, i.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(q) && !o, f = !1;
+        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains($) && !o, f = !1;
         if (a) {
-          var h = getComputedStyle(n);
-          f = h.display === "none" || h.visibility === "hidden";
+          var p = getComputedStyle(n);
+          f = p.display === "none" || p.visibility === "hidden";
         }
         return a && !f;
       });
     }, i.prototype.createSentinel = function() {
       var e = document.createElement("div");
-      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(q), e;
+      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add($), e;
     }, i;
   }()
 );
@@ -172,7 +172,7 @@ var r = {
   // to prevent interactions with the content behind this scrim, and to capture
   // scrim clicks.
   SCRIM_HIDDEN: "mdc-dialog__scrim--hidden"
-}, v = {
+}, y = {
   ACTION_ATTRIBUTE: "data-mdc-dialog-action",
   BUTTON_DEFAULT_ATTRIBUTE: "data-mdc-dialog-button-default",
   BUTTON_SELECTOR: ".mdc-dialog__button",
@@ -192,7 +192,7 @@ var r = {
     ".mdc-menu .mdc-deprecated-list-item"
   ].join(", "),
   SURFACE_SELECTOR: ".mdc-dialog__surface"
-}, $ = {
+}, Y = {
   DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
   DIALOG_ANIMATION_OPEN_TIME_MS: 150
 };
@@ -228,7 +228,7 @@ var rt = (
     at(e, i);
     function e(t) {
       var n = i.call(this, ot(ot({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = v.CLOSE_ACTION, n.scrimClickAction = v.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = v.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new Dt(), n.contentScrollHandler = function() {
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = y.CLOSE_ACTION, n.scrimClickAction = y.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = y.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new Dt(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -244,13 +244,13 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return v;
+        return y;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "numbers", {
       get: function() {
-        return $;
+        return Y;
       },
       enumerable: !1,
       configurable: !0
@@ -320,19 +320,19 @@ var rt = (
     }), e.prototype.init = function() {
       this.adapter.hasClass(r.STACKED) && this.setAutoStackButtons(!1), this.isFullscreen = this.adapter.hasClass(r.FULLSCREEN);
     }, e.prototype.destroy = function() {
-      this.dialogOpen && this.close(v.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
+      this.dialogOpen && this.close(y.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
     }, e.prototype.open = function(t) {
       var n = this;
       this.dialogOpen = !0, this.adapter.notifyOpening(), this.adapter.addClass(r.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(r.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
         n.adapter.addClass(r.OPEN), n.adapter.addBodyClass(r.SCROLL_LOCK), n.layout(), n.animationTimer = setTimeout(function() {
           n.handleAnimationTimerEnd(), n.adapter.trapFocus(n.adapter.getInitialFocusEl()), n.adapter.notifyOpened();
-        }, $.DIALOG_ANIMATION_OPEN_TIME_MS);
+        }, Y.DIALOG_ANIMATION_OPEN_TIME_MS);
       });
     }, e.prototype.close = function(t) {
       var n = this;
       t === void 0 && (t = ""), this.dialogOpen && (this.dialogOpen = !1, this.adapter.notifyClosing(t), this.adapter.addClass(r.CLOSING), this.adapter.removeClass(r.OPEN), this.adapter.removeBodyClass(r.SCROLL_LOCK), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), cancelAnimationFrame(this.animationFrame), this.animationFrame = 0, clearTimeout(this.animationTimer), this.animationTimer = setTimeout(function() {
         n.adapter.releaseFocus(), n.handleAnimationTimerEnd(), n.adapter.notifyClosed(t);
-      }, $.DIALOG_ANIMATION_CLOSE_TIME_MS));
+      }, Y.DIALOG_ANIMATION_CLOSE_TIME_MS));
     }, e.prototype.showSurfaceScrim = function() {
       var t = this;
       this.adapter.addClass(r.SURFACE_SCRIM_SHOWING), this.runNextAnimationFrame(function() {
@@ -366,7 +366,7 @@ var rt = (
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
-      var n = this.adapter.eventTargetMatches(t.target, v.SCRIM_SELECTOR);
+      var n = this.adapter.eventTargetMatches(t.target, y.SCRIM_SELECTOR);
       if (n && this.scrimClickAction !== "")
         this.close(this.scrimClickAction);
       else {
@@ -478,23 +478,23 @@ var u = rt.strings, Pt = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, o;
-      t === void 0 && (t = function(g, p) {
-        return new Ht(g, p);
+      t === void 0 && (t = function(h, S) {
+        return new Ht(h, S);
       });
       var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
         throw new Error("Dialog component requires a " + u.CONTAINER_SELECTOR + " container element");
       this.container = a, this.content = this.root.querySelector(u.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(u.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + u.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
-        for (var f = vt(this.buttons), h = f.next(); !h.done; h = f.next()) {
-          var S = h.value;
-          this.buttonRipples.push(new Tt(S));
+        for (var f = vt(this.buttons), p = f.next(); !p.done; p = f.next()) {
+          var v = p.value;
+          this.buttonRipples.push(new Tt(v));
         }
-      } catch (g) {
-        n = { error: g };
+      } catch (h) {
+        n = { error: h };
       } finally {
         try {
-          h && !h.done && (o = f.return) && o.call(f);
+          p && !p.done && (o = f.return) && o.call(f);
         } finally {
           if (n) throw n.error;
         }
@@ -796,38 +796,38 @@ const Ut = {
     badge: o,
     backButton: a,
     children: f,
-    className: h,
-    content: S,
-    defaultButton: g,
-    dismissiveButton: p,
-    footerSupplemental: y,
-    headerActions: J,
-    hideCloseIcon: H,
+    className: p,
+    content: v,
+    defaultButton: h,
+    dismissiveButton: S,
+    footerSupplemental: g,
+    headerActions: H,
+    hideCloseIcon: P,
     indicator: st,
     initialFocus: O,
-    mobileStackedButtons: P,
+    mobileStackedButtons: U,
     modalSize: _,
     nextButton: T,
     noActions: A,
-    onClose: U,
-    onClosed: x,
+    onClose: x,
+    onClosed: G,
     onOpen: D,
     onOpened: I,
     open: Q,
-    preventClose: G,
+    preventClose: K,
     preventPrimaryAccept: X,
     primaryButton: c,
-    returnFocusSelector: K,
+    returnFocusSelector: W,
     scrollable: Z,
     title: tt,
     ...lt
   } = i, N = et(), l = et();
   _t(e, () => N.current, []);
-  const [W, ct] = nt(), [V, dt] = nt(() => T || a);
+  const [V, ct] = nt(), [z, dt] = nt(() => T || a);
   E(() => {
     dt(T || a);
   }, [T, a]);
-  const L = j(() => {
+  const L = q(() => {
     ct(window.innerWidth <= 600);
   }, []);
   E(() => (L(), window.addEventListener("resize", L), () => {
@@ -835,18 +835,18 @@ const Ut = {
   }), [L]), E(() => (l.current = Pt.attachTo(N.current), () => {
     l.current.destroy();
   }), [l, N]), E(() => {
-    l.current.foundation.setAutoStackButtons(P);
-  }, [P]), E(() => {
+    l.current.foundation.setAutoStackButtons(U);
+  }, [U]), E(() => {
     A && (l.current.foundation.adapter.trapFocus = () => {
     });
   }, [A]), E(() => {
-    l.current.scrimClickAction = G ? "" : "close", l.current.escapeKeyAction = G ? "" : "close";
-  }, [G]);
-  const F = j((m) => {
-    U && U(m);
-  }, [U]), R = j((m) => {
-    K && Ct(K), x && x(m);
-  }, [K, x]);
+    l.current.scrimClickAction = K ? "" : "close", l.current.escapeKeyAction = K ? "" : "close";
+  }, [K]);
+  const F = q((m) => {
+    x && x(m);
+  }, [x]), R = q((m) => {
+    W && Ct(W), G && G(m);
+  }, [W, G]);
   E(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
     l.current.unlisten("MDCDialog: opening", D);
   }), [l, D]), E(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
@@ -858,59 +858,59 @@ const Ut = {
   }), [l, R]), E(() => {
     Q ? l.current.open() : l.current.close();
   }, [l, Q]);
-  const ut = Y(() => () => {
+  const ut = J(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       elevation: t?.props.elevation !== "default" ? t?.props.elevation : "flat",
       variant: t?.props.variant || "filled"
     };
-    return g === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [t?.props.elevation, t?.props.variant, g, O]), mt = Y(() => () => {
+    return h === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, h, O]), mt = J(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       "data-mdc-dialog-action": X ? "" : "accept",
       elevation: c?.props.elevation !== "default" ? c?.props.elevation : "flat",
       variant: c?.props.variant || "filled"
     };
-    return g === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [X, g, O, c?.props.elevation, c?.props.variant]);
+    return h === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, h, O, c?.props.elevation, c?.props.variant]);
   return /* @__PURE__ */ d.createElement("aside", ht({
     ref: N,
-    className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", h),
+    className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", p),
     role: "alertdialog"
   }, lt), /* @__PURE__ */ d.createElement("div", {
-    className: B("lmnt-modal__container", "mdc-dialog__container", _ === "fullscreen" && "mdc-dialog--fullscreen", _ === "max" && "lmnt-modal__max", _ === "xlarge" && "lmnt-modal__xl", _ === "large" && "lmnt-modal__lg", _ === "medium" && "lmnt-modal__md", _ === "small" && "lmnt-modal__sm", (_ === "mobile" || W) && "lmnt-modal__mobile", _ === "dialog" && "lmnt-modal__dialog", A && "lmnt-modal-no-actions")
+    className: B("lmnt-modal__container", "mdc-dialog__container", _ === "fullscreen" && "mdc-dialog--fullscreen", _ === "max" && "lmnt-modal__max", _ === "xlarge" && "lmnt-modal__xl", _ === "large" && "lmnt-modal__lg", _ === "medium" && "lmnt-modal__md", _ === "small" && "lmnt-modal__sm", (_ === "mobile" || V) && "lmnt-modal__mobile", _ === "dialog" && "lmnt-modal__dialog", A && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ d.createElement("header", {
-    className: B("lmnt-modal__title", "mdc-dialog__title", (_ === "dialog" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || _ === "dialog" || A) && "lmnt-modal--no-close-icon")
-  }, !H && _ !== "dialog" && !A && /* @__PURE__ */ d.createElement(it, {
+    className: B("lmnt-modal__title", "mdc-dialog__title", (_ === "dialog" || P) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (P || _ === "dialog" || A) && "lmnt-modal--no-close-icon")
+  }, !P && _ !== "dialog" && !A && /* @__PURE__ */ d.createElement(it, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear"
-  }), tt && /* @__PURE__ */ d.createElement("div", null, tt), J && /* @__PURE__ */ d.createElement("div", {
+  }), tt && /* @__PURE__ */ d.createElement("div", null, tt), H && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__title-actions"
-  }, J), o && /* @__PURE__ */ d.createElement("div", {
+  }, H), o && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-badge--modal",
     style: {
       marginLeft: "0"
     }
-  }, o)), (S || f) && /* @__PURE__ */ d.createElement("section", {
+  }, o)), (v || f) && /* @__PURE__ */ d.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, S || f), st, (t || a || p || T || c || y) && /* @__PURE__ */ d.createElement("footer", {
-    className: B("lmnt-modal__actions", "mdc-dialog__actions", W && "lmnt-dialog__actions__mobile", y && "lmnt-modal__actions--supplemental-btn", W && P && "lmnt-modal_actions-mobile-stacked")
-  }, !V && y && /* @__PURE__ */ d.createElement("div", {
+  }, v || f), st, (t || a || S || T || c || g) && /* @__PURE__ */ d.createElement("footer", {
+    className: B("lmnt-modal__actions", "mdc-dialog__actions", V && "lmnt-dialog__actions__mobile", g && "lmnt-modal__actions--supplemental-btn", V && U && "lmnt-modal_actions-mobile-stacked")
+  }, !z && g && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
-  }, b(y, () => {
+  }, b(g, () => {
     const m = {};
-    return g === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  })), !V && (t || p || c) && /* @__PURE__ */ d.createElement("div", {
+    return h === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !z && (t || S || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, p && b(p, {
+  }, S && b(S, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), t && !c && b(t, ut), c && b(c, mt)), V && /* @__PURE__ */ d.createElement("div", {
+  }), t && !c && b(t, ut), c && b(c, mt)), z && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
   }, /* @__PURE__ */ d.createElement("div", null, St(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, b(T, {
     className: "lmnt-modal__button",
@@ -931,18 +931,19 @@ const Gt = "_modal_fr8bw_1", Kt = "_title_fr8bw_6", Wt = "_titleWithoutCloseIcon
   onClose: i,
   title: e,
   headerActions: t,
-  hideCloseIcon: n,
-  leadingIcon: o,
-  isOnline: a = !0,
-  offlineViewProps: f,
-  children: h,
-  ...S
+  actionButton: n,
+  hideCloseIcon: o,
+  leadingIcon: a,
+  isOnline: f = !0,
+  offlineViewProps: p,
+  children: v,
+  ...h
 }) => {
-  const g = Y(() => {
-    const p = {
+  const S = J(() => {
+    const g = {
       id: "base",
-      action: /* @__PURE__ */ ft(z, { primaryAlign: "center", secondaryAlign: "center", children: [
-        !n && /* @__PURE__ */ C(
+      action: /* @__PURE__ */ ft(j, { primaryAlign: "center", secondaryAlign: "center", children: [
+        !o && /* @__PURE__ */ C(
           it,
           {
             icon: "close",
@@ -951,29 +952,30 @@ const Gt = "_modal_fr8bw_1", Kt = "_title_fr8bw_6", Wt = "_titleWithoutCloseIcon
             className: w.closeButton
           }
         ),
-        o ? /* @__PURE__ */ C(It, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Lt, { icon: o }) }) : /* @__PURE__ */ C(pt, {}),
+        a ? /* @__PURE__ */ C(It, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Lt, { icon: a }) }) : /* @__PURE__ */ C(pt, {}),
         /* @__PURE__ */ C(
           Nt,
           {
             level: 6,
-            className: n && !o ? w.titleWithoutCloseIcon : "",
+            className: o && !a ? w.titleWithoutCloseIcon : "",
             children: e
           }
         )
       ] }, "base-group")
     };
-    return t ? Array.isArray(t) ? [p, { id: "action-group", action: /* @__PURE__ */ C(z, { children: t }, "action-group") }] : [p, { id: "action", action: t }] : [p];
-  }, [t, n, o, i, e]);
+    return t ? Array.isArray(t) ? [g, { id: "action-group", action: /* @__PURE__ */ C(j, { children: t }, "action-group") }] : [g, { id: "action", action: t }] : [g];
+  }, [t, o, a, i, e]);
   return /* @__PURE__ */ C(
     k,
     {
-      ...S,
+      ...h,
       "data-testid": "modal",
-      className: `${w.modal} ${w.title} ${S.className ?? ""}`,
+      className: `${w.modal} ${w.title} ${h.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ C(z, { primaryAlign: "space-between", secondaryAlign: "center", children: g.map((p) => /* @__PURE__ */ C(Et, { children: p.action }, p.id)) }, "header-group"),
+      actionButton: n,
+      headerActions: /* @__PURE__ */ C(j, { primaryAlign: "space-between", secondaryAlign: "center", children: S.map((g) => /* @__PURE__ */ C(Et, { children: g.action }, g.id)) }, "header-group"),
       preventClose: !0,
-      children: a ? h : /* @__PURE__ */ C(Ft, { ...f })
+      children: f ? v : /* @__PURE__ */ C(Ft, { ...p })
     }
   );
 };

package/dist/components/ModulePadding/ModulePadding.js

@@ -11,7 +11,8 @@ import "../../get-B8c-T4F8.js";
 import "../../omit-1Eom1PmQ.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const x = ({ children: o }) => {
+import "../../types/Time.js";
+const j = ({ children: o }) => {
   const { isDesktop: t } = m();
   return /* @__PURE__ */ i(
     r,
@@ -24,5 +25,5 @@ const x = ({ children: o }) => {
   );
 };
 export {
-  x as ModulePadding
+  j as ModulePadding
 };

package/dist/components/SafeForm/SafeForm.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A form component that prevents accidental submission when pressing Enter in input fields.
+ * It handles the 'keydown' event and intercepts the Enter key press.
+ * If the focused element is a button, submit button or text area, it allows the default behavior.
+ * Otherwise, it prevents the default action to avoid unintended submissions.
+ *
+ * @param children - The form children elements.
+ * @param props - Additional form props.
+ * @returns JSX.Element
+ */
+export declare const SafeForm: ({ children, ...props }: JSX.IntrinsicElements["form"]) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SafeForm/SafeForm.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+const a = ({ children: t, ...r }) => /* @__PURE__ */ e("form", { onKeyDown: n, ...r, children: t }), n = async (t) => {
+  if (t.key !== "Enter") return;
+  const r = t.target;
+  r?.type !== "submit" && r?.type !== "button" && r?.type !== "textarea" && (t.preventDefault(), t.stopPropagation());
+};
+export {
+  a as SafeForm
+};

package/dist/components/SafeForm/SafeForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SafeForm/SafeForm.test.js

@@ -0,0 +1,91 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { a as u, s as i, f as r } from "../../react.esm-CX1WJ2Pp.js";
+import { u as y } from "../../index-I7uTh4Tr.js";
+import { SafeForm as p } from "./SafeForm.js";
+import { d as b, t as c, g as s, v as l } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+b("SafeForm", () => {
+  c("renders form with children", () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "test-input", type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    ), s(i.getByTestId("test-input")).toBeInTheDocument(), s(i.getByTestId("submit-button")).toBeInTheDocument();
+  }), c("prevents Enter key default behavior on text inputs", async () => {
+    const e = y.setup();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "text-input", type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    );
+    const n = i.getByTestId("text-input");
+    await e.click(n);
+    const o = r.keyDown(n, { key: "Enter" });
+    s(o).toBe(!1);
+  }), c("allows Enter key press on submit button (does not prevent default)", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = i.getByTestId("submit-button");
+    e.focus();
+    const n = r.keyDown(e, { key: "Enter" });
+    s(n).toBe(!0);
+  }), c("allows Enter key press on regular button (does not prevent default)", async () => {
+    const e = l.fn();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "cancel-button", type: "button", onClick: e, children: "Cancel" })
+      ] })
+    );
+    const n = i.getByTestId("cancel-button");
+    n.focus();
+    const o = r.keyDown(n, { key: "Enter" });
+    s(o).toBe(!0);
+  }), c("allows Enter key press on textarea (does not prevent default)", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("textarea", { "data-testid": "textarea" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = i.getByTestId("textarea");
+    e.focus();
+    const n = r.keyDown(e, { key: "Enter" });
+    s(n).toBe(!0);
+  }), c("does not interfere with other key presses", async () => {
+    const e = y.setup();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "text-input", type: "text" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const n = i.getByTestId("text-input");
+    await e.click(n), await e.keyboard("a"), await e.keyboard("{Tab}"), await e.keyboard("{Escape}"), s(n).toHaveValue("a");
+    const o = r.keyDown(n, { key: "Tab" }), d = r.keyDown(n, { key: "Escape" });
+    s(o).toBe(!0), s(d).toBe(!0);
+  }), c("prevents Enter key on various input types", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "input1", type: "text" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input2", type: "email" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input3", type: "password" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input4", type: "number" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = ["input1", "input2", "input3", "input4"];
+    for (const n of e) {
+      const o = i.getByTestId(n);
+      o.focus();
+      const d = r.keyDown(o, { key: "Enter" });
+      s(d).toBe(!1);
+    }
+  });
+});

package/dist/components/SearchBar/SearchBar.js

@@ -1,36 +1,37 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { I as i } from "../../index.es-Kg9soDed.js";
 import { T as l } from "../../index.es-CUuzYysw.js";
 import '../../assets/SearchBar.css';const u = "_searchbar_gnvwc_1", b = {
   searchbar: u
-}, p = ({
-  className: o = "",
+}, f = ({
+  className: r = "",
   dense: n = !1,
-  searchTerm: a,
-  setSearchTerm: t,
-  placeholder: s,
-  fullWidth: e = !0
-}) => /* @__PURE__ */ r(
+  searchTerm: t,
+  setSearchTerm: a,
+  placeholder: e,
+  fullWidth: s = !0
+}) => /* @__PURE__ */ o(
   l,
   {
     "data-testid": "search-bar-input",
-    className: `${o ?? ""} ${b.searchbar}`,
+    className: `${r ?? ""} ${b.searchbar}`,
     dense: n,
     variant: "outlined",
-    placeholder: s,
-    value: a,
-    onChange: (c) => t(c.target.value),
-    fullWidth: e,
-    trailingIcon: /* @__PURE__ */ r(
+    placeholder: e,
+    value: t,
+    onChange: (c) => a(c.target.value),
+    fullWidth: s,
+    trailingIcon: /* @__PURE__ */ o(
       i,
       {
         "data-testid": "search-bar-icon-button",
-        icon: a ? "close" : "search",
-        onClick: () => a ? t("") : void 0
+        icon: t ? "close" : "search",
+        onClick: () => t ? a("") : void 0,
+        type: "button"
       }
     )
   }
 );
 export {
-  p as SearchBar
+  f as SearchBar
 };

package/dist/main.d.ts

@@ -39,10 +39,11 @@ export { FormSelect } from './components/FormComponents/FormSelect/FormSelect';
 export { FormSlider } from './components/FormComponents/FormSlider/FormSlider';
 export { FormText } from './components/FormComponents/FormText/FormText';
 export { FormToggle } from './components/FormComponents/FormToggle/FormToggle';
+export { SafeForm } from './components/SafeForm/SafeForm';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
+export { capitalizeFirstLetters, getFormattedDateTime, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption, FormSelectProps, } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
@@ -54,5 +55,6 @@ export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
+export { DATE_FORMAT, DATE_TIME_FORMAT, TIME_FORMAT } from './types/Time';
 export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID, } from './types/Languages';
 export type { AVAILABLE_LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';