@situaction/traq-ui-ste 1.2.35 → 1.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/menu/Menu.d.ts +4 -0
  2. package/dist/components/menu/Menu.js +53 -51
  3. package/package.json +1 -1
package/dist/components/menu/Menu.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface MenuItem {
12
12
  label: string;
13
13
  /** Callback function executed when the item is clicked */
14
14
  onClick: () => void;
15
+ /** Disabled button */
16
+ disabled?: boolean;
15
17
  }
16
18
  /**
17
19
  * Interface for a parameterized menu item that can open a modal or execute a custom action.
@@ -32,6 +34,8 @@ export interface MenuParam {
32
34
  bottom: string;
33
35
  left: string;
34
36
  };
37
+ /** Disabled button */
38
+ disabled?: boolean;
35
39
  }
36
40
  /**
37
41
  * Props for the Menu component, which renders a vertical navigation menu with actions and optional modal parameters.
package/dist/components/menu/Menu.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as n, jsxs as d } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
2
2
  import { useState as c, useRef as M, useEffect as B } from "react";
3
3
  import { Button as $ } from "../button/Button.js";
4
4
  import { IconButton as f } from "../icon-button/IconButton.js";
@@ -10,7 +10,7 @@ import "../carousel/Carousel.js";
10
10
  import "../carousel/FadeCarousel.js";
11
11
  import "../theme/ThemeContext.js";
12
12
  import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css */
13
- 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", e = {
13
+ 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 = {
14
14
  fullHeight: y,
15
15
  fullWidth: O,
16
16
  open: j,
@@ -28,87 +28,89 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
28
28
  flexVerticalBetweenStart: Y,
29
29
  flexHorizontalCenter: Z,
30
30
  flexVerticalBetweenCenter: ee
31
- }, _e = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
32
- const [l, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
31
+ }, _e = ({ menuItems: i = [], menuParams: d = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: r }) => {
32
+ 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);
33
33
  B(() => {
34
- u != null && x(u);
35
- }, [u]);
36
- const v = (o, i) => {
37
- if (o.stopPropagation(), x(i), s) {
38
- const t = s.find((r) => r.id === i);
39
- t == null || t.onClick();
34
+ r != null && x(r);
35
+ }, [r]);
36
+ const v = (e, s) => {
37
+ if (e.stopPropagation(), x(s), i) {
38
+ const n = i.find((a) => a.id === s);
39
+ n == null || n.onClick();
40
40
  }
41
41
  }, S = () => {
42
- g(!l), _(!1);
43
- }, P = (o) => {
44
- var i;
45
- if (a) {
46
- const t = a.find((r) => r.id === o);
47
- if (!t) return;
48
- if (t.content) {
49
- const r = l ? "200px" : "40px";
50
- E(t.content), R({ ...t.position, left: r }), C(!0);
42
+ b(!t), _(!1);
43
+ }, P = (e) => {
44
+ var s;
45
+ if (d) {
46
+ const n = d.find((a) => a.id === e);
47
+ if (!n) return;
48
+ if (n.content) {
49
+ const a = t ? "200px" : "40px";
50
+ E(n.content), R({ ...n.position, left: a }), C(!0);
51
51
  } else
52
- (i = t.onClick) == null || i.call(t);
52
+ (s = n.onClick) == null || s.call(n);
53
53
  }
54
54
  };
55
55
  return B(() => {
56
- h && h(l);
57
- }, [l]), /* @__PURE__ */ n("nav", { ref: w, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${l ? e.open : e.close}`, children: [
58
- /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
59
- /* @__PURE__ */ n(
56
+ h && h(t);
57
+ }, [t]), /* @__PURE__ */ l("nav", { ref: w, children: /* @__PURE__ */ u("div", { className: `${o.flexVerticalBetweenStart} ${o.fullHeight} ${t ? o.open : o.close}`, children: [
58
+ /* @__PURE__ */ u("div", { className: o.fullWidth, children: [
59
+ /* @__PURE__ */ l(
60
60
  "div",
61
61
  {
62
- className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
62
+ className: `${o.flexHorizontalCenter} ${o.pointer} ${o.textEllipsis}`,
63
63
  onClick: () => S(),
64
- children: l ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
65
- p && /* @__PURE__ */ n("img", { className: e.longLogo, src: p, alt: "Logo situaction" }),
66
- /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
67
- ] }) : /* @__PURE__ */ n(
64
+ children: t ? /* @__PURE__ */ u("div", { className: o.fullImg, children: [
65
+ p && /* @__PURE__ */ l("img", { className: o.longLogo, src: p, alt: "Logo situaction" }),
66
+ /* @__PURE__ */ l(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
67
+ ] }) : /* @__PURE__ */ l(
68
68
  "div",
69
69
  {
70
- className: e.closeIcon,
70
+ className: o.closeIcon,
71
71
  onMouseEnter: () => _(!0),
72
72
  onMouseLeave: () => _(!1),
73
- onClick: () => g(!l),
74
- children: H || !m ? /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ n("img", { src: m, alt: "Logo situaction" })
73
+ onClick: () => b(!t),
74
+ 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" })
75
75
  }
76
76
  )
77
77
  }
78
78
  ),
79
- /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => l ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
79
+ /* @__PURE__ */ l("div", { className: o.menuItem, children: i && i.map((e) => t ? /* @__PURE__ */ l("div", { className: `${o.textEllipsis} ${o.menuButton}`, children: /* @__PURE__ */ l(
80
80
  $,
81
81
  {
82
- mode: b === o.id ? "secondary" : "ghost",
83
- label: o.label,
84
- onClick: (i) => v(i, o.id),
85
- childrenLeft: o.icon
82
+ mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
83
+ label: e.label,
84
+ disabled: e.disabled,
85
+ onClick: (s) => v(s, e.id),
86
+ childrenLeft: e.icon
86
87
  }
87
- ) }, `button-${o.id}`) : /* @__PURE__ */ n("div", { className: e.textEllipsis, children: /* @__PURE__ */ n(
88
+ ) }, `button-${e.id}`) : /* @__PURE__ */ l("div", { className: o.textEllipsis, children: /* @__PURE__ */ l(
88
89
  f,
89
90
  {
90
- mode: b === o.id ? "secondary" : "ghost",
91
- children: o.icon,
92
- onClick: (i) => v(i, o.id)
91
+ mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
92
+ children: e.icon,
93
+ disabled: e.disabled,
94
+ onClick: (s) => v(s, e.id)
93
95
  }
94
- ) }, `icon-${o.id}`)) }),
95
- /* @__PURE__ */ n("div", { className: e.line })
96
+ ) }, `icon-${e.id}`)) }),
97
+ /* @__PURE__ */ l("div", { className: o.line })
96
98
  ] }),
97
- /* @__PURE__ */ d("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
98
- a && a.map((o) => /* @__PURE__ */ n(
99
+ /* @__PURE__ */ u("div", { className: `${o.menuParams} ${o.flexVerticalBetweenCenter}`, children: [
100
+ d && d.map((e) => /* @__PURE__ */ l(
99
101
  "div",
100
102
  {
101
- className: `${e.fullWidth} ${e.textEllipsis}`,
102
- onClick: () => P(o.id),
103
- children: l ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n($, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(f, { mode: "ghost", children: o.icon })
103
+ className: `${o.fullWidth} ${o.textEllipsis}`,
104
+ onClick: () => P(e.id),
105
+ 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 })
104
106
  },
105
- `param-icon-${o.id}`
107
+ `param-icon-${e.id}`
106
108
  )),
107
- /* @__PURE__ */ n(
109
+ /* @__PURE__ */ l(
108
110
  W,
109
111
  {
110
112
  ref: V,
111
- className: e.borderRadiusM,
113
+ className: o.borderRadiusM,
112
114
  open: L,
113
115
  onClose: () => C(!1),
114
116
  position: z,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@situaction/traq-ui-ste",
3
- "version": "1.2.35",
3
+ "version": "1.2.36",
4
4
  "description": "library react component Situaction",
5
5
  "main": "dist/main.js",
6
6
  "types": "dist/main.d.ts",