@phillips/seldon 1.121.0 → 1.122.1

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

@@ -27,6 +27,10 @@ export interface CarouselProps extends ComponentProps<'div'> {
      * Whether the carousel should disable dragging.
      */
     disableDrag?: boolean;
+    /**
+     * Whether to disable dragging to navigate between slides for different viewports.
+     */
+    disableNavigationDrag?: 'mobile' | 'desktop' | 'all' | null;
     /**
      *  The threshold for slides to be considered in view. A value of 0.1 means that 10% of the slide must be in view for it to be considered in view.
      */

package/dist/components/Carousel/Carousel.js

@@ -1,99 +1,115 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as I, forwardRef as D, useEffect as c, useCallback as n } from "react";
-import { getCommonProps as y } from "../../utils/index.js";
-import g from "../../node_modules/classnames/index.js";
-import k from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
-import V from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as b } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-const A = I(null), R = D(
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as P, forwardRef as g, useEffect as n, useCallback as f } from "react";
+import { getCommonProps as I } from "../../utils/index.js";
+import y from "../../node_modules/classnames/index.js";
+import V from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import A from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as R } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const S = P(null), E = g(
   ({
-    loop: f = !1,
-    startIndex: m = 0,
-    onSlideChange: s,
-    className: u,
-    children: p,
-    columnGap: d,
-    useWheelGestures: w = !1,
-    disableDrag: l = !1,
-    inViewThreshold: x = 0.99,
-    ...a
-  }, C) => {
-    const { className: N, ...v } = y(a, "Carousel"), [P, e] = V(
+    loop: m = !1,
+    startIndex: u = 0,
+    onSlideChange: a,
+    className: p,
+    children: d,
+    columnGap: w,
+    useWheelGestures: x = !1,
+    disableDrag: o = !1,
+    disableNavigationDrag: h = null,
+    inViewThreshold: N = 0.99,
+    ...t
+  }, k) => {
+    const { className: v, ...C } = I(t, "Carousel");
+    let s = {};
+    switch (h) {
+      case "mobile":
+        s = { breakpoints: { "(max-width: 960px)": { watchDrag: !1 } } };
+        break;
+      case "desktop":
+        s = { breakpoints: { "(min-width: 961px)": { watchDrag: !1 } } };
+        break;
+      case "all":
+        s = { watchDrag: !1 };
+        break;
+      default:
+        s = {};
+    }
+    const [b, e] = A(
       {
-        loop: f,
-        startIndex: m,
-        inViewThreshold: x,
-        breakpoints: { "(min-width: 961px)": { watchDrag: !1 } }
+        loop: m,
+        startIndex: u,
+        inViewThreshold: N,
+        ...s
       },
       [
-        ...w ? [
-          b({
+        ...x ? [
+          R({
             forceWheelAxis: "x"
           })
         ] : [],
-        k({
+        V({
           snapped: "carousel-item-in-view"
         })
       ]
     );
-    c(() => {
-      l ? e?.reInit({
+    n(() => {
+      o ? e?.reInit({
         watchDrag: () => !1
       }) : e?.reInit({
         watchDrag: () => !0
       });
-    }, [l, e]);
-    const h = n(
+    }, [o, e]);
+    const D = f(
       (r) => {
         r.key === "ArrowLeft" ? (r.preventDefault(), e?.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e?.scrollNext());
       },
       [e]
-    ), o = n(
+    ), l = f(
       (r) => {
         if (!r)
           return;
-        const t = r.slidesInView()?.[0];
-        t !== void 0 && s?.(t);
+        const i = r.slidesInView()?.[0];
+        i !== void 0 && a?.(i);
       },
-      [s]
+      [a]
     );
-    return c(() => {
+    return n(() => {
       if (e)
-        return e.on("slidesInView", o), () => {
-          e.off("slidesInView", o);
+        return e.on("slidesInView", l), () => {
+          e.off("slidesInView", l);
         };
-    }, [e, o]), /* @__PURE__ */ i(
-      A.Provider,
+    }, [e, l]), /* @__PURE__ */ c(
+      S.Provider,
       {
         value: {
-          carouselRef: P,
+          carouselRef: b,
           api: e,
           scrollPrev: () => e?.scrollPrev(),
           scrollNext: () => e?.scrollNext(),
           canScrollPrev: e?.canScrollPrev() ?? !1,
           canScrollNext: e?.canScrollNext() ?? !1,
-          columnGap: d,
-          onSlideChange: s
+          columnGap: w,
+          onSlideChange: a
         },
-        children: /* @__PURE__ */ i(
+        children: /* @__PURE__ */ c(
           "div",
           {
-            ref: C,
-            onKeyDownCapture: h,
-            className: g(N, u),
+            ref: k,
+            onKeyDownCapture: D,
+            className: y(v, p),
             role: "region",
             "aria-roledescription": "carousel",
-            ...a,
-            ...v,
-            children: p
+            ...t,
+            ...C,
+            children: d
           }
         )
       }
     );
   }
 );
-R.displayName = "Carousel";
+E.displayName = "Carousel";
 export {
-  A as CarouselContext,
-  R as default
+  S as CarouselContext,
+  E as default
 };

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

@@ -12,7 +12,9 @@ export declare const Playground: {
 };
 export declare const CarouselWithArrows: {
     (props: CarouselProps): import("react/jsx-runtime").JSX.Element;
-    args: {};
+    args: {
+        disableNavigationDrag: "desktop";
+    };
     argTypes: {};
 };
 export declare const CarouselWithDots: {

package/dist/components/Carousel/CarouselArrows.js

@@ -1,12 +1,12 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import u from "../../node_modules/classnames/index.js";
-import { forwardRef as p, useCallback as a } from "react";
-import { getCommonProps as C } from "../../utils/index.js";
-import { useCarousel as d } from "./utils.js";
+import { forwardRef as d, useCallback as a } from "react";
+import { getCommonProps as p } from "../../utils/index.js";
+import { useCarousel as C } from "./utils.js";
 import f from "../../assets/CarouselArrowNext.svg.js";
 import v from "../../assets/CarouselArrowPrev.svg.js";
-const N = p(({ className: t, ...s }, l) => {
-  const { className: e, ...n } = C(s, "CarouselArrows"), { api: r } = d(), i = a(() => {
+const w = d(({ className: t, ...s }, n) => {
+  const { className: e, ...l } = p(s, "CarouselArrows"), { api: r } = C(), i = a(() => {
     r && r.scrollPrev(!0);
   }, [r]), c = a(() => {
     r && r.scrollNext(!0);
@@ -14,19 +14,19 @@ const N = p(({ className: t, ...s }, l) => {
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
+      ref: n,
       "aria-roledescription": "carousel-arrow-navigation",
       className: u(`${e}`, t),
       ...s,
-      ...n,
+      ...l,
       children: [
-        /* @__PURE__ */ o("button", { className: `${e}-prev-btn`, onClick: () => i(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(v, {}) }) }),
-        /* @__PURE__ */ o("button", { className: `${e}-next-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(f, {}) }) })
+        /* @__PURE__ */ o("button", { "data-testid": "prev-arrow", className: `${e}-prev-btn`, onClick: () => i(), children: /* @__PURE__ */ o("div", { className: `${e}-prev-btn__icon`, children: /* @__PURE__ */ o(v, {}) }) }),
+        /* @__PURE__ */ o("button", { "data-testid": "next-arrow", className: `${e}-next-btn`, onClick: () => c(), children: /* @__PURE__ */ o("div", { className: `${e}-next-btn__icon`, children: /* @__PURE__ */ o(f, {}) }) })
       ]
     }
   );
 });
-N.displayName = "CarouselArrows";
+w.displayName = "CarouselArrows";
 export {
-  N as default
+  w as default
 };

package/dist/components/Carousel/CarouselArrows.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Carousel/CarouselDots.js

@@ -4,14 +4,13 @@ import { forwardRef as G, useId as L, useState as S, useRef as M, useCallback as
 import { useCarousel as A } from "./utils.js";
 import { getCommonProps as F } from "../../utils/index.js";
 import { CarouselDot as H } from "./CarouselDot.js";
-const $ = 10, w = 10, J = 11, K = G(
-  ({ className: N, maxDots: h = 9, position: v = "inline", numberOfSlides: V = 0, ...C }, b) => {
-    const { className: c, ...k } = F(C, "CarouselDots"), y = L(), { api: t, onSlideChange: a } = A(), [R, T] = S(0), [i, O] = S(
+const h = 10, C = 12, J = (h + C) / 2, K = G(
+  ({ className: N, maxDots: I = 9, position: v = "inline", numberOfSlides: V = 0, ...g }, b) => {
+    const { className: c, ...k } = F(g, "CarouselDots"), y = L(), { api: t, onSlideChange: a } = A(), [R, T] = S(0), [i, O] = S(
       Array.from({ length: V }, (e, o) => o)
-    ), r = M(null), [I, g] = S([]), D = l((e) => {
+    ), r = M(null), [D, $] = S([]), w = l((e) => {
       r.current && r.current.scrollTo?.({
-        // 8px width + 12px gap
-        left: e * ($ + w) - r.current.offsetWidth / 2 + J,
+        left: e * (h + C) - r.current.offsetWidth / 2 + J,
         // Center dot in container
         behavior: "smooth"
       });
@@ -24,9 +23,9 @@ const $ = 10, w = 10, J = 11, K = G(
       O(e.scrollSnapList());
     }, []), n = l(
       (e) => {
-        T(e.selectedScrollSnap()), D(e.selectedScrollSnap());
+        T(e.selectedScrollSnap()), w(e.selectedScrollSnap());
       },
-      [D]
+      [w]
     ), u = l(
       (e) => {
         a?.(e.selectedScrollSnap());
@@ -39,7 +38,7 @@ const $ = 10, w = 10, J = 11, K = G(
           t.off("reInit", f).off("reInit", n).off("select", n).off("settle", u);
         };
     }, [t, f, n, u]);
-    const s = z(() => I.sort((e, o) => e - o), [I]);
+    const s = z(() => D.sort((e, o) => e - o), [D]);
     return /* @__PURE__ */ m(
       "div",
       {
@@ -48,12 +47,12 @@ const $ = 10, w = 10, J = 11, K = G(
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
         className: E(`${c}`, N, `${c}-${v}`),
-        ...C,
+        ...g,
         ...k,
         children: /* @__PURE__ */ m("div", { className: `${c}-container`, children: /* @__PURE__ */ m(
           "div",
           {
-            style: { "--max-width": `${h * $ + (h - 1) * w}px` },
+            style: { "--max-width": `${I * h + (I - 1) * C + 2}px` },
             className: `${c}-container-inner`,
             ref: r,
             children: i.map((e, o) => {
@@ -71,7 +70,7 @@ const $ = 10, w = 10, J = 11, K = G(
                   isSelected: W,
                   scrollableContainerRef: r,
                   onInViewChange: (j) => {
-                    g(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
+                    $(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
                   },
                   variant: _ ? "sm" : "md"
                 },

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

@@ -93,7 +93,6 @@
   &-dots {
     align-items: center;
     display: flex;
-    gap: 12px;
     justify-content: center;
     margin-top: 1rem;
 
@@ -120,14 +119,14 @@
     &-container-inner {
       align-items: center;
       display: flex;
-      gap: 10px;
+      gap: 12px;
       max-width: var(--max-width);
       overflow: auto;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: none; /* Internet Explorer 10+ */
+      padding: 1px 2px;
       scroll-snap-type: x mandatory;
       scrollbar-width: none; /* Firefox */
-
       &::-webkit-scrollbar {
         display: none; /* Safari and Chrome */
       }
@@ -139,7 +138,6 @@
     display: flex;
     height: 10px;
     justify-content: center;
-    margin: 2px;
     min-width: 10px;
     padding: 1px;
     scroll-snap-align: center;

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -1,7 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-bid-snapshot {
-  padding-bottom: $spacing-sm;
   position: relative;
 
   &__text .#{$px}-has-separators .#{$px}-detail {
@@ -30,6 +29,13 @@
   &--has-bids .#{$px}-detail__value {
     font-variation-settings: 'wght' 600;
   }
+
+  // styles that will apply to bid message inside bid snapshot only
+  .#{$px}-bid-message {
+    &.#{$px}-bid-message {
+      margin-bottom: $spacing-sm;
+    }
+  }
 }
 
 .#{$px}-bid-message {

package/dist/scss/patterns/ObjectTile/_objectTile.scss

@@ -39,8 +39,8 @@
 
     .#{$px}-object-tile__lot-badge {
       display: inline-block;
-      position: absolute;
       left: 4%;
+      position: absolute;
 
       svg {
         height: 100%;
@@ -50,12 +50,12 @@
           fill: $pure-black;
         }
       }
-    } 
+    }
   }
 
   & .#{$px}-object-tile__lot-number {
-    margin-bottom: $spacing-xsm;
     display: inline-block;
+    margin-bottom: $spacing-xsm;
   }
 
   & .#{$px}-object-tile__maker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.121.0",
+  "version": "1.122.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"