@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/carousel/Carousel.context.js

@@ -1,14 +1,10 @@
-import * as t from "react";
-const o = t.createContext(
-  null
-);
+import * as e from "react";
+//#region src/components/carousel/Carousel.context.tsx
+var t = e.createContext(null);
 function n() {
-  const e = t.useContext(o);
-  if (!e)
-    throw new Error("useCarousel must be used within a Carousel Component");
-  return e;
+	let n = e.useContext(t);
+	if (!n) throw Error("useCarousel must be used within a Carousel Component");
+	return n;
 }
-export {
-  o as CarouselContext,
-  n as useCarousel
-};
+//#endregion
+export { t as CarouselContext, n as useCarousel };

package/dist/esm/components/carousel/Carousel.js

@@ -1,106 +1,67 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as R, useMemo as h } from "react";
-import { uyTv as j } from "@payfit/unity-themes";
-import w from "embla-carousel-accessibility";
-import A from "embla-carousel-react";
-import { useIntl as M } from "react-intl";
-import { CarouselContext as P } from "./Carousel.context.js";
-import { createCarouselAccessibilityOptions as D } from "./Carousel.options.js";
-import { useCarouselAccessibility as G } from "./hooks/useCarouselAccessibility.js";
-import { useCarouselState as K } from "./hooks/useCarouselState.js";
-import { CarouselNav as O } from "./parts/CarouselNav.js";
-const E = j({
-  base: "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300"
-}), k = R(
-  ({
-    children: t,
-    className: u,
-    options: s = {
-      slidesToScroll: "auto"
-    },
-    "aria-label": a,
-    ...c
-  }, n) => {
-    const e = M(), m = h(
-      () => D(e),
-      [e]
-    ), [d, o] = A(
-      {
-        draggable: !0,
-        ...s,
-        axis: "x"
-      },
-      [w(m)]
-    ), {
-      canGoToNext: p,
-      canGoToPrev: f,
-      visibleSlideIndexes: i,
-      focusedSlideIndex: y,
-      goToPrev: v,
-      goToNext: x,
-      goTo: g,
-      goToSlide: b,
-      selectedSnap: C,
-      snapCount: T
-    } = K(o), { liveRegionRef: N, a11yIds: l, onKeyDown: S } = G({
-      api: o,
-      visibleSlideIndexes: i,
-      focusedSlideIndex: y,
-      loop: s.loop ?? !1,
-      goToSlide: b
-    });
-    return /* @__PURE__ */ r(
-      P.Provider,
-      {
-        value: {
-          carouselRef: d,
-          api: o,
-          goToNext: x,
-          goToPrev: v,
-          goTo: g,
-          canGoToPrev: f,
-          canGoToNext: p,
-          visibleSlideIndexes: i,
-          selectedSnap: C,
-          snapCount: T,
-          a11yIds: l
-        },
-        children: /* @__PURE__ */ I(
-          "div",
-          {
-            ref: n,
-            className: E({ className: u }),
-            role: "region",
-            "aria-roledescription": e.formatMessage({
-              id: "unity:component:carousel:roledescription",
-              defaultMessage: "carousel"
-            }),
-            "aria-label": a,
-            "aria-labelledby": a ? void 0 : l.title,
-            "data-unity-slot": "carousel",
-            onKeyDownCapture: S,
-            ...c,
-            children: [
-              t,
-              /* @__PURE__ */ r(O, { className: "uy:flex uy:justify-center uy:md:hidden" }),
-              /* @__PURE__ */ r(
-                "div",
-                {
-                  ref: N,
-                  "aria-live": "polite",
-                  "aria-atomic": "true",
-                  className: "uy:sr-only"
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-k.displayName = "Carousel";
-export {
-  k as Carousel,
-  E as carousel
-};
+import { CarouselContext as e } from "./Carousel.context.js";
+import { createCarouselAccessibilityOptions as t } from "./Carousel.options.js";
+import { useCarouselAccessibility as n } from "./hooks/useCarouselAccessibility.js";
+import { useCarouselState as r } from "./hooks/useCarouselState.js";
+import { CarouselNav as i } from "./parts/CarouselNav.js";
+import { forwardRef as a, useMemo as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import d from "embla-carousel-accessibility";
+import f from "embla-carousel-react";
+//#region src/components/carousel/Carousel.tsx
+var p = s({ base: "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300" }), m = a(({ children: a, className: s, options: m = { slidesToScroll: "auto" }, "aria-label": h, ...g }, _) => {
+	let v = u(), y = o(() => t(v), [v]), [b, x] = f({
+		draggable: !0,
+		...m,
+		axis: "x"
+	}, [d(y)]), { canGoToNext: S, canGoToPrev: C, visibleSlideIndexes: w, focusedSlideIndex: T, goToPrev: E, goToNext: D, goTo: O, goToSlide: k, selectedSnap: A, snapCount: j } = r(x), { liveRegionRef: M, a11yIds: N, onKeyDown: P } = n({
+		api: x,
+		visibleSlideIndexes: w,
+		focusedSlideIndex: T,
+		loop: m.loop ?? !1,
+		goToSlide: k
+	});
+	return /* @__PURE__ */ c(e.Provider, {
+		value: {
+			carouselRef: b,
+			api: x,
+			goToNext: D,
+			goToPrev: E,
+			goTo: O,
+			canGoToPrev: C,
+			canGoToNext: S,
+			visibleSlideIndexes: w,
+			selectedSnap: A,
+			snapCount: j,
+			a11yIds: N
+		},
+		children: /* @__PURE__ */ l("div", {
+			ref: _,
+			className: p({ className: s }),
+			role: "region",
+			"aria-roledescription": v.formatMessage({
+				id: "unity:component:carousel:roledescription",
+				defaultMessage: "carousel"
+			}),
+			"aria-label": h,
+			"aria-labelledby": h ? void 0 : N.title,
+			"data-unity-slot": "carousel",
+			onKeyDownCapture: P,
+			...g,
+			children: [
+				a,
+				/* @__PURE__ */ c(i, { className: "uy:flex uy:justify-center uy:md:hidden" }),
+				/* @__PURE__ */ c("div", {
+					ref: M,
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: "uy:sr-only"
+				})
+			]
+		})
+	});
+});
+m.displayName = "Carousel";
+//#endregion
+export { m as Carousel, p as carousel };

package/dist/esm/components/carousel/Carousel.options.js

@@ -1,64 +1,72 @@
-function g(e) {
-  return (i, a, l, s, r, n) => {
-    const o = a + 1, u = l + 1, t = r + 1;
-    return i ? a === l ? e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:slide:label:group-single",
-        defaultMessage: "Slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
-      },
-      { slide: o, totalSlides: s, snap: t, totalSnaps: n }
-    ) : e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:slide:label:group-multiple",
-        defaultMessage: "Slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
-      },
-      { slide: o, lastSlide: u, totalSlides: s, snap: t, totalSnaps: n }
-    ) : e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:slide:label:single",
-        defaultMessage: "Slide {slide} of {totalSlides}"
-      },
-      { slide: o, totalSlides: s }
-    );
-  };
+//#region src/components/carousel/Carousel.options.ts
+function e(e) {
+	return (t, n, r, i, a, o) => {
+		let s = n + 1, c = r + 1, l = a + 1;
+		return t ? n === r ? e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:group-single",
+			defaultMessage: "Slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:group-multiple",
+			defaultMessage: "Slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			lastSlide: c,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:single",
+			defaultMessage: "Slide {slide} of {totalSlides}"
+		}, {
+			slide: s,
+			totalSlides: i
+		});
+	};
 }
-function c(e) {
-  return (i, a, l, s, r, n) => {
-    const o = a + 1, u = l + 1, t = r + 1;
-    return i ? a === l ? e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:live-region:group-single",
-        defaultMessage: "Showing slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
-      },
-      { slide: o, totalSlides: s, snap: t, totalSnaps: n }
-    ) : e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:live-region:group-multiple",
-        defaultMessage: "Showing slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
-      },
-      { slide: o, lastSlide: u, totalSlides: s, snap: t, totalSnaps: n }
-    ) : e.formatMessage(
-      {
-        id: "unity:component:carousel:a11y:live-region:single",
-        defaultMessage: "Showing slide {slide} of {totalSlides}"
-      },
-      { slide: o, totalSlides: s }
-    );
-  };
+function t(e) {
+	return (t, n, r, i, a, o) => {
+		let s = n + 1, c = r + 1, l = a + 1;
+		return t ? n === r ? e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:group-single",
+			defaultMessage: "Showing slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:group-multiple",
+			defaultMessage: "Showing slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			lastSlide: c,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:single",
+			defaultMessage: "Showing slide {slide} of {totalSlides}"
+		}, {
+			slide: s,
+			totalSlides: i
+		});
+	};
 }
-function d(e) {
-  return {
-    announceChanges: !0,
-    carouselAriaLabel: e.formatMessage({
-      id: "unity:component:carousel:a11y:carousel:label",
-      defaultMessage: "Carousel"
-    }),
-    slideAriaLabel: g(e),
-    liveRegionContent: c(e)
-  };
+function n(n) {
+	return {
+		announceChanges: !0,
+		carouselAriaLabel: n.formatMessage({
+			id: "unity:component:carousel:a11y:carousel:label",
+			defaultMessage: "Carousel"
+		}),
+		slideAriaLabel: e(n),
+		liveRegionContent: t(n)
+	};
 }
-export {
-  d as createCarouselAccessibilityOptions,
-  c as createLiveRegionContent,
-  g as createSlideAriaLabel
-};
+//#endregion
+export { n as createCarouselAccessibilityOptions };

package/dist/esm/components/carousel/hooks/useCarouselAccessibility.js

@@ -1,87 +1,83 @@
-import { useRef as k, useEffect as _, useCallback as D } from "react";
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+import { useId as r } from "react-aria/useId";
 import "embla-carousel-accessibility";
-import { useId as x } from "react-aria/useId";
-function E({
-  api: e,
-  visibleSlideIndexes: d,
-  focusedSlideIndex: o,
-  loop: u = !1,
-  goToSlide: c
-}) {
-  const v = k(null), n = k(!1), l = x(), h = {
-    root: `carousel-${l}__root`,
-    title: `carousel-${l}__title`,
-    track: `carousel-${l}__track`,
-    previousButton: `carousel-${l}__previous-button`,
-    nextButton: `carousel-${l}__next-button`
-  };
-  _(() => {
-    if (!e) return;
-    const r = e.plugins().accessibility;
-    !r || !v.current || r.setupLiveRegion(v.current);
-  }, [e]), _(() => {
-    if (!e) return;
-    const r = e.slideNodes();
-    r.forEach((a, i) => {
-      i === o ? (a.setAttribute("tabindex", "0"), a.removeAttribute("inert")) : (a.setAttribute("tabindex", "-1"), d.has(i) ? a.removeAttribute("inert") : a.setAttribute("inert", ""));
-    }), n.current && o !== null && (n.current = !1, r[o]?.focus({ preventScroll: !0 }));
-  }, [e, d, o]);
-  const m = D(
-    (r) => {
-      if (!e) return;
-      const i = e.slideNodes().length, s = o ?? 0;
-      switch (r.key) {
-        case "ArrowLeft": {
-          r.preventDefault();
-          const t = s > 0 ? s - 1 : u ? i - 1 : s;
-          t !== s && (n.current = !0, c(t));
-          break;
-        }
-        case "ArrowRight": {
-          r.preventDefault();
-          const t = s < i - 1 ? s + 1 : u ? 0 : s;
-          t !== s && (n.current = !0, c(t));
-          break;
-        }
-        case "Home": {
-          r.preventDefault(), u || (n.current = !0, c(0));
-          break;
-        }
-        case "End": {
-          if (r.preventDefault(), !u) {
-            const t = i - 1;
-            n.current = !0, c(t);
-          }
-          break;
-        }
-        case "PageUp": {
-          r.preventDefault();
-          const t = e.selectedSnap(), p = e.snapList().length, f = t > 0 ? t - 1 : u ? p - 1 : t;
-          if (f !== t) {
-            const b = e.internalEngine(), g = b.slidesToScroll.groupSlides(
-              b.slideIndexes
-            )[f]?.[0];
-            g !== void 0 && (n.current = !0, c(g));
-          }
-          break;
-        }
-        case "PageDown": {
-          r.preventDefault();
-          const t = e.selectedSnap(), p = e.snapList().length, f = t < p - 1 ? t + 1 : u ? 0 : t;
-          if (f !== t) {
-            const b = e.internalEngine(), g = b.slidesToScroll.groupSlides(
-              b.slideIndexes
-            )[f]?.[0];
-            g !== void 0 && (n.current = !0, c(g));
-          }
-          break;
-        }
-      }
-    },
-    [e, u, o, c]
-  );
-  return { liveRegionRef: v, a11yIds: h, onKeyDown: m };
+//#region src/components/carousel/hooks/useCarouselAccessibility.ts
+function i({ api: i, visibleSlideIndexes: a, focusedSlideIndex: o, loop: s = !1, goToSlide: c }) {
+	let l = n(null), u = n(!1), d = r(), f = {
+		root: `carousel-${d}__root`,
+		title: `carousel-${d}__title`,
+		track: `carousel-${d}__track`,
+		previousButton: `carousel-${d}__previous-button`,
+		nextButton: `carousel-${d}__next-button`
+	};
+	return t(() => {
+		if (!i) return;
+		let e = i.plugins().accessibility;
+		!e || !l.current || e.setupLiveRegion(l.current);
+	}, [i]), t(() => {
+		if (!i) return;
+		let e = i.slideNodes();
+		e.forEach((e, t) => {
+			t === o ? (e.setAttribute("tabindex", "0"), e.removeAttribute("inert")) : (e.setAttribute("tabindex", "-1"), a.has(t) ? e.removeAttribute("inert") : e.setAttribute("inert", ""));
+		}), u.current && o !== null && (u.current = !1, e[o]?.focus({ preventScroll: !0 }));
+	}, [
+		i,
+		a,
+		o
+	]), {
+		liveRegionRef: l,
+		a11yIds: f,
+		onKeyDown: e((e) => {
+			if (!i) return;
+			let t = i.slideNodes().length, n = o ?? 0;
+			switch (e.key) {
+				case "ArrowLeft": {
+					e.preventDefault();
+					let r = n > 0 ? n - 1 : s ? t - 1 : n;
+					r !== n && (u.current = !0, c(r));
+					break;
+				}
+				case "ArrowRight": {
+					e.preventDefault();
+					let r = n < t - 1 ? n + 1 : s ? 0 : n;
+					r !== n && (u.current = !0, c(r));
+					break;
+				}
+				case "Home":
+					e.preventDefault(), s || (u.current = !0, c(0));
+					break;
+				case "End":
+					if (e.preventDefault(), !s) {
+						let e = t - 1;
+						u.current = !0, c(e);
+					}
+					break;
+				case "PageUp": {
+					e.preventDefault();
+					let t = i.selectedSnap(), n = i.snapList().length, r = t > 0 ? t - 1 : s ? n - 1 : t;
+					if (r !== t) {
+						let e = i.internalEngine(), t = e.slidesToScroll.groupSlides(e.slideIndexes)[r]?.[0];
+						t !== void 0 && (u.current = !0, c(t));
+					}
+					break;
+				}
+				case "PageDown": {
+					e.preventDefault();
+					let t = i.selectedSnap(), n = t < i.snapList().length - 1 ? t + 1 : s ? 0 : t;
+					if (n !== t) {
+						let e = i.internalEngine(), t = e.slidesToScroll.groupSlides(e.slideIndexes)[n]?.[0];
+						t !== void 0 && (u.current = !0, c(t));
+					}
+					break;
+				}
+			}
+		}, [
+			i,
+			s,
+			o,
+			c
+		])
+	};
 }
-export {
-  E as useCarouselAccessibility
-};
+//#endregion
+export { i as useCarouselAccessibility };

package/dist/esm/components/carousel/hooks/useCarouselState.js

@@ -1,62 +1,55 @@
-import { useState as d, useRef as h, useCallback as s, useEffect as L } from "react";
-function y(e) {
-  const [I, l] = d(0), [G, x] = d(0), [w, T] = d(
-    () => /* @__PURE__ */ new Set()
-  ), [N, u] = d(
-    null
-  ), i = h(!1), c = s(() => {
-    if (!e) return { visible: /* @__PURE__ */ new Set(), focused: null };
-    const n = e.selectedSnap(), o = e.internalEngine(), t = (o.slidesToScroll.groupSlides(o.slideIndexes)[n] ?? [])[0] ?? null, g = e.slidesInView(), v = new Set(g);
-    return t !== null && v.add(t), {
-      visible: v,
-      focused: t
-    };
-  }, [e]), S = s(() => {
-    if (!e) return;
-    const n = e.selectedSnap();
-    l(n);
-    const o = c();
-    T(o.visible), i.current || u(o.focused);
-  }, [e, c]), f = s(() => {
-    if (!e) return;
-    x(e.snapList().length);
-    const n = e.selectedSnap();
-    l(n);
-  }, [e]);
-  L(() => {
-    if (!e) return;
-    x(e.snapList().length);
-    const n = c();
-    return T(n.visible), u(n.focused), e.on("select", S), e.on("resize", f), () => {
-      e.off("select", S), e.off("resize", f);
-    };
-  }, [e, S, f, c]);
-  const C = s(() => e?.goToPrev(), [e]), P = s(() => e?.goToNext(), [e]), a = s((n) => e?.goTo(n), [e]), z = s(() => e?.canGoToPrev(), [e]), E = s(() => e?.canGoToNext(), [e]), R = s(
-    (n) => {
-      if (!e) return;
-      i.current = !0, u(n);
-      const o = e.internalEngine(), r = o.slidesToScroll.groupSlides(o.slideIndexes).findIndex(
-        (g) => g.includes(n)
-      ), t = e.selectedSnap();
-      r !== -1 && r !== t && e.goTo(r), setTimeout(() => {
-        i.current = !1;
-      }, 0);
-    },
-    [e]
-  );
-  return {
-    selectedSnap: I,
-    snapCount: G,
-    visibleSlideIndexes: w,
-    focusedSlideIndex: N,
-    goToPrev: C,
-    goToNext: P,
-    goTo: a,
-    canGoToPrev: z,
-    canGoToNext: E,
-    goToSlide: R
-  };
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/carousel/hooks/useCarouselState.ts
+function i(i) {
+	let [a, o] = r(0), [s, c] = r(0), [l, u] = r(() => /* @__PURE__ */ new Set()), [d, f] = r(null), p = n(!1), m = e(() => {
+		if (!i) return {
+			visible: /* @__PURE__ */ new Set(),
+			focused: null
+		};
+		let e = i.selectedSnap(), t = i.internalEngine(), n = (t.slidesToScroll.groupSlides(t.slideIndexes)[e] ?? [])[0] ?? null, r = i.slidesInView(), a = new Set(r);
+		return n !== null && a.add(n), {
+			visible: a,
+			focused: n
+		};
+	}, [i]), h = e(() => {
+		if (!i) return;
+		o(i.selectedSnap());
+		let e = m();
+		u(e.visible), p.current || f(e.focused);
+	}, [i, m]), g = e(() => {
+		i && (c(i.snapList().length), o(i.selectedSnap()));
+	}, [i]);
+	return t(() => {
+		if (!i) return;
+		c(i.snapList().length);
+		let e = m();
+		return u(e.visible), f(e.focused), i.on("select", h), i.on("resize", g), () => {
+			i.off("select", h), i.off("resize", g);
+		};
+	}, [
+		i,
+		h,
+		g,
+		m
+	]), {
+		selectedSnap: a,
+		snapCount: s,
+		visibleSlideIndexes: l,
+		focusedSlideIndex: d,
+		goToPrev: e(() => i?.goToPrev(), [i]),
+		goToNext: e(() => i?.goToNext(), [i]),
+		goTo: e((e) => i?.goTo(e), [i]),
+		canGoToPrev: e(() => i?.canGoToPrev(), [i]),
+		canGoToNext: e(() => i?.canGoToNext(), [i]),
+		goToSlide: e((e) => {
+			if (!i) return;
+			p.current = !0, f(e);
+			let t = i.internalEngine(), n = t.slidesToScroll.groupSlides(t.slideIndexes).findIndex((t) => t.includes(e)), r = i.selectedSnap();
+			n !== -1 && n !== r && i.goTo(n), setTimeout(() => {
+				p.current = !1;
+			}, 0);
+		}, [i])
+	};
 }
-export {
-  y as useCarouselState
-};
+//#endregion
+export { i as useCarouselState };