@telia/teddy 0.1.4 → 0.1.5

package/dist/components/card/card-carousel.cjs

@@ -10,6 +10,7 @@ const utils_breakpointToNumber = require("../../utils/breakpointToNumber.cjs");
 const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
 const ImageSlider = React.forwardRef(
   ({
+    sliderRef,
     settings,
     variants,
     className,
@@ -22,9 +23,12 @@ const ImageSlider = React.forwardRef(
     const [selectedSlide, setSelectedSlide] = React.useState((settings == null ? void 0 : settings.initialSlide) || 0);
     const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
     const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
+    const internalSliderRef = React.useRef(null);
+    const innerSliderRef = sliderRef || internalSliderRef;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
       components_carousel_carouselRoot.Carousel,
       {
+        sliderRef: innerSliderRef,
         size: "sm",
         onClickNext,
         onClickPrev,

package/dist/components/card/card-carousel.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Settings } from 'react-slick';
+import { default as Slider, Settings } from 'react-slick';
 
 export type ImageSliderVariant = {
     color: string;
@@ -10,6 +10,7 @@ export interface ImageSliderProps {
     children: React.ReactNode;
     className?: string;
     settings?: Settings;
+    sliderRef?: React.RefObject<Slider>;
     onClick?: () => void;
     onClickNext?: () => void;
     onClickPrev?: () => void;

package/dist/components/card/card-carousel.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useState } from "react";
+import React__default, { useState, useRef } from "react";
 import clsx from "clsx";
 import { s as styles, rootClassName } from "./card.js";
 import { Carousel } from "../carousel/carousel-root.js";
@@ -8,6 +8,7 @@ import { breakpointToNumber } from "../../utils/breakpointToNumber.js";
 import { teddyBreakpointMd } from "../../tokens/breakpoint/variables.js";
 const ImageSlider = React__default.forwardRef(
   ({
+    sliderRef,
     settings,
     variants,
     className,
@@ -20,9 +21,12 @@ const ImageSlider = React__default.forwardRef(
     const [selectedSlide, setSelectedSlide] = useState((settings == null ? void 0 : settings.initialSlide) || 0);
     const rootCarouselClass = `${rootClassName}__carousel`;
     const classes = clsx([styles[rootCarouselClass]], className);
+    const internalSliderRef = useRef(null);
+    const innerSliderRef = sliderRef || internalSliderRef;
     return /* @__PURE__ */ jsx("div", { ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(
       Carousel,
       {
+        sliderRef: innerSliderRef,
         size: "sm",
         onClickNext,
         onClickPrev,

package/dist/components/carousel/carousel-root.cjs

@@ -41,8 +41,11 @@ const Carousel = ({
   onClick = () => void 0,
   navigationIcon,
   settings,
-  size = "lg"
+  size = "lg",
+  sliderRef
 }) => {
+  const internalSliderRef = React.useRef(null);
+  const innerSliderRef = sliderRef || internalSliderRef;
   const computedSettings = {
     responsive: [],
     centerMode: false,
@@ -64,7 +67,7 @@ const Carousel = ({
         [styles[`${rootClassName}--${size}`]]: size,
         [className]: className
       }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, children: React.Children.map(filteredChildren, (child) => {
+      children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ref: innerSliderRef, ...computedSettings, children: React.Children.map(filteredChildren, (child) => {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
       }) })
     }

package/dist/components/carousel/carousel-root.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Settings } from 'react-slick';
+import { default as Slider, Settings } from 'react-slick';
 import { IconName } from '../icon';
 
 export type CarouselProps = {
@@ -8,6 +8,7 @@ export type CarouselProps = {
     navigationIcon?: IconName;
     settings?: Settings;
     size?: 'sm' | 'lg';
+    sliderRef?: React.RefObject<Slider>;
     onClickNext?: () => void;
     onClickPrev?: () => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;

package/dist/components/carousel/carousel-root.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React__default from "react";
+import React__default, { useRef } from "react";
 import clsx from "clsx";
 import Slider from "react-slick";
 import "../../assets/sprite.269ba410-teddy.svg";
@@ -39,8 +39,11 @@ const Carousel = ({
   onClick = () => void 0,
   navigationIcon,
   settings,
-  size = "lg"
+  size = "lg",
+  sliderRef
 }) => {
+  const internalSliderRef = useRef(null);
+  const innerSliderRef = sliderRef || internalSliderRef;
   const computedSettings = {
     responsive: [],
     centerMode: false,
@@ -62,7 +65,7 @@ const Carousel = ({
         [styles[`${rootClassName}--${size}`]]: size,
         [className]: className
       }),
-      children: /* @__PURE__ */ jsx(SliderComponent, { ...computedSettings, children: React__default.Children.map(filteredChildren, (child) => {
+      children: /* @__PURE__ */ jsx(SliderComponent, { ref: innerSliderRef, ...computedSettings, children: React__default.Children.map(filteredChildren, (child) => {
         return /* @__PURE__ */ jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
       }) })
     }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.5",
   "sideEffects": [
     "**/*.css"
   ],