@genai-fi/base 4.2.0 → 4.2.1

package/dist/assets/SidePanel.css

@@ -1 +1 @@
-._sidePanel_1j2co_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanel_1j2co_1._closed_1j2co_14{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_1j2co_1._opening_1j2co_19{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}._sidePanel_1j2co_1._open_1j2co_19{opacity:1}._resizer_1j2co_28{width:30px;cursor:ew-resize;background-color:transparent;box-sizing:border-box;position:absolute;left:-8px;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;top:0;bottom:0;z-index:2}._noSelect_1j2co_43{-webkit-user-select:none;user-select:none}._resizerBar_1j2co_47{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#ddd;touch-action:none;-webkit-user-select:none;user-select:none}._resizer_1j2co_28:hover ._resizerBar_1j2co_47{background-color:#75a4e288}._resizer_1j2co_28._resizing_1j2co_62 ._resizerBar_1j2co_47{background-color:#75a4e2}._resizerHandle_1j2co_66{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}._resizerHandle_1j2co_66._minimised_1j2co_84{left:-15px;width:20px}._resizerHandle_1j2co_66:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerHandle_1j2co_66: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}._resizer_1j2co_28:hover ._resizerHandle_1j2co_66,._resizer_1j2co_28._resizing_1j2co_62 ._resizerHandle_1j2co_66{border-color:#75a4e2}._expand_1j2co_114{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_1j2co_130{flex-grow:1;overflow:auto;min-width:300px!important;position:relative}._closeButton_1j2co_137{position:absolute;top:.5rem;right:.5rem}
+._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}

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

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

package/dist/components/SidePanel/SidePanel.js

@@ -1,103 +1,109 @@
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { useState as d, useRef as x, useEffect as w } from "react";
-import { C as E } from "../../Close-BGAFHd7i.js";
-import { IconButton as H } from "@mui/material";
-import '../../assets/SidePanel.css';const L = "_sidePanel_1j2co_1", N = "_closed_1j2co_14", P = "_opening_1j2co_19", $ = "_open_1j2co_19", C = "_resizer_1j2co_28", A = "_noSelect_1j2co_43", k = "_resizerBar_1j2co_47", X = "_resizing_1j2co_62", K = "_resizerHandle_1j2co_66", O = "_minimised_1j2co_84", U = "_content_1j2co_130", F = "_closeButton_1j2co_137", e = {
+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-BGAFHd7i.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,
-  closed: N,
-  opening: P,
-  open: $,
-  resizer: C,
-  noSelect: A,
-  resizerBar: k,
-  resizing: X,
-  resizerHandle: K,
-  minimised: O,
-  content: U,
-  closeButton: F
-}, g = 30, v = Math.max(300, Math.floor(window.innerWidth * 0.25)), z = "sidePanelWidth";
-function Q({ children: y, open: n, onClose: p, onOpen: M, position: c = "right" }) {
-  const [m, i] = d(n ? v : 0), u = x(null), [a, j] = d(!1), [_, I] = d(!1), [D, S] = d(!n), W = x(
-    window.sessionStorage.getItem(z) ? Number(window.sessionStorage.getItem(z)) : v
-  ), o = Math.floor(window.innerWidth / 2);
+  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(
+    N,
+    Math.floor(t === "right" ? window.innerWidth / 2 : window.innerHeight / 2)
+  );
   w(() => {
-    if (n)
-      I(!0), S(!1);
+    if (r)
+      H(!0), P(!1);
     else {
-      i(0);
-      const t = setTimeout(() => {
-        S(!0);
+      s(0);
+      const i = setTimeout(() => {
+        P(!0);
       }, 300);
-      return () => clearTimeout(t);
+      return () => clearTimeout(i);
     }
-  }, [n]), w(() => {
-    if (_) {
-      i(W.current || v);
-      const t = setTimeout(() => {
-        I(!1);
+  }, [r]), w(() => {
+    if (f) {
+      s(b.current || v);
+      const i = setTimeout(() => {
+        H(!1);
       }, 300);
-      return () => clearTimeout(t);
+      return () => clearTimeout(i);
     }
-  }, [_]), w(() => {
-    if (a) {
-      let t = function(f) {
-        if (a && u.current) {
-          const T = u.current.getBoundingClientRect(), b = c === "right" ? T.right - f.clientX : f.clientX - T.left, l = Math.max(Math.min(b, o), g);
-          l - b > 10 ? i(0) : (W.current = l, i(l), window.sessionStorage.setItem(z, l.toString())), f.preventDefault();
+  }, [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();
         }
-      }, s = function() {
-        j(!1);
+      }, n = function() {
+        E(!1);
       };
-      return window.addEventListener("pointermove", t, { passive: !1 }), window.addEventListener("pointerup", s), document.body.classList.add(e.noSelect), () => {
-        window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", s), document.body.classList.remove(e.noSelect);
+      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);
       };
     }
-  }, [a, c, o]);
-  const B = m === 0, R = /* @__PURE__ */ h(
+  }, [c, t, o]);
+  const z = l === 0, $ = /* @__PURE__ */ g(
     "div",
     {
-      className: `${e.resizer} ${a ? e.resizing : ""}`,
+      className: `${e.resizer} ${c ? e.resizing : ""} ${t === "right" ? e.resizerVertical : e.resizerHorizontal}`,
       onPointerDown: () => {
-        j(!0), M && M();
+        E(!0), I && I();
       },
       children: [
-        /* @__PURE__ */ r("div", { className: e.resizerBar }),
-        n && /* @__PURE__ */ r(
+        /* @__PURE__ */ a("div", { className: e.resizerBar }),
+        r && /* @__PURE__ */ a(
           "div",
           {
-            className: `${e.resizerHandle} ${B ? e.minimised : ""}`,
+            className: `${e.resizerHandle} ${z ? e.minimised : ""}`,
             role: "separator",
-            "aria-orientation": "vertical",
+            "aria-orientation": t === "right" ? "vertical" : "horizontal",
             "aria-label": "Resize sidebar",
             tabIndex: 0,
-            "aria-valuenow": m,
-            "aria-valuemin": g,
+            "aria-valuenow": l,
+            "aria-valuemin": h,
             "aria-valuemax": o,
-            onKeyDown: (t) => {
-              t.key === "ArrowRight" ? i((s) => Math.min(o, Math.max(0, s - 50))) : t.key === "ArrowLeft" && i((s) => Math.max(g, Math.min(o, s + 50)));
+            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)));
             }
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ g(
     "section",
     {
-      className: `${e.sidePanel} ${n ? e.open : e.closed} ${_ ? e.opening : ""}`,
-      style: { width: B ? 0 : m, visibility: D ? "hidden" : void 0 },
-      ref: u,
-      "aria-hidden": !n,
+      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,
       children: [
-        c === "right" && R,
-        /* @__PURE__ */ h("div", { className: e.content, children: [
-          p && /* @__PURE__ */ r("div", { className: e.closeButton, children: /* @__PURE__ */ r(
-            H,
+        (t === "right" || t === "bottom") && $,
+        /* @__PURE__ */ g("div", { className: e.content, children: [
+          S && /* @__PURE__ */ a("div", { className: e.closeButton, children: /* @__PURE__ */ a(
+            D,
             {
-              onClick: p,
+              onClick: S,
               "data-testid": "sidepanel-close-button",
-              children: /* @__PURE__ */ r(
-                E,
+              children: /* @__PURE__ */ a(
+                A,
                 {
                   fontSize: "medium",
                   htmlColor: "#444"
@@ -105,13 +111,12 @@ function Q({ children: y, open: n, onClose: p, onOpen: M, position: c = "right"
               )
             }
           ) }),
-          y
-        ] }),
-        c === "left" && R
+          R
+        ] })
       ]
     }
   );
 }
 export {
-  Q as default
+  ie as default
 };

package/package.json

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