@phillips/seldon 1.104.1 → 1.105.1
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/components/Carousel/Carousel.js +34 -30
- package/dist/components/Carousel/CarouselContent.js +10 -18
- package/dist/components/Carousel/CarouselDot.d.ts +3 -4
- package/dist/components/Carousel/CarouselDot.js +24 -22
- package/dist/components/Carousel/CarouselDots.js +31 -32
- package/dist/components/Carousel/CarouselItem.js +7 -7
- package/dist/node_modules/date-fns/isAfter.js +8 -0
- package/dist/node_modules/embla-carousel/esm/embla-carousel.esm.js +545 -539
- package/dist/node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js +74 -0
- package/dist/patterns/BidSnapshot/BidSnapshot.d.ts +4 -0
- package/dist/patterns/BidSnapshot/BidSnapshot.js +55 -52
- package/dist/patterns/BidSnapshot/BidSnapshot.stories.d.ts +1 -0
- package/dist/scss/components/Carousel/_carousel.scss +26 -26
- package/package.json +3 -2
|
@@ -1,65 +1,69 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as h, forwardRef as k, useEffect as
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as h, forwardRef as k, useEffect as u, useCallback as i } from "react";
|
|
3
3
|
import { getCommonProps as A } from "../../utils/index.js";
|
|
4
4
|
import R from "../../node_modules/classnames/index.js";
|
|
5
|
-
import b from "../../node_modules/embla-carousel-
|
|
6
|
-
import
|
|
7
|
-
|
|
5
|
+
import b from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
|
|
6
|
+
import E from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
|
|
7
|
+
import { WheelGesturesPlugin as K } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
|
|
8
|
+
const W = h(null), j = k(
|
|
8
9
|
({
|
|
9
10
|
loop: w = !1,
|
|
10
11
|
startIndex: x = 0,
|
|
11
12
|
onSlideChange: s,
|
|
12
13
|
className: d,
|
|
13
14
|
children: N,
|
|
14
|
-
columnGap:
|
|
15
|
-
useWheelGestures:
|
|
16
|
-
disableDrag:
|
|
15
|
+
columnGap: v,
|
|
16
|
+
useWheelGestures: P = !1,
|
|
17
|
+
disableDrag: l = !1,
|
|
17
18
|
...t
|
|
18
19
|
}, I) => {
|
|
19
20
|
var c, f;
|
|
20
|
-
const { className:
|
|
21
|
+
const { className: C, ...y } = A(t, "Carousel"), [D, e] = E(
|
|
21
22
|
{
|
|
22
23
|
loop: w,
|
|
23
24
|
startIndex: x,
|
|
24
25
|
inViewThreshold: 0.99
|
|
25
26
|
},
|
|
26
27
|
[
|
|
27
|
-
...
|
|
28
|
-
|
|
28
|
+
...P ? [
|
|
29
|
+
K({
|
|
29
30
|
forceWheelAxis: "x"
|
|
30
31
|
})
|
|
31
|
-
] : []
|
|
32
|
+
] : [],
|
|
33
|
+
b({
|
|
34
|
+
snapped: "carousel-item-in-view"
|
|
35
|
+
})
|
|
32
36
|
]
|
|
33
37
|
);
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
u(() => {
|
|
39
|
+
l ? e == null || e.reInit({
|
|
36
40
|
watchDrag: () => !1
|
|
37
41
|
}) : e == null || e.reInit({
|
|
38
42
|
watchDrag: () => !0
|
|
39
43
|
});
|
|
40
|
-
}, [
|
|
44
|
+
}, [l, e]);
|
|
41
45
|
const V = i(
|
|
42
46
|
(r) => {
|
|
43
47
|
r.key === "ArrowLeft" ? (r.preventDefault(), e == null || e.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e == null || e.scrollNext());
|
|
44
48
|
},
|
|
45
49
|
[e]
|
|
46
|
-
),
|
|
50
|
+
), o = i(
|
|
47
51
|
(r) => {
|
|
48
|
-
var
|
|
52
|
+
var a;
|
|
49
53
|
if (!r)
|
|
50
54
|
return;
|
|
51
|
-
const n = (
|
|
55
|
+
const n = (a = r.slidesInView()) == null ? void 0 : a[0];
|
|
52
56
|
n !== void 0 && (s == null || s(n));
|
|
53
57
|
},
|
|
54
58
|
[s]
|
|
55
59
|
);
|
|
56
|
-
return
|
|
60
|
+
return u(() => {
|
|
57
61
|
if (e)
|
|
58
|
-
return e.on("slidesInView",
|
|
59
|
-
e.off("slidesInView",
|
|
62
|
+
return e.on("slidesInView", o), () => {
|
|
63
|
+
e.off("slidesInView", o);
|
|
60
64
|
};
|
|
61
|
-
}, [e,
|
|
62
|
-
|
|
65
|
+
}, [e, o]), /* @__PURE__ */ m(
|
|
66
|
+
W.Provider,
|
|
63
67
|
{
|
|
64
68
|
value: {
|
|
65
69
|
carouselRef: D,
|
|
@@ -68,19 +72,19 @@ const K = h(null), W = k(
|
|
|
68
72
|
scrollNext: () => e == null ? void 0 : e.scrollNext(),
|
|
69
73
|
canScrollPrev: (c = e == null ? void 0 : e.canScrollPrev()) != null ? c : !1,
|
|
70
74
|
canScrollNext: (f = e == null ? void 0 : e.canScrollNext()) != null ? f : !1,
|
|
71
|
-
columnGap:
|
|
75
|
+
columnGap: v,
|
|
72
76
|
onSlideChange: s
|
|
73
77
|
},
|
|
74
|
-
children: /* @__PURE__ */
|
|
78
|
+
children: /* @__PURE__ */ m(
|
|
75
79
|
"div",
|
|
76
80
|
{
|
|
77
81
|
ref: I,
|
|
78
82
|
onKeyDownCapture: V,
|
|
79
|
-
className: R(
|
|
83
|
+
className: R(C, d),
|
|
80
84
|
role: "region",
|
|
81
85
|
"aria-roledescription": "carousel",
|
|
82
86
|
...t,
|
|
83
|
-
...
|
|
87
|
+
...y,
|
|
84
88
|
children: N
|
|
85
89
|
}
|
|
86
90
|
)
|
|
@@ -88,8 +92,8 @@ const K = h(null), W = k(
|
|
|
88
92
|
);
|
|
89
93
|
}
|
|
90
94
|
);
|
|
91
|
-
|
|
95
|
+
j.displayName = "Carousel";
|
|
92
96
|
export {
|
|
93
|
-
|
|
94
|
-
|
|
97
|
+
W as CarouselContext,
|
|
98
|
+
j as default
|
|
95
99
|
};
|
|
@@ -4,27 +4,19 @@ import a from "../../node_modules/classnames/index.js";
|
|
|
4
4
|
import { useCarousel as p } from "./utils.js";
|
|
5
5
|
import { getCommonProps as u } from "../../utils/index.js";
|
|
6
6
|
const C = f(
|
|
7
|
-
({ className:
|
|
8
|
-
const { className: o, ...c } = u(e, "
|
|
9
|
-
return /* @__PURE__ */ r(
|
|
7
|
+
({ className: m, containerClassName: n, containerStyles: t, ...e }, l) => {
|
|
8
|
+
const { className: o, ...c } = u(e, "CarouselContent"), { carouselRef: i, columnGap: s } = p();
|
|
9
|
+
return /* @__PURE__ */ r("div", { ref: i, className: a(`${o}`, n), style: t, children: /* @__PURE__ */ r(
|
|
10
10
|
"div",
|
|
11
11
|
{
|
|
12
|
-
ref:
|
|
13
|
-
className: a(`${o}-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
ref: l,
|
|
19
|
-
className: a(`${o}-content-inner`, n, {
|
|
20
|
-
[`${o}-content-inner--gap-${s}`]: !!s
|
|
21
|
-
}),
|
|
22
|
-
...e,
|
|
23
|
-
...c
|
|
24
|
-
}
|
|
25
|
-
)
|
|
12
|
+
ref: l,
|
|
13
|
+
className: a(`${o}-inner`, m, {
|
|
14
|
+
[`${o}-inner--gap-${s}`]: !!s
|
|
15
|
+
}),
|
|
16
|
+
...e,
|
|
17
|
+
...c
|
|
26
18
|
}
|
|
27
|
-
);
|
|
19
|
+
) });
|
|
28
20
|
}
|
|
29
21
|
);
|
|
30
22
|
C.displayName = "CarouselContent";
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
interface Props extends ComponentProps<'button'> {
|
|
2
3
|
/** Whether the dot is selected */
|
|
3
4
|
isSelected: boolean;
|
|
4
5
|
/** Callback function when the dot is clicked */
|
|
5
6
|
onClick: () => void;
|
|
6
|
-
/** Base class name for styling */
|
|
7
|
-
baseClassName: string;
|
|
8
7
|
/** Reference to the scrollable container */
|
|
9
8
|
scrollableContainerRef: React.RefObject<HTMLDivElement>;
|
|
10
9
|
/** Callback function when the dot comes into view within the scrollable container */
|
|
@@ -12,5 +11,5 @@ interface Props {
|
|
|
12
11
|
/** Variant of the dot */
|
|
13
12
|
variant?: 'sm' | 'md';
|
|
14
13
|
}
|
|
15
|
-
export declare const CarouselDot: ({ isSelected, onClick,
|
|
14
|
+
export declare const CarouselDot: ({ isSelected, onClick, scrollableContainerRef, onInViewChange, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
15
|
export {};
|
|
@@ -1,34 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import r from "../../node_modules/classnames/index.js";
|
|
3
|
-
import { useInView as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
scrollableContainerRef:
|
|
9
|
-
onInViewChange:
|
|
10
|
-
variant:
|
|
3
|
+
import { useInView as i } from "../../node_modules/react-intersection-observer/dist/index.js";
|
|
4
|
+
import { getCommonProps as f } from "../../utils/index.js";
|
|
5
|
+
const N = ({
|
|
6
|
+
isSelected: t,
|
|
7
|
+
onClick: m,
|
|
8
|
+
scrollableContainerRef: n,
|
|
9
|
+
onInViewChange: a,
|
|
10
|
+
variant: s = "md",
|
|
11
|
+
...c
|
|
11
12
|
}) => {
|
|
12
|
-
const { ref:
|
|
13
|
+
const { className: o, ...l } = f(c, "CarouselDot"), { ref: p } = i({
|
|
13
14
|
threshold: 0,
|
|
14
|
-
root:
|
|
15
|
-
onChange(
|
|
16
|
-
|
|
15
|
+
root: n.current,
|
|
16
|
+
onChange(u) {
|
|
17
|
+
a(u);
|
|
17
18
|
}
|
|
18
19
|
});
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ e(
|
|
20
21
|
"button",
|
|
21
22
|
{
|
|
22
|
-
ref:
|
|
23
|
+
ref: p,
|
|
23
24
|
role: "button",
|
|
24
|
-
onClick:
|
|
25
|
-
className: r(`${o}
|
|
26
|
-
|
|
25
|
+
onClick: m,
|
|
26
|
+
className: r(`${o}__container`),
|
|
27
|
+
...l,
|
|
28
|
+
children: /* @__PURE__ */ e(
|
|
27
29
|
"span",
|
|
28
30
|
{
|
|
29
|
-
className: r(`${o}
|
|
30
|
-
[`${o}
|
|
31
|
-
[`${o}
|
|
31
|
+
className: r(`${o}`, {
|
|
32
|
+
[`${o}--selected`]: t,
|
|
33
|
+
[`${o}--${s}`]: s
|
|
32
34
|
})
|
|
33
35
|
}
|
|
34
36
|
)
|
|
@@ -36,5 +38,5 @@ const l = ({
|
|
|
36
38
|
);
|
|
37
39
|
};
|
|
38
40
|
export {
|
|
39
|
-
|
|
41
|
+
N as CarouselDot
|
|
40
42
|
};
|
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
import { jsx as u } from "react/jsx-runtime";
|
|
2
2
|
import B from "../../node_modules/classnames/index.js";
|
|
3
|
-
import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as
|
|
3
|
+
import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as c, useEffect as W, 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
7
|
const G = E(
|
|
8
|
-
({ className: w, maxDots:
|
|
9
|
-
const { className:
|
|
8
|
+
({ className: w, maxDots: h = 9, position: N = "inline", numberOfSlides: v = 0, ...C }, V) => {
|
|
9
|
+
const { className: a, ...b } = A(C, "CarouselDots"), k = L(), { api: o, onSlideChange: s } = z(), [y, R] = S(0), [i, T] = S(
|
|
10
10
|
Array.from({ length: v }, (e, t) => t)
|
|
11
|
-
),
|
|
11
|
+
), l = M(null), [D, $] = S([]), g = c((e) => {
|
|
12
12
|
var t, m;
|
|
13
|
-
|
|
13
|
+
l.current && ((m = (t = l.current).scrollTo) == null || m.call(t, {
|
|
14
14
|
// 8px width + 12px gap
|
|
15
|
-
left: e * 20 -
|
|
15
|
+
left: e * 20 - l.current.offsetWidth / 2 + 10,
|
|
16
16
|
// Center dot in container
|
|
17
17
|
behavior: "smooth"
|
|
18
18
|
}));
|
|
19
|
-
}, []), O =
|
|
19
|
+
}, []), O = c(
|
|
20
20
|
(e) => {
|
|
21
|
-
o && (o.scrollTo(e, !0),
|
|
21
|
+
o && (o.scrollTo(e, !0), s == null || s(e));
|
|
22
22
|
},
|
|
23
|
-
[o,
|
|
24
|
-
), f =
|
|
23
|
+
[o, s]
|
|
24
|
+
), f = c((e) => {
|
|
25
25
|
T(e.scrollSnapList());
|
|
26
|
-
}, []),
|
|
26
|
+
}, []), n = c(
|
|
27
27
|
(e) => {
|
|
28
|
-
R(e.selectedScrollSnap()),
|
|
28
|
+
R(e.selectedScrollSnap()), g(e.selectedScrollSnap());
|
|
29
29
|
},
|
|
30
|
-
[
|
|
31
|
-
),
|
|
30
|
+
[g]
|
|
31
|
+
), d = c(
|
|
32
32
|
(e) => {
|
|
33
|
-
|
|
33
|
+
s == null || s(e.selectedScrollSnap());
|
|
34
34
|
},
|
|
35
|
-
[
|
|
35
|
+
[s]
|
|
36
36
|
);
|
|
37
37
|
W(() => {
|
|
38
38
|
if (o)
|
|
39
|
-
return f(o),
|
|
40
|
-
o.off("reInit", f).off("reInit",
|
|
39
|
+
return f(o), n(o), o.on("reInit", f).on("reInit", n).on("select", n).on("settle", d), () => {
|
|
40
|
+
o.off("reInit", f).off("reInit", n).off("select", n).off("settle", d);
|
|
41
41
|
};
|
|
42
|
-
}, [o, f,
|
|
43
|
-
const r = q(() =>
|
|
42
|
+
}, [o, f, n, d]);
|
|
43
|
+
const r = q(() => D.sort((e, t) => e - t), [D]);
|
|
44
44
|
return /* @__PURE__ */ u(
|
|
45
45
|
"div",
|
|
46
46
|
{
|
|
@@ -48,20 +48,20 @@ const G = E(
|
|
|
48
48
|
role: "group",
|
|
49
49
|
"aria-roledescription": "pagination",
|
|
50
50
|
"aria-label": "pagination",
|
|
51
|
-
className: B(`${
|
|
52
|
-
...
|
|
51
|
+
className: B(`${a}`, w, `${a}-${N}`),
|
|
52
|
+
...C,
|
|
53
53
|
...b,
|
|
54
|
-
children: /* @__PURE__ */ u("div", { className: `${
|
|
54
|
+
children: /* @__PURE__ */ u("div", { className: `${a}-container`, children: /* @__PURE__ */ u(
|
|
55
55
|
"div",
|
|
56
56
|
{
|
|
57
|
-
style: { "--max-width": `${
|
|
58
|
-
className: `${
|
|
59
|
-
ref:
|
|
57
|
+
style: { "--max-width": `${h * 8 + (h - 1) * 12}px` },
|
|
58
|
+
className: `${a}-container-inner`,
|
|
59
|
+
ref: l,
|
|
60
60
|
children: i.map((e, t) => {
|
|
61
|
-
const m = y === t,
|
|
61
|
+
const m = y === t, p = r.indexOf(t), P = (
|
|
62
62
|
// The dot is out of view
|
|
63
|
-
|
|
64
|
-
(
|
|
63
|
+
p === -1 || // The dot must be either among the first two or last two visible dots
|
|
64
|
+
(p <= 1 || p >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
|
|
65
65
|
!(t <= 1 && r.includes(0) && r.includes(1)) && // Don't shrink if we're showing the last two dots and both are visible
|
|
66
66
|
!(t >= i.length - 2 && r.includes(i.length - 1) && r.includes(i.length - 2))
|
|
67
67
|
);
|
|
@@ -70,10 +70,9 @@ const G = E(
|
|
|
70
70
|
{
|
|
71
71
|
onClick: () => O(t),
|
|
72
72
|
isSelected: m,
|
|
73
|
-
|
|
74
|
-
scrollableContainerRef: c,
|
|
73
|
+
scrollableContainerRef: l,
|
|
75
74
|
onInViewChange: (_) => {
|
|
76
|
-
|
|
75
|
+
$(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
|
|
77
76
|
},
|
|
78
77
|
variant: P ? "sm" : "md"
|
|
79
78
|
},
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
2
|
+
import l from "../../node_modules/classnames/index.js";
|
|
3
|
+
import { forwardRef as i } from "react";
|
|
4
4
|
import { getCommonProps as n } from "../../utils/index.js";
|
|
5
5
|
import { useCarousel as c } from "./utils.js";
|
|
6
|
-
const u =
|
|
7
|
-
const { className:
|
|
6
|
+
const u = i(({ className: m, ...o }, s) => {
|
|
7
|
+
const { className: r, ...a } = n(o, "CarouselItem"), { columnGap: e } = c();
|
|
8
8
|
return /* @__PURE__ */ t(
|
|
9
9
|
"div",
|
|
10
10
|
{
|
|
11
11
|
ref: s,
|
|
12
12
|
role: o.onClick ? "button" : "group",
|
|
13
13
|
"aria-roledescription": "slide",
|
|
14
|
-
className:
|
|
15
|
-
[`${
|
|
16
|
-
[`${
|
|
14
|
+
className: l(`${r}`, m, {
|
|
15
|
+
[`${r}--gap-${e}`]: !!e,
|
|
16
|
+
[`${r}--cursor-pointer`]: !!o.onClick
|
|
17
17
|
}),
|
|
18
18
|
...o,
|
|
19
19
|
...a
|