@salt-ds/embla-carousel 0.1.3 → 0.1.5

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 CHANGED
@@ -1,5 +1,27 @@
1
1
  # @salt-ds/embla-carousel
2
2
 
3
+ ## 0.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [f1dc9fc]
8
+ - Updated dependencies [f1dc9fc]
9
+ - Updated dependencies [9560539]
10
+ - @salt-ds/core@1.48.0
11
+
12
+ ## 0.1.4
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [846d975]
17
+ - Updated dependencies [8538730]
18
+ - Updated dependencies [8261887]
19
+ - Updated dependencies [e6445dc]
20
+ - Updated dependencies [ff646e2]
21
+ - Updated dependencies [9a25824]
22
+ - Updated dependencies [64ef723]
23
+ - @salt-ds/core@1.47.5
24
+
3
25
  ## 0.1.3
4
26
 
5
27
  ### Patch Changes
@@ -152,4 +152,4 @@
152
152
  outline-color: var(--salt-focused-outlineColor);
153
153
  }
154
154
 
155
- /* src/eb098211-a059-41c1-86a8-b5e8955cb36f.css */
155
+ /* src/81cb225b-897f-4a91-b699-d5538acf9f18.css */
@@ -69,7 +69,6 @@ const CarouselAutoplayIndicator = react.forwardRef(
69
69
  style: {
70
70
  width: size,
71
71
  height: size,
72
- // @ts-ignore
73
72
  "--carousel-svg-circumference": circumference
74
73
  },
75
74
  className: clsx.clsx(withBaseName(), className),
@@ -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 \"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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"}
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 type CSSProperties,\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 {\n width: size,\n height: size,\n \"--carousel-svg-circumference\": circumference,\n } as CSSProperties\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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"}
@@ -67,7 +67,6 @@ const CarouselAutoplayIndicator = forwardRef(
67
67
  style: {
68
68
  width: size,
69
69
  height: size,
70
- // @ts-ignore
71
70
  "--carousel-svg-circumference": circumference
72
71
  },
73
72
  className: clsx(withBaseName(), className),
@@ -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 \"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
+ {"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 type CSSProperties,\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 {\n width: size,\n height: size,\n \"--carousel-svg-circumference\": circumference,\n } as CSSProperties\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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"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@salt-ds/embla-carousel",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
7
- "url": "https://github.com/jpmorganchase/salt-ds.git",
7
+ "url": "git+https://github.com/jpmorganchase/salt-ds.git",
8
8
  "directory": "packages/embla-carousel"
9
9
  },
10
10
  "bugs": "https://github.com/jpmorganchase/salt-ds/issues",
@@ -20,7 +20,7 @@
20
20
  "*.css"
21
21
  ],
22
22
  "dependencies": {
23
- "@salt-ds/core": "^1.47.4",
23
+ "@salt-ds/core": "^1.48.0",
24
24
  "clsx": "^2.0.0"
25
25
  },
26
26
  "devDependencies": {