@phillips/seldon 1.89.1 → 1.91.0

package/dist/components/Carousel/Carousel.js

@@ -1,90 +1,95 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as A, forwardRef as R, useEffect as u, useCallback as m } from "react";
-import { getCommonProps as b } from "../../utils/index.js";
-import d from "../../node_modules/classnames/index.js";
-import E from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
-import { WheelGesturesPlugin as K } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
-const W = A(null), h = R(
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as h, forwardRef as k, useEffect as m, useCallback as i } from "react";
+import { getCommonProps as A } from "../../utils/index.js";
+import R from "../../node_modules/classnames/index.js";
+import b from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as E } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const K = h(null), W = k(
   ({
-    loop: a = !1,
+    loop: w = !1,
     startIndex: x = 0,
-    onSlideChange: o,
-    className: N,
-    children: P,
-    columnGap: v,
-    useWheelGestures: w = !1,
-    disableDrag: s = !1,
+    onSlideChange: s,
+    className: d,
+    children: N,
+    columnGap: P,
+    useWheelGestures: v = !1,
+    disableDrag: o = !1,
     ...t
-  }, y) => {
+  }, I) => {
     var c, f;
-    const { className: C, ...D } = b(t, "Carousel"), [I, e] = E(
+    const { className: y, ...C } = A(t, "Carousel"), [D, e] = b(
       {
-        loop: a,
-        startIndex: x
+        loop: w,
+        startIndex: x,
+        inViewThreshold: 0.99
       },
       [
-        ...w ? [
-          K({
+        ...v ? [
+          E({
             forceWheelAxis: "x"
           })
         ] : []
       ]
     );
-    u(() => {
-      s ? e == null || e.reInit({
+    m(() => {
+      o ? e == null || e.reInit({
         watchDrag: () => !1
       }) : e == null || e.reInit({
         watchDrag: () => !0
       });
-    }, [s, e]);
-    const k = m(
+    }, [o, e]);
+    const V = i(
       (r) => {
         r.key === "ArrowLeft" ? (r.preventDefault(), e == null || e.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e == null || e.scrollNext());
       },
       [e]
-    ), l = m(
+    ), l = i(
       (r) => {
-        r && (o == null || o(r.selectedScrollSnap()));
+        var u;
+        if (!r)
+          return;
+        const n = (u = r.slidesInView()) == null ? void 0 : u[0];
+        n !== void 0 && (s == null || s(n));
       },
-      [o]
+      [s]
     );
-    return u(() => {
+    return m(() => {
       if (e)
-        return l(e), e.on("reInit", l), e.on("settle", l), () => {
-          e == null || e.off("settle", l), e == null || e.off("reInit", l);
+        return e.on("slidesInView", l), () => {
+          e.off("slidesInView", l);
         };
-    }, [e, l]), /* @__PURE__ */ n(
-      W.Provider,
+    }, [e, l]), /* @__PURE__ */ a(
+      K.Provider,
       {
         value: {
-          carouselRef: I,
+          carouselRef: D,
           api: e,
           scrollPrev: () => e == null ? void 0 : e.scrollPrev(),
           scrollNext: () => e == null ? void 0 : e.scrollNext(),
           canScrollPrev: (c = e == null ? void 0 : e.canScrollPrev()) != null ? c : !1,
           canScrollNext: (f = e == null ? void 0 : e.canScrollNext()) != null ? f : !1,
-          columnGap: v,
-          onSlideChange: o
+          columnGap: P,
+          onSlideChange: s
         },
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ a(
           "div",
           {
-            ref: y,
-            onKeyDownCapture: k,
-            className: d(C, N),
+            ref: I,
+            onKeyDownCapture: V,
+            className: R(y, d),
             role: "region",
             "aria-roledescription": "carousel",
             ...t,
-            ...D,
-            children: P
+            ...C,
+            children: N
           }
         )
       }
     );
   }
 );
-h.displayName = "Carousel";
+W.displayName = "Carousel";
 export {
-  W as CarouselContext,
-  h as default
+  K as CarouselContext,
+  W as default
 };

package/dist/components/ContentPeek/ContentPeek.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { HeightUnits } from './utils';
 export interface ContentPeekProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Unique id for component testing
@@ -20,6 +21,14 @@ export interface ContentPeekProps extends React.HTMLAttributes<HTMLDivElement> {
      * Maximum height of the content when collapsed
      */
     maxHeight?: number;
+    /**
+     * Used to set a minimum height for the content before enabling the Peek functionality. Defaults to the same value as maxHeight if not provided.
+     */
+    minHeightThreshold?: number;
+    /**
+     * The unit used for setting height values. Defaults to 'px'.
+     */
+    heightUnits?: HeightUnits;
 }
 /**
  * ## Overview

package/dist/components/ContentPeek/ContentPeek.js

@@ -1,55 +1,61 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as N, useState as i, useRef as x, useEffect as $, useCallback as P } from "react";
-import c from "../../node_modules/classnames/index.js";
-import { getCommonProps as b } from "../../utils/index.js";
-import k from "../Button/Button.js";
-import { ButtonVariants as R } from "../Button/types.js";
-import w from "../Collapsible/Collapsible.js";
-import E from "../Collapsible/CollapsibleContent.js";
-import M from "../Collapsible/CollapsibleTrigger.js";
-import O from "../../assets/plus.svg.js";
-import S from "../../assets/minus.svg.js";
-const j = N(
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { forwardRef as P, useState as i, useRef as b, useEffect as k, useCallback as R } from "react";
+import d from "../../node_modules/classnames/index.js";
+import { getCommonProps as w } from "../../utils/index.js";
+import E from "../Button/Button.js";
+import { ButtonVariants as M } from "../Button/types.js";
+import O from "../Collapsible/Collapsible.js";
+import S from "../Collapsible/CollapsibleContent.js";
+import j from "../Collapsible/CollapsibleTrigger.js";
+import B from "../../assets/plus.svg.js";
+import I from "../../assets/minus.svg.js";
+import { HeightUnits as L } from "./utils.js";
+const U = P(
   ({
-    className: f,
-    children: n,
-    contentExpandText: d = "Read More",
-    contentCollapseText: u = "Read Less",
-    maxHeight: a = 480,
-    ...r
-  }, p) => {
-    const { className: e, ...g } = b(r, "ContentPeek"), [t, v] = i(!1), [l, C] = i(!1), s = x(null);
-    $(() => {
-      s.current && C(s.current.scrollHeight > a);
-    }, [n, a]);
-    const h = P(() => {
-      v((y) => !y);
+    className: p,
+    children: m,
+    contentExpandText: u = "Read More",
+    contentCollapseText: v = "Read Less",
+    maxHeight: s = 480,
+    minHeightThreshold: a,
+    heightUnits: C = L.px,
+    ...t
+  }, g) => {
+    const { className: e, ...y } = w(t, "ContentPeek"), [r, N] = i(!1), [c, $] = i(!1), n = b(null);
+    k(() => {
+      if (n.current) {
+        const l = a != null ? a : s;
+        $(n.current.scrollHeight > l);
+      }
+    }, [m, s, a]);
+    const x = R(() => {
+      N((l) => !l);
     }, []);
-    return /* @__PURE__ */ m(
-      w,
+    return /* @__PURE__ */ f(
+      O,
       {
-        id: r == null ? void 0 : r.id,
-        open: t,
-        onOpenChange: h,
-        className: c(e, f),
+        id: t == null ? void 0 : t.id,
+        open: r,
+        onOpenChange: x,
+        className: d(e, p),
         style: {
-          "--content-peek-max-height": `${a}px`
+          "--content-peek-max-height": `${s}${C}`
         },
-        ref: p,
-        ...g,
-        ...r,
+        ref: g,
+        ...y,
+        ...t,
         children: [
-          /* @__PURE__ */ o(E, { className: `${e}-content`, ref: s, forceMount: !0, children: n }),
-          l ? /* @__PURE__ */ o(
+          /* @__PURE__ */ o(S, { className: `${e}-content`, ref: n, forceMount: !0, children: m }),
+          c ? /* @__PURE__ */ o(
             "div",
             {
-              className: c(`${e}-overlay`, {
-                [`${e}-overlay--expanded`]: t,
-                [`${e}-overlay--gradient`]: l && !t
+              className: d(`${e}-overlay`, {
+                [`${e}-overlay--expanded`]: r,
+                [`${e}-overlay--gradient`]: c && !r
               }),
-              children: /* @__PURE__ */ o("div", { className: `${e}-overlay-trigger-wrapper`, children: /* @__PURE__ */ o(M, { asChild: !0, className: `${e}-overlay-trigger`, children: /* @__PURE__ */ m(k, { variant: R.secondary, children: [
-                t ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(O, {}),
-                t ? u : d
+              children: /* @__PURE__ */ o("div", { className: `${e}-overlay-trigger-wrapper`, children: /* @__PURE__ */ o(j, { asChild: !0, className: `${e}-overlay-trigger`, children: /* @__PURE__ */ f(E, { variant: M.secondary, children: [
+                r ? /* @__PURE__ */ o(I, {}) : /* @__PURE__ */ o(B, {}),
+                r ? v : u
               ] }) }) })
             }
           ) : null
@@ -58,7 +64,7 @@ const j = N(
     );
   }
 );
-j.displayName = "ContentPeek";
+U.displayName = "ContentPeek";
 export {
-  j as default
+  U as default
 };

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

@@ -12,6 +12,9 @@ declare const meta: {
         maxHeight: {
             control: "number";
         };
+        minHeightThreshold: {
+            control: "number";
+        };
     };
 };
 export default meta;

package/dist/components/ContentPeek/utils.d.ts

@@ -0,0 +1,4 @@
+export declare enum HeightUnits {
+    px = "px",
+    rem = "rem"
+}

package/dist/components/ContentPeek/utils.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.px = "px", r.rem = "rem", r))(e || {});
+export {
+  e as HeightUnits
+};

package/dist/components/Video/Video.d.ts

@@ -1,14 +1,21 @@
-import { ComponentProps } from 'react';
+import { default as React, ComponentProps } from 'react';
 export interface VideoProps extends ComponentProps<'div'> {
     /**
      * Aspect ratio of the video
-     * Defaults to 1.777 (16/9)
      */
     aspectRatio?: number;
     /**
      * The url of the video source
      */
     videoSource: string;
+    /**
+     * The ref to the iframe
+     */
+    iframeRef?: React.Ref<HTMLIFrameElement>;
+    /**
+     * The class name for the iframe
+     */
+    iframeClassName?: string;
 }
 /**
  * ## Overview
@@ -19,5 +26,5 @@ export interface VideoProps extends ComponentProps<'div'> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-video--overview)
  */
-declare const Video: ({ aspectRatio, className, videoSource, ...props }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Video;

package/dist/components/Video/Video.js

@@ -1,26 +1,31 @@
-import { jsx as t } from "react/jsx-runtime";
-import { getCommonProps as d } from "../../utils/index.js";
-import l from "../../node_modules/classnames/index.js";
-const u = ({ aspectRatio: s = 16 / 9, className: o, videoSource: m, ...e }) => {
-  const { className: a, "data-testid": r, ...i } = d(e, "Video"), c = {
-    className: l(a, o),
-    "data-testid": r,
-    style: { "--aspect-ratio": s },
-    ...i,
-    ...e
-  };
-  return /* @__PURE__ */ t("div", { ...c, children: /* @__PURE__ */ t(
-    "iframe",
-    {
-      "data-testid": `${r}-iframe`,
-      className: `${a}__iframe`,
-      src: m,
-      allowFullScreen: !0,
-      allow: "encrypted-media",
-      referrerPolicy: "no-referrer"
-    }
-  ) });
-};
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { getCommonProps as N } from "../../utils/index.js";
+import t from "../../node_modules/classnames/index.js";
+const u = p(
+  ({ aspectRatio: s, className: m, videoSource: i, iframeRef: d, iframeClassName: l, ...e }, c) => {
+    const { className: r, "data-testid": a, ...f } = N(e, "Video"), n = {
+      className: t(r, m),
+      "data-testid": a,
+      style: { "--aspect-ratio": s },
+      ...f,
+      ...e
+    };
+    return /* @__PURE__ */ o("div", { ...n, ref: c, children: /* @__PURE__ */ o(
+      "iframe",
+      {
+        ref: d,
+        "data-testid": `${a}-iframe`,
+        className: t(`${r}__iframe`, l),
+        src: i,
+        allowFullScreen: !0,
+        allow: "encrypted-media",
+        referrerPolicy: "no-referrer"
+      }
+    ) });
+  }
+);
+u.displayName = "Video";
 export {
   u as default
 };

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

@@ -1,7 +1,7 @@
 import { VideoProps } from './Video';
 declare const meta: {
     title: string;
-    component: ({ aspectRatio, className, videoSource, ...props }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<Omit<VideoProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 export declare const Playground: {

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index6.js";
+import { __module as t } from "../../_virtual/index5.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index5.js";
+import { __module as e } from "../../../../_virtual/index6.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/package.json

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