@phillips/seldon 1.99.0 → 1.100.1

package/dist/components/Carousel/Carousel.stories.d.ts

@@ -19,4 +19,11 @@ export declare const CarouselWithDots: {
     };
     argTypes: {};
 };
+export declare const CarouselWithDotsOverflow: {
+    (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        maxDots: number;
+    };
+    argTypes: {};
+};
 export declare const ControlledCarousel: (props: CarouselProps & CarouselDotsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/CarouselDot.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Whether the dot is selected */
+    isSelected: boolean;
+    /** Callback function when the dot is clicked */
+    onClick: () => void;
+    /** Base class name for styling */
+    baseClassName: string;
+    /** Reference to the scrollable container */
+    scrollableContainerRef: React.RefObject<HTMLDivElement>;
+    /** Callback function when the dot comes into view within the scrollable container */
+    onInViewChange: (inView: boolean) => void;
+    /** Variant of the dot */
+    variant?: 'sm' | 'md';
+}
+export declare const CarouselDot: ({ isSelected, onClick, baseClassName, scrollableContainerRef, onInViewChange, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Carousel/CarouselDot.js

@@ -0,0 +1,40 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "../../node_modules/classnames/index.js";
+import { useInView as m } from "../../node_modules/react-intersection-observer/dist/index.js";
+const l = ({
+  isSelected: i,
+  onClick: e,
+  baseClassName: o,
+  scrollableContainerRef: c,
+  onInViewChange: p,
+  variant: t = "md"
+}) => {
+  const { ref: d } = m({
+    threshold: 0,
+    root: c.current,
+    onChange(a) {
+      p(a);
+    }
+  });
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: d,
+      role: "button",
+      onClick: e,
+      className: r(`${o}-pagination-dot__container`),
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          className: r(`${o}-pagination-dot`, {
+            [`${o}-pagination-dot--selected`]: i,
+            [`${o}-pagination-dot--${t}`]: t
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  l as CarouselDot
+};

package/dist/components/Carousel/CarouselDots.js

@@ -1,75 +1,92 @@
-import { jsx as c } from "react/jsx-runtime";
-import d from "../../node_modules/classnames/index.js";
-import { forwardRef as D, useId as P, useState as S, useCallback as f, useEffect as V } from "react";
-import { useCarousel as _ } from "./utils.js";
-import { getCommonProps as j } from "../../utils/index.js";
-const w = D(
-  ({ className: $, maxDots: l = 7, position: h = "inline", numberOfSlides: b = 0, ...u }, N) => {
-    const { className: s, ...C } = j(u, "Carousel"), M = P(), { api: e, onSlideChange: o } = _(), [g, v] = S(0), [i, k] = S(
-      Array.from({ length: b }, (t, n) => n)
-    ), x = f(
-      (t) => {
-        e && (e.scrollTo(t, !0), o == null || o(t));
+import { jsx as u } from "react/jsx-runtime";
+import B from "../../node_modules/classnames/index.js";
+import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as a, useEffect as W, useMemo as q } from "react";
+import { useCarousel as z } from "./utils.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import { CarouselDot as F } from "./CarouselDot.js";
+const G = E(
+  ({ className: w, maxDots: g = 9, position: N = "inline", numberOfSlides: v = 0, ...h }, V) => {
+    const { className: l, ...b } = A(h, "Carousel"), k = L(), { api: o, onSlideChange: n } = z(), [y, R] = S(0), [i, T] = S(
+      Array.from({ length: v }, (e, t) => t)
+    ), c = M(null), [C, D] = S([]), $ = a((e) => {
+      var t, m;
+      c.current && ((m = (t = c.current).scrollTo) == null || m.call(t, {
+        // 8px width + 12px gap
+        left: e * 20 - c.current.offsetWidth / 2 + 10,
+        // Center dot in container
+        behavior: "smooth"
+      }));
+    }, []), O = a(
+      (e) => {
+        o && (o.scrollTo(e, !0), n == null || n(e));
       },
-      [e, o]
-    ), p = f((t) => {
-      k(t.scrollSnapList());
-    }, []), a = f((t) => {
-      v(t.selectedScrollSnap());
-    }, []), m = f(
-      (t) => {
-        o == null || o(t.selectedScrollSnap());
+      [o, n]
+    ), f = a((e) => {
+      T(e.scrollSnapList());
+    }, []), s = a(
+      (e) => {
+        R(e.selectedScrollSnap()), $(e.selectedScrollSnap());
       },
-      [o]
+      [$]
+    ), p = a(
+      (e) => {
+        n == null || n(e.selectedScrollSnap());
+      },
+      [n]
     );
-    V(() => {
-      if (e)
-        return p(e), a(e), e.on("reInit", p).on("reInit", a).on("select", a).on("settle", m), () => {
-          e.off("reInit", p).off("reInit", a).off("select", a).off("settle", m);
+    W(() => {
+      if (o)
+        return f(o), s(o), o.on("reInit", f).on("reInit", s).on("select", s).on("settle", p), () => {
+          o.off("reInit", f).off("reInit", s).off("select", s).off("settle", p);
         };
-    }, [e, p, a, m]);
-    const I = (() => {
-      if (i.length <= l) return i;
-      const t = Math.floor(l / 2);
-      let n = Math.max(0, g - t);
-      const r = Math.min(i.length, n + l);
-      return r - n < l && (n = Math.max(0, r - l)), i.slice(n, r);
-    })();
-    return /* @__PURE__ */ c(
+    }, [o, f, s, p]);
+    const r = q(() => C.sort((e, t) => e - t), [C]);
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: N,
+        ref: V,
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: d(`${s}-pagination`, $, `${s}-pagination-${h}`),
-        ...u,
-        ...C,
-        children: /* @__PURE__ */ c("div", { className: `${s}-pagination-container`, children: /* @__PURE__ */ c("div", { className: `${s}-pagination-container-inner`, children: I.map((t, n) => {
-          const r = i.indexOf(I[n]), y = g === r;
-          return /* @__PURE__ */ c(
-            "button",
-            {
-              role: "button",
-              onClick: () => x(r),
-              className: d(`${s}-pagination-dot-container`),
-              children: /* @__PURE__ */ c(
-                "span",
+        className: B(`${l}-pagination`, w, `${l}-pagination-${N}`),
+        ...h,
+        ...b,
+        children: /* @__PURE__ */ u("div", { className: `${l}-pagination-container`, children: /* @__PURE__ */ u(
+          "div",
+          {
+            style: { "--max-width": `${g * 8 + (g - 1) * 12}px` },
+            className: `${l}-pagination-container-inner`,
+            ref: c,
+            children: i.map((e, t) => {
+              const m = y === t, d = r.indexOf(t), P = (
+                // The dot is out of view
+                d === -1 || // The dot must be either among the first two or last two visible dots
+                (d <= 1 || d >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
+                !(t <= 1 && r.includes(0) && r.includes(1)) && // Don't shrink if we're showing the last two dots and both are visible
+                !(t >= i.length - 2 && r.includes(i.length - 1) && r.includes(i.length - 2))
+              );
+              return /* @__PURE__ */ u(
+                F,
                 {
-                  className: d(`${s}-pagination-dot`, {
-                    [`${s}-pagination-dot-selected`]: y
-                  })
-                }
-              )
-            },
-            `${M}-dot-${n}`
-          );
-        }) }) })
+                  onClick: () => O(t),
+                  isSelected: m,
+                  baseClassName: l,
+                  scrollableContainerRef: c,
+                  onInViewChange: (_) => {
+                    D(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
+                  },
+                  variant: P ? "sm" : "md"
+                },
+                `${k}-dot-${t}`
+              );
+            })
+          }
+        ) })
       }
     );
   }
 );
-w.displayName = "CarouselDots";
+G.displayName = "CarouselDots";
 export {
-  w as default
+  G as default
 };

package/dist/components/PinchZoom/PinchZoom.d.ts

@@ -4,6 +4,14 @@ export interface PinchZoomProps extends React.HTMLAttributes<HTMLDivElement> {
      * Function to call when the zoom changes.
      */
     onZoomChange?: (isZoomed: boolean) => void;
+    /**
+     * Function to call when the user is at the left edge.
+     */
+    onAtLeftEdge?: (isAtLeftEdge: boolean) => void;
+    /**
+     * Function to call when the user is at the right edge.
+     */
+    onAtRightEdge?: (isAtRightEdge: boolean) => void;
     /**
      * Children to render.
      */
@@ -12,6 +20,10 @@ export interface PinchZoomProps extends React.HTMLAttributes<HTMLDivElement> {
      * max zoom level
      */
     maxZoom?: number;
+    /**
+     * Force reset the zoom state.
+     */
+    isZoomReset?: boolean;
 }
 /**
  * ## Overview

package/dist/components/PinchZoom/PinchZoom.js

@@ -1,48 +1,66 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as b, useCallback as n, isValidElement as N, cloneElement as S } from "react";
-import { getCommonProps as w } from "../../utils/index.js";
-import { TransformWrapper as x, TransformComponent as T } from "../../node_modules/react-zoom-pan-pinch/dist/index.esm.js";
-import c from "../../node_modules/classnames/index.js";
-const $ = ({ onZoomChange: s, children: e, maxZoom: i = 10, className: f, ...r }) => {
-  var l;
-  const { className: t, ...d } = w(r, "PinchZoom"), [a, m] = b(!1), u = n(
-    (P) => {
-      const { state: o } = P;
-      o.scale > 0.99 && o.scale < 1.01 ? (m(!1), s == null || s(!1)) : (m(!0), s == null || s(!0));
+import { jsx as S } from "react/jsx-runtime";
+import { useState as j, useRef as y, useEffect as I, useCallback as V, isValidElement as W, cloneElement as q } from "react";
+import { getCommonProps as v } from "../../utils/index.js";
+import { TransformWrapper as B, TransformComponent as D } from "../../node_modules/react-zoom-pan-pinch/dist/index.esm.js";
+import T from "../../node_modules/classnames/index.js";
+const F = ({
+  onZoomChange: s,
+  onAtLeftEdge: r,
+  onAtRightEdge: e,
+  children: a,
+  maxZoom: X = 10,
+  className: w,
+  isZoomReset: p = !1,
+  ...f
+}) => {
+  var b;
+  const { className: l, ...$ } = v(f, "PinchZoom"), [i, m] = j(!1), u = y(null);
+  I(() => {
+    var t;
+    p && ((t = u.current) == null || t.resetTransform(), m(!1), s == null || s(!1));
+  }, [p, s]);
+  const k = V(
+    (t) => {
+      var o, N, d, x;
+      const { state: c, instance: P } = t;
+      c.scale > 0.99 && c.scale < 1.01 ? (m(!1), s == null || s(!1)) : (m(!0), s == null || s(!0));
+      const z = Math.abs(c.positionX - ((N = (o = P.bounds) == null ? void 0 : o.maxPositionX) != null ? N : 0)) < 0.01, M = Math.abs(c.positionX - ((x = (d = P.bounds) == null ? void 0 : d.minPositionX) != null ? x : 0)) < 0.01;
+      r == null || r(z), e == null || e(M);
     },
-    [s]
+    [s, r, e]
   );
-  return /* @__PURE__ */ p(
-    x,
+  return /* @__PURE__ */ S(
+    B,
     {
-      maxScale: i,
-      onTransformed: u,
+      maxScale: X,
+      onTransformed: k,
       minScale: 1,
       disablePadding: !0,
       doubleClick: {
-        mode: a ? "reset" : "toggle"
+        mode: i ? "reset" : "toggle"
       },
       wheel: {
         smoothStep: 0.01
       },
       panning: {
-        disabled: !a
+        disabled: !i
       },
-      children: /* @__PURE__ */ p(
-        T,
+      ref: u,
+      children: /* @__PURE__ */ S(
+        D,
         {
-          wrapperProps: { ...d, ...r },
-          wrapperClass: c(t, f, {
-            [`${t}-zoomed`]: a
+          wrapperProps: { ...$, ...f },
+          wrapperClass: T(l, w, {
+            [`${l}-zoomed`]: i
           }),
-          contentClass: `${t}-content`,
-          children: N(e) ? S(e, { className: c(`${t}-child`, (l = e == null ? void 0 : e.props) == null ? void 0 : l.className) }) : e
+          contentClass: `${l}-content`,
+          children: W(a) ? q(a, { className: T(`${l}-child`, (b = a == null ? void 0 : a.props) == null ? void 0 : b.className) }) : a
         }
       )
     }
   );
 };
-$.displayName = "PinchZoom";
+F.displayName = "PinchZoom";
 export {
-  $ as default
+  F as default
 };

package/dist/node_modules/react-intersection-observer/dist/index.js

@@ -0,0 +1,122 @@
+import * as v from "react";
+var S = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new WeakMap(), E = 0, M = void 0;
+function O(e) {
+  return e ? (h.has(e) || (E += 1, h.set(e, E.toString())), h.get(e)) : "0";
+}
+function T(e) {
+  return Object.keys(e).sort().filter(
+    (t) => e[t] !== void 0
+  ).map((t) => `${t}_${t === "root" ? O(e.root) : e[t]}`).toString();
+}
+function _(e) {
+  const t = T(e);
+  let n = S.get(t);
+  if (!n) {
+    const u = /* @__PURE__ */ new Map();
+    let c;
+    const i = new IntersectionObserver((s) => {
+      s.forEach((r) => {
+        var o;
+        const g = r.isIntersecting && c.some((d) => r.intersectionRatio >= d);
+        e.trackVisibility && typeof r.isVisible == "undefined" && (r.isVisible = g), (o = u.get(r.target)) == null || o.forEach((d) => {
+          d(g, r);
+        });
+      });
+    }, e);
+    c = i.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), n = {
+      id: t,
+      observer: i,
+      elements: u
+    }, S.set(t, n);
+  }
+  return n;
+}
+function x(e, t, n = {}, u = M) {
+  if (typeof window.IntersectionObserver == "undefined" && u !== void 0) {
+    const o = e.getBoundingClientRect();
+    return t(u, {
+      isIntersecting: u,
+      target: e,
+      intersectionRatio: typeof n.threshold == "number" ? n.threshold : 0,
+      time: 0,
+      boundingClientRect: o,
+      intersectionRect: o,
+      rootBounds: o
+    }), () => {
+    };
+  }
+  const { id: c, observer: i, elements: s } = _(n), r = s.get(e) || [];
+  return s.has(e) || s.set(e, r), r.push(t), i.observe(e), function() {
+    r.splice(r.indexOf(t), 1), r.length === 0 && (s.delete(e), i.unobserve(e)), s.size === 0 && (i.disconnect(), S.delete(c));
+  };
+}
+function B({
+  threshold: e,
+  delay: t,
+  trackVisibility: n,
+  rootMargin: u,
+  root: c,
+  triggerOnce: i,
+  skip: s,
+  initialInView: r,
+  fallbackInView: o,
+  onChange: g
+} = {}) {
+  var d;
+  const [b, V] = v.useState(null), l = v.useRef(), [R, y] = v.useState({
+    inView: !!r,
+    entry: void 0
+  });
+  l.current = g, v.useEffect(
+    () => {
+      if (s || !b) return;
+      let a;
+      return a = x(
+        b,
+        (A, I) => {
+          y({
+            inView: A,
+            entry: I
+          }), l.current && l.current(A, I), I.isIntersecting && i && a && (a(), a = void 0);
+        },
+        {
+          root: c,
+          rootMargin: u,
+          threshold: e,
+          // @ts-ignore
+          trackVisibility: n,
+          // @ts-ignore
+          delay: t
+        },
+        o
+      ), () => {
+        a && a();
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(e) ? e.toString() : e,
+      b,
+      c,
+      u,
+      i,
+      s,
+      n,
+      o,
+      t
+    ]
+  );
+  const w = (d = R.entry) == null ? void 0 : d.target, p = v.useRef();
+  !b && w && !i && !s && p.current !== w && (p.current = w, y({
+    inView: !!r,
+    entry: void 0
+  }));
+  const f = [V, R.inView, R.entry];
+  return f.ref = f[0], f.inView = f[1], f.entry = f[2], f;
+}
+export {
+  x as observe,
+  B as useInView
+};

package/dist/scss/components/Carousel/_carousel.scss

@@ -60,26 +60,47 @@
     }
 
     &-container-inner {
+      align-items: center;
       display: flex;
       gap: 12px;
+      max-width: var(--max-width);
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none; /* Internet Explorer 10+ */
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none; /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
     }
 
-    &-dot-container {
+    &-dot__container {
       align-items: center;
       display: flex;
       height: 8px;
       justify-content: center;
+      min-width: 8px;
       padding: 1px;
+      scroll-snap-align: center;
       width: 8px;
     }
 
     &-dot {
       border-radius: 50%;
-      height: 100%;
       outline: 1px solid #adadad;
-      width: 100%;
 
-      &-selected {
+      &--md {
+        height: 100%;
+        width: 100%;
+      }
+
+      &--sm {
+        height: 50%;
+        width: 50%;
+      }
+
+      &--selected {
         background-color: #525050;
         outline-color: #525050;
       }

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -23,7 +23,8 @@
     padding: $spacing-md 0;
 
     &__mobile-countdown {
-      display: block;
+      display: flex;
+      width: 100%;
 
       @include media($size-md, $type: 'min') {
         display: none;
@@ -32,9 +33,10 @@
 
     &__desktop-countdown {
       display: none;
+      width: 100%;
 
       @include media($size-md, $type: 'min') {
-        display: block;
+        display: flex;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.99.0",
+  "version": "1.100.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -55,6 +55,7 @@
     "embla-carousel-wheel-gestures": "^8.0.1",
     "flatpickr": "^4.6.13",
     "html-react-parser": "^5.1.12",
+    "react-intersection-observer": "^9.13.1",
     "react-modal": "^3.16.1",
     "react-transition-group": "^4.4.5",
     "react-zoom-pan-pinch": "^3.6.1",