@ledgerhq/lumen-ui-react 0.1.54 → 0.1.55

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 (13) hide show
  1. package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts +1 -1
  2. package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  3. package/dist/lib/Components/core/SegmentedControl/SegmentedControl.js +242 -97
  4. package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts +2 -1
  5. package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
  6. package/dist/lib/Components/core/SegmentedControl/types.d.ts +4 -3
  7. package/dist/lib/Components/core/SegmentedControl/types.d.ts.map +1 -1
  8. package/dist/lib/Components/core/SegmentedControl/usePillElementLayoutEffect.js +13 -12
  9. package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts +16 -0
  10. package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts.map +1 -0
  11. package/dist/lib/Components/core/SegmentedControl/useScrollArrows.js +51 -0
  12. package/dist/package.json +3 -3
  13. package/package.json +1 -1
package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { SegmentedControlButtonProps, SegmentedControlProps, SegmentedControlValue } from './types';
3
- export declare function SegmentedControlButton<T extends SegmentedControlValue = SegmentedControlValue>({ value, children, icon: Icon, trailingContent, onClick, className, ...props }: SegmentedControlButtonProps<T>): import("react/jsx-runtime").JSX.Element;
3
+ export declare function SegmentedControlButton<T extends SegmentedControlValue = SegmentedControlValue>({ value, children, icon: Icon, trailingContent, onClick, className, disabled, ...props }: SegmentedControlButtonProps<T>): import("react/jsx-runtime").JSX.Element;
4
4
  export declare function SegmentedControl<T extends SegmentedControlValue = SegmentedControlValue>({ selectedValue, onSelectedChange, children, className, disabled: disabledProp, appearance, tabLayout, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
5
5
  export declare function createSegmentedControl<T extends SegmentedControlValue = never>(): {
6
6
  SegmentedControl: (props: SegmentedControlProps<T>) => ReactElement;
package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAwDjB,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,eAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAgChC;AAED,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,UAAyB,EACzB,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAoD1B;AAED,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,KAAK,KACpC;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IACpE,sBAAsB,EAAE,CACtB,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAClC,YAAY,CAAC;CACnB,CAEA"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AA8PjB,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,eAAe,EACf,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAuChC;AAED,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,UAAyB,EACzB,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAqC1B;AAED,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,KAAK,KACpC;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IACpE,sBAAsB,EAAE,CACtB,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAClC,YAAY,CAAC;CACnB,CAEA"}
package/dist/lib/Components/core/SegmentedControl/SegmentedControl.js CHANGED
@@ -1,23 +1,22 @@
1
- import { jsx as a, jsxs as x } from "react/jsx-runtime";
2
- import { cn as g, useDisabledContext as v } from "../../../../libs/utils-shared/dist/index.js";
3
- import { cva as b } from "class-variance-authority";
4
- import { useRef as C } from "react";
5
- import { useSegmentedControlContext as y, SegmentedControlContextProvider as S } from "./SegmentedControlContext.js";
6
- import { useSegmentedControlSelectedIndex as w, usePillElementLayoutEffect as N } from "./usePillElementLayoutEffect.js";
7
- const p = {
8
- root: b("relative flex flex-row items-center rounded-sm", {
1
+ import { jsx as o, jsxs as b } from "react/jsx-runtime";
2
+ import { cn as h, useDisabledContext as y } from "../../../../libs/utils-shared/dist/index.js";
3
+ import { cva as m } from "class-variance-authority";
4
+ import { useMemo as w, useRef as v } from "react";
5
+ import { useSegmentedControlContext as k, SegmentedControlContextProvider as N } from "./SegmentedControlContext.js";
6
+ import { useSegmentedControlSelectedIndex as R, usePillElementLayoutEffect as I } from "./usePillElementLayoutEffect.js";
7
+ import { useScrollArrows as j, useScrollSelectedIntoView as z } from "./useScrollArrows.js";
8
+ import { ChevronLeft as A } from "../../symbols/icons/ChevronLeft.js";
9
+ import { ChevronRight as L } from "../../symbols/icons/ChevronRight.js";
10
+ const f = {
11
+ root: m("relative flex-row items-center rounded-sm", {
9
12
  variants: {
10
- appearance: {
11
- background: "bg-surface",
12
- "no-background": "bg-transparent"
13
- },
14
13
  tabLayout: {
15
14
  fit: "inline-flex",
16
- fixed: "w-full"
15
+ fixed: "flex w-full"
17
16
  }
18
17
  }
19
18
  }),
20
- pill: b("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
19
+ pill: m("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
21
20
  variants: {
22
21
  disabled: {
23
22
  true: "bg-base-transparent-pressed",
@@ -29,8 +28,9 @@ const p = {
29
28
  }
30
29
  }
31
30
  }),
32
- item: b(
33
- "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
31
+ item: m(
32
+ // The focus ring is inset because the scroll container clips anything drawn outside the box.
33
+ "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
34
34
  {
35
35
  variants: {
36
36
  selected: {
@@ -51,112 +51,257 @@ const p = {
51
51
  }
52
52
  ]
53
53
  }
54
+ ),
55
+ scrollArea: m("relative rounded-sm", {
56
+ variants: {
57
+ appearance: {
58
+ background: "bg-surface",
59
+ "no-background": "bg-transparent"
60
+ },
61
+ tabLayout: {
62
+ // Fit lets the segments size themselves, so the area must not stretch.
63
+ fit: "",
64
+ fixed: "w-full"
65
+ }
66
+ }
67
+ }),
68
+ arrow: m(
69
+ "absolute inset-y-0 z-20 flex cursor-pointer items-center justify-center rounded-sm py-8 text-muted transition-opacity duration-200 hover:text-muted-hover",
70
+ {
71
+ variants: {
72
+ visible: {
73
+ true: "opacity-100",
74
+ false: "pointer-events-none opacity-0"
75
+ },
76
+ side: {
77
+ left: "left-0 pr-16 pl-8",
78
+ right: "right-0 pr-8 pl-16"
79
+ }
80
+ }
81
+ }
54
82
  )
55
83
  };
56
- function k({
57
- value: s,
58
- children: i,
84
+ function B(e, t) {
85
+ return `linear-gradient(to right, ${e ? "transparent 0px, transparent 40px, black 72px" : "black 0px"}, ${t ? "black calc(100% - 72px), transparent calc(100% - 40px), transparent 100%" : "black 100%"})`;
86
+ }
87
+ function x({
88
+ side: e,
59
89
  icon: t,
60
- trailingContent: l,
61
- onClick: d,
62
- className: c,
63
- ...r
90
+ label: r,
91
+ visible: n,
92
+ onClick: a
64
93
  }) {
65
- const { selectedValue: u, onSelectedChange: o, disabled: e, tabLayout: m } = y(), n = u === s;
66
- return /* @__PURE__ */ a(
94
+ return /* @__PURE__ */ o(
95
+ "button",
96
+ {
97
+ type: "button",
98
+ "aria-label": r,
99
+ "aria-hidden": !n,
100
+ tabIndex: -1,
101
+ disabled: !n,
102
+ onClick: a,
103
+ className: f.arrow({ visible: n, side: e }),
104
+ children: /* @__PURE__ */ o(t, { size: 20 })
105
+ }
106
+ );
107
+ }
108
+ function D({
109
+ appearance: e,
110
+ tabLayout: t,
111
+ className: r,
112
+ selectedIndex: n,
113
+ children: a,
114
+ ...d
115
+ }) {
116
+ const l = v(null), { canScrollLeft: c, canScrollRight: s, scrollBy: u } = j(l);
117
+ z(l, n);
118
+ const i = c || s ? B(c, s) : void 0;
119
+ return /* @__PURE__ */ b(
120
+ "div",
121
+ {
122
+ ...d,
123
+ className: h(
124
+ f.scrollArea({ appearance: e, tabLayout: t }),
125
+ r
126
+ ),
127
+ children: [
128
+ /* @__PURE__ */ o(
129
+ "div",
130
+ {
131
+ ref: l,
132
+ className: "scrollbar-none overflow-x-auto",
133
+ style: i ? { maskImage: i, WebkitMaskImage: i } : void 0,
134
+ children: a
135
+ }
136
+ ),
137
+ /* @__PURE__ */ o(
138
+ x,
139
+ {
140
+ side: "left",
141
+ icon: A,
142
+ label: "Scroll left",
143
+ visible: c,
144
+ onClick: () => u("left")
145
+ }
146
+ ),
147
+ /* @__PURE__ */ o(
148
+ x,
149
+ {
150
+ side: "right",
151
+ icon: L,
152
+ label: "Scroll right",
153
+ visible: s,
154
+ onClick: () => u("right")
155
+ }
156
+ )
157
+ ]
158
+ }
159
+ );
160
+ }
161
+ function M({
162
+ layout: e,
163
+ isReady: t,
164
+ disabled: r
165
+ }) {
166
+ return /* @__PURE__ */ o(
167
+ "div",
168
+ {
169
+ "aria-hidden": !0,
170
+ className: f.pill({ disabled: r, isReady: t }),
171
+ style: {
172
+ width: e.width,
173
+ height: e.height,
174
+ transform: `translateX(${e.x}px)`
175
+ }
176
+ }
177
+ );
178
+ }
179
+ function P({
180
+ tabLayout: e,
181
+ disabled: t,
182
+ selectedIndex: r,
183
+ children: n
184
+ }) {
185
+ const a = v(null), { pill: d, isReady: l } = I({
186
+ ref: a,
187
+ selectedIndex: r,
188
+ children: n
189
+ });
190
+ return /* @__PURE__ */ b(
191
+ "div",
192
+ {
193
+ ref: a,
194
+ role: "radiogroup",
195
+ "aria-disabled": t,
196
+ className: f.root({ tabLayout: e }),
197
+ children: [
198
+ n,
199
+ /* @__PURE__ */ o(
200
+ M,
201
+ {
202
+ layout: d,
203
+ isReady: l,
204
+ disabled: t
205
+ }
206
+ )
207
+ ]
208
+ }
209
+ );
210
+ }
211
+ function $({
212
+ value: e,
213
+ children: t,
214
+ icon: r,
215
+ trailingContent: n,
216
+ onClick: a,
217
+ className: d,
218
+ disabled: l,
219
+ ...c
220
+ }) {
221
+ const {
222
+ selectedValue: s,
223
+ onSelectedChange: u,
224
+ disabled: i,
225
+ tabLayout: S
226
+ } = k(), g = s === e, p = w(() => !!(l || i), [l, i]);
227
+ return /* @__PURE__ */ o(
67
228
  "button",
68
229
  {
69
230
  type: "button",
70
231
  role: "radio",
71
- "aria-checked": n,
72
- "aria-disabled": e,
73
- disabled: e,
74
- onClick: (f) => {
75
- e || (o(s), d?.(f));
232
+ "aria-checked": g,
233
+ "aria-disabled": p,
234
+ disabled: p,
235
+ onClick: (C) => {
236
+ p || (u(e), a?.(C));
76
237
  },
77
- className: g(
78
- p.item({ selected: n, disabled: !!e }),
79
- m === "fixed" && "min-w-0 flex-1",
80
- c
238
+ className: h(
239
+ f.item({ selected: g, disabled: p }),
240
+ S === "fixed" && "min-w-0 flex-1",
241
+ d
81
242
  ),
82
- ...r,
83
- children: /* @__PURE__ */ x("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
84
- t && /* @__PURE__ */ a(t, { size: 16, className: "shrink-0" }),
85
- /* @__PURE__ */ a("span", { className: "min-w-0 truncate", children: i }),
86
- l
243
+ ...c,
244
+ children: /* @__PURE__ */ b("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
245
+ r && /* @__PURE__ */ o(r, { size: 16, className: "shrink-0" }),
246
+ /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: t }),
247
+ n
87
248
  ] })
88
249
  }
89
250
  );
90
251
  }
91
- function j({
92
- selectedValue: s,
93
- onSelectedChange: i,
94
- children: t,
95
- className: l,
96
- disabled: d,
97
- appearance: c = "background",
98
- tabLayout: r = "fixed",
99
- ...u
252
+ function E({
253
+ selectedValue: e,
254
+ onSelectedChange: t,
255
+ children: r,
256
+ className: n,
257
+ disabled: a,
258
+ appearance: d = "background",
259
+ tabLayout: l = "fixed",
260
+ ...c
100
261
  }) {
101
- const o = v({
262
+ const s = y({
102
263
  consumerName: "SegmentedControl",
103
- mergeWith: { disabled: d }
104
- }), e = C(null), m = w(
105
- s,
106
- t
107
- ), { pill: n, isReady: f } = N({
108
- ref: e,
109
- selectedIndex: m,
110
- children: t
111
- });
112
- return /* @__PURE__ */ a(
113
- S,
264
+ mergeWith: { disabled: a }
265
+ }), u = R(
266
+ e,
267
+ r
268
+ );
269
+ return /* @__PURE__ */ o(
270
+ N,
114
271
  {
115
272
  value: {
116
- selectedValue: s,
117
- onSelectedChange: (h) => i(h),
118
- disabled: o,
119
- tabLayout: r
273
+ selectedValue: e,
274
+ onSelectedChange: (i) => t(i),
275
+ disabled: s,
276
+ tabLayout: l
120
277
  },
121
- children: /* @__PURE__ */ x(
122
- "div",
278
+ children: /* @__PURE__ */ o(
279
+ D,
123
280
  {
124
- ...u,
125
- ref: e,
126
- role: "radiogroup",
127
- "aria-disabled": o,
128
- className: g(
129
- p.root({
130
- appearance: c,
131
- tabLayout: r
132
- }),
133
- l
134
- ),
135
- children: [
136
- t,
137
- /* @__PURE__ */ a(
138
- "div",
139
- {
140
- "aria-hidden": !0,
141
- className: p.pill({ disabled: o, isReady: f }),
142
- style: {
143
- width: n.width,
144
- height: n.height,
145
- transform: `translateX(${n.x}px)`
146
- }
147
- }
148
- )
149
- ]
281
+ ...c,
282
+ appearance: d,
283
+ tabLayout: l,
284
+ className: n,
285
+ selectedIndex: u,
286
+ children: /* @__PURE__ */ o(
287
+ P,
288
+ {
289
+ tabLayout: l,
290
+ disabled: s,
291
+ selectedIndex: u,
292
+ children: r
293
+ }
294
+ )
150
295
  }
151
296
  )
152
297
  }
153
298
  );
154
299
  }
155
- function D() {
156
- return { SegmentedControl: j, SegmentedControlButton: k };
300
+ function O() {
301
+ return { SegmentedControl: E, SegmentedControlButton: $ };
157
302
  }
158
303
  export {
159
- j as SegmentedControl,
160
- k as SegmentedControlButton,
161
- D as createSegmentedControl
304
+ E as SegmentedControl,
305
+ $ as SegmentedControlButton,
306
+ O as createSegmentedControl
162
307
  };
package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import { SegmentedControlProps } from './types';
1
2
  export type SegmentedControlContextValue = {
2
3
  selectedValue: string;
3
4
  onSelectedChange: (value: string) => void;
4
5
  disabled: boolean;
5
- tabLayout: 'fit' | 'fixed';
6
+ tabLayout: NonNullable<SegmentedControlProps['tabLayout']>;
6
7
  };
7
8
  declare const SegmentedControlContextProvider: import('react').FC<{
8
9
  children: import('react').ReactNode;
package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
1
+ {"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;CAC5D,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
package/dist/lib/Components/core/SegmentedControl/types.d.ts CHANGED
@@ -21,11 +21,12 @@ export type SegmentedControlProps<T extends SegmentedControlValue = SegmentedCon
21
21
  appearance?: 'background' | 'no-background';
22
22
  /**
23
23
  * Controls how tab widths are calculated.
24
- * - "fit": each tab sizes to its content
25
- * - "fixed": all tabs share equal width, filling the container
24
+ * - `"fixed"`: all tabs share equal width, filling the container
25
+ * - `"fit"`: each tab sizes to its content; when tabs overflow the container,
26
+ * left/right arrow buttons appear automatically to scroll them into view
26
27
  * @default 'fixed'
27
28
  */
28
- tabLayout?: 'fit' | 'fixed';
29
+ tabLayout?: 'fixed' | 'fit';
29
30
  /**
30
31
  * Segment buttons (SegmentedControlButton).
31
32
  */
package/dist/lib/Components/core/SegmentedControl/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
package/dist/lib/Components/core/SegmentedControl/usePillElementLayoutEffect.js CHANGED
@@ -1,40 +1,41 @@
1
- import { useMemo as h, Children as y, isValidElement as g, useState as u, useLayoutEffect as p, useEffect as v } from "react";
2
- function R({
1
+ import { useMemo as m, Children as h, isValidElement as y, useState as f, useLayoutEffect as p, useEffect as g } from "react";
2
+ function E({
3
3
  ref: n,
4
4
  selectedIndex: e,
5
5
  children: r
6
6
  }) {
7
- const [f, c] = u({ width: 0, height: 0, x: 0 }), [a, l] = u(!1);
7
+ const [u, c] = f({ width: 0, height: 0, x: 0 }), [a, l] = f(!1);
8
8
  return p(() => {
9
9
  const t = n.current;
10
- if (!t) return;
10
+ if (!t)
11
+ return;
11
12
  const o = () => {
12
- const { height: d } = t.getBoundingClientRect(), m = Array.from(t.children).slice(0, -1), i = e >= 0 ? m[e] : void 0;
13
+ const d = Array.from(t.children).slice(0, -1), i = e >= 0 ? d[e] : void 0;
13
14
  c({
14
15
  width: i?.offsetWidth ?? 0,
15
- height: d,
16
+ height: t.offsetHeight,
16
17
  x: i?.offsetLeft ?? 0
17
18
  });
18
19
  };
19
20
  if (o(), typeof ResizeObserver > "u") return;
20
21
  const s = new ResizeObserver(o);
21
22
  return s.observe(t), () => s.disconnect();
22
- }, [r, e, n]), v(() => {
23
+ }, [r, e, n]), g(() => {
23
24
  const t = requestAnimationFrame(() => {
24
25
  l(!0);
25
26
  });
26
27
  return () => cancelAnimationFrame(t);
27
- }, []), { pill: f, isReady: a };
28
+ }, []), { pill: u, isReady: a };
28
29
  }
29
30
  function b(n, e) {
30
- return h(
31
- () => y.toArray(e).findIndex(
32
- (r) => g(r) && r.props.value === n
31
+ return m(
32
+ () => h.toArray(e).findIndex(
33
+ (r) => y(r) && r.props.value === n
33
34
  ),
34
35
  [n, e]
35
36
  );
36
37
  }
37
38
  export {
38
- R as usePillElementLayoutEffect,
39
+ E as usePillElementLayoutEffect,
39
40
  b as useSegmentedControlSelectedIndex
40
41
  };
package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { RefObject } from 'react';
2
+ export type ScrollDirection = 'left' | 'right';
3
+ /**
4
+ * Overflow state and the scroll action backing the left/right arrow buttons.
5
+ */
6
+ export declare function useScrollArrows(scrollRef: RefObject<HTMLDivElement | null>): {
7
+ canScrollLeft: boolean;
8
+ canScrollRight: boolean;
9
+ scrollBy: (direction: ScrollDirection) => void;
10
+ };
11
+ /**
12
+ * Centers the selected segment on mount only, so a later selection change never
13
+ * fights the scroll position the user set by hand.
14
+ */
15
+ export declare function useScrollSelectedIntoView(scrollRef: RefObject<HTMLDivElement | null>, selectedIndex: number): void;
16
+ //# sourceMappingURL=useScrollArrows.d.ts.map
package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollArrows.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/useScrollArrows.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AA8C/C;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG;IAC5E,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAmBA;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,aAAa,EAAE,MAAM,GACpB,IAAI,CAmBN"}
package/dist/lib/Components/core/SegmentedControl/useScrollArrows.js ADDED
@@ -0,0 +1,51 @@
1
+ import { useCallback as u, useLayoutEffect as f, useState as i } from "react";
2
+ function a(n) {
3
+ const [o, r] = i(!1), [s, c] = i(!1), e = u(() => {
4
+ const t = n.current;
5
+ t && (r(t.scrollLeft > 0), c(t.scrollLeft + t.clientWidth < t.scrollWidth - 1));
6
+ }, [n]);
7
+ return f(() => {
8
+ const t = n.current;
9
+ if (!t)
10
+ return;
11
+ e(), t.addEventListener("scroll", e, { passive: !0 });
12
+ const l = new ResizeObserver(e);
13
+ return l.observe(t), t.firstElementChild instanceof HTMLElement && l.observe(t.firstElementChild), () => {
14
+ t.removeEventListener("scroll", e), l.disconnect();
15
+ };
16
+ }, [e, n]), { canScrollLeft: o, canScrollRight: s };
17
+ }
18
+ function S(n) {
19
+ const { canScrollLeft: o, canScrollRight: r } = a(n), s = u(
20
+ (c) => {
21
+ const e = n.current;
22
+ if (!e)
23
+ return;
24
+ const t = e.clientWidth / 2;
25
+ e.scrollBy({
26
+ left: c === "left" ? -t : t,
27
+ behavior: "smooth"
28
+ });
29
+ },
30
+ [n]
31
+ );
32
+ return { canScrollLeft: o, canScrollRight: r, scrollBy: s };
33
+ }
34
+ function d(n, o) {
35
+ f(() => {
36
+ if (o < 0)
37
+ return;
38
+ const r = n.current;
39
+ if (!r)
40
+ return;
41
+ const c = r.querySelectorAll('button[role="radio"]')[o];
42
+ if (c) {
43
+ const { offsetLeft: e, offsetWidth: t } = c, { clientWidth: l } = r;
44
+ r.scrollLeft = e - (l - t) / 2;
45
+ }
46
+ }, []);
47
+ }
48
+ export {
49
+ S as useScrollArrows,
50
+ d as useScrollSelectedIntoView
51
+ };
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-react",
3
- "version": "0.1.53",
3
+ "version": "0.1.54",
4
4
  "license": "Apache-2.0",
5
5
  "sideEffects": false,
6
6
  "keywords": [
@@ -43,7 +43,7 @@
43
43
  ]
44
44
  },
45
45
  "dependencies": {
46
- "@ledgerhq/lumen-utils-shared": "0.1.10",
46
+ "@ledgerhq/lumen-utils-shared": "0.1.11",
47
47
  "i18next": "^23.7.0",
48
48
  "react-i18next": "^14.0.0"
49
49
  },
@@ -56,7 +56,7 @@
56
56
  "@radix-ui/react-tooltip": "^1.2.8",
57
57
  "class-variance-authority": "^0.7.1",
58
58
  "@tanstack/react-table": "^8.21.3",
59
- "@ledgerhq/lumen-design-core": "0.1.25",
59
+ "@ledgerhq/lumen-design-core": "0.1.26",
60
60
  "clsx": "^2.1.1",
61
61
  "react": "^18.0.0 || ^19.0.0",
62
62
  "react-dom": "^18.0.0 || ^19.0.0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-react",
3
- "version": "0.1.54",
3
+ "version": "0.1.55",
4
4
  "license": "Apache-2.0",
5
5
  "sideEffects": false,
6
6
  "keywords": [