@phillips/seldon 1.249.0 → 1.250.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.
- package/dist/_virtual/index10.js +2 -2
- package/dist/_virtual/index9.js +2 -2
- package/dist/assets/formatted/Account.js +15 -11
- package/dist/assets/formatted/AccountActive.js +17 -13
- package/dist/assets/formatted/Add.js +18 -14
- package/dist/assets/formatted/AdminCheck.js +19 -15
- package/dist/assets/formatted/AdminChevronLeft.js +17 -13
- package/dist/assets/formatted/AdminChevronRight.js +19 -15
- package/dist/assets/formatted/AdminChevronUp.js +18 -14
- package/dist/assets/formatted/AdminClose.js +20 -16
- package/dist/assets/formatted/AdminFullscreen.js +19 -21
- package/dist/assets/formatted/AdminFullscreenExit.js +19 -15
- package/dist/assets/formatted/AdminGavel.js +22 -18
- package/dist/assets/formatted/AdminHome.js +19 -15
- package/dist/assets/formatted/AdminLiveOnline.js +20 -16
- package/dist/assets/formatted/AdminPencil.js +18 -14
- package/dist/assets/formatted/AdminPerson.js +16 -12
- package/dist/assets/formatted/AdminPlay.js +19 -15
- package/dist/assets/formatted/AdminSearch.js +20 -16
- package/dist/assets/formatted/AdminTelephone.js +17 -13
- package/dist/assets/formatted/AppleAppStoreBadge.js +19 -15
- package/dist/assets/formatted/ArrowDown.js +16 -12
- package/dist/assets/formatted/ArrowLeft.js +16 -12
- package/dist/assets/formatted/ArrowRight.js +17 -13
- package/dist/assets/formatted/ArrowUp.js +18 -14
- package/dist/assets/formatted/Bag.js +18 -14
- package/dist/assets/formatted/Calendar.js +17 -13
- package/dist/assets/formatted/ChevronDown.js +17 -13
- package/dist/assets/formatted/ChevronLeft.js +17 -13
- package/dist/assets/formatted/ChevronRight.js +19 -15
- package/dist/assets/formatted/ChevronUp.js +17 -13
- package/dist/assets/formatted/Clock.js +18 -14
- package/dist/assets/formatted/CloseX.js +14 -10
- package/dist/assets/formatted/ConditionReport.js +19 -15
- package/dist/assets/formatted/Delete.js +20 -16
- package/dist/assets/formatted/Download.js +18 -14
- package/dist/assets/formatted/Edit.js +20 -16
- package/dist/assets/formatted/Email.js +19 -15
- package/dist/assets/formatted/Error.js +20 -16
- package/dist/assets/formatted/ExternalLink.js +16 -12
- package/dist/assets/formatted/Facebook.js +18 -14
- package/dist/assets/formatted/Favorite.js +17 -13
- package/dist/assets/formatted/FavoriteActive.js +17 -15
- package/dist/assets/formatted/Filters.js +19 -15
- package/dist/assets/formatted/Fullscreen.js +17 -13
- package/dist/assets/formatted/FullscreenExit.js +17 -13
- package/dist/assets/formatted/Gavel.js +19 -15
- package/dist/assets/formatted/GavelActive.js +18 -14
- package/dist/assets/formatted/Grid.js +16 -12
- package/dist/assets/formatted/Hide.js +20 -16
- package/dist/assets/formatted/Home.js +17 -13
- package/dist/assets/formatted/HomeActive.js +17 -13
- package/dist/assets/formatted/Icon.js +19 -15
- package/dist/assets/formatted/IconBlueCircle.js +18 -14
- package/dist/assets/formatted/IconGreenCircle.js +17 -13
- package/dist/assets/formatted/IconOrangeCircle.js +18 -14
- package/dist/assets/formatted/IconRedCircle.js +17 -13
- package/dist/assets/formatted/ImageUnavailable.js +23 -112
- package/dist/assets/formatted/Instagram.js +20 -16
- package/dist/assets/formatted/LinkedIn.js +19 -15
- package/dist/assets/formatted/List.js +20 -16
- package/dist/assets/formatted/LiveNow.js +17 -17
- package/dist/assets/formatted/Lock.js +19 -15
- package/dist/assets/formatted/MagnificentSeven.js +21 -17
- package/dist/assets/formatted/Menu.js +17 -13
- package/dist/assets/formatted/Mute.js +22 -18
- package/dist/assets/formatted/Pause.js +16 -12
- package/dist/assets/formatted/PhillipsAppIcon.js +21 -17
- package/dist/assets/formatted/PhillipsLogo.js +17 -13
- package/dist/assets/formatted/Play.js +18 -14
- package/dist/assets/formatted/Red.js +13 -9
- package/dist/assets/formatted/Refresh.js +17 -13
- package/dist/assets/formatted/Search.js +19 -14
- package/dist/assets/formatted/Sell.js +19 -15
- package/dist/assets/formatted/SellActive.js +19 -15
- package/dist/assets/formatted/Share.js +15 -11
- package/dist/assets/formatted/Subtract.js +19 -15
- package/dist/assets/formatted/Success.js +16 -12
- package/dist/assets/formatted/Tooltip.js +21 -17
- package/dist/assets/formatted/TwitterX.js +19 -15
- package/dist/assets/formatted/Upload.js +16 -12
- package/dist/assets/formatted/View.js +15 -11
- package/dist/assets/formatted/VolumeMaximum.js +17 -13
- package/dist/assets/formatted/VolumeMid.js +21 -17
- package/dist/assets/formatted/VolumeMinimum.js +19 -15
- package/dist/assets/formatted/WeChat.js +19 -15
- package/dist/assets/pictograms/formatted/Chat.js +22 -18
- package/dist/assets/pictograms/formatted/CreditCard.js +20 -16
- package/dist/assets/pictograms/formatted/Form.js +19 -15
- package/dist/assets/pictograms/formatted/Live.js +17 -13
- package/dist/assets/pictograms/formatted/MobilePhone.js +18 -14
- package/dist/assets/pictograms/formatted/Notification.js +21 -17
- package/dist/assets/pictograms/formatted/Phone.js +25 -21
- package/dist/assets/pictograms/formatted/Photos.js +21 -17
- package/dist/assets/pictograms/formatted/Search.js +18 -14
- package/dist/assets/pictograms/formatted/Shipping.js +17 -13
- package/dist/assets/pictograms/formatted/Sign.js +16 -12
- package/dist/assets/pictograms/formatted/Submit.js +21 -17
- package/dist/assets/pictograms/formatted/Timer.js +21 -17
- package/dist/assets/pictograms/formatted/Verification.js +22 -18
- package/dist/components/AddToCalendar/AddToCalendar.js +5 -5
- package/dist/components/Carousel/Carousel.js +74 -74
- package/dist/components/Carousel/CarouselArrows.js +25 -23
- package/dist/components/Carousel/CarouselDot.js +1 -1
- package/dist/components/Carousel/CarouselDots.js +27 -25
- package/dist/components/Carousel/CarouselItem.js +16 -16
- package/dist/components/ComboBox/ComboBox.js +48 -44
- package/dist/components/ComboBox/ComboBox.stories.d.ts +10 -0
- package/dist/components/Dropdown/Dropdown.js +3 -3
- package/dist/components/FavoritingTileButton/FavoritingTileButton.js +13 -14
- package/dist/components/IconButton/IconButton.js +16 -15
- package/dist/components/SeldonImage/SeldonImage.stories.d.ts +5 -0
- package/dist/components/Toast/Toast.stories.d.ts +8 -0
- package/dist/components/Video/Video.d.ts +4 -0
- package/dist/components/Video/Video.js +12 -11
- package/dist/node_modules/ics/dist/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/scss/components/Countdown/_countdown.scss +1 -1
- package/dist/scss/pages/_page.scss +4 -4
- package/package.json +10 -5
|
@@ -1,46 +1,47 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { getCommonProps as
|
|
1
|
+
import { jsxs as h, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import l from "../../_virtual/index.js";
|
|
3
|
+
import { forwardRef as u, useCallback as t } from "react";
|
|
4
|
+
import { getCommonProps as p } from "../../utils/index.js";
|
|
5
5
|
import { useCarousel as f } from "./utils.js";
|
|
6
6
|
import a from "../Icon/Icon.js";
|
|
7
|
-
const
|
|
8
|
-
({ className: c, areArrowsAlwaysVisible:
|
|
9
|
-
const { className: s, ...m } =
|
|
7
|
+
const x = u(
|
|
8
|
+
({ className: c, areArrowsAlwaysVisible: o, ...n }, d) => {
|
|
9
|
+
const { className: s, ...m } = p(n, "CarouselArrows"), { api: e } = f(), b = t(() => {
|
|
10
10
|
if (e)
|
|
11
11
|
if (e?.slidesInView().length <= 1)
|
|
12
12
|
e.scrollPrev(!0);
|
|
13
13
|
else {
|
|
14
|
-
const
|
|
15
|
-
e?.scrollTo(Math.max(0,
|
|
14
|
+
const i = e?.slidesInView();
|
|
15
|
+
e?.scrollTo(Math.max(0, i[0] - (i.length ?? 1)));
|
|
16
16
|
}
|
|
17
|
-
}, [e]),
|
|
17
|
+
}, [e]), v = t(() => {
|
|
18
18
|
if (e)
|
|
19
19
|
if (e?.slidesInView().length <= 1)
|
|
20
20
|
e?.scrollNext(!0);
|
|
21
21
|
else {
|
|
22
|
-
const
|
|
23
|
-
e?.scrollTo(
|
|
22
|
+
const w = (e?.slidesInView()).slice(-1)[0] + 1;
|
|
23
|
+
e?.scrollTo(w);
|
|
24
24
|
}
|
|
25
25
|
}, [e]);
|
|
26
|
-
return /* @__PURE__ */
|
|
26
|
+
return /* @__PURE__ */ h(
|
|
27
27
|
"div",
|
|
28
28
|
{
|
|
29
29
|
ref: d,
|
|
30
30
|
"aria-roledescription": "carousel-arrow-navigation",
|
|
31
|
-
className:
|
|
32
|
-
...
|
|
31
|
+
className: l(`${s}`, c),
|
|
32
|
+
...n,
|
|
33
33
|
...m,
|
|
34
34
|
children: [
|
|
35
35
|
/* @__PURE__ */ r(
|
|
36
36
|
"button",
|
|
37
37
|
{
|
|
38
38
|
"data-testid": "prev-arrow",
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
"aria-label": "Previous slide",
|
|
40
|
+
className: l(`${s}-prev-btn`, {
|
|
41
|
+
[`${s}-prev-btn--always-visible`]: o,
|
|
41
42
|
[`${s}-prev-btn--disabled`]: !e?.canScrollPrev()
|
|
42
43
|
}),
|
|
43
|
-
onClick:
|
|
44
|
+
onClick: b,
|
|
44
45
|
children: /* @__PURE__ */ r("div", { className: `${s}-prev-btn__icon`, children: /* @__PURE__ */ r(a, { icon: "ChevronLeft", height: "2rem" }) })
|
|
45
46
|
}
|
|
46
47
|
),
|
|
@@ -48,11 +49,12 @@ const C = p(
|
|
|
48
49
|
"button",
|
|
49
50
|
{
|
|
50
51
|
"data-testid": "next-arrow",
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
"aria-label": "Next slide",
|
|
53
|
+
className: l(`${s}-next-btn`, {
|
|
54
|
+
[`${s}-next-btn--always-visible`]: o,
|
|
53
55
|
[`${s}-next-btn--disabled`]: !e?.canScrollNext()
|
|
54
56
|
}),
|
|
55
|
-
onClick:
|
|
57
|
+
onClick: v,
|
|
56
58
|
children: /* @__PURE__ */ r("div", { className: `${s}-next-btn__icon`, children: /* @__PURE__ */ r(a, { icon: "ChevronRight", height: "2rem" }) })
|
|
57
59
|
}
|
|
58
60
|
)
|
|
@@ -61,7 +63,7 @@ const C = p(
|
|
|
61
63
|
);
|
|
62
64
|
}
|
|
63
65
|
);
|
|
64
|
-
|
|
66
|
+
x.displayName = "CarouselArrows";
|
|
65
67
|
export {
|
|
66
|
-
|
|
68
|
+
x as default
|
|
67
69
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import B from "../../_virtual/index.js";
|
|
3
|
+
import { forwardRef as E, useState as S, useRef as L, useCallback as l, useEffect as M, useMemo as q } from "react";
|
|
4
4
|
import { useCarousel as z } from "./utils.js";
|
|
5
5
|
import { getCommonProps as A } from "../../utils/index.js";
|
|
6
6
|
import { CarouselDot as F } from "./CarouselDot.js";
|
|
7
|
-
const h = 10, C = 12, H = (h + C) / 2, J =
|
|
8
|
-
({ className:
|
|
9
|
-
const { className: c, ...
|
|
10
|
-
Array.from({ length:
|
|
11
|
-
), r = L(null), [$, w] = S([]),
|
|
7
|
+
const h = 10, C = 12, H = (h + C) / 2, J = E(
|
|
8
|
+
({ className: b, maxDots: g = 9, position: V = "inline", numberOfSlides: k = 0, id: I, ...D }, y) => {
|
|
9
|
+
const { className: c, ...R } = A({ id: I, ...D }, "CarouselDots"), { api: t, onSlideChange: a } = z(), [T, G] = S(0), [i, O] = S(
|
|
10
|
+
Array.from({ length: k }, (e, o) => o)
|
|
11
|
+
), r = L(null), [$, w] = S([]), v = l((e) => {
|
|
12
12
|
r.current && r.current.scrollTo?.({
|
|
13
13
|
left: e * (h + C) - r.current.offsetWidth / 2 + H,
|
|
14
14
|
// Center dot in container
|
|
@@ -23,10 +23,10 @@ const h = 10, C = 12, H = (h + C) / 2, J = G(
|
|
|
23
23
|
O(e.scrollSnapList());
|
|
24
24
|
}, []), n = l(
|
|
25
25
|
(e) => {
|
|
26
|
-
|
|
26
|
+
G(e.selectedScrollSnap()), v(e.selectedScrollSnap());
|
|
27
27
|
},
|
|
28
|
-
[
|
|
29
|
-
),
|
|
28
|
+
[v]
|
|
29
|
+
), m = l(
|
|
30
30
|
(e) => {
|
|
31
31
|
a?.(e.selectedScrollSnap());
|
|
32
32
|
},
|
|
@@ -34,45 +34,47 @@ const h = 10, C = 12, H = (h + C) / 2, J = G(
|
|
|
34
34
|
);
|
|
35
35
|
M(() => {
|
|
36
36
|
if (t)
|
|
37
|
-
return f(t), n(t), t.on("reInit", f).on("reInit", n).on("select", n).on("settle",
|
|
38
|
-
t.off("reInit", f).off("reInit", n).off("select", n).off("settle",
|
|
37
|
+
return f(t), n(t), t.on("reInit", f).on("reInit", n).on("select", n).on("settle", m), () => {
|
|
38
|
+
t.off("reInit", f).off("reInit", n).off("select", n).off("settle", m);
|
|
39
39
|
};
|
|
40
|
-
}, [t, f, n,
|
|
40
|
+
}, [t, f, n, m]);
|
|
41
41
|
const s = q(() => $.sort((e, o) => e - o), [$]);
|
|
42
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ u(
|
|
43
43
|
"div",
|
|
44
44
|
{
|
|
45
|
-
ref:
|
|
45
|
+
ref: y,
|
|
46
46
|
role: "group",
|
|
47
47
|
"aria-roledescription": "pagination",
|
|
48
48
|
"aria-label": "pagination",
|
|
49
|
-
className:
|
|
49
|
+
className: B(`${c}`, b, `${c}-${V}`),
|
|
50
50
|
...D,
|
|
51
|
-
...
|
|
52
|
-
children: /* @__PURE__ */
|
|
51
|
+
...R,
|
|
52
|
+
children: /* @__PURE__ */ u("div", { className: `${c}-container`, children: /* @__PURE__ */ u(
|
|
53
53
|
"div",
|
|
54
54
|
{
|
|
55
55
|
style: { "--max-width": `${g * h + (g - 1) * C + 2}px` },
|
|
56
56
|
className: `${c}-container-inner`,
|
|
57
57
|
ref: r,
|
|
58
58
|
children: i.map((e, o) => {
|
|
59
|
-
const
|
|
59
|
+
const N = T === o, d = s.indexOf(o), W = (
|
|
60
60
|
// The dot is out of view
|
|
61
61
|
d === -1 || // The dot must be either among the first two or last two visible dots
|
|
62
62
|
(d <= 1 || d >= s.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
|
|
63
63
|
!(o <= 1 && s.includes(0) && s.includes(1)) && // Don't shrink if we're showing the last two dots and both are visible
|
|
64
64
|
!(o >= i.length - 2 && s.includes(i.length - 1) && s.includes(i.length - 2))
|
|
65
65
|
);
|
|
66
|
-
return /* @__PURE__ */
|
|
66
|
+
return /* @__PURE__ */ u(
|
|
67
67
|
F,
|
|
68
68
|
{
|
|
69
69
|
onClick: () => P(o),
|
|
70
|
-
isSelected:
|
|
70
|
+
isSelected: N,
|
|
71
|
+
"aria-label": `Go to slide ${o + 1}`,
|
|
72
|
+
"aria-current": N ? "true" : void 0,
|
|
71
73
|
scrollableContainerRef: r,
|
|
72
|
-
onInViewChange: (
|
|
73
|
-
w(
|
|
74
|
+
onInViewChange: (_) => {
|
|
75
|
+
w(_ ? (p) => [...p, o] : (p) => p.filter((j) => j !== o));
|
|
74
76
|
},
|
|
75
|
-
variant:
|
|
77
|
+
variant: W ? "sm" : "md"
|
|
76
78
|
},
|
|
77
79
|
`${I}-dot-${o}`
|
|
78
80
|
);
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { getCommonProps as
|
|
5
|
-
import { useCarousel as
|
|
6
|
-
const
|
|
7
|
-
({ element:
|
|
8
|
-
const
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import c from "../../_virtual/index.js";
|
|
3
|
+
import { forwardRef as u } from "react";
|
|
4
|
+
import { getCommonProps as p } from "../../utils/index.js";
|
|
5
|
+
import { useCarousel as C } from "./utils.js";
|
|
6
|
+
const f = u(
|
|
7
|
+
({ element: r, className: t, ...o }, a) => {
|
|
8
|
+
const m = r || "div", l = m === "li", { className: e, ...n } = p(o, "CarouselItem"), { columnGap: s } = C();
|
|
9
|
+
return /* @__PURE__ */ i(
|
|
10
|
+
m,
|
|
11
11
|
{
|
|
12
12
|
ref: a,
|
|
13
|
-
role: o.onClick ? "button" : "group",
|
|
13
|
+
role: l ? void 0 : o.onClick ? "button" : "group",
|
|
14
14
|
"aria-roledescription": "slide",
|
|
15
|
-
className:
|
|
16
|
-
[`${e}--gap-${
|
|
15
|
+
className: c(`${e}`, t, {
|
|
16
|
+
[`${e}--gap-${s}`]: !!s,
|
|
17
17
|
[`${e}--cursor-pointer`]: !!o.onClick
|
|
18
18
|
}),
|
|
19
19
|
...o,
|
|
20
|
-
...
|
|
20
|
+
...n
|
|
21
21
|
}
|
|
22
22
|
);
|
|
23
23
|
}
|
|
24
24
|
);
|
|
25
|
-
|
|
25
|
+
f.displayName = "CarouselItem";
|
|
26
26
|
export {
|
|
27
|
-
|
|
27
|
+
f as default
|
|
28
28
|
};
|
|
@@ -89,22 +89,22 @@ import "../../assets/formatted/WeChat.js";
|
|
|
89
89
|
import "../../assets/formatted/Clock.js";
|
|
90
90
|
import "../../assets/formatted/LiveNow.js";
|
|
91
91
|
import { getCommonProps as Ot, useNormalizedInputProps as kt } from "../../utils/index.js";
|
|
92
|
-
import
|
|
93
|
-
import { ButtonVariants as
|
|
92
|
+
import W from "../IconButton/IconButton.js";
|
|
93
|
+
import { ButtonVariants as X } from "../Button/types.js";
|
|
94
94
|
import { usePrevious as Lt } from "../../utils/usePrevious.js";
|
|
95
95
|
import { TextVariants as Vt } from "../Text/types.js";
|
|
96
96
|
import Dt from "../Text/Text.js";
|
|
97
97
|
const Mt = Nt.forwardRef(function({
|
|
98
98
|
options: n = [],
|
|
99
|
-
className:
|
|
100
|
-
id:
|
|
101
|
-
labelText:
|
|
99
|
+
className: H,
|
|
100
|
+
id: l,
|
|
101
|
+
labelText: S,
|
|
102
102
|
placeholder: J,
|
|
103
103
|
name: k,
|
|
104
104
|
value: p,
|
|
105
105
|
onChange: u,
|
|
106
106
|
onBlur: Q,
|
|
107
|
-
renderOption:
|
|
107
|
+
renderOption: j,
|
|
108
108
|
ariaLabelDropdown: L,
|
|
109
109
|
ariaLabelInput: Y,
|
|
110
110
|
ariaLabelClear: Z,
|
|
@@ -114,15 +114,15 @@ const Mt = Nt.forwardRef(function({
|
|
|
114
114
|
noOptionsMessage: ot = "No Options.",
|
|
115
115
|
invalid: N = !1,
|
|
116
116
|
invalidText: it,
|
|
117
|
-
countOfCharsBeforeDropdown:
|
|
117
|
+
countOfCharsBeforeDropdown: q = 0,
|
|
118
118
|
...at
|
|
119
119
|
}, V) {
|
|
120
|
-
const { className: e, ...lt } = Ot({ id:
|
|
121
|
-
id:
|
|
120
|
+
const { className: e, ...lt } = Ot({ id: l }, "ComboBox"), st = Tt, nt = xt, z = kt({
|
|
121
|
+
id: l,
|
|
122
122
|
invalid: N,
|
|
123
123
|
invalidText: it,
|
|
124
124
|
type: "text"
|
|
125
|
-
}), [f,
|
|
125
|
+
}), [f, G] = B(!1), [mt, ct] = B(""), K = Lt(p), D = g((t) => t.label || t.value, []), [o, b] = B(() => {
|
|
126
126
|
if (p !== void 0) {
|
|
127
127
|
const t = n.find((r) => r.value === p);
|
|
128
128
|
return t ? t.displayValue || D(t) : "";
|
|
@@ -137,37 +137,37 @@ const Mt = Nt.forwardRef(function({
|
|
|
137
137
|
let v = !1;
|
|
138
138
|
return r.filterTerms && r.filterTerms.length > 0 && (v = r.filterTerms.some((dt) => dt.toLowerCase().includes(t))), w || P || A || v;
|
|
139
139
|
});
|
|
140
|
-
}, [o, _, a, m, n]),
|
|
140
|
+
}, [o, _, a, m, n]), s = g(
|
|
141
141
|
(t, r) => {
|
|
142
|
-
const w = (r?.length || o.length) >=
|
|
143
|
-
(!t || t && w) &&
|
|
142
|
+
const w = (r?.length || o.length) >= q;
|
|
143
|
+
(!t || t && w) && G(t), t && a && c.length > 5 && requestAnimationFrame(() => {
|
|
144
144
|
M.current && M.current.scrollIntoView({
|
|
145
145
|
block: "nearest",
|
|
146
146
|
behavior: "auto"
|
|
147
147
|
});
|
|
148
148
|
});
|
|
149
149
|
},
|
|
150
|
-
[
|
|
150
|
+
[q, o.length, a, c.length]
|
|
151
151
|
), I = g(
|
|
152
152
|
(t) => {
|
|
153
153
|
h || ct(t.value);
|
|
154
154
|
const r = t.displayValue || m(t);
|
|
155
|
-
b(r), u && u(t.value, t),
|
|
155
|
+
b(r), u && u(t.value, t), s(!1), $.current = !0, requestAnimationFrame(() => {
|
|
156
156
|
$.current = !1;
|
|
157
157
|
});
|
|
158
158
|
},
|
|
159
|
-
[h, u,
|
|
159
|
+
[h, u, s, m]
|
|
160
160
|
), pt = (t) => {
|
|
161
|
-
|
|
161
|
+
s(!1), $.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), b(""), y.current?.focus(), requestAnimationFrame(() => {
|
|
162
162
|
$.current = !1;
|
|
163
163
|
});
|
|
164
164
|
}, ut = () => {
|
|
165
|
-
|
|
165
|
+
G(!f), y.current?.focus();
|
|
166
166
|
}, ft = (t) => {
|
|
167
|
-
b(t), t !== "" && c.length > 0 &&
|
|
168
|
-
},
|
|
167
|
+
b(t), t !== "" && c.length > 0 && s(!0, t);
|
|
168
|
+
}, U = O(() => {
|
|
169
169
|
if (h) {
|
|
170
|
-
if (p !==
|
|
170
|
+
if (p !== K)
|
|
171
171
|
return a ? _ : o;
|
|
172
172
|
if (a) {
|
|
173
173
|
const t = _;
|
|
@@ -176,10 +176,10 @@ const Mt = Nt.forwardRef(function({
|
|
|
176
176
|
return o;
|
|
177
177
|
}
|
|
178
178
|
return o;
|
|
179
|
-
}, [h, o, p,
|
|
179
|
+
}, [h, o, p, K, a, _]), E = (t) => {
|
|
180
180
|
if (a) {
|
|
181
181
|
const r = _;
|
|
182
|
-
r !==
|
|
182
|
+
r !== U && b(r);
|
|
183
183
|
} else
|
|
184
184
|
b("");
|
|
185
185
|
}, F = g(() => {
|
|
@@ -190,8 +190,8 @@ const Mt = Nt.forwardRef(function({
|
|
|
190
190
|
t.length === 1 && I(t[0]);
|
|
191
191
|
}, [o, n, I, m]);
|
|
192
192
|
return It(C, (t) => {
|
|
193
|
-
t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || C.current?.contains(t.target) || t.target === C.current || (F(), E(),
|
|
194
|
-
}), /* @__PURE__ */ T("div", { ref: V, className: d(e,
|
|
193
|
+
t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || C.current?.contains(t.target) || t.target === C.current || (F(), E(), s(!1));
|
|
194
|
+
}), /* @__PURE__ */ T("div", { ref: V, className: d(e, H), id: l, ...lt, ...at, children: [
|
|
195
195
|
k && /* @__PURE__ */ i(
|
|
196
196
|
"input",
|
|
197
197
|
{
|
|
@@ -210,13 +210,13 @@ const Mt = Nt.forwardRef(function({
|
|
|
210
210
|
{
|
|
211
211
|
element: "label",
|
|
212
212
|
variant: Vt.labelMedium,
|
|
213
|
-
htmlFor: `${
|
|
213
|
+
htmlFor: `${l}-input`,
|
|
214
214
|
className: d(`${e}__label`, {
|
|
215
215
|
[`${e}__label--hidden`]: et,
|
|
216
216
|
[`${e}__label--invalid`]: N
|
|
217
217
|
}),
|
|
218
|
-
"data-testid": `${
|
|
219
|
-
children:
|
|
218
|
+
"data-testid": `${l}-label`,
|
|
219
|
+
children: S
|
|
220
220
|
}
|
|
221
221
|
),
|
|
222
222
|
/* @__PURE__ */ i(
|
|
@@ -225,7 +225,7 @@ const Mt = Nt.forwardRef(function({
|
|
|
225
225
|
loop: !0,
|
|
226
226
|
onKeyDown: (t) => {
|
|
227
227
|
setTimeout(() => {
|
|
228
|
-
t.key === "Escape" &&
|
|
228
|
+
t.key === "Escape" && s(!1);
|
|
229
229
|
}, 0);
|
|
230
230
|
},
|
|
231
231
|
shouldFilter: !1,
|
|
@@ -237,42 +237,45 @@ const Mt = Nt.forwardRef(function({
|
|
|
237
237
|
className: d(`${e}__input-wrapper`, {
|
|
238
238
|
[`${e}__input-wrapper--invalid`]: N
|
|
239
239
|
}),
|
|
240
|
+
role: "combobox",
|
|
241
|
+
"aria-label": S,
|
|
240
242
|
children: [
|
|
241
243
|
/* @__PURE__ */ i(
|
|
242
244
|
yt,
|
|
243
245
|
{
|
|
244
|
-
id: `${
|
|
246
|
+
id: `${l}-input`,
|
|
245
247
|
placeholder: J,
|
|
246
|
-
value:
|
|
248
|
+
value: U,
|
|
247
249
|
onValueChange: ft,
|
|
248
250
|
tabIndex: 0,
|
|
249
251
|
onFocus: () => {
|
|
250
|
-
c.length > 0 && !$.current && !f &&
|
|
252
|
+
c.length > 0 && !$.current && !f && s(!0);
|
|
251
253
|
},
|
|
252
254
|
onClick: (t) => {
|
|
253
|
-
|
|
255
|
+
s(!0), t.preventDefault(), t.currentTarget.focus();
|
|
254
256
|
},
|
|
255
257
|
onKeyDown: (t) => {
|
|
256
|
-
t.key === "Tab" ? (
|
|
258
|
+
t.key === "Tab" ? (s(!1), F(), E()) : t.key === "Enter" && !f ? (u && u(o, null), c.length === 1 && I(c[0])) : t.key === "Escape" ? (s(!1), t.preventDefault(), F(), E()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && c.length > 0 && (s(!0), t.preventDefault());
|
|
257
259
|
},
|
|
258
260
|
onBlur: Q,
|
|
259
261
|
className: d(`${e}__input`, {
|
|
260
262
|
[`${e}__input--invalid`]: N
|
|
261
263
|
}),
|
|
262
264
|
"aria-label": Y,
|
|
263
|
-
"
|
|
265
|
+
"aria-controls": `${l}-content`,
|
|
266
|
+
"data-testid": `${l}-input`,
|
|
264
267
|
ref: y
|
|
265
268
|
}
|
|
266
269
|
),
|
|
267
270
|
o && /* @__PURE__ */ i(
|
|
268
|
-
|
|
271
|
+
W,
|
|
269
272
|
{
|
|
270
273
|
className: `${e}__close-button`,
|
|
271
|
-
"data-testid": `${
|
|
274
|
+
"data-testid": `${l}-clear-button`,
|
|
272
275
|
onClick: pt,
|
|
273
276
|
"aria-label": Z,
|
|
274
277
|
tabIndex: -1,
|
|
275
|
-
variant:
|
|
278
|
+
variant: X.tertiary,
|
|
276
279
|
children: /* @__PURE__ */ i(
|
|
277
280
|
nt,
|
|
278
281
|
{
|
|
@@ -285,16 +288,16 @@ const Mt = Nt.forwardRef(function({
|
|
|
285
288
|
}
|
|
286
289
|
),
|
|
287
290
|
/* @__PURE__ */ i(
|
|
288
|
-
|
|
291
|
+
W,
|
|
289
292
|
{
|
|
290
293
|
"aria-label": L,
|
|
291
294
|
className: d(`${e}__dropdown-button`, {
|
|
292
295
|
[`${e}__dropdown-button--open`]: f
|
|
293
296
|
}),
|
|
294
297
|
onClick: ut,
|
|
295
|
-
"data-testid": `${
|
|
298
|
+
"data-testid": `${l}-dropdown`,
|
|
296
299
|
tabIndex: -1,
|
|
297
|
-
variant:
|
|
300
|
+
variant: X.tertiary,
|
|
298
301
|
children: /* @__PURE__ */ i(
|
|
299
302
|
st,
|
|
300
303
|
{
|
|
@@ -302,7 +305,7 @@ const Mt = Nt.forwardRef(function({
|
|
|
302
305
|
height: 18,
|
|
303
306
|
width: 18,
|
|
304
307
|
className: `${e}__icon-button`,
|
|
305
|
-
title: L || `${
|
|
308
|
+
title: L || `${l}-dropdown`
|
|
306
309
|
}
|
|
307
310
|
)
|
|
308
311
|
}
|
|
@@ -313,6 +316,7 @@ const Mt = Nt.forwardRef(function({
|
|
|
313
316
|
f && /* @__PURE__ */ i(vt, { container: rt?.current || document.body, children: /* @__PURE__ */ i(
|
|
314
317
|
bt,
|
|
315
318
|
{
|
|
319
|
+
id: `${l}-content`,
|
|
316
320
|
className: `${e}__content`,
|
|
317
321
|
"aria-label": tt,
|
|
318
322
|
side: "bottom",
|
|
@@ -334,7 +338,7 @@ const Mt = Nt.forwardRef(function({
|
|
|
334
338
|
value: t.value,
|
|
335
339
|
onSelect: () => I(t),
|
|
336
340
|
...a?.value === t.value ? { ref: M } : {},
|
|
337
|
-
children:
|
|
341
|
+
children: j ? j(t) : m(t)
|
|
338
342
|
},
|
|
339
343
|
t.value
|
|
340
344
|
)) }) : /* @__PURE__ */ i("div", { className: `${e}__no-options`, children: ot }) })
|
|
@@ -343,7 +347,7 @@ const Mt = Nt.forwardRef(function({
|
|
|
343
347
|
] })
|
|
344
348
|
}
|
|
345
349
|
),
|
|
346
|
-
|
|
350
|
+
z.validation ? z.validation : /* @__PURE__ */ i("p", { className: d(`${e}__empty-validation`), children: " " })
|
|
347
351
|
] })
|
|
348
352
|
] });
|
|
349
353
|
});
|
|
@@ -4,6 +4,16 @@ import { ComboBoxOption } from './types';
|
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
parameters: {
|
|
8
|
+
a11y: {
|
|
9
|
+
config: {
|
|
10
|
+
rules: {
|
|
11
|
+
id: string;
|
|
12
|
+
enabled: boolean;
|
|
13
|
+
}[];
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
7
17
|
};
|
|
8
18
|
export default meta;
|
|
9
19
|
export declare const Playground: {
|
|
@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef as p, useState as C } from "react";
|
|
3
3
|
import { getCommonProps as D } from "../../utils/index.js";
|
|
4
4
|
import i from "../../_virtual/index.js";
|
|
5
|
-
import { Root as $, Trigger as v, Value as I, Icon as b, Portal as
|
|
5
|
+
import { Root as $, Trigger as v, Value as I, Icon as b, Portal as S, Content as x, ScrollUpButton as O, Viewport as P, ScrollDownButton as R, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
|
|
6
6
|
import c from "../Icon/Icon.js";
|
|
7
7
|
const y = p(
|
|
8
8
|
({ options: a, value: n, onValueChange: l, label: s, className: h, id: m, disabled: _, ...w }, N) => {
|
|
@@ -20,7 +20,7 @@ const y = p(
|
|
|
20
20
|
v,
|
|
21
21
|
{
|
|
22
22
|
className: `${o}__trigger`,
|
|
23
|
-
"aria-label": s,
|
|
23
|
+
"aria-label": s ?? "Select option",
|
|
24
24
|
ref: N,
|
|
25
25
|
disabled: _,
|
|
26
26
|
children: [
|
|
@@ -37,7 +37,7 @@ const y = p(
|
|
|
37
37
|
]
|
|
38
38
|
}
|
|
39
39
|
),
|
|
40
|
-
/* @__PURE__ */ e(
|
|
40
|
+
/* @__PURE__ */ e(S, { children: /* @__PURE__ */ t(x, { className: `${o}__content`, position: "popper", children: [
|
|
41
41
|
/* @__PURE__ */ e(O, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) }),
|
|
42
42
|
/* @__PURE__ */ e(P, { className: `${o}__viewport`, children: a.map((r) => /* @__PURE__ */ e(
|
|
43
43
|
d,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsxs as i, jsx as
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as u } from "react";
|
|
3
3
|
import { getCommonProps as N } from "../../utils/index.js";
|
|
4
|
-
import
|
|
4
|
+
import _ from "../../_virtual/index.js";
|
|
5
5
|
import o from "../Text/Text.js";
|
|
6
|
-
const
|
|
6
|
+
const $ = u(
|
|
7
7
|
({
|
|
8
8
|
className: n,
|
|
9
9
|
actionAddText: m = "Add to",
|
|
10
10
|
actionRemoveText: t = "Remove from",
|
|
11
|
-
isLotInList:
|
|
11
|
+
isLotInList: a,
|
|
12
12
|
listTitle: s,
|
|
13
13
|
numberOfObjects: c,
|
|
14
14
|
onClick: d,
|
|
@@ -19,27 +19,26 @@ const _ = u(
|
|
|
19
19
|
"button",
|
|
20
20
|
{
|
|
21
21
|
...p,
|
|
22
|
-
className:
|
|
23
|
-
[`${r}--lot-in-list`]:
|
|
22
|
+
className: _(r, n, {
|
|
23
|
+
[`${r}--lot-in-list`]: a
|
|
24
24
|
}),
|
|
25
25
|
onClick: d,
|
|
26
26
|
ref: f,
|
|
27
27
|
id: l?.id,
|
|
28
|
-
"aria-label": `${
|
|
29
|
-
"aria-pressed":
|
|
30
|
-
role: "switch",
|
|
28
|
+
"aria-label": `${a ? t : m} ${s}`,
|
|
29
|
+
"aria-pressed": a,
|
|
31
30
|
children: [
|
|
32
31
|
/* @__PURE__ */ i("div", { className: `${r}__text`, children: [
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */
|
|
32
|
+
/* @__PURE__ */ e(o, { className: `${r}__text--action`, children: a ? t : m }),
|
|
33
|
+
/* @__PURE__ */ e(o, { children: s })
|
|
35
34
|
] }),
|
|
36
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ e(o, { className: `${r}__text--number`, children: c })
|
|
37
36
|
]
|
|
38
37
|
}
|
|
39
38
|
);
|
|
40
39
|
}
|
|
41
40
|
);
|
|
42
|
-
|
|
41
|
+
$.displayName = "FavoritingTileButton";
|
|
43
42
|
export {
|
|
44
|
-
|
|
43
|
+
$ as default
|
|
45
44
|
};
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { getCommonProps as
|
|
5
|
-
import { ButtonVariants as
|
|
6
|
-
import { forwardRef as
|
|
7
|
-
const B =
|
|
8
|
-
({ children: r, variant:
|
|
9
|
-
const { className:
|
|
10
|
-
return /* @__PURE__ */
|
|
11
|
-
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import i from "../../_virtual/index.js";
|
|
3
|
+
import f from "../Button/Button.js";
|
|
4
|
+
import { getCommonProps as u } from "../../utils/index.js";
|
|
5
|
+
import { ButtonVariants as p } from "../Button/types.js";
|
|
6
|
+
import { forwardRef as b } from "react";
|
|
7
|
+
const B = b(
|
|
8
|
+
({ children: r, variant: t = p.primary, isDisabled: m = !1, className: s, ...o }, n) => {
|
|
9
|
+
const { className: a, ...e } = u(o, "IconButton"), l = o["aria-label"] ?? "Icon button";
|
|
10
|
+
return /* @__PURE__ */ c(
|
|
11
|
+
f,
|
|
12
12
|
{
|
|
13
13
|
...e,
|
|
14
|
-
variant:
|
|
15
|
-
className:
|
|
16
|
-
isDisabled:
|
|
14
|
+
variant: t,
|
|
15
|
+
className: i(a, `${a}--${t}`, s),
|
|
16
|
+
isDisabled: m,
|
|
17
17
|
ref: n,
|
|
18
|
-
...
|
|
18
|
+
...o,
|
|
19
|
+
"aria-label": l,
|
|
19
20
|
children: r
|
|
20
21
|
}
|
|
21
22
|
);
|