@situaction/traq-ui-ste 1.2.41 → 1.2.42

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 (2) hide show
  1. package/dist/components/menu/Menu.js +70 -74
  2. package/package.json +1 -1
package/dist/components/menu/Menu.js CHANGED
@@ -1,16 +1,16 @@
1
- import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
- import { useState as r, useRef as w, useEffect as H } from "react";
3
- import { Button as L } from "../button/Button.js";
1
+ import { jsx as e, jsxs as r } from "react/jsx-runtime";
2
+ import { useState as c, useRef as w, useEffect as H } from "react";
3
+ import { Button as E } from "../button/Button.js";
4
4
  import { IconButton as a } from "../icon-button/IconButton.js";
5
5
  import "react-dom";
6
6
  import "../accordion/Accordion.js";
7
- import { Icon as E } from "../icon/Icon.js";
7
+ import { Icon as L } from "../icon/Icon.js";
8
8
  import { Modal as R } from "../modal/Modal.js";
9
9
  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 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 = {
13
+ 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", oo = "_bottomInner_rmd17_101", eo = "_bottomItems_rmd17_109", no = "_bottomParams_rmd17_117", lo = "_flexVerticalBetweenStart_rmd17_126", to = "_flexHorizontalCenter_rmd17_140", so = "_flexVerticalBetweenCenter_rmd17_155", n = {
14
14
  fullHeight: O,
15
15
  fullWidth: j,
16
16
  open: D,
@@ -26,121 +26,117 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
26
26
  menuItem: X,
27
27
  longLogo: Y,
28
28
  bottomNav: Z,
29
- bottomInner: ee,
30
- bottomItems: oe,
31
- bottomParams: ne,
32
- flexVerticalBetweenStart: te,
33
- flexHorizontalCenter: le,
34
- flexVerticalBetweenCenter: se
35
- }, ge = ({ menuItems: i = [], menuParams: d = [], shortLogo: b, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: f, mode: V = "left" }) => {
36
- 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);
29
+ bottomInner: oo,
30
+ bottomItems: eo,
31
+ bottomParams: no,
32
+ flexVerticalBetweenStart: lo,
33
+ flexHorizontalCenter: to,
34
+ flexVerticalBetweenCenter: so
35
+ }, vo = ({ menuItems: s = [], menuParams: d = [], shortLogo: p, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: m, mode: V = "left" }) => {
36
+ const [i, C] = c(z ?? !1), [_, N] = c(m ?? (s.length > 0 ? s[0].id : null)), x = w(null), [P, f] = c(!1), [I, u] = c(!1), [M, S] = c(null), [$, W] = c({}), B = w(null);
37
37
  H(() => {
38
- f != null && x(f);
39
- }, [f]);
40
- const p = (e, t) => {
41
- if (e.stopPropagation(), x(t), i) {
42
- const l = i.find((m) => m.id === t);
43
- l == null || l.onClick();
38
+ m != null && N(m);
39
+ }, [m]);
40
+ const h = (o, l) => {
41
+ if (o.stopPropagation(), N(l), s) {
42
+ const t = s.find((b) => b.id === l);
43
+ t == null || t.onClick();
44
44
  }
45
45
  }, y = () => {
46
- C(!s), u(!1);
47
- }, k = (e) => {
48
- var t;
46
+ C(!i), f(!1);
47
+ }, k = (o) => {
48
+ var l;
49
49
  if (d) {
50
- const l = d.find((m) => m.id === e);
51
- if (!l) return;
52
- if (l.content) {
53
- const m = s ? "200px" : "40px";
54
- S(l.content), W({ ...l.position, left: m }), h(!0);
55
- } else
56
- (t = l.onClick) == null || t.call(l);
50
+ const t = d.find((b) => b.id === o);
51
+ if (!t) return;
52
+ t.content ? (S(t.content), W(t.position), u(!0)) : (l = t.onClick) == null || l.call(t);
57
53
  }
58
54
  };
59
55
  return H(() => {
60
- v && v(s);
61
- }, [s]), V === "bottom" ? /* @__PURE__ */ o("nav", { ref: N, className: n.bottomNav, children: /* @__PURE__ */ c("div", { className: n.bottomInner, children: [
62
- /* @__PURE__ */ o("div", { className: n.bottomItems, children: i && i.map((e) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
56
+ v && v(i);
57
+ }, [i]), V === "bottom" ? /* @__PURE__ */ e("nav", { ref: x, className: n.bottomNav, children: /* @__PURE__ */ r("div", { className: n.bottomInner, children: [
58
+ /* @__PURE__ */ e("div", { className: n.bottomItems, children: s && s.map((o) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
63
59
  a,
64
60
  {
65
- mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
66
- children: e.icon,
67
- disabled: e.disabled,
68
- onClick: (t) => p(t, e.id)
61
+ mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
62
+ children: o.icon,
63
+ disabled: o.disabled,
64
+ onClick: (l) => h(l, o.id)
69
65
  }
70
- ) }, `icon-${e.id}`)) }),
71
- /* @__PURE__ */ c("div", { className: n.bottomParams, children: [
72
- 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}`)),
73
- /* @__PURE__ */ o(
66
+ ) }, `icon-${o.id}`)) }),
67
+ /* @__PURE__ */ r("div", { className: n.bottomParams, children: [
68
+ d && d.map((o) => /* @__PURE__ */ e("div", { onClick: () => k(o.id), children: /* @__PURE__ */ e(a, { mode: "ghost", children: o.icon, disabled: o.disabled }) }, `param-icon-${o.id}`)),
69
+ /* @__PURE__ */ e(
74
70
  R,
75
71
  {
76
72
  ref: B,
77
73
  className: n.borderRadiusM,
78
74
  open: I,
79
- onClose: () => h(!1),
75
+ onClose: () => u(!1),
80
76
  position: $,
81
77
  children: M
82
78
  }
83
79
  )
84
80
  ] })
85
- ] }) }) : /* @__PURE__ */ o("nav", { ref: N, children: /* @__PURE__ */ c("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${s ? n.open : n.close}`, children: [
86
- /* @__PURE__ */ c("div", { className: n.fullWidth, children: [
87
- /* @__PURE__ */ o(
81
+ ] }) }) : /* @__PURE__ */ e("nav", { ref: x, children: /* @__PURE__ */ r("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${i ? n.open : n.close}`, children: [
82
+ /* @__PURE__ */ r("div", { className: n.fullWidth, children: [
83
+ /* @__PURE__ */ e(
88
84
  "div",
89
85
  {
90
86
  className: `${n.flexHorizontalCenter} ${n.pointer} ${n.textEllipsis}`,
91
87
  onClick: () => y(),
92
- children: s ? /* @__PURE__ */ c("div", { className: n.fullImg, children: [
93
- g && /* @__PURE__ */ o("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
94
- /* @__PURE__ */ o(a, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(E, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
95
- ] }) : /* @__PURE__ */ o(
88
+ children: i ? /* @__PURE__ */ r("div", { className: n.fullImg, children: [
89
+ g && /* @__PURE__ */ e("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
90
+ /* @__PURE__ */ e(a, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
91
+ ] }) : /* @__PURE__ */ e(
96
92
  "div",
97
93
  {
98
94
  className: n.closeIcon,
99
- onMouseEnter: () => u(!0),
100
- onMouseLeave: () => u(!1),
101
- onClick: () => C(!s),
102
- 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" })
95
+ onMouseEnter: () => f(!0),
96
+ onMouseLeave: () => f(!1),
97
+ onClick: () => C(!i),
98
+ children: P || !p ? /* @__PURE__ */ e(a, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ e("img", { src: p, alt: "Logo situaction" })
103
99
  }
104
100
  )
105
101
  }
106
102
  ),
107
- /* @__PURE__ */ o("div", { className: n.menuItem, children: i && i.map((e) => s ? /* @__PURE__ */ o("div", { className: `${n.textEllipsis} ${n.menuButton}`, children: /* @__PURE__ */ o(
108
- L,
103
+ /* @__PURE__ */ e("div", { className: n.menuItem, children: s && s.map((o) => i ? /* @__PURE__ */ e("div", { className: `${n.textEllipsis} ${n.menuButton}`, children: /* @__PURE__ */ e(
104
+ E,
109
105
  {
110
- mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
111
- label: e.label,
112
- disabled: e.disabled,
113
- onClick: (t) => p(t, e.id),
114
- childrenLeft: e.icon
106
+ mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
107
+ label: o.label,
108
+ disabled: o.disabled,
109
+ onClick: (l) => h(l, o.id),
110
+ childrenLeft: o.icon
115
111
  }
116
- ) }, `button-${e.id}`) : /* @__PURE__ */ o("div", { className: n.textEllipsis, children: /* @__PURE__ */ o(
112
+ ) }, `button-${o.id}`) : /* @__PURE__ */ e("div", { className: n.textEllipsis, children: /* @__PURE__ */ e(
117
113
  a,
118
114
  {
119
- mode: e.disabled ? "ghost" : _ === e.id ? "secondary" : "ghost",
120
- children: e.icon,
121
- disabled: e.disabled,
122
- onClick: (t) => p(t, e.id)
115
+ mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
116
+ children: o.icon,
117
+ disabled: o.disabled,
118
+ onClick: (l) => h(l, o.id)
123
119
  }
124
- ) }, `icon-${e.id}`)) }),
125
- /* @__PURE__ */ o("div", { className: n.line })
120
+ ) }, `icon-${o.id}`)) }),
121
+ /* @__PURE__ */ e("div", { className: n.line })
126
122
  ] }),
127
- /* @__PURE__ */ c("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
128
- d && d.map((e) => /* @__PURE__ */ o(
123
+ /* @__PURE__ */ r("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
124
+ d && d.map((o) => /* @__PURE__ */ e(
129
125
  "div",
130
126
  {
131
127
  className: `${n.fullWidth} ${n.textEllipsis}`,
132
- onClick: () => k(e.id),
133
- 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 })
128
+ onClick: () => k(o.id),
129
+ children: i ? /* @__PURE__ */ e("div", { className: n.menuButton, children: /* @__PURE__ */ e(E, { mode: "ghost", label: o.label, disabled: o.disabled, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ e(a, { mode: "ghost", children: o.icon, disabled: o.disabled })
134
130
  },
135
- `param-icon-${e.id}`
131
+ `param-icon-${o.id}`
136
132
  )),
137
- /* @__PURE__ */ o(
133
+ /* @__PURE__ */ e(
138
134
  R,
139
135
  {
140
136
  ref: B,
141
137
  className: n.borderRadiusM,
142
138
  open: I,
143
- onClose: () => h(!1),
139
+ onClose: () => u(!1),
144
140
  position: $,
145
141
  children: M
146
142
  }
@@ -149,5 +145,5 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
149
145
  ] }) });
150
146
  };
151
147
  export {
152
- ge as Menu
148
+ vo as Menu
153
149
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@situaction/traq-ui-ste",
3
- "version": "1.2.41",
3
+ "version": "1.2.42",
4
4
  "description": "library react component Situaction",
5
5
  "main": "dist/main.js",
6
6
  "types": "dist/main.d.ts",