@phillips/seldon 1.198.0 → 1.200.0

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

@@ -1,8 +1,11 @@
-import { ComponentProps } from 'react';
 import { SpacingTokens } from '../../utils';
 import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
 export type CarouselApi = UseEmblaCarouselType[1];
-export interface CarouselProps extends ComponentProps<'div'> {
+export interface CarouselProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'ul', CustomComponent, etc. Defaults to 'div'.
+     */
+    element?: React.ElementType;
     /**
      * Whether the carousel should loop.
      */
@@ -60,5 +63,5 @@ export declare const CarouselContext: import('react').Context<CarouselContextPro
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-carousel--overview)
  */
-declare const Carousel: import('react').ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Carousel;

package/dist/components/Carousel/Carousel.js

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

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

@@ -2,7 +2,7 @@ import { CarouselProps } from './Carousel';
 import { CarouselDotsProps } from './CarouselDots';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 export declare const Playground: {

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

@@ -1,10 +1,12 @@
 import { ComponentProps } from 'react';
-export type CarouselArrowsProps = ComponentProps<'div'>;
+export interface CarouselArrowsProps extends ComponentProps<'div'> {
+    areArrowsAlwaysVisible?: boolean;
+}
 /**
  * ## Overview
  *
  * Arrow navigation for the carousel.
  *
  */
-declare const CarouselArrows: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CarouselArrows: import('react').ForwardRefExoticComponent<Omit<CarouselArrowsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default CarouselArrows;

package/dist/components/Carousel/CarouselArrows.js

@@ -1,43 +1,67 @@
-import { jsxs as h, jsx as s } from "react/jsx-runtime";
-import u from "../../node_modules/classnames/index.js";
-import { forwardRef as f, useCallback as n } from "react";
-import { getCommonProps as p } from "../../utils/index.js";
-import { useCarousel as C } from "./utils.js";
-import t from "../Icon/Icon.js";
-const v = f(({ className: l, ...i }, a) => {
-  const { className: r, ...c } = p(i, "CarouselArrows"), { api: e } = C(), m = n(() => {
-    if (e)
-      if (e?.slidesInView().length <= 1)
-        e.scrollPrev(!0);
-      else {
-        const o = e?.slidesInView();
-        e?.scrollTo(Math.max(0, o[0] - (o.length ?? 1)));
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import n from "../../node_modules/classnames/index.js";
+import { forwardRef as p, useCallback as l } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
+import { useCarousel as f } from "./utils.js";
+import a from "../Icon/Icon.js";
+const C = p(
+  ({ className: c, areArrowsAlwaysVisible: i, ...t }, d) => {
+    const { className: s, ...m } = u(t, "CarouselArrows"), { api: e } = f(), w = l(() => {
+      if (e)
+        if (e?.slidesInView().length <= 1)
+          e.scrollPrev(!0);
+        else {
+          const o = e?.slidesInView();
+          e?.scrollTo(Math.max(0, o[0] - (o.length ?? 1)));
+        }
+    }, [e]), h = l(() => {
+      if (e)
+        if (e?.slidesInView().length <= 1)
+          e?.scrollNext(!0);
+        else {
+          const v = (e?.slidesInView()).slice(-1)[0] + 1;
+          e?.scrollTo(v);
+        }
+    }, [e]);
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        ref: d,
+        "aria-roledescription": "carousel-arrow-navigation",
+        className: n(`${s}`, c),
+        ...t,
+        ...m,
+        children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "data-testid": "prev-arrow",
+              className: n(`${s}-prev-btn`, {
+                [`${s}-prev-btn--always-visible`]: i,
+                [`${s}-prev-btn--disabled`]: !e?.canScrollPrev()
+              }),
+              onClick: w,
+              children: /* @__PURE__ */ r("div", { className: `${s}-prev-btn__icon`, children: /* @__PURE__ */ r(a, { icon: "ChevronLeft", height: "2rem" }) })
+            }
+          ),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "data-testid": "next-arrow",
+              className: n(`${s}-next-btn`, {
+                [`${s}-next-btn--always-visible`]: i,
+                [`${s}-next-btn--disabled`]: !e?.canScrollNext()
+              }),
+              onClick: h,
+              children: /* @__PURE__ */ r("div", { className: `${s}-next-btn__icon`, children: /* @__PURE__ */ r(a, { icon: "ChevronRight", height: "2rem" }) })
+            }
+          )
+        ]
       }
-  }, [e]), d = n(() => {
-    if (e)
-      if (e?.slidesInView().length <= 1)
-        e?.scrollNext(!0);
-      else {
-        const w = (e?.slidesInView()).slice(-1)[0] + 1;
-        e?.scrollTo(w);
-      }
-  }, [e]);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      ref: a,
-      "aria-roledescription": "carousel-arrow-navigation",
-      className: u(`${r}`, l),
-      ...i,
-      ...c,
-      children: [
-        /* @__PURE__ */ s("button", { "data-testid": "prev-arrow", className: `${r}-prev-btn`, onClick: () => m(), children: /* @__PURE__ */ s("div", { className: `${r}-prev-btn__icon`, children: /* @__PURE__ */ s(t, { icon: "ChevronLeft", height: "2rem" }) }) }),
-        /* @__PURE__ */ s("button", { "data-testid": "next-arrow", className: `${r}-next-btn`, onClick: () => d(), children: /* @__PURE__ */ s("div", { className: `${r}-next-btn__icon`, children: /* @__PURE__ */ s(t, { icon: "ChevronRight", height: "2rem" }) }) })
-      ]
-    }
-  );
-});
-v.displayName = "CarouselArrows";
+    );
+  }
+);
+C.displayName = "CarouselArrows";
 export {
-  v as default
+  C as default
 };

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

@@ -1,5 +1,10 @@
-import { ComponentProps } from 'react';
-export type CarouselItemProps = ComponentProps<'div'>;
+import { default as React } from 'react';
+export interface CarouselItemProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'li', CustomComponent, etc. Defaults to 'div'.
+     */
+    element?: React.ElementType;
+}
 /**
  * ## Overview
  *
@@ -7,5 +12,5 @@ export type CarouselItemProps = ComponentProps<'div'>;
  * It will stretch to fill the width of the carousel viewport.
  *
  */
-declare const CarouselItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
 export default CarouselItem;

package/dist/components/Carousel/CarouselItem.js

@@ -1,26 +1,28 @@
-import { jsx as t } from "react/jsx-runtime";
-import l from "../../node_modules/classnames/index.js";
-import { forwardRef as i } from "react";
-import { getCommonProps as n } from "../../utils/index.js";
-import { useCarousel as c } from "./utils.js";
-const u = i(({ className: m, ...o }, s) => {
-  const { className: r, ...a } = n(o, "CarouselItem"), { columnGap: e } = c();
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      ref: s,
-      role: o.onClick ? "button" : "group",
-      "aria-roledescription": "slide",
-      className: l(`${r}`, m, {
-        [`${r}--gap-${e}`]: !!e,
-        [`${r}--cursor-pointer`]: !!o.onClick
-      }),
-      ...o,
-      ...a
-    }
-  );
-});
-u.displayName = "CarouselItem";
+import { jsx as n } from "react/jsx-runtime";
+import i from "../../node_modules/classnames/index.js";
+import { forwardRef as c } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
+import { useCarousel as p } from "./utils.js";
+const C = c(
+  ({ element: m, className: s, ...o }, a) => {
+    const t = m || "div", { className: e, ...l } = u(o, "CarouselItem"), { columnGap: r } = p();
+    return /* @__PURE__ */ n(
+      t,
+      {
+        ref: a,
+        role: o.onClick ? "button" : "group",
+        "aria-roledescription": "slide",
+        className: i(`${e}`, s, {
+          [`${e}--gap-${r}`]: !!r,
+          [`${e}--cursor-pointer`]: !!o.onClick
+        }),
+        ...o,
+        ...l
+      }
+    );
+  }
+);
+C.displayName = "CarouselItem";
 export {
-  u as default
+  C as default
 };

package/dist/patterns/BidSnapshot/BidSnapshot.d.ts

@@ -59,9 +59,9 @@ export interface BidSnapshotProps extends ComponentProps<'div'> {
      */
     startingBidText?: string;
     /**
-     * Determines whether to show or hide sold price
+     * Determines whether to show or hide sold label and price
      */
-    showSoldPrice?: boolean;
+    showSoldLabel?: boolean;
     /**
      * Sold For amount
      * */

package/dist/patterns/BidSnapshot/BidSnapshot.js

@@ -30,7 +30,7 @@ const Y = (o) => o === 1 ? `${o} bid` : `${o} bids`, Z = q(
     startingBid: u,
     startingBidText: M = "Starting bid",
     soldPrice: $,
-    showSoldPrice: j = !0,
+    showSoldLabel: j = !0,
     soldForText: E = "Sold for",
     wonForText: P = "Won for",
     getCurrentDateTime: b = () => /* @__PURE__ */ new Date(),

package/dist/patterns/BidSnapshot/BidSnapshot.stories.d.ts

@@ -47,7 +47,7 @@ declare const meta: {
         startingBidText: {
             control: "text";
         };
-        showSoldPrice: {
+        showSoldLabel: {
             control: "boolean";
         };
         soldPrice: {

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

@@ -17,6 +17,23 @@
     top: 0;
     width: 33.3%;
 
+    &--always-visible {
+      height: unset;
+      opacity: 1;
+      top: 50%;
+      transform: translateY(-50%);
+      width: unset;
+
+      .#{$px}-carousel-arrows-next-btn__icon,
+      .#{$px}-carousel-arrows-prev-btn__icon {
+        box-shadow: 0 0 1px $grey-100;
+      }
+    }
+
+    &--disabled {
+      display: none;
+    }
+
     &:hover {
       opacity: 1;
     }

package/package.json

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