@situaction/traq-ui-ste 1.2.40 → 1.2.41

package/dist/components/menu/Menu.d.ts

@@ -55,6 +55,8 @@ export interface MenuProps {
     defaultOpen?: boolean;
     /** ID of the menu item selected by default */
     selectedId?: string;
+    /** Layout mode: 'left' for vertical sidebar (default), 'bottom' for horizontal bottom bar */
+    mode?: 'left' | 'bottom';
 }
 /**
  * Menu component renders a vertical navigation bar with collapsible state,

package/dist/components/menu/Menu.js

@@ -1,125 +1,153 @@
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useState as c, useRef as M, useEffect as B } from "react";
-import { Button as $ } from "../button/Button.js";
-import { IconButton as f } from "../icon-button/IconButton.js";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useState as r, useRef as w, useEffect as H } from "react";
+import { Button as L } from "../button/Button.js";
+import { IconButton as a } from "../icon-button/IconButton.js";
 import "react-dom";
 import "../accordion/Accordion.js";
-import { Icon as N } from "../icon/Icon.js";
-import { Modal as W } from "../modal/Modal.js";
+import { Icon as E } from "../icon/Icon.js";
+import { Modal as R } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
-const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_textEllipsis_11eub_47", G = "_pointer_11eub_52", J = "_fullImg_11eub_55", K = "_menuParams_11eub_61", Q = "_line_11eub_67", T = "_borderRadiusM_11eub_74", U = "_menuItem_11eub_78", X = "_longLogo_11eub_87", Y = "_flexVerticalBetweenStart_11eub_92", Z = "_flexHorizontalCenter_11eub_106", ee = "_flexVerticalBetweenCenter_11eub_121", o = {
-  fullHeight: y,
-  fullWidth: O,
-  open: j,
-  close: D,
-  menuButton: q,
-  closeIcon: A,
-  textEllipsis: F,
-  pointer: G,
-  fullImg: J,
-  menuParams: K,
-  line: Q,
-  borderRadiusM: T,
-  menuItem: U,
-  longLogo: X,
-  flexVerticalBetweenStart: Y,
-  flexHorizontalCenter: Z,
-  flexVerticalBetweenCenter: ee
-}, _e = ({ menuItems: i = [], menuParams: d = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: r }) => {
-  const [t, b] = c(I ?? !1), [g, x] = c(r ?? (i.length > 0 ? i[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
-  B(() => {
-    r != null && x(r);
-  }, [r]);
-  const v = (e, s) => {
-    if (e.stopPropagation(), x(s), i) {
-      const n = i.find((a) => a.id === s);
-      n == null || n.onClick();
+const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21", q = "_close_rmd17_25", A = "_menuButton_rmd17_29", F = "_closeIcon_rmd17_37", G = "_textEllipsis_rmd17_47", J = "_pointer_rmd17_52", K = "_fullImg_rmd17_55", Q = "_menuParams_rmd17_61", T = "_line_rmd17_67", U = "_borderRadiusM_rmd17_74", X = "_menuItem_rmd17_78", Y = "_longLogo_rmd17_87", Z = "_bottomNav_rmd17_92", ee = "_bottomInner_rmd17_101", oe = "_bottomItems_rmd17_109", ne = "_bottomParams_rmd17_117", te = "_flexVerticalBetweenStart_rmd17_126", le = "_flexHorizontalCenter_rmd17_140", se = "_flexVerticalBetweenCenter_rmd17_155", n = {
+  fullHeight: O,
+  fullWidth: j,
+  open: D,
+  close: q,
+  menuButton: A,
+  closeIcon: F,
+  textEllipsis: G,
+  pointer: J,
+  fullImg: K,
+  menuParams: Q,
+  line: T,
+  borderRadiusM: U,
+  menuItem: X,
+  longLogo: Y,
+  bottomNav: Z,
+  bottomInner: ee,
+  bottomItems: oe,
+  bottomParams: ne,
+  flexVerticalBetweenStart: te,
+  flexHorizontalCenter: le,
+  flexVerticalBetweenCenter: se
+}, ge = ({ menuItems: i = [], menuParams: d = [], shortLogo: b, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: f, mode: V = "left" }) => {
+  const [s, C] = r(z ?? !1), [_, x] = r(f ?? (i.length > 0 ? i[0].id : null)), N = w(null), [P, u] = r(!1), [I, h] = r(!1), [M, S] = r(null), [$, W] = r({}), B = w(null);
+  H(() => {
+    f != null && x(f);
+  }, [f]);
+  const p = (e, t) => {
+    if (e.stopPropagation(), x(t), i) {
+      const l = i.find((m) => m.id === t);
+      l == null || l.onClick();
     }
-  }, S = () => {
-    b(!t), _(!1);
-  }, P = (e) => {
-    var s;
+  }, y = () => {
+    C(!s), u(!1);
+  }, k = (e) => {
+    var t;
     if (d) {
-      const n = d.find((a) => a.id === e);
-      if (!n) return;
-      if (n.content) {
-        const a = t ? "200px" : "40px";
-        E(n.content), R({ ...n.position, left: a }), C(!0);
+      const l = d.find((m) => m.id === e);
+      if (!l) return;
+      if (l.content) {
+        const m = s ? "200px" : "40px";
+        S(l.content), W({ ...l.position, left: m }), h(!0);
       } else
-        (s = n.onClick) == null || s.call(n);
+        (t = l.onClick) == null || t.call(l);
     }
   };
-  return B(() => {
-    h && h(t);
-  }, [t]), /* @__PURE__ */ l("nav", { ref: w, children: /* @__PURE__ */ u("div", { className: `${o.flexVerticalBetweenStart} ${o.fullHeight} ${t ? o.open : o.close}`, children: [
-    /* @__PURE__ */ u("div", { className: o.fullWidth, children: [
-      /* @__PURE__ */ l(
+  return H(() => {
+    v && v(s);
+  }, [s]), V === "bottom" ? /* @__PURE__ */ o("nav", { ref: N, className: n.bottomNav, children: /* @__PURE__ */ c("div", { className: n.bottomInner, children: [
+    /* @__PURE__ */ o("div", { className: n.bottomItems, children: i && i.map((e) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+      a,
+      {
+        mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
+        children: e.icon,
+        disabled: e.disabled,
+        onClick: (t) => p(t, e.id)
+      }
+    ) }, `icon-${e.id}`)) }),
+    /* @__PURE__ */ c("div", { className: n.bottomParams, children: [
+      d && d.map((e) => /* @__PURE__ */ o("div", { onClick: () => k(e.id), children: /* @__PURE__ */ o(a, { mode: "ghost", children: e.icon, disabled: e.disabled }) }, `param-icon-${e.id}`)),
+      /* @__PURE__ */ o(
+        R,
+        {
+          ref: B,
+          className: n.borderRadiusM,
+          open: I,
+          onClose: () => h(!1),
+          position: $,
+          children: M
+        }
+      )
+    ] })
+  ] }) }) : /* @__PURE__ */ o("nav", { ref: N, children: /* @__PURE__ */ c("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${s ? n.open : n.close}`, children: [
+    /* @__PURE__ */ c("div", { className: n.fullWidth, children: [
+      /* @__PURE__ */ o(
         "div",
         {
-          className: `${o.flexHorizontalCenter} ${o.pointer} ${o.textEllipsis}`,
-          onClick: () => S(),
-          children: t ? /* @__PURE__ */ u("div", { className: o.fullImg, children: [
-            p && /* @__PURE__ */ l("img", { className: o.longLogo, src: p, alt: "Logo situaction" }),
-            /* @__PURE__ */ l(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ l(
+          className: `${n.flexHorizontalCenter} ${n.pointer} ${n.textEllipsis}`,
+          onClick: () => y(),
+          children: s ? /* @__PURE__ */ c("div", { className: n.fullImg, children: [
+            g && /* @__PURE__ */ o("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
+            /* @__PURE__ */ o(a, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(E, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ o(
             "div",
             {
-              className: o.closeIcon,
-              onMouseEnter: () => _(!0),
-              onMouseLeave: () => _(!1),
-              onClick: () => b(!t),
-              children: H || !m ? /* @__PURE__ */ l(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: m, alt: "Logo situaction" })
+              className: n.closeIcon,
+              onMouseEnter: () => u(!0),
+              onMouseLeave: () => u(!1),
+              onClick: () => C(!s),
+              children: P || !b ? /* @__PURE__ */ o(a, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(E, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ o("img", { src: b, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ l("div", { className: o.menuItem, children: i && i.map((e) => t ? /* @__PURE__ */ l("div", { className: `${o.textEllipsis} ${o.menuButton}`, children: /* @__PURE__ */ l(
-        $,
+      /* @__PURE__ */ o("div", { className: n.menuItem, children: i && i.map((e) => s ? /* @__PURE__ */ o("div", { className: `${n.textEllipsis} ${n.menuButton}`, children: /* @__PURE__ */ o(
+        L,
         {
-          mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
+          mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
           label: e.label,
           disabled: e.disabled,
-          onClick: (s) => v(s, e.id),
+          onClick: (t) => p(t, e.id),
           childrenLeft: e.icon
         }
-      ) }, `button-${e.id}`) : /* @__PURE__ */ l("div", { className: o.textEllipsis, children: /* @__PURE__ */ l(
-        f,
+      ) }, `button-${e.id}`) : /* @__PURE__ */ o("div", { className: n.textEllipsis, children: /* @__PURE__ */ o(
+        a,
         {
-          mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
+          mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
           children: e.icon,
           disabled: e.disabled,
-          onClick: (s) => v(s, e.id)
+          onClick: (t) => p(t, e.id)
         }
       ) }, `icon-${e.id}`)) }),
-      /* @__PURE__ */ l("div", { className: o.line })
+      /* @__PURE__ */ o("div", { className: n.line })
     ] }),
-    /* @__PURE__ */ u("div", { className: `${o.menuParams} ${o.flexVerticalBetweenCenter}`, children: [
-      d && d.map((e) => /* @__PURE__ */ l(
+    /* @__PURE__ */ c("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
+      d && d.map((e) => /* @__PURE__ */ o(
         "div",
         {
-          className: `${o.fullWidth} ${o.textEllipsis}`,
-          onClick: () => P(e.id),
-          children: t ? /* @__PURE__ */ l("div", { className: o.menuButton, children: /* @__PURE__ */ l($, { mode: "ghost", label: e.label, disabled: e.disabled, childrenLeft: e.icon }, e.id) }) : /* @__PURE__ */ l(f, { mode: "ghost", children: e.icon, disabled: e.disabled })
+          className: `${n.fullWidth} ${n.textEllipsis}`,
+          onClick: () => k(e.id),
+          children: s ? /* @__PURE__ */ o("div", { className: n.menuButton, children: /* @__PURE__ */ o(L, { mode: "ghost", label: e.label, disabled: e.disabled, childrenLeft: e.icon }, e.id) }) : /* @__PURE__ */ o(a, { mode: "ghost", children: e.icon, disabled: e.disabled })
         },
         `param-icon-${e.id}`
       )),
-      /* @__PURE__ */ l(
-        W,
+      /* @__PURE__ */ o(
+        R,
         {
-          ref: V,
-          className: o.borderRadiusM,
-          open: L,
-          onClose: () => C(!1),
-          position: z,
-          children: k
+          ref: B,
+          className: n.borderRadiusM,
+          open: I,
+          onClose: () => h(!1),
+          position: $,
+          children: M
         }
       )
     ] })
   ] }) });
 };
 export {
-  _e as Menu
+  ge as Menu
 };

package/dist/styles/Menu.css

@@ -1 +1 @@
-nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav ._fullHeight_11eub_15{height:100%}nav ._fullWidth_11eub_18{width:100%}nav ._open_11eub_21{width:200px;transition:all ease .3s}nav ._close_11eub_25{width:40px;transition:all ease-out .3s}nav ._menuButton_11eub_29{width:100%}nav ._menuButton_11eub_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_11eub_37{height:30px;cursor:pointer;margin:.875rem 0;padding:1px 0}nav ._label_11eub_43{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_11eub_47{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_11eub_52{cursor:pointer}nav ._fullImg_11eub_55{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_11eub_61{gap:.125rem;position:relative;width:100%}._line_11eub_67{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_11eub_74{border-radius:6px}._menuItem_11eub_78{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._longLogo_11eub_87{transition:transform .25s ease,opacity .25s ease;will-change:transform,opacity}._flexVerticalBetweenStart_11eub_92{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_11eub_99{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontalCenter_11eub_106{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row}._flexVertical_11eub_92{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_11eub_121{display:flex;justify-content:space-between;align-items:center;flex-direction:column}
+nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav ._fullHeight_rmd17_15{height:100%}nav ._fullWidth_rmd17_18{width:100%}nav ._open_rmd17_21{width:200px;transition:all ease .3s}nav ._close_rmd17_25{width:40px;transition:all ease-out .3s}nav ._menuButton_rmd17_29{width:100%}nav ._menuButton_rmd17_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_rmd17_37{height:30px;cursor:pointer;margin:.875rem 0;padding:1px 0}nav ._label_rmd17_43{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_rmd17_47{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_rmd17_52{cursor:pointer}nav ._fullImg_rmd17_55{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_rmd17_61{gap:.125rem;position:relative;width:100%}._line_rmd17_67{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_rmd17_74{border-radius:6px}._menuItem_rmd17_78{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._longLogo_rmd17_87{transition:transform .25s ease,opacity .25s ease;will-change:transform,opacity}._bottomNav_rmd17_92{width:100%;height:fit-content;padding:var(--spacing-xs-3);box-sizing:border-box;z-index:5;flex-shrink:0}._bottomInner_rmd17_101{display:flex;justify-content:space-between;align-items:center;flex-direction:row;width:100%}._bottomItems_rmd17_109{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;gap:var(--spacing-xs-6)}._bottomParams_rmd17_117{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;gap:var(--spacing-xs-6);position:relative}._flexVerticalBetweenStart_rmd17_126{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_rmd17_133{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontalCenter_rmd17_140{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row}._flexVertical_rmd17_126{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_rmd17_155{display:flex;justify-content:space-between;align-items:center;flex-direction:column}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.40",
+  "version": "1.2.41",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",