@hortiview/shared-components 2.29.0-alpha.df46fcc5.1 → 2.30.0

package/components/Modal/Modal.js

@@ -1,11 +1,11 @@
-import { jsx as g, Fragment as wt, jsxs as kt } from "react/jsx-runtime";
-import { G as U } from "../../index.es-BE1XL1dD.js";
-import { I as Ut } from "../../index.es-BwhRJBEH.js";
-import { _ as Zt, a as te, c as G, P as l } from "../../index-_-9ybP20.js";
+import { jsx as h, Fragment as Z, jsxs as kt } from "react/jsx-runtime";
+import { G } from "../../index.es-BE1XL1dD.js";
+import { I as $t } from "../../index.es-BwhRJBEH.js";
+import { _ as Zt, a as te, c as F, P as l } from "../../index-_-9ybP20.js";
 import { _ as Mt } from "../../slicedToArray-C2Ed3239.js";
-import m, { forwardRef as ee, useRef as Pt, useImperativeHandle as ne, useState as Ht, useEffect as v, useCallback as Z, useMemo as nt, Fragment as oe } from "react";
+import m, { forwardRef as ee, useRef as Pt, useImperativeHandle as ne, useState as Ht, useEffect as v, useCallback as tt, useMemo as ot, Fragment as oe } from "react";
 import { w as xt, j as ie, c as D, a as ae } from "../../index.es-DRC-9PLs.js";
-import { b as Gt, c as $t, d as re } from "../../tslib.es6-BDCynO9F.js";
+import { b as Gt, c as Ut, d as re } from "../../tslib.es6-BDCynO9F.js";
 import { M as le, a as se } from "../../component-By6nyiBU.js";
 import { M as ce, c as ue, m as de } from "../../component-9vrShqiY.js";
 import { A as me } from "../../animationframe-CqXArbwZ.js";
@@ -32,7 +32,7 @@ function ye(o) {
     return e.add(t.offsetTop);
   }), e.size > 1;
 }
-var tt = "mdc-dom-focus-sentinel", Oe = (
+var et = "mdc-dom-focus-sentinel", Oe = (
   /** @class */
   (function() {
     function o(e, t) {
@@ -44,7 +44,7 @@ var tt = "mdc-dom-focus-sentinel", Oe = (
         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);
     }, o.prototype.releaseFocus = function() {
-      [].slice.call(this.root.querySelectorAll("." + tt)).forEach(function(e) {
+      [].slice.call(this.root.querySelectorAll("." + et)).forEach(function(e) {
         e.parentElement.removeChild(e);
       }), !this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus && this.elFocusedBeforeTrapFocus.focus();
     }, o.prototype.wrapTabFocus = function(e) {
@@ -62,16 +62,16 @@ var tt = "mdc-dom-focus-sentinel", Oe = (
     }, o.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var i = 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(tt) && !i, d = !1;
+        var i = 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(et) && !i, d = !1;
         if (a) {
-          var h = getComputedStyle(n);
-          d = h.display === "none" || h.visibility === "hidden";
+          var g = getComputedStyle(n);
+          d = g.display === "none" || g.visibility === "hidden";
         }
         return a && !d;
       });
     }, o.prototype.createSentinel = function() {
       var e = document.createElement("div");
-      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(tt), e;
+      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(et), e;
     }, o;
   })()
 );
@@ -108,7 +108,7 @@ var s = {
   // to prevent interactions with the content behind this scrim, and to capture
   // scrim clicks.
   SCRIM_HIDDEN: "mdc-dialog__scrim--hidden"
-}, A = {
+}, T = {
   ACTION_ATTRIBUTE: "data-mdc-dialog-action",
   BUTTON_DEFAULT_ATTRIBUTE: "data-mdc-dialog-button-default",
   BUTTON_SELECTOR: ".mdc-dialog__button",
@@ -128,7 +128,7 @@ var s = {
     ".mdc-menu .mdc-deprecated-list-item"
   ].join(", "),
   SURFACE_SELECTOR: ".mdc-dialog__surface"
-}, et = {
+}, nt = {
   DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
   DIALOG_ANIMATION_OPEN_TIME_MS: 150
 };
@@ -141,8 +141,8 @@ var Kt = (
   (function(o) {
     Gt(e, o);
     function e(t) {
-      var n = o.call(this, $t($t({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = A.CLOSE_ACTION, n.scrimClickAction = A.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = A.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new me(), n.contentScrollHandler = function() {
+      var n = o.call(this, Ut(Ut({}, e.defaultAdapter), t)) || this;
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = T.CLOSE_ACTION, n.scrimClickAction = T.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = T.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new me(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -158,13 +158,13 @@ var Kt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return A;
+        return T;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "numbers", {
       get: function() {
-        return et;
+        return nt;
       },
       enumerable: !1,
       configurable: !0
@@ -234,19 +234,19 @@ var Kt = (
     }), e.prototype.init = function() {
       this.adapter.hasClass(s.STACKED) && this.setAutoStackButtons(!1), this.isFullscreen = this.adapter.hasClass(s.FULLSCREEN);
     }, e.prototype.destroy = function() {
-      this.dialogOpen && this.close(A.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(T.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(s.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(s.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
         n.adapter.addClass(s.OPEN), n.adapter.addBodyClass(s.SCROLL_LOCK), n.layout(), n.animationTimer = setTimeout(function() {
           n.handleAnimationTimerEnd(), n.adapter.trapFocus(n.adapter.getInitialFocusEl()), n.adapter.notifyOpened();
-        }, et.DIALOG_ANIMATION_OPEN_TIME_MS);
+        }, nt.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(s.CLOSING), this.adapter.removeClass(s.OPEN), this.adapter.removeBodyClass(s.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);
-      }, et.DIALOG_ANIMATION_CLOSE_TIME_MS));
+      }, nt.DIALOG_ANIMATION_CLOSE_TIME_MS));
     }, e.prototype.showSurfaceScrim = function() {
       var t = this;
       this.adapter.addClass(s.SURFACE_SCRIM_SHOWING), this.runNextAnimationFrame(function() {
@@ -280,7 +280,7 @@ var Kt = (
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
-      var n = this.adapter.eventTargetMatches(t.target, A.SCRIM_SELECTOR);
+      var n = this.adapter.eventTargetMatches(t.target, T.SCRIM_SELECTOR);
       if (n && this.scrimClickAction !== "")
         this.close(this.scrimClickAction);
       else {
@@ -370,23 +370,23 @@ var f = Kt.strings, Ae = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, i;
-      t === void 0 && (t = function(_, S) {
-        return new Oe(_, S);
+      t === void 0 && (t = function(_, y) {
+        return new Oe(_, y);
       });
       var a = this.root.querySelector(f.CONTAINER_SELECTOR);
       if (!a)
         throw new Error("Dialog component requires a " + f.CONTAINER_SELECTOR + " container element");
       this.container = a, this.content = this.root.querySelector(f.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(f.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + f.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
-        for (var d = re(this.buttons), h = d.next(); !h.done; h = d.next()) {
-          var O = h.value;
+        for (var d = re(this.buttons), g = d.next(); !g.done; g = d.next()) {
+          var O = g.value;
           this.buttonRipples.push(new ce(O));
         }
       } catch (_) {
         n = { error: _ };
       } finally {
         try {
-          h && !h.done && (i = d.return) && i.call(d);
+          g && !g.done && (i = d.return) && i.call(d);
         } finally {
           if (n) throw n.error;
         }
@@ -691,30 +691,30 @@ var f = Kt.strings, Ae = (
   returnFocusSelector: null,
   scrollable: !1,
   title: null
-}, Ie = ["actionButton", "actionIcons", "badge", "backButton", "children", "className", "content", "defaultButton", "dismissiveButton", "footerSupplemental", "headerActions", "hideCloseIcon", "indicator", "initialFocus", "mobileStackedButtons", "modalSize", "nextButton", "noActions", "onClose", "onClosed", "onOpen", "onOpened", "open", "preventClose", "preventPrimaryAccept", "primaryButton", "returnFocusSelector", "scrollable", "title", "iconSource"], r = be, ot = /* @__PURE__ */ ee(function(o, e) {
-  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, d = o.badge, h = d === void 0 ? r.badge : d, O = o.backButton, _ = O === void 0 ? r.backButton : O, S = o.children, F = S === void 0 ? r.children : S, T = o.className, W = T === void 0 ? r.className : T, E = o.content, L = E === void 0 ? r.content : E, it = o.defaultButton, b = it === void 0 ? r.defaultButton : it, at = o.dismissiveButton, R = at === void 0 ? r.dismissiveButton : at, rt = o.footerSupplemental, w = rt === void 0 ? r.footerSupplemental : rt, lt = o.headerActions, st = lt === void 0 ? r.headerActions : lt, ct = o.hideCloseIcon, V = ct === void 0 ? r.hideCloseIcon : ct, ut = o.indicator, Wt = ut === void 0 ? r.indicator : ut, dt = o.initialFocus, I = dt === void 0 ? r.initialFocus : dt, mt = o.mobileStackedButtons, z = mt === void 0 ? r.mobileStackedButtons : mt, ft = o.modalSize, C = ft === void 0 ? r.modalSize : ft, pt = o.nextButton, B = pt === void 0 ? r.nextButton : pt, ht = o.noActions, N = ht === void 0 ? r.noActions : ht, gt = o.onClose, j = gt === void 0 ? r.onClose : gt, _t = o.onClosed, q = _t === void 0 ? r.onClosed : _t, Ct = o.onOpen, k = Ct === void 0 ? r.onOpen : Ct, vt = o.onOpened, M = vt === void 0 ? r.onOpened : vt, Et = o.open, St = Et === void 0 ? r.open : Et, yt = o.preventClose, Y = yt === void 0 ? r.preventClose : yt, Ot = o.preventPrimaryAccept, At = Ot === void 0 ? r.preventPrimaryAccept : Ot, Tt = o.primaryButton, u = Tt === void 0 ? r.primaryButton : Tt, bt = o.returnFocusSelector, J = bt === void 0 ? r.returnFocusSelector : bt, It = o.scrollable, Bt = It === void 0 ? r.scrollable : It, Nt = o.title, Dt = Nt === void 0 ? r.title : Nt, Ft = o.iconSource, Vt = Ft === void 0 ? r.iconSource : Ft, zt = Zt(o, Ie), P = Pt(), c = Pt();
+}, Ie = ["actionButton", "actionIcons", "badge", "backButton", "children", "className", "content", "defaultButton", "dismissiveButton", "footerSupplemental", "headerActions", "hideCloseIcon", "indicator", "initialFocus", "mobileStackedButtons", "modalSize", "nextButton", "noActions", "onClose", "onClosed", "onOpen", "onOpened", "open", "preventClose", "preventPrimaryAccept", "primaryButton", "returnFocusSelector", "scrollable", "title", "iconSource"], r = be, it = /* @__PURE__ */ ee(function(o, e) {
+  var t = o.actionButton, n = t === void 0 ? r.actionButton : t, i = o.actionIcons, a = i === void 0 ? r.actionIcons : i, d = o.badge, g = d === void 0 ? r.badge : d, O = o.backButton, _ = O === void 0 ? r.backButton : O, y = o.children, L = y === void 0 ? r.children : y, A = o.className, W = A === void 0 ? r.className : A, E = o.content, R = E === void 0 ? r.content : E, at = o.defaultButton, b = at === void 0 ? r.defaultButton : at, rt = o.dismissiveButton, w = rt === void 0 ? r.dismissiveButton : rt, lt = o.footerSupplemental, k = lt === void 0 ? r.footerSupplemental : lt, st = o.headerActions, ct = st === void 0 ? r.headerActions : st, ut = o.hideCloseIcon, V = ut === void 0 ? r.hideCloseIcon : ut, dt = o.indicator, Wt = dt === void 0 ? r.indicator : dt, mt = o.initialFocus, I = mt === void 0 ? r.initialFocus : mt, ft = o.mobileStackedButtons, z = ft === void 0 ? r.mobileStackedButtons : ft, pt = o.modalSize, C = pt === void 0 ? r.modalSize : pt, ht = o.nextButton, B = ht === void 0 ? r.nextButton : ht, gt = o.noActions, N = gt === void 0 ? r.noActions : gt, _t = o.onClose, j = _t === void 0 ? r.onClose : _t, Ct = o.onClosed, q = Ct === void 0 ? r.onClosed : Ct, vt = o.onOpen, M = vt === void 0 ? r.onOpen : vt, Et = o.onOpened, P = Et === void 0 ? r.onOpened : Et, St = o.open, yt = St === void 0 ? r.open : St, Ot = o.preventClose, Y = Ot === void 0 ? r.preventClose : Ot, At = o.preventPrimaryAccept, Tt = At === void 0 ? r.preventPrimaryAccept : At, bt = o.primaryButton, u = bt === void 0 ? r.primaryButton : bt, It = o.returnFocusSelector, J = It === void 0 ? r.returnFocusSelector : It, Bt = o.scrollable, Nt = Bt === void 0 ? r.scrollable : Bt, Dt = o.title, Ft = Dt === void 0 ? r.title : Dt, Lt = o.iconSource, Vt = Lt === void 0 ? r.iconSource : Lt, zt = Zt(o, Ie), H = Pt(), c = Pt();
   ne(e, function() {
-    return P.current;
+    return H.current;
   }, []);
-  var jt = Ht(), Lt = Mt(jt, 2), Q = Lt[0], qt = Lt[1], Yt = Ht(function() {
+  var jt = Ht(), Rt = Mt(jt, 2), Q = Rt[0], qt = Rt[1], Yt = Ht(function() {
     return B || _;
-  }), Rt = Mt(Yt, 2), X = Rt[0], Jt = Rt[1];
+  }), wt = Mt(Yt, 2), X = wt[0], Jt = wt[1];
   v(function() {
     Jt(B || _);
   }, [B, _]);
-  var H = Z(function() {
+  var x = tt(function() {
     xt() && qt(window.innerWidth <= 600);
   }, []);
   v(function() {
-    return xt() ? (H(), window.addEventListener("resize", H), function() {
-      window.removeEventListener("resize", H);
+    return xt() ? (x(), window.addEventListener("resize", x), function() {
+      window.removeEventListener("resize", x);
     }) : function() {
     };
-  }, [H]), v(function() {
-    return c.current = Ae.attachTo(P.current), function() {
+  }, [x]), v(function() {
+    return c.current = Ae.attachTo(H.current), function() {
       c.current.destroy();
     };
-  }, [c, P]), v(function() {
+  }, [c, H]), v(function() {
     c.current.foundation.setAutoStackButtons(z);
   }, [z]), v(function() {
     N && (c.current.foundation.adapter.trapFocus = function() {
@@ -722,31 +722,31 @@ var f = Kt.strings, Ae = (
   }, [N]), v(function() {
     c.current.scrimClickAction = Y ? "" : "close", c.current.escapeKeyAction = Y ? "" : "close";
   }, [Y]);
-  var x = Z(function(p) {
+  var U = tt(function(p) {
     j && j(p);
-  }, [j]), $ = Z(function(p) {
+  }, [j]), $ = tt(function(p) {
     J && ie(J), q && q(p);
   }, [J, q]);
   v(function() {
-    return c.current.unlisten("MDCDialog: opening", k), c.current.listen("MDCDialog: opening", k), function() {
-      c.current.unlisten("MDCDialog: opening", k);
-    };
-  }, [c, k]), v(function() {
-    return c.current.unlisten("MDCDialog:opened", M), c.current.listen("MDCDialog:opened", M), function() {
-      c.current.unlisten("MDCDialog:opened", M);
+    return c.current.unlisten("MDCDialog: opening", M), c.current.listen("MDCDialog: opening", M), function() {
+      c.current.unlisten("MDCDialog: opening", M);
     };
   }, [c, M]), v(function() {
-    return c.current.unlisten("MDCDialog:closing", x), c.current.listen("MDCDialog:closing", x), function() {
-      c.current.unlisten("MDCDialog:closing", x);
+    return c.current.unlisten("MDCDialog:opened", P), c.current.listen("MDCDialog:opened", P), function() {
+      c.current.unlisten("MDCDialog:opened", P);
+    };
+  }, [c, P]), v(function() {
+    return c.current.unlisten("MDCDialog:closing", U), c.current.listen("MDCDialog:closing", U), function() {
+      c.current.unlisten("MDCDialog:closing", U);
     };
-  }, [c, x]), v(function() {
+  }, [c, U]), v(function() {
     return c.current.unlisten("MDCDialog:closed", $), c.current.listen("MDCDialog:closed", $), function() {
       c.current.unlisten("MDCDialog:closed", $);
     };
   }, [c, $]), v(function() {
-    St ? c.current.open() : c.current.close();
-  }, [c, St]);
-  var Qt = nt(function() {
+    yt ? c.current.open() : c.current.close();
+  }, [c, yt]);
+  var Qt = ot(function() {
     return function() {
       var p = {
         className: "lmnt-modal__button mdc-dialog__button",
@@ -755,51 +755,51 @@ var f = Kt.strings, Ae = (
       };
       return b === "action" && (p["data-mdc-dialog-button-default"] = !0), I === "action" && (p["data-mdc-dialog-initial-focus"] = !0), p;
     };
-  }, [n?.props.elevation, n?.props.variant, b, I]), Xt = nt(function() {
+  }, [n?.props.elevation, n?.props.variant, b, I]), Xt = ot(function() {
     return function() {
       var p = {
         className: "lmnt-modal__button mdc-dialog__button",
-        "data-mdc-dialog-action": At ? "" : "accept",
+        "data-mdc-dialog-action": Tt ? "" : "accept",
         elevation: u?.props.elevation !== "default" ? u?.props.elevation : "flat",
         variant: u?.props.variant || "filled"
       };
       return b === "primary" && (p["data-mdc-dialog-button-default"] = !0), I === "primary" && (p["data-mdc-dialog-initial-focus"] = !0), p;
     };
-  }, [At, b, I, u?.props.elevation, u?.props.variant]);
+  }, [Tt, b, I, u?.props.elevation, u?.props.variant]);
   return /* @__PURE__ */ m.createElement("aside", te({
-    ref: P,
-    className: G("lmnt", "lmnt-modal", "mdc-dialog", Bt && "lmnt-modal--scrollable mdc-dialog--scrollable", W),
+    ref: H,
+    className: F("lmnt", "lmnt-modal", "mdc-dialog", Nt && "lmnt-modal--scrollable mdc-dialog--scrollable", W),
     role: "alertdialog"
   }, zt), /* @__PURE__ */ m.createElement("div", {
-    className: G("lmnt-modal__container", "mdc-dialog__container", C === "fullscreen" && "mdc-dialog--fullscreen", C === "max" && "lmnt-modal__max", C === "xlarge" && "lmnt-modal__xl", C === "large" && "lmnt-modal__lg", C === "medium" && "lmnt-modal__md", C === "small" && "lmnt-modal__sm", (C === "mobile" || Q) && "lmnt-modal__mobile", C === "dialog" && "lmnt-modal__dialog", N && "lmnt-modal-no-actions")
+    className: F("lmnt-modal__container", "mdc-dialog__container", C === "fullscreen" && "mdc-dialog--fullscreen", C === "max" && "lmnt-modal__max", C === "xlarge" && "lmnt-modal__xl", C === "large" && "lmnt-modal__lg", C === "medium" && "lmnt-modal__md", C === "small" && "lmnt-modal__sm", (C === "mobile" || Q) && "lmnt-modal__mobile", C === "dialog" && "lmnt-modal__dialog", N && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ m.createElement("header", {
-    className: G("lmnt-modal__title", "mdc-dialog__title", (C === "dialog" || V) && "lmnt-modal_title-hide-close-icon", a && "lmnt-modal_title-actionsIcons", Bt && "lmnt-modal__title-scrollable", (V || C === "dialog" || N) && "lmnt-modal--no-close-icon")
-  }, !V && C !== "dialog" && !N && /* @__PURE__ */ m.createElement(Ut, {
+    className: F("lmnt-modal__title", "mdc-dialog__title", (C === "dialog" || V) && "lmnt-modal_title-hide-close-icon", a && "lmnt-modal_title-actionsIcons", Nt && "lmnt-modal__title-scrollable", (V || C === "dialog" || N) && "lmnt-modal--no-close-icon")
+  }, !V && C !== "dialog" && !N && /* @__PURE__ */ m.createElement($t, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear",
     iconSource: Vt
-  }), Dt && /* @__PURE__ */ m.createElement("div", null, Dt), st && /* @__PURE__ */ m.createElement("div", {
+  }), Ft && /* @__PURE__ */ m.createElement("div", null, Ft), ct && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__title-actions"
-  }, st), h && /* @__PURE__ */ m.createElement("div", {
+  }, ct), g && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-badge--modal",
     style: {
       marginLeft: "0"
     }
-  }, h)), (L || F) && /* @__PURE__ */ m.createElement("section", {
+  }, g)), (R || L) && /* @__PURE__ */ m.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, L || F), Wt, (n || _ || R || B || u || w) && /* @__PURE__ */ m.createElement("footer", {
-    className: G("lmnt-modal__actions", "mdc-dialog__actions", Q && "lmnt-dialog__actions__mobile", w && "lmnt-modal__actions--supplemental-btn", Q && z && "lmnt-modal_actions-mobile-stacked")
-  }, !X && w && /* @__PURE__ */ m.createElement("div", {
+  }, R || L), Wt, (n || _ || w || B || u || k) && /* @__PURE__ */ m.createElement("footer", {
+    className: F("lmnt-modal__actions", "mdc-dialog__actions", Q && "lmnt-dialog__actions__mobile", k && "lmnt-modal__actions--supplemental-btn", Q && z && "lmnt-modal_actions-mobile-stacked")
+  }, !X && k && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
-  }, D(w, function() {
+  }, D(k, function() {
     var p = {};
     return b === "footerSupplemental" && (p["data-mdc-dialog-button-default"] = !0), I === "footerSupplemental" && (p["data-mdc-dialog-initial-focus"] = !0), p;
-  })), !X && (n || R || u) && /* @__PURE__ */ m.createElement("div", {
+  })), !X && (n || w || u) && /* @__PURE__ */ m.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, R && D(R, {
+  }, w && D(w, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
@@ -812,16 +812,17 @@ var f = Kt.strings, Ae = (
     className: "mdc-dialog__scrim"
   }));
 });
-ot.displayName = "Modal";
-ot.propTypes = Te;
-const Be = "_modal_1l955_1", Ne = "_gap_1l955_18", De = "_title_1l955_23", Fe = "_titleWithoutCloseIcon_1l955_36", Le = "_closeButton_1l955_40", Re = "_errorBanner_1l955_52", y = {
+it.displayName = "Modal";
+it.propTypes = Te;
+const Be = "_modal_3lh36_1", Ne = "_gap_3lh36_18", De = "_title_3lh36_23", Fe = "_titleWithoutCloseIcon_3lh36_36", Le = "_closeButton_3lh36_40", Re = "_errorBanner_3lh36_52", we = "_footerLayoutFixes_3lh36_66", S = {
   modal: Be,
   gap: Ne,
   title: De,
   titleWithoutCloseIcon: Fe,
   closeButton: Le,
-  errorBanner: Re
-}, Je = ({
+  errorBanner: Re,
+  footerLayoutFixes: we
+}, Qe = ({
   onClose: o,
   title: e,
   headerActions: t,
@@ -829,37 +830,37 @@ const Be = "_modal_1l955_1", Ne = "_gap_1l955_18", De = "_title_1l955_23", Fe =
   hideCloseIcon: i,
   closeIcon: a = "close",
   leadingIcon: d,
-  isOnline: h = !0,
+  isOnline: g = !0,
   offlineViewProps: O,
   children: _,
-  errorBannerProps: { hasError: S, ...F } = { hasError: !1 },
-  ...T
+  errorBannerProps: { hasError: y, ...L } = { hasError: !1 },
+  ...A
 }) => {
-  const W = nt(() => {
+  const W = ot(() => {
     const E = {
       id: "base",
       action: /* @__PURE__ */ kt(
-        U,
+        G,
         {
           primaryAlign: "center",
           secondaryAlign: "center",
-          className: y.gap,
+          className: S.gap,
           children: [
-            !i && /* @__PURE__ */ g(
-              Ut,
+            !i && /* @__PURE__ */ h(
+              $t,
               {
                 icon: a,
                 onClick: () => o?.(),
                 type: "button",
-                className: y.closeButton
+                className: S.closeButton
               }
             ),
-            d ? /* @__PURE__ */ g(fe, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ g(he, { icon: d }) }) : /* @__PURE__ */ g(wt, {}),
-            /* @__PURE__ */ g(
+            d ? /* @__PURE__ */ h(fe, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ h(he, { icon: d }) }) : /* @__PURE__ */ h(Z, {}),
+            /* @__PURE__ */ h(
               pe,
               {
                 level: 6,
-                className: i && !d ? y.titleWithoutCloseIcon : "",
+                className: i && !d ? S.titleWithoutCloseIcon : "",
                 children: e
               }
             )
@@ -870,29 +871,30 @@ const Be = "_modal_1l955_1", Ne = "_gap_1l955_18", De = "_title_1l955_23", Fe =
     };
     if (!t) return [E];
     if (!Array.isArray(t)) return [E, { id: "action", action: t }];
-    const L = {
+    const R = {
       id: "action-group",
-      action: /* @__PURE__ */ g(U, { className: y.gap, children: t }, "action-group")
+      action: /* @__PURE__ */ h(G, { className: S.gap, children: t }, "action-group")
     };
-    return [E, L];
+    return [E, R];
   }, [t, i, a, d, o, e]);
-  return /* @__PURE__ */ g(
-    ot,
+  return /* @__PURE__ */ h(
+    it,
     {
-      ...T,
+      ...A,
       "data-testid": "modal",
-      className: `${y.modal} ${y.title} ${T.className ?? ""}`,
+      className: F(S.modal, S.title, S.footerLayoutFixes, A.className),
       hideCloseIcon: !0,
+      footerSupplemental: A.footerSupplemental ?? /* @__PURE__ */ h(Z, {}),
       actionButton: n,
-      headerActions: /* @__PURE__ */ kt(U, { fullWidth: !0, gap: "none", direction: "vertical", children: [
-        /* @__PURE__ */ g(U, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: "center", children: W.map((E) => /* @__PURE__ */ g(oe, { children: E.action }, E.id)) }),
-        S && /* @__PURE__ */ g("div", { className: y.errorBanner, children: /* @__PURE__ */ g(_e, { ...F, isOpen: S }) })
+      headerActions: /* @__PURE__ */ kt(G, { fullWidth: !0, gap: "none", direction: "vertical", children: [
+        /* @__PURE__ */ h(G, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: "center", children: W.map((E) => /* @__PURE__ */ h(oe, { children: E.action }, E.id)) }),
+        y && /* @__PURE__ */ h("div", { className: S.errorBanner, children: /* @__PURE__ */ h(_e, { ...L, isOpen: y }) })
       ] }, "header-group"),
       preventClose: !0,
-      children: h ? /* @__PURE__ */ g(wt, { children: _ }) : /* @__PURE__ */ g(ge, { ...O })
+      children: g ? /* @__PURE__ */ h(Z, { children: _ }) : /* @__PURE__ */ h(ge, { ...O })
     }
   );
 };
 export {
-  Je as Modal
+  Qe as Modal
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
-  "version": "2.29.0-alpha.df46fcc5.1",
-  "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
+  "version": "2.30.0",
+  "description": "This is a shared component library. It should be used in the HortiView platform and its modules.",
   "license": "GPL-3.0",
   "type": "module",
   "main": "./main.js",

package/types/GenericTable.d.ts

@@ -107,6 +107,8 @@ export type TableLayoutProps<T> = {
     /**
      * the elevation level of the table, used to set the shadow of the table
      * @default 1
+     *
+     * @deprecated Wrap the table in an <Elevation> component to use elevations shadows
      */
     tableElevationLevel?: number;
     /**
@@ -122,6 +124,36 @@ export type TableLayoutProps<T> = {
      * Props forwarded to <OfflineView /> when offline.
      */
     offlineViewProps?: Partial<OfflineViewProps>;
+    /**
+     * Specify which columns should be resizable by the user.
+     * @default false
+     */
+    resizableColumns?: (keyof T)[];
+    /**
+     * Enables sticky (pinned) first and/or last columns via CSS, using the Element column-level `fixed` flag.
+     * @default undefined (both off)
+     * @example stickyColumns={{ first: true, last: true }}
+     */
+    stickyColumns?: {
+        first?: boolean;
+        last?: boolean;
+    };
+    /**
+     * Determines the max-height of the table. Enables scrolling for the tables content if there isnt enough space.
+     * @default undefined
+     */
+    tableMaxHeight?: number;
+    /**
+     * Renders the table with no visible borders.
+     * @default false
+     */
+    noBorder?: boolean;
+    /**
+     * Indicates whether the option to select the number of rows per page should be disabled in a paginated table.
+     *
+     * @remarks Used for example when theres issues with overflowing due to the dropdown
+     */
+    disableRowsPerPageSelection?: boolean;
 };
 /**
  * Props for the CellTemplate component {@link CellTemplate}
@@ -177,18 +209,138 @@ export type CellTemplate<T> = {
  * ```
  */
 export type GenericColumn<T> = {
-    id: keyof T;
-    header: string;
+    /**
+     * Column content alignment.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * the field name as defined in the data.
+     */
     accessor: keyof T;
-    cellTemplate?: (props: CellTemplateProps<T>) => JSX.Element;
+    /**
+     * whether this column's value should be used as the title of the card in the card view.
+     */
+    asCardTitle?: boolean;
+    /**
+     * whether this column's value should be used as the subtitle of the card in the card view.
+     */
+    asCardSubtitle?: boolean;
+    /**
+     * Experimental. Assign a background color to a column. Ex: `rgba(0,0,0,0.3)`
+     * @deprecated in favor of cellProps
+     */
+    backgroundColor?: string;
+    /**
+     * Pass custom props directly to each TableCell within the column.
+     */
     cellProps?: {
         id?: string;
         width?: string | number;
     };
-    asCardTitle?: boolean;
-    asCardSubtitle?: boolean;
+    /**
+     * A function that can format the displayed value of a cell.
+     * @example
+     * ```jsx
+     * cellTemplate: (props: CellTemplateProps<GenericElement>) => {
+     *   const {name} = props.row.original;
+     *   return <LabelBadge label={name} />
+     * }
+     * ```
+     */
+    cellTemplate?: (props: CellTemplateProps<T>) => JSX.Element;
+    /**
+     * Used for grouping columns. See grouped columns in the react-table README.
+     */
+    columns?: GenericColumn<T>[];
+    /**
+     * Default sorting for a column on page load.
+     * Note: `id` is required for default sorting to work.
+     */
+    defaultSort?: 'asc' | 'desc';
+    /**
+     * If multiple columns are marked as `defaultSort`, this will set the order in which they will be applied.
+     */
+    defaultSortOrder?: number;
+    /**
+     * Prevents column from being resized.
+     */
+    disableResizing?: boolean;
+    /**
+     * Disable sorting for this column (when column sorting is enabled with the Table `sorting` prop).
+     */
+    disableSortBy?: boolean;
+    /**
+     * Add extra props, if needed.
+     * @example displayConfig: { country: 'en-US', currency: 'USD' }
+     */
+    displayConfig?: Record<string, unknown>;
+    /**
+     * A function that can format the displayed value.
+     * @deprecated see cellTemplate
+     */
+    displayTemplate?: (accessorValue: unknown, row: T, cellId: string) => unknown;
+    /**
+     * The display format to use.
+     */
+    displayType?: 'text' | 'date' | 'time' | 'datetime' | 'number' | 'currency' | 'expander' | 'checkbox' | 'switch' | 'custom';
+    /**
+     * Additional configuration for controls, if needed.
+     * @example editConfig: { options: [{ text: 'A', value: 'a' }] }
+     */
+    editConfig?: Record<string, unknown>;
+    /**
+     * Pin the column to the leading or trailing edge of the table.
+     * Note: Currently only supports one trailing column.
+     */
+    fixed?: 'leading' | 'trailing';
+    /**
+     * The column header content.
+     */
+    header: string;
+    /**
+     * Pass custom props directly to the TableHeaderCell for this column.
+     */
     headerCellProps?: {
         id?: string;
         width?: string | number;
     };
+    /**
+     * A function that can control the header rendering.
+     */
+    headerTemplate?: (value: unknown, rowData: T) => unknown;
+    /**
+     * A custom identifier for the column.
+     * Note: this is required to enable `defaultSort`.
+     */
+    id: keyof T;
+    /**
+     * Overrides the internal sorting direction state.
+     */
+    isSortedDesc?: boolean;
+    /**
+     * A custom click handler.
+     */
+    onClick?: (event: unknown, column: GenericColumn<T>) => void;
+    /**
+     * The initial sort direction for this column will be descending instead of ascending.
+     */
+    sortDescFirst?: boolean;
+    /**
+     * When using custom/controlled sorting `accessor` is not available to use, so we need a custom field
+     * to pass to a custom click handler to let us know what to sort on.
+     */
+    sortField?: string;
+    /**
+     * The actual sort direction will be inverted, but the UI will still display normally.
+     */
+    sortInverted?: boolean;
+    /**
+     * Override the default sort method.
+     */
+    sortType?: 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric' | ((rowA: T, rowB: T, columnId: string, desc: boolean) => number);
+    /**
+     * Specify a fixed width for the column. Specified in pixels - must be an integer.
+     * @example width: 150
+     */
+    width?: number;
 };