@phillips/seldon 1.89.0 → 1.90.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/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/patterns/DetailList/utils.js

@@ -1,11 +1,13 @@
-import { isValidElement as a } from "react";
-const o = (e, t) => {
-  if (a(e)) {
-    const { label: r, value: l } = e.props;
-    return `detail-${r}-${l}`;
+import { isValidElement as n } from "react";
+const i = (e, t) => {
+  if (n(e)) {
+    if (e.key)
+      return e.key;
+    const { label: r, value: a } = e.props;
+    return `detail-${r}-${a}`;
   }
   return `detail-${t}`;
 };
 export {
-  o as getDetailKey
+  i as getDetailKey
 };

package/dist/scss/components/Input/_input.scss

@@ -27,10 +27,11 @@ $lg: #{$px}-input--lg;
   }
 
   &__input {
+    @include text($string2);
+
     accent-color: $soft-black;
     border: 1px solid $keyline-gray;
     border-radius: 0.1875rem;
-    font-size: 0.8125rem;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0.25rem;
     padding: $padding-xsm;

package/package.json

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