@phillips/seldon 1.188.0 → 1.189.0

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

@@ -35,6 +35,10 @@ export interface CarouselProps extends ComponentProps<'div'> {
      *  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.
      */
     inViewThreshold?: number;
+    /**
+     * The number of slides to scroll at once.
+     */
+    slidesToScroll?: number;
 }
 type CarouselContextProps = {
     carouselRef: ReturnType<typeof useEmblaCarousel>[0];

package/dist/components/Carousel/Carousel.js

@@ -1,11 +1,11 @@
 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(
+import { createContext as g, forwardRef as I, useEffect as n, useCallback as f } from "react";
+import { getCommonProps as y } from "../../utils/index.js";
+import V from "../../node_modules/classnames/index.js";
+import A from "../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.js";
+import R from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import { WheelGesturesPlugin as S } from "../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js";
+const E = g(null), K = I(
   ({
     loop: m = !1,
     startIndex: u = 0,
@@ -17,9 +17,10 @@ const S = P(null), E = g(
     disableDrag: o = !1,
     disableNavigationDrag: h = null,
     inViewThreshold: N = 0.99,
+    slidesToScroll: k = 1,
     ...t
-  }, k) => {
-    const { className: v, ...C } = I(t, "Carousel");
+  }, v) => {
+    const { className: C, ...b } = y(t, "Carousel");
     let s = {};
     switch (h) {
       case "mobile":
@@ -34,20 +35,21 @@ const S = P(null), E = g(
       default:
         s = {};
     }
-    const [b, e] = A(
+    const [D, e] = R(
       {
         loop: m,
         startIndex: u,
         inViewThreshold: N,
-        ...s
+        ...s,
+        slidesToScroll: k
       },
       [
         ...x ? [
-          R({
+          S({
             forceWheelAxis: "x"
           })
         ] : [],
-        V({
+        A({
           snapped: "carousel-item-in-view"
         })
       ]
@@ -59,7 +61,7 @@ const S = P(null), E = g(
         watchDrag: () => !0
       });
     }, [o, e]);
-    const D = f(
+    const P = f(
       (r) => {
         r.key === "ArrowLeft" ? (r.preventDefault(), e?.scrollPrev()) : r.key === "ArrowRight" && (r.preventDefault(), e?.scrollNext());
       },
@@ -79,10 +81,10 @@ const S = P(null), E = g(
           e.off("slidesInView", l);
         };
     }, [e, l]), /* @__PURE__ */ c(
-      S.Provider,
+      E.Provider,
       {
         value: {
-          carouselRef: b,
+          carouselRef: D,
           api: e,
           scrollPrev: () => e?.scrollPrev(),
           scrollNext: () => e?.scrollNext(),
@@ -94,13 +96,13 @@ const S = P(null), E = g(
         children: /* @__PURE__ */ c(
           "div",
           {
-            ref: k,
-            onKeyDownCapture: D,
-            className: y(v, p),
+            ref: v,
+            onKeyDownCapture: P,
+            className: V(C, p),
             role: "region",
             "aria-roledescription": "carousel",
             ...t,
-            ...C,
+            ...b,
             children: d
           }
         )
@@ -108,8 +110,8 @@ const S = P(null), E = g(
     );
   }
 );
-E.displayName = "Carousel";
+K.displayName = "Carousel";
 export {
-  S as CarouselContext,
-  E as default
+  E as CarouselContext,
+  K as default
 };

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

@@ -45,3 +45,18 @@ export declare const CarouselWithDotsOverflow: {
     argTypes: {};
 };
 export declare const ControlledCarousel: (props: CarouselProps & CarouselDotsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselWithMultipleItems: {
+    (props: CarouselProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        disableNavigationDrag: "desktop";
+        slidesToScroll: number;
+    };
+    argTypes: {
+        slidesToScroll: {
+            control: {
+                type: string;
+            };
+            defaultValue: number;
+        };
+    };
+};

package/dist/components/ComposedModal/ComposedModal.d.ts

@@ -1,15 +1,5 @@
 import { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal';
-export interface ModalButtonProps {
-    /**
-     * Callback click function for button
-     */
-    onClick?: () => void | unknown;
-    /**
-     * Button label text
-     */
-    buttonLabel?: string;
-}
 export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role' | 'style'> {
     /**
      * Title for Composed Modal
@@ -30,11 +20,11 @@ export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role'
     /**
      * Left Button Props
      */
-    secondaryButton?: ModalButtonProps;
+    secondaryButton?: React.ReactNode;
     /**
      * Right Button Props
      */
-    primaryButton?: ModalButtonProps;
+    primaryButton?: React.ReactNode;
     /**
      * Footer content for bottom of Viewings Details
      */

package/dist/components/ComposedModal/ComposedModal.js

@@ -1,67 +1,65 @@
-import { jsxs as e, jsx as m, Fragment as C } from "react/jsx-runtime";
+import { jsxs as o, jsx as s, Fragment as $ } from "react/jsx-runtime";
 import g from "../../node_modules/classnames/index.js";
 import { forwardRef as x } from "react";
-import { getCommonProps as k, noOp as M } from "../../utils/index.js";
-import t from "../Button/Button.js";
-import { ButtonVariants as n } from "../Button/types.js";
-import y from "../Divider/Divider.js";
-import j from "../Modal/Modal.js";
-import { TextVariants as c } from "../Text/types.js";
-import p from "../Text/Text.js";
-const u = x(
+import { getCommonProps as b, noOp as C } from "../../utils/index.js";
+import M from "../Divider/Divider.js";
+import y from "../Modal/Modal.js";
+import { TextVariants as t } from "../Text/types.js";
+import c from "../Text/Text.js";
+const j = x(
   ({
-    children: f,
-    className: h,
-    overlayClassName: L,
-    isOpen: v = !1,
-    onClose: b = M,
+    children: p,
+    className: n,
+    overlayClassName: u,
+    isOpen: f = !1,
+    onClose: h = C,
     maxHeightValue: N = "60vh",
-    title: l,
-    footerContent: s,
-    secondaryButton: i,
-    primaryButton: o,
-    id: r,
-    ...d
+    title: r,
+    footerContent: m,
+    secondaryButton: d,
+    primaryButton: i,
+    id: e,
+    ...l
   }, _) => {
     const {
       className: a,
       "data-testid": P,
-      ...$
-    } = k({ id: r, ...d }, "ComposedModal");
-    return /* @__PURE__ */ e(
-      j,
+      ...v
+    } = b({ id: e, ...l }, "ComposedModal");
+    return /* @__PURE__ */ o(
+      y,
       {
-        isOpen: v,
-        onClose: b,
-        ...d,
-        ...$,
-        className: g(`${a}`, h),
-        id: r,
+        isOpen: f,
+        onClose: h,
+        ...l,
+        ...v,
+        className: g(`${a}`, n),
+        id: e,
         ref: _,
         children: [
-          l ? /* @__PURE__ */ m(p, { variant: c.heading3, className: `${a}__title`, children: l }) : null,
-          /* @__PURE__ */ m(
+          r ? /* @__PURE__ */ s(c, { variant: t.heading3, className: `${a}__title`, children: r }) : null,
+          /* @__PURE__ */ s(
             "div",
             {
               className: `${a}__body`,
               style: { "--max-modal-body-height": N },
-              children: f
+              children: p
             }
           ),
-          (i || o || s) && /* @__PURE__ */ e(C, { children: [
-            /* @__PURE__ */ m(y, { className: `${a}__divider`, id: `${r}-divider` }),
-            /* @__PURE__ */ e("div", { className: `${a}__btns-group`, children: [
-              i && /* @__PURE__ */ m(t, { id: `${r}-secondary-btn`, variant: n.secondary, onClick: i.onClick, children: i.buttonLabel }),
-              o && /* @__PURE__ */ m(t, { id: `${r}-primary-btn`, variant: n.primary, onClick: o.onClick, children: o.buttonLabel })
+          (d || i || m) && /* @__PURE__ */ o($, { children: [
+            /* @__PURE__ */ s(M, { className: `${a}__divider`, id: `${e}-divider` }),
+            /* @__PURE__ */ o("div", { className: `${a}__btns-group`, children: [
+              d,
+              i
             ] }),
-            s && /* @__PURE__ */ m(p, { variant: c.heading5, className: `${a}__disclaimer`, children: s })
+            m && /* @__PURE__ */ s(c, { variant: t.heading5, className: `${a}__disclaimer`, children: m })
           ] })
         ]
       }
     );
   }
 );
-u.displayName = "ComposedModal";
+j.displayName = "ComposedModal";
 export {
-  u as default
+  j as default
 };

package/package.json

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