@salt-ds/embla-carousel 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/css/salt-embla-carousel.css +1 -1
- package/dist-cjs/CarouselAutoplayIndicator.js +2 -2
- package/dist-cjs/CarouselAutoplayIndicator.js.map +1 -1
- package/dist-cjs/CarouselAutoplayIndicatorSVG.js +2 -2
- package/dist-cjs/CarouselAutoplayIndicatorSVG.js.map +1 -1
- package/dist-cjs/CarouselCard.js.map +1 -1
- package/dist-cjs/CarouselNextButton.js.map +1 -1
- package/dist-cjs/CarouselPreviousButton.js.map +1 -1
- package/dist-cjs/CarouselProgressLabel.js.map +1 -1
- package/dist-cjs/CarouselSlides.js.map +1 -1
- package/dist-cjs/CarouselTabList.js.map +1 -1
- package/dist-cjs/index.js +10 -10
- package/dist-es/CarouselAutoplayIndicator.js +1 -1
- package/dist-es/CarouselAutoplayIndicator.js.map +1 -1
- package/dist-es/CarouselAutoplayIndicatorSVG.js +1 -1
- package/dist-es/CarouselAutoplayIndicatorSVG.js.map +1 -1
- package/dist-es/CarouselCard.js.map +1 -1
- package/dist-es/CarouselNextButton.js.map +1 -1
- package/dist-es/CarouselPreviousButton.js.map +1 -1
- package/dist-es/CarouselProgressLabel.js.map +1 -1
- package/dist-es/CarouselSlides.js.map +1 -1
- package/dist-es/CarouselTabList.js.map +1 -1
- package/dist-es/index.js +5 -5
- package/dist-types/index.d.ts +5 -5
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @salt-ds/embla-carousel
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [cdce628]
|
|
8
|
+
- Updated dependencies [454686b]
|
|
9
|
+
- Updated dependencies [f25a82b]
|
|
10
|
+
- Updated dependencies [6bc8e53]
|
|
11
|
+
- @salt-ds/core@1.47.2
|
|
12
|
+
|
|
3
13
|
## 0.1.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var core = require('@salt-ds/core');
|
|
5
5
|
var styles = require('@salt-ds/styles');
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('
|
|
7
|
+
var clsx = require('clsx');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
var CarouselAutoplayIndicator$1 = require('./CarouselAutoplayIndicator.css.js');
|
|
10
10
|
var CarouselAutoplayIndicatorSVG = require('./CarouselAutoplayIndicatorSVG.js');
|
|
@@ -72,7 +72,7 @@ const CarouselAutoplayIndicator = react.forwardRef(
|
|
|
72
72
|
// @ts-ignore
|
|
73
73
|
"--carousel-svg-circumference": circumference
|
|
74
74
|
},
|
|
75
|
-
className: clsx(withBaseName(), className),
|
|
75
|
+
className: clsx.clsx(withBaseName(), className),
|
|
76
76
|
...props,
|
|
77
77
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
78
|
CarouselAutoplayIndicatorSVG.CarouselAutoplayIndicatorSVG,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"
|
|
1
|
+
{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Duration of each slide in milliseconds.\n */\n duration: number;\n /**\n * Index of slide currently displayed.\n */\n slideIndex: number;\n /**\n * If `true`, the indicator is animated to visualize the time until the next slide.\n */\n isPlaying: boolean;\n /**\n * If `true`, the animation is paused.\n */\n isPaused?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n high: { size: 10, strokeWidth: 2 },\n medium: { size: 12, strokeWidth: 2 },\n low: { size: 14, strokeWidth: 2 },\n touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n HTMLDivElement,\n CarouselAutoplayIndicatorProps\n>(\n (\n {\n className,\n duration,\n slideIndex,\n isPlaying,\n isPaused = false,\n children,\n ...props\n },\n ref,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-autoplay-indicator\",\n css: carouselAutoplayIndicator,\n window: targetWindow,\n });\n\n const barRef = useRef<SVGCircleElement>(null);\n const animationFrameId = useRef<number | null>(null);\n\n const density = useDensity();\n const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n const radius = (size - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n\n useEffect(() => {\n if (barRef.current) {\n animationFrameId.current = requestAnimationFrame(() => {\n if (!barRef.current) {\n return;\n }\n barRef.current.style.animation = \"none\"; // Reset animation\n barRef.current.style.strokeDashoffset = `${circumference}`;\n animationFrameId.current = requestAnimationFrame(() => {\n if (!barRef.current) {\n return;\n }\n barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n barRef.current.style.animationPlayState = isPaused\n ? \"paused\"\n : isPlaying\n ? \"running\"\n : \"paused\";\n });\n });\n }\n\n return () => {\n if (animationFrameId.current !== null) {\n cancelAnimationFrame(animationFrameId.current);\n animationFrameId.current = null;\n }\n };\n }, [circumference, duration, slideIndex, isPlaying, isPaused]);\n\n return (\n <div\n ref={ref}\n style={{\n width: size,\n height: size,\n // @ts-ignore\n \"--carousel-svg-circumference\": circumference,\n }}\n className={clsx(withBaseName(), className)}\n {...props}\n >\n <CarouselAutoplayIndicatorSVG\n size={size}\n strokeWidth={strokeWidth}\n barRef={barRef}\n radius={radius}\n />\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","carouselAutoplayIndicator","useRef","useDensity","useEffect","jsx","clsx","CarouselAutoplayIndicatorSVG"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var core = require('@salt-ds/core');
|
|
5
|
-
var clsx = require('
|
|
5
|
+
var clsx = require('clsx');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
|
|
8
8
|
const withBaseName = core.makePrefixer("saltCarouselAutoplayIndicatorSVG");
|
|
@@ -17,7 +17,7 @@ const CarouselAutoplayIndicatorSVG = react.forwardRef(
|
|
|
17
17
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
18
18
|
"svg",
|
|
19
19
|
{
|
|
20
|
-
className: clsx(withBaseName(), className),
|
|
20
|
+
className: clsx.clsx(withBaseName(), className),
|
|
21
21
|
width: size,
|
|
22
22
|
height: size,
|
|
23
23
|
"aria-hidden": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport clsx from \"
|
|
1
|
+
{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n extends SVGAttributes<SVGSVGElement> {\n /**\n * Class name to apply to the SVG element.\n */\n className?: string;\n /**\n * Ref to attach to progress indicator element\n */\n barRef: Ref<SVGCircleElement>;\n /**\n * Size of the SVG in pixels.\n */\n size: number;\n /**\n * Stroke width of the progress indicator in pixels.\n */\n strokeWidth: number;\n /**\n * Radius of the progress indicator circle.\n */\n radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n SVGSVGElement,\n CarouselAutoplayIndicatorSVGProps\n>(\n (\n {\n barRef,\n className,\n radius,\n size,\n strokeWidth,\n }: CarouselAutoplayIndicatorSVGProps,\n ref,\n ) => {\n return (\n <svg\n className={clsx(withBaseName(), className)}\n width={size}\n height={size}\n aria-hidden\n ref={ref}\n >\n <circle\n className={withBaseName(\"track\")}\n cx={size / 2}\n cy={size / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n <circle\n ref={barRef}\n className={withBaseName(\"bar\")}\n cx={size / 2}\n cy={size / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n </svg>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","jsxs","clsx","jsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAAC,gBAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,aAAW,EAAA,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, type ReactNode
|
|
1
|
+
{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n /**\n * Actions to be displayed in the content footer.\n * This can include buttons or any other interactive elements.\n */\n actions?: ReactNode;\n\n /**\n * Media content to be displayed inside the slide.\n * This could include images, videos, etc., that are visually prominent.\n * It differs from children in that media is intended to be the main visual element of the slide.\n */\n media?: ReactNode;\n\n /**\n * The appearance of the slide. Options are 'bordered', and 'transparent'.\n * 'transparent' is the default value.\n **/\n appearance?: \"bordered\" | \"transparent\";\n\n /**\n * Header content to be displayed at the top of the slide.\n * This can be text or any other React node.\n */\n header?: ReactNode;\n\n /**\n * Carousel slide id.\n * This can be used to uniquely identify the slide.\n */\n id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n function CarouselCard(\n { actions, appearance, children, className, header, media, ...rest },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-card\",\n css: saltCarouselCardCss,\n window: targetWindow,\n });\n\n return (\n <div\n role=\"tabpanel\"\n aria-roledescription=\"slide\"\n className={clsx(withBaseName(), className)}\n {...rest}\n ref={ref}\n >\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"bordered\")]: appearance === \"bordered\",\n })}\n >\n {media}\n {children && (\n <div className={withBaseName(\"body\")}>\n <div>{header}</div>\n <div>{children}</div>\n {actions}\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACEC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAAF,cAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACbA,cAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler
|
|
1
|
+
{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps\n extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselNextButton = forwardRef<\n HTMLButtonElement,\n CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n const { NextIcon } = useIcon();\n const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onNextButtonClick();\n onClick?.(event);\n };\n\n return (\n <Button\n onClick={handleClick}\n disabled={nextBtnDisabled}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n aria-label=\"Next slide\"\n ref={ref}\n {...rest}\n >\n <NextIcon aria-hidden />\n </Button>\n );\n});\n"],"names":["forwardRef","CarouselNextButton","useIcon","usePrevNextButtons","jsx","Button"],"mappings":";;;;;;;AAUa,MAAA,kBAAA,GAAqBA,gBAGhC,CAAA,SAASC,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,YAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler
|
|
1
|
+
{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps\n extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselPreviousButton = forwardRef<\n HTMLButtonElement,\n CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n const { PreviousIcon } = useIcon();\n const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPrevButtonClick();\n onClick?.(event);\n };\n\n return (\n <Button\n onClick={handleClick}\n disabled={prevBtnDisabled}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n aria-label=\"Previous slide\"\n ref={ref}\n {...rest}\n >\n <PreviousIcon aria-hidden />\n </Button>\n );\n});\n"],"names":["forwardRef","CarouselPreviousButton","useIcon","usePrevNextButtons","jsx","Button"],"mappings":";;;;;;;AAUa,MAAA,sBAAA,GAAyBA,gBAGpC,CAAA,SAASC,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps
|
|
1
|
+
{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { makePrefixer, Text, type TextProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n className,\n styleAs = \"label\",\n children,\n ...props\n}: CarouselProgressLabelProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-progress-label\",\n css: carouselProgressLabelCss,\n window: targetWindow,\n });\n\n const { emblaApi } = useCarouselContext();\n\n const [currentSlide, setCurrentSlide] = useState(\"\");\n const [totalSlides, setTotalSlides] = useState(0);\n\n useEffect(() => {\n const handleSelect = (emblaApi: EmblaCarouselType) => {\n const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n const slidesPerTransition = numberOfSlides\n ? Math.ceil(numberOfSlides / scrollSnaps.length)\n : 0;\n const startSlideNumber = Math.min(\n slideIndexInView * slidesPerTransition + 1,\n numberOfSlides - (slidesPerTransition - 1),\n );\n const endSlideNumber = Math.min(\n startSlideNumber + slidesPerTransition - 1,\n numberOfSlides,\n );\n\n if (startSlideNumber === endSlideNumber) {\n setCurrentSlide(startSlideNumber.toString(10));\n } else {\n setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n }\n setTotalSlides(numberOfSlides);\n };\n\n if (!emblaApi) return;\n emblaApi\n .on(\"init\", handleSelect)\n .on(\"reInit\", handleSelect)\n .on(\"select\", handleSelect);\n handleSelect(emblaApi);\n // Cleanup listener on component unmount\n return () => {\n emblaApi\n .off(\"init\", handleSelect)\n .off(\"reInit\", handleSelect)\n .off(\"select\", handleSelect);\n };\n }, [emblaApi]);\n\n return (\n <Text className={clsx(withBaseName(), className)} {...props}>\n Slide {currentSlide} of {totalSlides}\n </Text>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","carouselProgressLabelCss","useCarouselContext","useState","useEffect","emblaApi","jsxs","Text","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,uBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,CAAC,CAAA;AAEhD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACC,SAAgC,KAAA;AACpD,MAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,MAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,MAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,MAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,MAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,QAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,OAC1C;AACA,MAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,QAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC;AAAA,OACF;AAEA,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,OACxC,MAAA;AACL,QAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,MAAA,cAAA,CAAe,cAAc,CAAA;AAAA,KAC/B;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EACE,uBAAAC,eAAA,CAACC,aAAK,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n
|
|
1
|
+
{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\nimport { createCustomSettle } from \"./createCustomSettle\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n function CarouselSlides({ children, className, onKeyDown, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-slides\",\n css: carouselSlidesCss,\n window: targetWindow,\n });\n const { emblaApi, emblaRef } = useCarouselContext();\n\n const carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n const usingArrowNavigation = useRef<boolean>();\n\n useEffect(() => {\n const handleSettle = (emblaApi: EmblaCarouselType) => {\n if (!usingArrowNavigation.current) {\n return;\n }\n const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n const snappedSlide = emblaApi.slideNodes()[slideIndexInView];\n if (snappedSlide) {\n const focusableElements = snappedSlide.querySelectorAll<HTMLElement>(\n 'a, button, input, textarea, select, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (focusableElements.length > 0) {\n focusableElements[0].focus();\n }\n }\n usingArrowNavigation.current = false;\n };\n\n if (!emblaApi) {\n return;\n }\n const scrollCallback = createCustomSettle(handleSettle);\n emblaApi.on(\"scroll\", scrollCallback);\n // Cleanup listener on component unmount\n return () => {\n emblaApi.off(\"scroll\", scrollCallback);\n };\n }, [emblaApi]);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.repeat) {\n return;\n }\n switch (event.key) {\n case \"ArrowLeft\": {\n event.preventDefault();\n emblaApi?.scrollPrev();\n usingArrowNavigation.current = true;\n break;\n }\n case \"ArrowRight\": {\n event.preventDefault();\n emblaApi?.scrollNext();\n usingArrowNavigation.current = true;\n break;\n }\n }\n onKeyDown?.(event);\n };\n\n return (\n <div\n onKeyDown={handleKeyDown}\n ref={carouselRef}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <div className={withBaseName(\"container\")}>{children}</div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useForkRef","useRef","useEffect","emblaApi","createCustomSettle","jsx","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType,
|
|
1
|
+
{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type KeyboardEventHandler,\n useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n CarouselTab,\n type CarouselTabProps,\n useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Render prop to enable customisation of tab button.\n */\n render?: RenderPropsType[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n HTMLButtonElement,\n CarouselTabProps & { render?: CarouselTabListProps[\"render\"] }\n>((props, ref) => {\n return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-controls\",\n css: carouselControlsCss,\n window: targetWindow,\n });\n\n const { emblaApi } = useCarouselContext();\n const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);\n\n const slideNodes = emblaApi?.slideNodes();\n const numberOfSlides = slideNodes?.length ?? 0;\n const slidesPerTransition = numberOfSlides\n ? Math.ceil(numberOfSlides / scrollSnaps.length)\n : 0;\n\n const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n let newIndex = selectedIndex;\n\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n newIndex =\n (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;\n } else if (event.key === \"Home\") {\n newIndex = 0;\n } else if (event.key === \"End\") {\n newIndex = scrollSnaps.length - 1;\n }\n\n if (newIndex !== selectedIndex) {\n onClick(newIndex);\n buttonRefs.current[newIndex]?.focus();\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown?.(event);\n };\n\n return (\n <div\n role=\"tablist\"\n aria-label=\"Choose slide\"\n tabIndex={0}\n className={clsx(withBaseName(), className)}\n onKeyDown={handleKeyDown}\n ref={ref}\n {...rest}\n >\n {scrollSnaps.map((_, tabIndex) => {\n const startSlideNumber = tabIndex * slidesPerTransition + 1;\n const endSlideNumber = Math.min(\n startSlideNumber + slidesPerTransition - 1,\n numberOfSlides,\n );\n const label =\n startSlideNumber === endSlideNumber\n ? `Slide ${startSlideNumber}`\n : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;\n\n const selected = selectedIndex === tabIndex;\n\n const ariaControls = slideNodes?.length\n ? slideNodes[startSlideNumber - 1].id\n : undefined;\n return (\n <CarouselTabRenderer\n key={`carouselTab-${tabIndex}}`}\n ref={(element: HTMLButtonElement) => {\n buttonRefs.current[tabIndex] = element;\n }}\n render={render}\n role={\"tab\"}\n onClick={() => onClick(tabIndex)}\n aria-selected={selected}\n selected={selected}\n tabIndex={selected ? 0 : -1}\n aria-label={label}\n aria-labelledby={ariaControls}\n aria-controls={ariaControls}\n />\n );\n })}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","jsx","clsx"],"mappings":"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"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -2,30 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
var Carousel = require('./Carousel.js');
|
|
4
4
|
var CarouselAnnouncementPlugin = require('./CarouselAnnouncementPlugin.js');
|
|
5
|
+
var CarouselAutoplayIndicator = require('./CarouselAutoplayIndicator.js');
|
|
5
6
|
var CarouselCard = require('./CarouselCard.js');
|
|
6
7
|
var CarouselContext = require('./CarouselContext.js');
|
|
7
|
-
var CarouselTab = require('./CarouselTab.js');
|
|
8
|
-
var CarouselTabList = require('./CarouselTabList.js');
|
|
9
|
-
var CarouselAutoplayIndicator = require('./CarouselAutoplayIndicator.js');
|
|
10
|
-
var CarouselPreviousButton = require('./CarouselPreviousButton.js');
|
|
11
8
|
var CarouselNextButton = require('./CarouselNextButton.js');
|
|
12
|
-
var
|
|
9
|
+
var CarouselPreviousButton = require('./CarouselPreviousButton.js');
|
|
13
10
|
var CarouselProgressLabel = require('./CarouselProgressLabel.js');
|
|
11
|
+
var CarouselSlides = require('./CarouselSlides.js');
|
|
12
|
+
var CarouselTab = require('./CarouselTab.js');
|
|
13
|
+
var CarouselTabList = require('./CarouselTabList.js');
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
exports.Carousel = Carousel.Carousel;
|
|
18
18
|
exports.CarouselAnnouncement = CarouselAnnouncementPlugin.CarouselAnnouncement;
|
|
19
19
|
exports.getSlideLabel = CarouselAnnouncementPlugin.getSlideLabel;
|
|
20
|
+
exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator.CarouselAutoplayIndicator;
|
|
20
21
|
exports.CarouselCard = CarouselCard.CarouselCard;
|
|
21
22
|
exports.CarouselContext = CarouselContext.CarouselContext;
|
|
22
23
|
exports.useCarouselContext = CarouselContext.useCarouselContext;
|
|
24
|
+
exports.CarouselNextButton = CarouselNextButton.CarouselNextButton;
|
|
25
|
+
exports.CarouselPreviousButton = CarouselPreviousButton.CarouselPreviousButton;
|
|
26
|
+
exports.CarouselProgressLabel = CarouselProgressLabel.CarouselProgressLabel;
|
|
27
|
+
exports.CarouselSlides = CarouselSlides.CarouselSlides;
|
|
23
28
|
exports.CarouselTab = CarouselTab.CarouselTab;
|
|
24
29
|
exports.useCarouselTab = CarouselTab.useCarouselTab;
|
|
25
30
|
exports.CarouselTabList = CarouselTabList.CarouselTabList;
|
|
26
|
-
exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator.CarouselAutoplayIndicator;
|
|
27
|
-
exports.CarouselPreviousButton = CarouselPreviousButton.CarouselPreviousButton;
|
|
28
|
-
exports.CarouselNextButton = CarouselNextButton.CarouselNextButton;
|
|
29
|
-
exports.CarouselSlides = CarouselSlides.CarouselSlides;
|
|
30
|
-
exports.CarouselProgressLabel = CarouselProgressLabel.CarouselProgressLabel;
|
|
31
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { makePrefixer, useDensity } from '@salt-ds/core';
|
|
3
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import clsx from '
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
6
|
import { forwardRef, useRef, useEffect } from 'react';
|
|
7
7
|
import css_248z from './CarouselAutoplayIndicator.css.js';
|
|
8
8
|
import { CarouselAutoplayIndicatorSVG } from './CarouselAutoplayIndicatorSVG.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"
|
|
1
|
+
{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Duration of each slide in milliseconds.\n */\n duration: number;\n /**\n * Index of slide currently displayed.\n */\n slideIndex: number;\n /**\n * If `true`, the indicator is animated to visualize the time until the next slide.\n */\n isPlaying: boolean;\n /**\n * If `true`, the animation is paused.\n */\n isPaused?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n high: { size: 10, strokeWidth: 2 },\n medium: { size: 12, strokeWidth: 2 },\n low: { size: 14, strokeWidth: 2 },\n touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n HTMLDivElement,\n CarouselAutoplayIndicatorProps\n>(\n (\n {\n className,\n duration,\n slideIndex,\n isPlaying,\n isPaused = false,\n children,\n ...props\n },\n ref,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-autoplay-indicator\",\n css: carouselAutoplayIndicator,\n window: targetWindow,\n });\n\n const barRef = useRef<SVGCircleElement>(null);\n const animationFrameId = useRef<number | null>(null);\n\n const density = useDensity();\n const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n const radius = (size - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n\n useEffect(() => {\n if (barRef.current) {\n animationFrameId.current = requestAnimationFrame(() => {\n if (!barRef.current) {\n return;\n }\n barRef.current.style.animation = \"none\"; // Reset animation\n barRef.current.style.strokeDashoffset = `${circumference}`;\n animationFrameId.current = requestAnimationFrame(() => {\n if (!barRef.current) {\n return;\n }\n barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n barRef.current.style.animationPlayState = isPaused\n ? \"paused\"\n : isPlaying\n ? \"running\"\n : \"paused\";\n });\n });\n }\n\n return () => {\n if (animationFrameId.current !== null) {\n cancelAnimationFrame(animationFrameId.current);\n animationFrameId.current = null;\n }\n };\n }, [circumference, duration, slideIndex, isPlaying, isPaused]);\n\n return (\n <div\n ref={ref}\n style={{\n width: size,\n height: size,\n // @ts-ignore\n \"--carousel-svg-circumference\": circumference,\n }}\n className={clsx(withBaseName(), className)}\n {...props}\n >\n <CarouselAutoplayIndicatorSVG\n size={size}\n strokeWidth={strokeWidth}\n barRef={barRef}\n radius={radius}\n />\n </div>\n );\n },\n);\n"],"names":["carouselAutoplayIndicator"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import clsx from '
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
|
|
6
6
|
const withBaseName = makePrefixer("saltCarouselAutoplayIndicatorSVG");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport clsx from \"
|
|
1
|
+
{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n extends SVGAttributes<SVGSVGElement> {\n /**\n * Class name to apply to the SVG element.\n */\n className?: string;\n /**\n * Ref to attach to progress indicator element\n */\n barRef: Ref<SVGCircleElement>;\n /**\n * Size of the SVG in pixels.\n */\n size: number;\n /**\n * Stroke width of the progress indicator in pixels.\n */\n strokeWidth: number;\n /**\n * Radius of the progress indicator circle.\n */\n radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n SVGSVGElement,\n CarouselAutoplayIndicatorSVGProps\n>(\n (\n {\n barRef,\n className,\n radius,\n size,\n strokeWidth,\n }: CarouselAutoplayIndicatorSVGProps,\n ref,\n ) => {\n return (\n <svg\n className={clsx(withBaseName(), className)}\n width={size}\n height={size}\n aria-hidden\n ref={ref}\n >\n <circle\n className={withBaseName(\"track\")}\n cx={size / 2}\n cy={size / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n <circle\n ref={barRef}\n className={withBaseName(\"bar\")}\n cx={size / 2}\n cy={size / 2}\n r={radius}\n strokeWidth={strokeWidth}\n />\n </svg>\n );\n },\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAA,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,aAAW,EAAA,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, type ReactNode
|
|
1
|
+
{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n /**\n * Actions to be displayed in the content footer.\n * This can include buttons or any other interactive elements.\n */\n actions?: ReactNode;\n\n /**\n * Media content to be displayed inside the slide.\n * This could include images, videos, etc., that are visually prominent.\n * It differs from children in that media is intended to be the main visual element of the slide.\n */\n media?: ReactNode;\n\n /**\n * The appearance of the slide. Options are 'bordered', and 'transparent'.\n * 'transparent' is the default value.\n **/\n appearance?: \"bordered\" | \"transparent\";\n\n /**\n * Header content to be displayed at the top of the slide.\n * This can be text or any other React node.\n */\n header?: ReactNode;\n\n /**\n * Carousel slide id.\n * This can be used to uniquely identify the slide.\n */\n id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n function CarouselCard(\n { actions, appearance, children, className, header, media, ...rest },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-card\",\n css: saltCarouselCardCss,\n window: targetWindow,\n });\n\n return (\n <div\n role=\"tabpanel\"\n aria-roledescription=\"slide\"\n className={clsx(withBaseName(), className)}\n {...rest}\n ref={ref}\n >\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"bordered\")]: appearance === \"bordered\",\n })}\n >\n {media}\n {children && (\n <div className={withBaseName(\"body\")}>\n <div>{header}</div>\n <div>{children}</div>\n {actions}\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n"],"names":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACb,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler
|
|
1
|
+
{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps\n extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselNextButton = forwardRef<\n HTMLButtonElement,\n CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n const { NextIcon } = useIcon();\n const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onNextButtonClick();\n onClick?.(event);\n };\n\n return (\n <Button\n onClick={handleClick}\n disabled={nextBtnDisabled}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n aria-label=\"Next slide\"\n ref={ref}\n {...rest}\n >\n <NextIcon aria-hidden />\n </Button>\n );\n});\n"],"names":["CarouselNextButton"],"mappings":";;;;;AAUa,MAAA,kBAAA,GAAqB,UAGhC,CAAA,SAASA,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,OAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler
|
|
1
|
+
{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps\n extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselPreviousButton = forwardRef<\n HTMLButtonElement,\n CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n const { PreviousIcon } = useIcon();\n const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPrevButtonClick();\n onClick?.(event);\n };\n\n return (\n <Button\n onClick={handleClick}\n disabled={prevBtnDisabled}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n aria-label=\"Previous slide\"\n ref={ref}\n {...rest}\n >\n <PreviousIcon aria-hidden />\n </Button>\n );\n});\n"],"names":["CarouselPreviousButton"],"mappings":";;;;;AAUa,MAAA,sBAAA,GAAyB,UAGpC,CAAA,SAASA,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAI,kBAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps
|
|
1
|
+
{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { makePrefixer, Text, type TextProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n className,\n styleAs = \"label\",\n children,\n ...props\n}: CarouselProgressLabelProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-progress-label\",\n css: carouselProgressLabelCss,\n window: targetWindow,\n });\n\n const { emblaApi } = useCarouselContext();\n\n const [currentSlide, setCurrentSlide] = useState(\"\");\n const [totalSlides, setTotalSlides] = useState(0);\n\n useEffect(() => {\n const handleSelect = (emblaApi: EmblaCarouselType) => {\n const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n const slidesPerTransition = numberOfSlides\n ? Math.ceil(numberOfSlides / scrollSnaps.length)\n : 0;\n const startSlideNumber = Math.min(\n slideIndexInView * slidesPerTransition + 1,\n numberOfSlides - (slidesPerTransition - 1),\n );\n const endSlideNumber = Math.min(\n startSlideNumber + slidesPerTransition - 1,\n numberOfSlides,\n );\n\n if (startSlideNumber === endSlideNumber) {\n setCurrentSlide(startSlideNumber.toString(10));\n } else {\n setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n }\n setTotalSlides(numberOfSlides);\n };\n\n if (!emblaApi) return;\n emblaApi\n .on(\"init\", handleSelect)\n .on(\"reInit\", handleSelect)\n .on(\"select\", handleSelect);\n handleSelect(emblaApi);\n // Cleanup listener on component unmount\n return () => {\n emblaApi\n .off(\"init\", handleSelect)\n .off(\"reInit\", handleSelect)\n .off(\"select\", handleSelect);\n };\n }, [emblaApi]);\n\n return (\n <Text className={clsx(withBaseName(), className)} {...props}>\n Slide {currentSlide} of {totalSlides}\n </Text>\n );\n}\n"],"names":["carouselProgressLabelCss","emblaApi"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACC,SAAgC,KAAA;AACpD,MAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,MAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,MAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,MAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,MAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,QAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,OAC1C;AACA,MAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,QAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC;AAAA,OACF;AAEA,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,OACxC,MAAA;AACL,QAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,MAAA,cAAA,CAAe,cAAc,CAAA;AAAA,KAC/B;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EACE,uBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n
|
|
1
|
+
{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\nimport { createCustomSettle } from \"./createCustomSettle\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n function CarouselSlides({ children, className, onKeyDown, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-slides\",\n css: carouselSlidesCss,\n window: targetWindow,\n });\n const { emblaApi, emblaRef } = useCarouselContext();\n\n const carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n const usingArrowNavigation = useRef<boolean>();\n\n useEffect(() => {\n const handleSettle = (emblaApi: EmblaCarouselType) => {\n if (!usingArrowNavigation.current) {\n return;\n }\n const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n const snappedSlide = emblaApi.slideNodes()[slideIndexInView];\n if (snappedSlide) {\n const focusableElements = snappedSlide.querySelectorAll<HTMLElement>(\n 'a, button, input, textarea, select, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (focusableElements.length > 0) {\n focusableElements[0].focus();\n }\n }\n usingArrowNavigation.current = false;\n };\n\n if (!emblaApi) {\n return;\n }\n const scrollCallback = createCustomSettle(handleSettle);\n emblaApi.on(\"scroll\", scrollCallback);\n // Cleanup listener on component unmount\n return () => {\n emblaApi.off(\"scroll\", scrollCallback);\n };\n }, [emblaApi]);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.repeat) {\n return;\n }\n switch (event.key) {\n case \"ArrowLeft\": {\n event.preventDefault();\n emblaApi?.scrollPrev();\n usingArrowNavigation.current = true;\n break;\n }\n case \"ArrowRight\": {\n event.preventDefault();\n emblaApi?.scrollNext();\n usingArrowNavigation.current = true;\n break;\n }\n }\n onKeyDown?.(event);\n };\n\n return (\n <div\n onKeyDown={handleKeyDown}\n ref={carouselRef}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <div className={withBaseName(\"container\")}>{children}</div>\n </div>\n );\n },\n);\n"],"names":["CarouselSlides","carouselSlidesCss","emblaApi"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType,
|
|
1
|
+
{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type KeyboardEventHandler,\n useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n CarouselTab,\n type CarouselTabProps,\n useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Render prop to enable customisation of tab button.\n */\n render?: RenderPropsType[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n HTMLButtonElement,\n CarouselTabProps & { render?: CarouselTabListProps[\"render\"] }\n>((props, ref) => {\n return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-controls\",\n css: carouselControlsCss,\n window: targetWindow,\n });\n\n const { emblaApi } = useCarouselContext();\n const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);\n\n const slideNodes = emblaApi?.slideNodes();\n const numberOfSlides = slideNodes?.length ?? 0;\n const slidesPerTransition = numberOfSlides\n ? Math.ceil(numberOfSlides / scrollSnaps.length)\n : 0;\n\n const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n let newIndex = selectedIndex;\n\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n newIndex =\n (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;\n } else if (event.key === \"Home\") {\n newIndex = 0;\n } else if (event.key === \"End\") {\n newIndex = scrollSnaps.length - 1;\n }\n\n if (newIndex !== selectedIndex) {\n onClick(newIndex);\n buttonRefs.current[newIndex]?.focus();\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown?.(event);\n };\n\n return (\n <div\n role=\"tablist\"\n aria-label=\"Choose slide\"\n tabIndex={0}\n className={clsx(withBaseName(), className)}\n onKeyDown={handleKeyDown}\n ref={ref}\n {...rest}\n >\n {scrollSnaps.map((_, tabIndex) => {\n const startSlideNumber = tabIndex * slidesPerTransition + 1;\n const endSlideNumber = Math.min(\n startSlideNumber + slidesPerTransition - 1,\n numberOfSlides,\n );\n const label =\n startSlideNumber === endSlideNumber\n ? `Slide ${startSlideNumber}`\n : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;\n\n const selected = selectedIndex === tabIndex;\n\n const ariaControls = slideNodes?.length\n ? slideNodes[startSlideNumber - 1].id\n : undefined;\n return (\n <CarouselTabRenderer\n key={`carouselTab-${tabIndex}}`}\n ref={(element: HTMLButtonElement) => {\n buttonRefs.current[tabIndex] = element;\n }}\n render={render}\n role={\"tab\"}\n onClick={() => onClick(tabIndex)}\n aria-selected={selected}\n selected={selected}\n tabIndex={selected ? 0 : -1}\n aria-label={label}\n aria-labelledby={ariaControls}\n aria-controls={ariaControls}\n />\n );\n })}\n </div>\n );\n },\n);\n"],"names":["CarouselTabList","carouselControlsCss"],"mappings":"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"}
|
package/dist-es/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
export { Carousel } from './Carousel.js';
|
|
2
2
|
export { CarouselAnnouncement, getSlideLabel } from './CarouselAnnouncementPlugin.js';
|
|
3
|
+
export { CarouselAutoplayIndicator } from './CarouselAutoplayIndicator.js';
|
|
3
4
|
export { CarouselCard } from './CarouselCard.js';
|
|
4
5
|
export { CarouselContext, useCarouselContext } from './CarouselContext.js';
|
|
5
|
-
export { CarouselTab, useCarouselTab } from './CarouselTab.js';
|
|
6
|
-
export { CarouselTabList } from './CarouselTabList.js';
|
|
7
|
-
export { CarouselAutoplayIndicator } from './CarouselAutoplayIndicator.js';
|
|
8
|
-
export { CarouselPreviousButton } from './CarouselPreviousButton.js';
|
|
9
6
|
export { CarouselNextButton } from './CarouselNextButton.js';
|
|
10
|
-
export {
|
|
7
|
+
export { CarouselPreviousButton } from './CarouselPreviousButton.js';
|
|
11
8
|
export { CarouselProgressLabel } from './CarouselProgressLabel.js';
|
|
9
|
+
export { CarouselSlides } from './CarouselSlides.js';
|
|
10
|
+
export { CarouselTab, useCarouselTab } from './CarouselTab.js';
|
|
11
|
+
export { CarouselTabList } from './CarouselTabList.js';
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * from "./Carousel";
|
|
2
2
|
export * from "./CarouselAnnouncementPlugin";
|
|
3
|
+
export * from "./CarouselAutoplayIndicator";
|
|
3
4
|
export * from "./CarouselCard";
|
|
4
5
|
export * from "./CarouselContext";
|
|
5
|
-
export * from "./CarouselTab";
|
|
6
|
-
export * from "./CarouselTabList";
|
|
7
|
-
export * from "./CarouselAutoplayIndicator";
|
|
8
|
-
export * from "./CarouselPreviousButton";
|
|
9
6
|
export * from "./CarouselNextButton";
|
|
10
|
-
export * from "./
|
|
7
|
+
export * from "./CarouselPreviousButton";
|
|
11
8
|
export * from "./CarouselProgressLabel";
|
|
9
|
+
export * from "./CarouselSlides";
|
|
10
|
+
export * from "./CarouselTab";
|
|
11
|
+
export * from "./CarouselTabList";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/embla-carousel",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"*.css"
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@salt-ds/core": "^1.47.
|
|
23
|
+
"@salt-ds/core": "^1.47.2",
|
|
24
24
|
"clsx": "^2.0.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|