@fluidattacks/design 9.3.3 → 9.4.0

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 (5) hide show
  1. package/dist/components/drawer/index.d.ts +1 -1
  2. package/dist/components/drawer/index.js +128 -95
  3. package/dist/components/drawer/types.d.ts +2 -0
  4. package/dist/components/inputs/fields/combobox/option/index.js +26 -25
  5. package/package.json +2 -2
package/dist/components/drawer/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { IDrawerProps } from './types';
3
- declare const Drawer: ({ _containerId, _portal, actions, children, dismissable, footer, footerMessage, header, id, modalRef, side, size, tabs, title, titleIcon, titleTag, onClose, }: Readonly<PropsWithChildren<IDrawerProps>>) => JSX.Element | null;
3
+ declare const Drawer: ({ _containerId, _portal, actions, children, dismissable, footer, footerMessage, header, id, modalRef, side, size, subtitle, tabs, title, titleIcon, titleTag, onClose, }: Readonly<PropsWithChildren<IDrawerProps>>) => JSX.Element | null;
4
4
  export { Drawer };
5
5
  export type { IDrawerProps } from './types';
package/dist/components/drawer/index.js CHANGED
@@ -1,85 +1,86 @@
1
- import { jsx as e, jsxs as a } from "react/jsx-runtime";
2
- import { useCallback as w, useEffect as I } from "react";
3
- import { createPortal as W } from "react-dom";
4
- import { useTheme as O } from "styled-components";
5
- import { DrawerWrapper as L, DrawerPanel as P, DrawerBody as K } from "./styles.js";
6
- import { Button as q } from "../button/index.js";
1
+ import { jsx as e, jsxs as t } from "react/jsx-runtime";
2
+ import { useCallback as u, useEffect as O } from "react";
3
+ import { createPortal as L } from "react-dom";
4
+ import { useTheme as P } from "styled-components";
5
+ import { DrawerWrapper as K, DrawerPanel as q, DrawerBody as A } from "./styles.js";
6
+ import { Button as F } from "../button/index.js";
7
7
  import { Container as i } from "../container/index.js";
8
- import { Icon as A } from "../icon/index.js";
9
- import { IconButton as x } from "../icon-button/index.js";
10
- import { Tabs as F } from "../tabs/index.js";
8
+ import { Icon as G } from "../icon/index.js";
9
+ import { IconButton as $ } from "../icon-button/index.js";
10
+ import { Tabs as H } from "../tabs/index.js";
11
11
  import "../typography/heading/index.js";
12
12
  import "../typography/span/index.js";
13
- import { Text as G } from "../typography/text/index.js";
13
+ import { Text as k } from "../typography/text/index.js";
14
14
  const re = ({
15
- _containerId: $ = "portals",
16
- _portal: k = !0,
17
- actions: C = void 0,
18
- children: T = void 0,
19
- dismissable: l = !0,
15
+ _containerId: C = "portals",
16
+ _portal: T = !0,
17
+ actions: D = void 0,
18
+ children: S = void 0,
19
+ dismissable: a = !0,
20
20
  footer: m = void 0,
21
21
  footerMessage: h = void 0,
22
- header: b = void 0,
23
- id: p = "drawer-container",
24
- modalRef: n,
25
- side: y = "right",
26
- size: B = "md",
27
- tabs: f = void 0,
28
- title: D,
29
- titleIcon: g = void 0,
30
- titleTag: S = void 0,
31
- onClose: u = void 0
22
+ header: W = void 0,
23
+ id: d = "drawer-container",
24
+ modalRef: l,
25
+ side: f = "right",
26
+ size: z = "md",
27
+ subtitle: y = void 0,
28
+ tabs: g = void 0,
29
+ title: B,
30
+ titleIcon: v = void 0,
31
+ titleTag: I = void 0,
32
+ onClose: w = void 0
32
33
  }) => {
33
- const t = O(), d = w(() => {
34
- n.close(), u?.();
35
- }, [n, u]), j = w(
34
+ const o = P(), p = u(() => {
35
+ l.close(), w?.();
36
+ }, [l, w]), b = u(
36
37
  (r) => {
37
- l && r.target === r.currentTarget && d();
38
+ a && r.target === r.currentTarget && p();
38
39
  },
39
- [l, d]
40
+ [a, p]
40
41
  );
41
- I(() => {
42
- if (!l || !n.isOpen)
42
+ O(() => {
43
+ if (!a || !l.isOpen)
43
44
  return () => {
44
45
  };
45
- const r = (o) => {
46
- o.key === "Escape" && d();
46
+ const r = (n) => {
47
+ n.key === "Escape" && p();
47
48
  };
48
49
  return window.addEventListener("keydown", r), () => {
49
50
  window.removeEventListener("keydown", r);
50
51
  };
51
- }, [l, d, n.isOpen]);
52
- const v = /* @__PURE__ */ e(
53
- L,
52
+ }, [a, p, l.isOpen]);
53
+ const x = /* @__PURE__ */ e(
54
+ K,
54
55
  {
55
- $side: y,
56
- id: `${p}-wrapper`,
57
- onClick: j,
56
+ $side: f,
57
+ id: `${d}-wrapper`,
58
+ onClick: b,
58
59
  role: "presentation",
59
- children: /* @__PURE__ */ a(
60
- P,
60
+ children: /* @__PURE__ */ t(
61
+ q,
61
62
  {
62
- $side: y,
63
- $size: B,
64
- "aria-label": n.name,
63
+ $side: f,
64
+ $size: z,
65
+ "aria-label": l.name,
65
66
  "aria-modal": "true",
66
- "data-testid": p,
67
- id: p,
67
+ "data-testid": d,
68
+ id: d,
68
69
  role: "dialog",
69
70
  children: [
70
- /* @__PURE__ */ a(
71
+ /* @__PURE__ */ t(
71
72
  i,
72
73
  {
73
74
  alignItems: "flex-start",
74
75
  alignSelf: "stretch",
75
- borderBottom: `1px solid ${t.palette.gray[300]}`,
76
+ borderBottom: `1px solid ${o.palette.gray[300]}`,
76
77
  display: "flex",
77
78
  gap: 0.25,
78
79
  justify: "space-between",
79
80
  px: 1.25,
80
81
  py: 1,
81
82
  children: [
82
- /* @__PURE__ */ a(
83
+ /* @__PURE__ */ t(
83
84
  i,
84
85
  {
85
86
  display: "flex",
@@ -87,7 +88,7 @@ const re = ({
87
88
  gap: 0.25,
88
89
  minWidth: "0",
89
90
  children: [
90
- /* @__PURE__ */ a(
91
+ /* @__PURE__ */ t(
91
92
  i,
92
93
  {
93
94
  alignItems: "center",
@@ -95,11 +96,11 @@ const re = ({
95
96
  gap: 0.5,
96
97
  minWidth: "0",
97
98
  children: [
98
- g === void 0 ? void 0 : /* @__PURE__ */ e(
99
+ v === void 0 ? void 0 : /* @__PURE__ */ e(
99
100
  i,
100
101
  {
101
102
  alignItems: "center",
102
- bgColor: t.palette.gray[100],
103
+ bgColor: o.palette.gray[100],
103
104
  borderRadius: "4px",
104
105
  display: "flex",
105
106
  height: "2rem",
@@ -107,71 +108,103 @@ const re = ({
107
108
  minWidth: "2rem",
108
109
  width: "2rem",
109
110
  children: /* @__PURE__ */ e(
110
- A,
111
+ G,
111
112
  {
112
- icon: g,
113
- iconColor: t.palette.gray[700],
113
+ icon: v,
114
+ iconColor: o.palette.gray[700],
114
115
  iconSize: "md",
115
116
  iconType: "fa-solid"
116
117
  }
117
118
  )
118
119
  }
119
120
  ),
120
- /* @__PURE__ */ e(
121
- G,
121
+ /* @__PURE__ */ t(
122
+ i,
122
123
  {
123
- color: t.palette.gray[800],
124
- display: "inline-block",
125
- fontWeight: "bold",
126
- overflow: "hidden",
127
- size: "lg",
128
- textOverflow: "ellipsis",
129
- whiteSpace: "nowrap",
130
- children: D
124
+ display: "flex",
125
+ flexDirection: "column",
126
+ minWidth: "0",
127
+ children: [
128
+ /* @__PURE__ */ t(
129
+ i,
130
+ {
131
+ alignItems: "center",
132
+ display: "flex",
133
+ gap: 0.5,
134
+ minWidth: "0",
135
+ children: [
136
+ /* @__PURE__ */ e(
137
+ k,
138
+ {
139
+ color: o.palette.gray[800],
140
+ display: "inline-block",
141
+ fontWeight: "bold",
142
+ overflow: "hidden",
143
+ size: "lg",
144
+ textOverflow: "ellipsis",
145
+ whiteSpace: "nowrap",
146
+ children: B
147
+ }
148
+ ),
149
+ I
150
+ ]
151
+ }
152
+ ),
153
+ y === void 0 ? void 0 : /* @__PURE__ */ e(
154
+ k,
155
+ {
156
+ color: o.palette.gray[400],
157
+ overflow: "hidden",
158
+ size: "md",
159
+ textOverflow: "ellipsis",
160
+ whiteSpace: "nowrap",
161
+ children: y
162
+ }
163
+ )
164
+ ]
131
165
  }
132
- ),
133
- S
166
+ )
134
167
  ]
135
168
  }
136
169
  ),
137
- b
170
+ W
138
171
  ]
139
172
  }
140
173
  ),
141
- /* @__PURE__ */ a(i, { display: "flex", gap: 0.25, children: [
142
- C?.map(
174
+ /* @__PURE__ */ t(i, { display: "flex", gap: 0.25, children: [
175
+ D?.map(
143
176
  ({
144
177
  disabled: r,
145
- icon: o,
178
+ icon: n,
146
179
  iconColor: s,
147
180
  shadow: c,
148
- tooltip: z,
181
+ tooltip: j,
149
182
  onClick: E
150
183
  }) => /* @__PURE__ */ e(
151
- x,
184
+ $,
152
185
  {
153
186
  disabled: r,
154
- icon: o ?? "paper-plane",
155
- iconColor: s ?? t.palette.gray[400],
187
+ icon: n ?? "paper-plane",
188
+ iconColor: s ?? o.palette.gray[400],
156
189
  iconSize: "sm",
157
190
  iconType: "fa-light",
158
191
  onClick: E,
159
192
  shadow: c,
160
- tooltip: z,
193
+ tooltip: j,
161
194
  variant: "ghost"
162
195
  },
163
- `${p}-${o}`
196
+ `${d}-${n}`
164
197
  )
165
198
  ),
166
- l ? /* @__PURE__ */ e(
167
- x,
199
+ a ? /* @__PURE__ */ e(
200
+ $,
168
201
  {
169
202
  icon: "xmark",
170
- iconColor: t.palette.gray[400],
203
+ iconColor: o.palette.gray[400],
171
204
  iconSize: "sm",
172
205
  iconType: "fa-light",
173
- id: `${p}-close`,
174
- onClick: d,
206
+ id: `${d}-close`,
207
+ onClick: p,
175
208
  variant: "ghost"
176
209
  }
177
210
  ) : void 0
@@ -179,13 +212,13 @@ const re = ({
179
212
  ]
180
213
  }
181
214
  ),
182
- f ? /* @__PURE__ */ e(i, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(F, { items: f }) }) : void 0,
183
- /* @__PURE__ */ e(K, { children: T }),
184
- m || h ? /* @__PURE__ */ a(
215
+ g ? /* @__PURE__ */ e(i, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(H, { items: g }) }) : void 0,
216
+ /* @__PURE__ */ e(A, { children: S }),
217
+ m || h ? /* @__PURE__ */ t(
185
218
  i,
186
219
  {
187
220
  alignSelf: "stretch",
188
- borderTop: `1px solid ${t.palette.gray[300]}`,
221
+ borderTop: `1px solid ${o.palette.gray[300]}`,
189
222
  display: "flex",
190
223
  flexDirection: "column",
191
224
  gap: 0.75,
@@ -200,16 +233,16 @@ const re = ({
200
233
  gap: 0.5,
201
234
  justify: "end",
202
235
  width: "100%",
203
- children: m.map(({ icon: r, text: o, onClick: s }, c) => /* @__PURE__ */ e(
204
- q,
236
+ children: m.map(({ icon: r, text: n, onClick: s }, c) => /* @__PURE__ */ e(
237
+ F,
205
238
  {
206
239
  icon: r,
207
240
  onClick: s,
208
241
  variant: c === 0 ? "primary" : "tertiary",
209
242
  width: "100%",
210
- children: o
243
+ children: n
211
244
  },
212
- `${c}-${o}`
245
+ `${c}-${n}`
213
246
  ))
214
247
  }
215
248
  ) : void 0
@@ -221,10 +254,10 @@ const re = ({
221
254
  )
222
255
  }
223
256
  );
224
- return n.isOpen ? k ? W(
225
- v,
226
- document.getElementById($) ?? document.body
227
- ) : v : null;
257
+ return l.isOpen ? T ? L(
258
+ x,
259
+ document.getElementById(C) ?? document.body
260
+ ) : x : null;
228
261
  };
229
262
  export {
230
263
  re as Drawer
package/dist/components/drawer/types.d.ts CHANGED
@@ -46,6 +46,7 @@ interface IDrawerButtonProps extends Partial<IIconModifiable> {
46
46
  * @property { IUseModal } modalRef - The drawer reference.
47
47
  * @property { TDrawerSide } [side] - Viewport edge the drawer docks to.
48
48
  * @property { TDrawerSize } [size] - The size of the drawer.
49
+ * @property { string } [subtitle] - Text shown under the title, beside the title icon.
49
50
  * @property { ITabProps[] } [tabs] - The tab items.
50
51
  * @property { string } title - The title of the drawer.
51
52
  * @property { IIconModifiable["icon"] } [titleIcon] - Icon shown beside the title.
@@ -64,6 +65,7 @@ interface IDrawerProps {
64
65
  modalRef: IUseModal;
65
66
  side?: TDrawerSide;
66
67
  size?: TDrawerSize;
68
+ subtitle?: string;
67
69
  tabs?: ITabProps[];
68
70
  title: string;
69
71
  titleIcon?: IIconModifiable["icon"];
package/dist/components/inputs/fields/combobox/option/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as l, jsxs as G } from "react/jsx-runtime";
2
- import { useRef as H, useMemo as f, useCallback as k } from "react";
2
+ import { useRef as H, useMemo as k, useCallback as f } from "react";
3
3
  import { useOption as J } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
4
4
  import { useTheme as Q } from "styled-components";
5
5
  import { StyledOption as W } from "../styles.js";
@@ -13,7 +13,7 @@ import "../../../../typography/span/index.js";
13
13
  import { Text as I } from "../../../../typography/text/index.js";
14
14
  import { useClickOutside as V } from "../../../../../hooks/use-click-outside.js";
15
15
  import { openUrl as oo } from "../../../../../utils/open-url.js";
16
- const Co = ({
16
+ const $o = ({
17
17
  allItemKeys: a,
18
18
  containerRef: D,
19
19
  item: o,
@@ -23,52 +23,52 @@ const Co = ({
23
23
  setInputValue: i,
24
24
  setValue: n,
25
25
  state: c,
26
- tag: C,
26
+ tag: $,
27
27
  watch: h
28
28
  }) => {
29
- const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, A = a.filter(
29
+ const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, C = a.filter(
30
30
  (r) => !Array.from(g).includes(r) && r !== "All"
31
- ), { optionProps: F, isSelected: $, isFocused: q, isDisabled: O } = J(
31
+ ), { optionProps: F, isSelected: A, isFocused: q, isDisabled: O } = J(
32
32
  { key: o.key },
33
33
  c,
34
34
  y
35
- ), m = f(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
36
- $ ? "selected" : "",
35
+ ), b = k(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
36
+ A ? "selected" : "",
37
37
  q ? "focused" : "",
38
38
  O ? "disabled" : ""
39
- ].join(" "), b = k(
39
+ ].join(" "), S = f(
40
40
  (r) => {
41
41
  const { allSelected: t, text: p } = X(
42
42
  r,
43
43
  a,
44
44
  g,
45
- m
45
+ b
46
46
  );
47
47
  n?.(`${e}CheckAll`, t ? p : ""), i(p);
48
48
  },
49
- [a, m, g, e, i, n]
50
- ), K = k(
49
+ [a, b, g, e, i, n]
50
+ ), K = f(
51
51
  (r) => {
52
52
  if (r.target.checked) {
53
- const t = [...A].sort();
53
+ const t = [...C].sort();
54
54
  n?.(`${e}Options`, t), n?.(`${e}CheckAll`, r.target.value), i(r.target.value);
55
55
  } else
56
56
  n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), i("");
57
57
  },
58
- [A, e, i, n]
59
- ), M = k(
58
+ [C, e, i, n]
59
+ ), M = f(
60
60
  (r) => {
61
61
  const t = r.target.value, p = j(h?.(`${e}Options`)), T = r.target.checked ? [...p, t] : p.filter((E) => E !== t);
62
- n?.(`${e}Options`, T), b(T);
62
+ n?.(`${e}Options`, T), S(T);
63
63
  },
64
- [e, n, h, b]
65
- ), S = h?.(`${e}Options`), v = f(
66
- () => j(S),
67
- [S]
68
- ), N = f(
64
+ [e, n, h, S]
65
+ ), m = h?.(`${e}Options`), v = k(
66
+ () => j(m),
67
+ [m]
68
+ ), N = k(
69
69
  () => v.includes(o.key.toString()),
70
70
  [v, o.key]
71
- ), x = h?.(`${e}CheckAll`), P = f(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
71
+ ), x = h?.(`${e}CheckAll`), P = k(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
72
72
  u,
73
73
  {
74
74
  checked: P,
@@ -95,7 +95,7 @@ const Co = ({
95
95
  whiteSpace: "nowrap",
96
96
  children: o.rendered
97
97
  }
98
- ), U = k(
98
+ ), U = f(
99
99
  (r) => {
100
100
  r.preventDefault(), i(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
101
101
  c.setOpen(!1);
@@ -111,15 +111,16 @@ const Co = ({
111
111
  ...!s && !d ? F : {},
112
112
  $multiSelection: s,
113
113
  className: B,
114
+ "data-testid": `${e}-option-${o.key}`,
114
115
  ref: y,
115
116
  children: [
116
117
  d ? /* @__PURE__ */ l(Z, { href: d, onClick: U, children: L }) : L,
117
- $ && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
118
- C === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: C, variant: "inactive" })
118
+ A && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
119
+ $ === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: $, variant: "inactive" })
119
120
  ]
120
121
  }
121
122
  );
122
123
  };
123
124
  export {
124
- Co as Option
125
+ $o as Option
125
126
  };
package/package.json CHANGED
@@ -57,7 +57,7 @@
57
57
  "eslint-plugin-react-hooks": "7.1.1",
58
58
  "eslint-plugin-storybook": "10.4.0",
59
59
  "jsdom": "27.4.0",
60
- "next": "16.3.7",
60
+ "next": "16.3.8",
61
61
  "playwright": "1.60.0",
62
62
  "postcss-styled-syntax": "0.7.1",
63
63
  "prettier": "3.9.6",
@@ -135,5 +135,5 @@
135
135
  "./dist/index.js"
136
136
  ],
137
137
  "typings": "./dist/index.d.ts",
138
- "version": "9.3.3"
138
+ "version": "9.4.0"
139
139
  }