@genai-fi/base 4.3.3 → 4.3.4

package/dist/assets/SidePanel.css

@@ -1 +1 @@
-._sidePanel_fhsa8_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanelHorizontal_fhsa8_14{flex-direction:column;width:100%}._sidePanel_fhsa8_1._closed_fhsa8_19{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_fhsa8_1._opening_fhsa8_24{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}._sidePanel_fhsa8_1._open_fhsa8_24{opacity:1}._resizer_fhsa8_33{background-color:transparent;box-sizing:border-box;position:absolute;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}._resizerHorizontal_fhsa8_44{height:30px;width:100%;cursor:ns-resize;left:0;top:-8px;right:0}._resizerVertical_fhsa8_53{width:30px;cursor:ew-resize;left:-8px;top:0;bottom:0}._noSelect_fhsa8_61{-webkit-user-select:none;user-select:none}._resizerBar_fhsa8_65{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#ddd;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_fhsa8_44 ._resizerBar_fhsa8_65{top:7px;left:0;width:100%;height:2px}._resizer_fhsa8_33:hover ._resizerBar_fhsa8_65{background-color:#75a4e288}._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerBar_fhsa8_65{background-color:#75a4e2}._resizerHandle_fhsa8_91{position:absolute;top:50%;left:2px;width:10px;height:60px;transform:translateY(-50%);background-color:#fff;border-radius:3px;border:2px solid #ddd;box-shadow:0 0 4px #ccc;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91{top:2px;left:50%;width:60px;height:10px;transform:translate(-50%)}._resizerHandle_fhsa8_91._minimised_fhsa8_117{left:-15px;width:20px}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91._minimised_fhsa8_117{top:-15px;height:20px;left:50%;width:60px;transform:translate(-50%)}._resizerHandle_fhsa8_91:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerVertical_fhsa8_53 ._resizerHandle_fhsa8_91:before{content:"";display:block;width:4px;height:20px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 2px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 8px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 14px;background-repeat:no-repeat;background-size:4px 4px}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91:before{content:"";display:block;width:20px;height:4px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 2px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 8px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 14px 0;background-repeat:no-repeat;background-size:4px 4px}._resizer_fhsa8_33:hover ._resizerHandle_fhsa8_91,._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerHandle_fhsa8_91{border-color:#75a4e2}._expand_fhsa8_167{position:absolute;top:2rem;right:0;height:40px;width:30px;background-color:#fff;border-radius:3px;border:2px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center}._content_fhsa8_183{flex-grow:1;overflow:auto;min-width:300px!important;position:relative}._closeButton_fhsa8_190{position:absolute;top:.5rem;right:.5rem}
+._sidePanel_aqxrv_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanelHorizontal_aqxrv_14{flex-direction:column;width:100%}._sidePanel_aqxrv_1._closed_aqxrv_19{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_aqxrv_1._opening_aqxrv_27{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}@media (prefers-reduced-motion: reduce){._sidePanel_aqxrv_1,._sidePanel_aqxrv_1._closed_aqxrv_19,._sidePanel_aqxrv_1._opening_aqxrv_27{transition:none}}._sidePanel_aqxrv_1._open_aqxrv_27{opacity:1}._resizer_aqxrv_47{background-color:transparent;box-sizing:border-box;position:absolute;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}._resizerHorizontal_aqxrv_58{height:30px;width:100%;cursor:ns-resize;left:0;top:-8px;right:0}._resizerVertical_aqxrv_67{width:30px;cursor:ew-resize;left:-8px;top:0;bottom:0}._noSelect_aqxrv_75{-webkit-user-select:none;user-select:none}._resizerBar_aqxrv_79{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#bbb;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_aqxrv_58 ._resizerBar_aqxrv_79{top:7px;left:0;width:100%;height:2px}._resizer_aqxrv_47:hover ._resizerBar_aqxrv_79{background-color:#75a4e288}._resizer_aqxrv_47._resizing_aqxrv_101 ._resizerBar_aqxrv_79{background-color:#75a4e2}._resizerHandle_aqxrv_105{position:absolute;top:50%;left:2px;width:10px;height:60px;transform:translateY(-50%);background-color:#fff;border-radius:3px;border:2px solid #bbb;box-shadow:0 0 4px #ccc;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105{top:2px;left:50%;width:60px;height:10px;transform:translate(-50%)}._resizerHandle_aqxrv_105._minimised_aqxrv_131{left:-15px;width:20px}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105._minimised_aqxrv_131{top:-15px;height:20px;left:50%;width:60px;transform:translate(-50%)}._resizerHandle_aqxrv_105:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerVertical_aqxrv_67 ._resizerHandle_aqxrv_105:before{content:"";display:block;width:4px;height:20px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 2px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 8px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 14px;background-repeat:no-repeat;background-size:4px 4px}._resizerHorizontal_aqxrv_58 ._resizerHandle_aqxrv_105:before{content:"";display:block;width:20px;height:4px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 2px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 8px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 14px 0;background-repeat:no-repeat;background-size:4px 4px}._resizer_aqxrv_47:hover ._resizerHandle_aqxrv_105,._resizer_aqxrv_47._resizing_aqxrv_101 ._resizerHandle_aqxrv_105{border-color:#75a4e2}._expand_aqxrv_183{position:absolute;top:2rem;right:0;height:40px;width:30px;background-color:#fff;border-radius:3px;border:2px solid #aaa;cursor:pointer;display:flex;align-items:center;justify-content:center}._content_aqxrv_199{flex-grow:1;overflow:auto;min-width:300px!important}._closeButton_aqxrv_206{position:sticky;top:.5rem;margin-left:auto;width:min-content;z-index:100}

package/dist/components/SidePanel/SidePanel.d.ts

@@ -4,6 +4,7 @@ interface Props extends PropsWithChildren {
     onClose?: () => void;
     onOpen?: () => void;
     position?: 'right' | 'bottom';
+    closeLabel?: string;
 }
-export default function SidePanel({ children, open, onClose, onOpen, position }: Props): import("react/jsx-runtime").JSX.Element;
+export default function SidePanel({ children, open, onClose, onOpen, closeLabel, position }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SidePanel/SidePanel.js

@@ -1,109 +1,126 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useState as m, useRef as B, useEffect as w } from "react";
-import { C as A } from "../../Close-Cv_QwhIN.js";
-import { IconButton as D } from "@mui/material";
-import '../../assets/SidePanel.css';const L = "_sidePanel_fhsa8_1", T = "_sidePanelHorizontal_fhsa8_14", C = "_closed_fhsa8_19", k = "_opening_fhsa8_24", V = "_open_fhsa8_24", W = "_resizer_fhsa8_33", Z = "_resizerHorizontal_fhsa8_44", U = "_resizerVertical_fhsa8_53", X = "_noSelect_fhsa8_61", j = "_resizerBar_fhsa8_65", K = "_resizing_fhsa8_87", O = "_resizerHandle_fhsa8_91", Y = "_minimised_fhsa8_117", F = "_content_fhsa8_183", G = "_closeButton_fhsa8_190", e = {
-  sidePanel: L,
-  sidePanelHorizontal: T,
-  closed: C,
-  opening: k,
-  open: V,
-  resizer: W,
-  resizerHorizontal: Z,
-  resizerVertical: U,
-  noSelect: X,
-  resizerBar: j,
-  resizing: K,
-  resizerHandle: O,
-  minimised: Y,
-  content: F,
-  closeButton: G
-}, h = 30, N = 300, v = Math.max(N, Math.floor(window.innerWidth * 0.25)), M = "sidePanelWidth";
-function ie({ children: R, open: r, onClose: S, onOpen: I, position: t = "right" }) {
-  const [l, s] = m(r ? v : 0), _ = B(null), [c, E] = m(!1), [f, H] = m(!1), [p, P] = m(!r), b = B(
-    window.sessionStorage.getItem(M) ? Number(window.sessionStorage.getItem(M)) : v
-  ), o = Math.max(
+import { jsxs as M, jsx as m } from "react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as I } from "react";
+import { C as L } from "../../Close-Cv_QwhIN.js";
+import { IconButton as T } from "@mui/material";
+import '../../assets/SidePanel.css';const k = "_sidePanel_aqxrv_1", V = "_sidePanelHorizontal_aqxrv_14", W = "_closed_aqxrv_19", Z = "_opening_aqxrv_27", C = "_open_aqxrv_27", K = "_resizer_aqxrv_47", U = "_resizerHorizontal_aqxrv_58", X = "_resizerVertical_aqxrv_67", j = "_noSelect_aqxrv_75", F = "_resizerBar_aqxrv_79", O = "_resizing_aqxrv_101", Y = "_resizerHandle_aqxrv_105", G = "_minimised_aqxrv_131", J = "_content_aqxrv_199", Q = "_closeButton_aqxrv_206", t = {
+  sidePanel: k,
+  sidePanelHorizontal: V,
+  closed: W,
+  opening: Z,
+  open: C,
+  resizer: K,
+  resizerHorizontal: U,
+  resizerVertical: X,
+  noSelect: j,
+  resizerBar: F,
+  resizing: O,
+  resizerHandle: Y,
+  minimised: G,
+  content: J,
+  closeButton: Q
+}, p = 30, N = 300, E = Math.max(N, Math.floor(window.innerWidth * 0.25)), c = "sidePanelWidth";
+function re({ children: D, open: o, onClose: d, onOpen: q, closeLabel: $, position: i = "right" }) {
+  const [u, s] = h(o ? E : 0), w = v(null), [_, H] = h(!1), [g, P] = h(!1), [b, y] = h(!o), S = v(null), z = v(null), l = v(
+    window.sessionStorage.getItem(c) ? Number(window.sessionStorage.getItem(c)) : E
+  ), a = Math.max(
     N,
-    Math.floor(t === "right" ? window.innerWidth / 2 : window.innerHeight / 2)
+    Math.floor(i === "right" ? window.innerWidth * 0.9 : window.innerHeight * 0.9)
   );
-  w(() => {
-    if (r)
-      H(!0), P(!1);
+  I(() => {
+    if (o)
+      P(!0), y(!1), z.current = document.activeElement ? document.activeElement : null;
     else {
       s(0);
-      const i = setTimeout(() => {
-        P(!0);
+      const n = setTimeout(() => {
+        y(!0), z.current && document.contains(z.current) && z.current.focus();
       }, 300);
-      return () => clearTimeout(i);
+      return () => clearTimeout(n);
     }
-  }, [r]), w(() => {
-    if (f) {
-      s(b.current || v);
-      const i = setTimeout(() => {
-        H(!1);
+  }, [o]), I(() => {
+    if (g) {
+      S.current && S.current.focus(), s(l.current || E);
+      const n = setTimeout(() => {
+        P(!1);
       }, 300);
-      return () => clearTimeout(i);
+      return () => clearTimeout(n);
     }
-  }, [f]), w(() => {
-    if (c) {
-      let i = function(u) {
-        if (c && _.current) {
-          const x = _.current.getBoundingClientRect(), y = t === "right" ? x.right - u.clientX : x.bottom - u.clientY, d = Math.max(Math.min(y, o), h);
-          d - y > 10 ? s(0) : (b.current = d, s(d), window.sessionStorage.setItem(M, d.toString())), u.preventDefault();
+  }, [g]), I(() => {
+    if (_) {
+      let n = function(e) {
+        if (_ && w.current) {
+          const R = w.current.getBoundingClientRect(), B = i === "right" ? R.right - e.clientX : R.bottom - e.clientY, f = Math.max(Math.min(B, a), p);
+          f - B > 10 ? s(0) : (l.current = f, s(f), window.sessionStorage.setItem(c, f.toString())), e.preventDefault();
         }
-      }, n = function() {
-        E(!1);
+      }, r = function() {
+        H(!1);
       };
-      return window.addEventListener("pointermove", i, { passive: !1 }), window.addEventListener("pointerup", n), document.body.classList.add(e.noSelect), () => {
-        window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", n), document.body.classList.remove(e.noSelect);
+      return window.addEventListener("pointermove", n, { passive: !1 }), window.addEventListener("pointerup", r), document.body.classList.add(t.noSelect), () => {
+        window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", r), document.body.classList.remove(t.noSelect);
       };
     }
-  }, [c, t, o]);
-  const z = l === 0, $ = /* @__PURE__ */ g(
+  }, [_, i, a]);
+  const x = u === 0, A = /* @__PURE__ */ M(
     "div",
     {
-      className: `${e.resizer} ${c ? e.resizing : ""} ${t === "right" ? e.resizerVertical : e.resizerHorizontal}`,
+      className: `${t.resizer} ${_ ? t.resizing : ""} ${i === "right" ? t.resizerVertical : t.resizerHorizontal}`,
       onPointerDown: () => {
-        E(!0), I && I();
+        H(!0), q && q();
       },
       children: [
-        /* @__PURE__ */ a("div", { className: e.resizerBar }),
-        r && /* @__PURE__ */ a(
+        /* @__PURE__ */ m("div", { className: t.resizerBar }),
+        o && /* @__PURE__ */ m(
           "div",
           {
-            className: `${e.resizerHandle} ${z ? e.minimised : ""}`,
+            className: `${t.resizerHandle} ${x ? t.minimised : ""}`,
             role: "separator",
-            "aria-orientation": t === "right" ? "vertical" : "horizontal",
+            "aria-orientation": i === "right" ? "vertical" : "horizontal",
             "aria-label": "Resize sidebar",
             tabIndex: 0,
-            "aria-valuenow": l,
-            "aria-valuemin": h,
-            "aria-valuemax": o,
-            onKeyDown: (i) => {
-              t === "right" ? i.key === "ArrowRight" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowLeft" && s((n) => Math.max(h, Math.min(o, n + 50))) : i.key === "ArrowDown" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowUp" && s((n) => Math.max(h, Math.min(o, n + 50)));
+            "aria-valuenow": u,
+            "aria-valuemin": 0,
+            "aria-valuemax": a,
+            ref: S,
+            onKeyDown: (n) => {
+              i === "right" ? n.key === "ArrowRight" ? s((r) => {
+                const e = Math.min(a, Math.max(0, r - 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowLeft" && s((r) => {
+                const e = Math.max(p, Math.min(a, r + 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowDown" ? s((r) => {
+                const e = Math.min(a, Math.max(0, r - 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              }) : n.key === "ArrowUp" && s((r) => {
+                const e = Math.max(p, Math.min(a, r + 50));
+                return l.current = e, window.sessionStorage.setItem(c, e.toString()), e;
+              });
             }
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ g(
-    "section",
+  return /* @__PURE__ */ M(
+    "aside",
     {
-      className: `${e.sidePanel} ${r ? e.open : e.closed} ${f ? e.opening : ""} ${t === "right" ? e.sidePanelVertical : e.sidePanelHorizontal}`,
-      style: t === "right" ? { width: z ? 0 : l, visibility: p ? "hidden" : void 0 } : { height: z ? 0 : l, visibility: p ? "hidden" : void 0 },
-      ref: _,
-      "aria-hidden": !r,
+      className: `${t.sidePanel} ${o ? t.open : t.closed} ${g ? t.opening : ""} ${i === "right" ? t.sidePanelVertical : t.sidePanelHorizontal}`,
+      style: i === "right" ? { width: x ? 0 : u, visibility: b ? "hidden" : void 0 } : { height: x ? 0 : u, visibility: b ? "hidden" : void 0 },
+      ref: w,
+      "aria-hidden": !o,
+      onKeyDownCapture: (n) => {
+        n.key === "Escape" && (n.stopPropagation(), d == null || d());
+      },
       children: [
-        (t === "right" || t === "bottom") && $,
-        /* @__PURE__ */ g("div", { className: e.content, children: [
-          S && /* @__PURE__ */ a("div", { className: e.closeButton, children: /* @__PURE__ */ a(
-            D,
+        (i === "right" || i === "bottom") && A,
+        /* @__PURE__ */ M("div", { className: t.content, children: [
+          d && /* @__PURE__ */ m("div", { className: t.closeButton, children: /* @__PURE__ */ m(
+            T,
             {
-              onClick: S,
+              onClick: d,
               "data-testid": "sidepanel-close-button",
-              children: /* @__PURE__ */ a(
-                A,
+              "aria-label": $ ?? "Close side panel",
+              children: /* @__PURE__ */ m(
+                L,
                 {
                   fontSize: "medium",
                   htmlColor: "#444"
@@ -111,12 +128,12 @@ function ie({ children: R, open: r, onClose: S, onOpen: I, position: t = "right"
               )
             }
           ) }),
-          R
+          D
         ] })
       ]
     }
   );
 }
 export {
-  ie as default
+  re as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genai-fi/base",
-    "version": "4.3.3",
+    "version": "4.3.4",
     "license": "MIT",
     "type": "module",
     "main": "dist/main.js",