@mantine/carousel 5.4.0 → 5.4.2
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/cjs/Carousel.js +1 -1
- package/cjs/Carousel.js.map +1 -1
- package/cjs/Carousel.styles.js +38 -7
- package/cjs/Carousel.styles.js.map +1 -1
- package/cjs/CarouselSlide/CarouselSlide.styles.js +21 -22
- package/cjs/CarouselSlide/CarouselSlide.styles.js.map +1 -1
- package/esm/Carousel.js +1 -1
- package/esm/Carousel.js.map +1 -1
- package/esm/Carousel.styles.js +39 -8
- package/esm/Carousel.styles.js.map +1 -1
- package/esm/CarouselSlide/CarouselSlide.styles.js +21 -22
- package/esm/CarouselSlide/CarouselSlide.styles.js.map +1 -1
- package/lib/Carousel.d.ts +1 -1
- package/lib/Carousel.d.ts.map +1 -1
- package/lib/Carousel.styles.d.ts +6 -2
- package/lib/Carousel.styles.d.ts.map +1 -1
- package/lib/CarouselSlide/CarouselSlide.styles.d.ts.map +1 -1
- package/package.json +5 -5
package/cjs/Carousel.js
CHANGED
|
@@ -134,7 +134,7 @@ const _Carousel = React.forwardRef((props, ref) => {
|
|
|
134
134
|
"skipSnaps",
|
|
135
135
|
"containScroll"
|
|
136
136
|
]);
|
|
137
|
-
const { classes, cx, theme } = Carousel_styles['default']({ controlSize, controlsOffset, orientation, height }, { name: "Carousel", classNames, styles, unstyled });
|
|
137
|
+
const { classes, cx, theme } = Carousel_styles['default']({ controlSize, controlsOffset, orientation, height, includeGapInSize, breakpoints, slideGap }, { name: "Carousel", classNames, styles, unstyled });
|
|
138
138
|
const [emblaRefElement, embla] = useEmblaCarousel__default({
|
|
139
139
|
axis: orientation === "horizontal" ? "x" : "y",
|
|
140
140
|
direction: theme.dir,
|
package/cjs/Carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef, useEffect, useCallback, useState, Children } from 'react';\nimport {\n useComponentDefaultProps,\n Box,\n DefaultProps,\n UnstyledButton,\n ChevronIcon,\n MantineNumberSize,\n StylesApiProvider,\n Selectors,\n} from '@mantine/core';\nimport { clamp } from '@mantine/hooks';\nimport useEmblaCarousel, { EmblaPluginType } from 'embla-carousel-react';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { CarouselSlide, CarouselSlideStylesNames } from './CarouselSlide/CarouselSlide';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport useStyles, { CarouselStylesParams } from './Carousel.styles';\n\nexport type CarouselStylesNames = CarouselSlideStylesNames | Selectors<typeof useStyles>;\n\nexport interface CarouselProps\n extends DefaultProps<CarouselStylesNames, CarouselStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** <Carousel.Slide /> components */\n children?: React.ReactNode;\n\n /** Called when user clicks next button */\n onNextSlide?(): void;\n\n /** Called when user clicks previous button */\n onPreviousSlide?(): void;\n\n /** Get embla API as ref */\n getEmblaApi?(embla: Embla): void;\n\n /** Next control aria-label */\n nextControlLabel?: string;\n\n /** Previous control aria-label */\n previousControlLabel?: string;\n\n /** Previous/next controls size in px */\n controlSize?: number;\n\n /** Key of theme.spacing or number to set space between next/previous control and carousel boundary */\n controlsOffset?: MantineNumberSize;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n slideSize?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n slideGap?: MantineNumberSize;\n\n /** Control slideSize and slideGap at different viewport sizes */\n breakpoints?: CarouselBreakpoint[];\n\n /** Carousel orientation, horizontal by default */\n orientation?: CarouselOrientation;\n\n /** Slides container height, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */\n align?: 'start' | 'center' | 'end' | number;\n\n /** Number of slides that should be scrolled with next/previous buttons */\n slidesToScroll?: number;\n\n /** Determines whether gap should be treated as part of the slide size, true by default */\n includeGapInSize?: boolean;\n\n /** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */\n draggable?: boolean;\n\n /** Determines whether momentum scrolling should be enabled, false by default */\n dragFree?: boolean;\n\n /** Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop. */\n loop?: boolean;\n\n /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */\n speed?: number;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */\n inViewThreshold?: number;\n\n /** Determines whether next/previous controls should be displayed, true by default */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed, false by default */\n withIndicators?: boolean;\n\n /** An array of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of next control */\n nextControlIcon?: React.ReactNode;\n\n /** Previous control icon */\n previousControlIcon?: React.ReactNode;\n\n /** Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default */\n skipSnaps?: boolean;\n\n /** Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them. */\n containScroll?: 'trimSnaps' | 'keepSnaps' | '';\n}\n\nconst defaultProps: Partial<CarouselProps> = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n align: 'center',\n slidesToScroll: 1,\n includeGapInSize: true,\n draggable: true,\n dragFree: false,\n loop: false,\n speed: 10,\n initialSlide: 0,\n inViewThreshold: 0,\n withControls: true,\n withIndicators: false,\n skipSnaps: false,\n containScroll: '',\n};\n\nexport const _Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n const {\n children,\n className,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n nextControlLabel,\n previousControlLabel,\n controlSize,\n controlsOffset,\n classNames,\n styles,\n unstyled,\n slideSize,\n slideGap,\n orientation,\n height,\n align,\n slidesToScroll,\n includeGapInSize,\n draggable,\n dragFree,\n loop,\n speed,\n initialSlide,\n inViewThreshold,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n breakpoints,\n skipSnaps,\n containScroll,\n ...others\n } = useComponentDefaultProps('Carousel', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { controlSize, controlsOffset, orientation, height },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: theme.dir,\n startIndex: initialSlide,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) return;\n setSelected(embla.selectedScrollSnap());\n }, [embla, setSelected]);\n\n const handlePrevious = useCallback(() => {\n embla?.scrollPrev();\n onPreviousSlide?.();\n }, [embla]);\n\n const handleNext = useCallback(() => {\n embla?.scrollNext();\n onNextSlide?.();\n }, [embla]);\n\n const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n },\n [embla]\n );\n\n useEffect(() => {\n if (embla) {\n getEmblaApi?.(embla);\n handleSelect();\n setSlidesCount(embla.scrollSnapList().length);\n embla.on('select', handleSelect);\n\n return () => {\n embla.off('select', handleSelect);\n };\n }\n\n return undefined;\n }, [embla]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n key={index}\n data-active={index === selected || undefined}\n className={classes.indicator}\n aria-hidden\n tabIndex={-1}\n onClick={() => handleScroll(index)}\n />\n ));\n\n return (\n <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n <CarouselProvider\n value={{ slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }}\n >\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n onKeyDownCapture={handleKeydown}\n {...others}\n >\n <div className={classes.viewport} ref={emblaRefElement}>\n <div className={classes.container}>{children}</div>\n </div>\n\n {withIndicators && <div className={classes.indicators}>{indicators}</div>}\n\n {withControls && (\n <div className={classes.controls}>\n <UnstyledButton\n onClick={handlePrevious}\n className={classes.control}\n aria-label={previousControlLabel}\n data-inactive={!canScrollPrev || undefined}\n tabIndex={canScrollPrev ? 0 : -1}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n onClick={handleNext}\n className={classes.control}\n aria-label={nextControlLabel}\n data-inactive={!canScrollNext || undefined}\n tabIndex={canScrollNext ? 0 : -1}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n </Box>\n </CarouselProvider>\n </StylesApiProvider>\n );\n}) as any;\n\n_Carousel.Slide = CarouselSlide;\n_Carousel.displayName = '@mantine/carousel/Carousel';\n\nexport const Carousel: ForwardRefWithStaticComponents<\n CarouselProps,\n { Slide: typeof CarouselSlide }\n> = _Carousel;\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","useEmblaCarousel","useState","useCallback","useEffect","clamp","Children","React","UnstyledButton","StylesApiProvider","CarouselProvider","Box","ChevronIcon","getChevronRotation","CarouselSlide"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef, useEffect, useCallback, useState, Children } from 'react';\nimport {\n useComponentDefaultProps,\n Box,\n DefaultProps,\n UnstyledButton,\n ChevronIcon,\n MantineNumberSize,\n StylesApiProvider,\n Selectors,\n} from '@mantine/core';\nimport { clamp } from '@mantine/hooks';\nimport useEmblaCarousel, { EmblaPluginType } from 'embla-carousel-react';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { CarouselSlide, CarouselSlideStylesNames } from './CarouselSlide/CarouselSlide';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport useStyles, { CarouselStylesParams } from './Carousel.styles';\n\nexport type CarouselStylesNames = CarouselSlideStylesNames | Selectors<typeof useStyles>;\n\nexport interface CarouselProps\n extends DefaultProps<CarouselStylesNames, CarouselStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** <Carousel.Slide /> components */\n children?: React.ReactNode;\n\n /** Called when user clicks next button */\n onNextSlide?(): void;\n\n /** Called when user clicks previous button */\n onPreviousSlide?(): void;\n\n /** Get embla API as ref */\n getEmblaApi?(embla: Embla): void;\n\n /** Next control aria-label */\n nextControlLabel?: string;\n\n /** Previous control aria-label */\n previousControlLabel?: string;\n\n /** Previous/next controls size in px */\n controlSize?: number;\n\n /** Key of theme.spacing or number to set space between next/previous control and carousel boundary */\n controlsOffset?: MantineNumberSize;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n slideSize?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n slideGap?: MantineNumberSize;\n\n /** Control slideSize and slideGap at different viewport sizes */\n breakpoints?: CarouselBreakpoint[];\n\n /** Carousel orientation, horizontal by default */\n orientation?: CarouselOrientation;\n\n /** Slides container height, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */\n align?: 'start' | 'center' | 'end' | number;\n\n /** Number of slides that should be scrolled with next/previous buttons */\n slidesToScroll?: number | 'auto';\n\n /** Determines whether gap should be treated as part of the slide size, true by default */\n includeGapInSize?: boolean;\n\n /** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */\n draggable?: boolean;\n\n /** Determines whether momentum scrolling should be enabled, false by default */\n dragFree?: boolean;\n\n /** Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop. */\n loop?: boolean;\n\n /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */\n speed?: number;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */\n inViewThreshold?: number;\n\n /** Determines whether next/previous controls should be displayed, true by default */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed, false by default */\n withIndicators?: boolean;\n\n /** An array of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of next control */\n nextControlIcon?: React.ReactNode;\n\n /** Previous control icon */\n previousControlIcon?: React.ReactNode;\n\n /** Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default */\n skipSnaps?: boolean;\n\n /** Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them. */\n containScroll?: 'trimSnaps' | 'keepSnaps' | '';\n}\n\nconst defaultProps: Partial<CarouselProps> = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n align: 'center',\n slidesToScroll: 1,\n includeGapInSize: true,\n draggable: true,\n dragFree: false,\n loop: false,\n speed: 10,\n initialSlide: 0,\n inViewThreshold: 0,\n withControls: true,\n withIndicators: false,\n skipSnaps: false,\n containScroll: '',\n};\n\nexport const _Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n const {\n children,\n className,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n nextControlLabel,\n previousControlLabel,\n controlSize,\n controlsOffset,\n classNames,\n styles,\n unstyled,\n slideSize,\n slideGap,\n orientation,\n height,\n align,\n slidesToScroll,\n includeGapInSize,\n draggable,\n dragFree,\n loop,\n speed,\n initialSlide,\n inViewThreshold,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n breakpoints,\n skipSnaps,\n containScroll,\n ...others\n } = useComponentDefaultProps('Carousel', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { controlSize, controlsOffset, orientation, height, includeGapInSize, breakpoints, slideGap },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: theme.dir,\n startIndex: initialSlide,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) return;\n setSelected(embla.selectedScrollSnap());\n }, [embla, setSelected]);\n\n const handlePrevious = useCallback(() => {\n embla?.scrollPrev();\n onPreviousSlide?.();\n }, [embla]);\n\n const handleNext = useCallback(() => {\n embla?.scrollNext();\n onNextSlide?.();\n }, [embla]);\n\n const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n },\n [embla]\n );\n\n useEffect(() => {\n if (embla) {\n getEmblaApi?.(embla);\n handleSelect();\n setSlidesCount(embla.scrollSnapList().length);\n embla.on('select', handleSelect);\n\n return () => {\n embla.off('select', handleSelect);\n };\n }\n\n return undefined;\n }, [embla]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n key={index}\n data-active={index === selected || undefined}\n className={classes.indicator}\n aria-hidden\n tabIndex={-1}\n onClick={() => handleScroll(index)}\n />\n ));\n\n return (\n <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n <CarouselProvider\n value={{ slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }}\n >\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n onKeyDownCapture={handleKeydown}\n {...others}\n >\n <div className={classes.viewport} ref={emblaRefElement}>\n <div className={classes.container}>{children}</div>\n </div>\n\n {withIndicators && <div className={classes.indicators}>{indicators}</div>}\n\n {withControls && (\n <div className={classes.controls}>\n <UnstyledButton\n onClick={handlePrevious}\n className={classes.control}\n aria-label={previousControlLabel}\n data-inactive={!canScrollPrev || undefined}\n tabIndex={canScrollPrev ? 0 : -1}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n onClick={handleNext}\n className={classes.control}\n aria-label={nextControlLabel}\n data-inactive={!canScrollNext || undefined}\n tabIndex={canScrollNext ? 0 : -1}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n </Box>\n </CarouselProvider>\n </StylesApiProvider>\n );\n}) as any;\n\n_Carousel.Slide = CarouselSlide;\n_Carousel.displayName = '@mantine/carousel/Carousel';\n\nexport const Carousel: ForwardRefWithStaticComponents<\n CarouselProps,\n { Slide: typeof CarouselSlide }\n> = _Carousel;\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","useEmblaCarousel","useState","useCallback","useEffect","clamp","Children","React","UnstyledButton","StylesApiProvider","CarouselProvider","Box","ChevronIcon","getChevronRotation","CarouselSlide"],"mappings":"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"}
|
package/cjs/Carousel.styles.js
CHANGED
|
@@ -23,21 +23,52 @@ var __spreadValues = (a, b) => {
|
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
25
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var useStyles = core.createStyles((theme, {
|
|
26
|
+
var useStyles = core.createStyles((theme, {
|
|
27
|
+
controlSize,
|
|
28
|
+
controlsOffset,
|
|
29
|
+
orientation,
|
|
30
|
+
height,
|
|
31
|
+
includeGapInSize,
|
|
32
|
+
breakpoints = [],
|
|
33
|
+
slideGap
|
|
34
|
+
}) => {
|
|
27
35
|
const horizontal = orientation === "horizontal";
|
|
36
|
+
const getContainerStyles = (gap) => {
|
|
37
|
+
if (!includeGapInSize)
|
|
38
|
+
return {};
|
|
39
|
+
const slideGapValue = theme.fn.size({
|
|
40
|
+
size: gap,
|
|
41
|
+
sizes: theme.spacing
|
|
42
|
+
});
|
|
43
|
+
return {
|
|
44
|
+
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: slideGapValue * -1
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
const hasDiff = breakpoints.some((v) => typeof v.slideGap !== "undefined" || typeof v.slideSize !== "undefined");
|
|
48
|
+
const containerBreakpoints = !hasDiff ? null : core.getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
|
|
49
|
+
var _a;
|
|
50
|
+
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
51
|
+
const breakpointSize = theme.fn.size({
|
|
52
|
+
size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
|
|
53
|
+
sizes: theme.breakpoints
|
|
54
|
+
});
|
|
55
|
+
const breakpointSlideGap = (_a = typeof breakpoint.slideGap === "undefined" ? slideGap : breakpoint.slideGap) != null ? _a : 0;
|
|
56
|
+
acc[`@media (${property}: ${breakpointSize - (property === "max-width" ? 1 : 0)}px)`] = getContainerStyles(breakpointSlideGap);
|
|
57
|
+
return acc;
|
|
58
|
+
}, {});
|
|
28
59
|
return {
|
|
29
60
|
root: {
|
|
30
|
-
overflow: "hidden",
|
|
31
61
|
position: "relative"
|
|
32
62
|
},
|
|
33
|
-
|
|
63
|
+
viewport: {
|
|
64
|
+
height,
|
|
65
|
+
overflow: "hidden"
|
|
66
|
+
},
|
|
67
|
+
container: __spreadValues(__spreadValues({
|
|
34
68
|
display: "flex",
|
|
35
69
|
flexDirection: horizontal ? "row" : "column",
|
|
36
70
|
height
|
|
37
|
-
},
|
|
38
|
-
viewport: {
|
|
39
|
-
height
|
|
40
|
-
},
|
|
71
|
+
}, getContainerStyles(slideGap)), containerBreakpoints),
|
|
41
72
|
controls: {
|
|
42
73
|
position: "absolute",
|
|
43
74
|
zIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.styles.js","sources":["../src/Carousel.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/core';\n\nexport interface CarouselStylesParams {\n controlSize: number;\n controlsOffset: MantineNumberSize;\n orientation: 'vertical' | 'horizontal';\n height: React.CSSProperties['height'];\n}\n\nexport default createStyles(\n (theme, { controlSize, controlsOffset, orientation, height }: CarouselStylesParams) => {\n const horizontal = orientation === 'horizontal';\n return {\n root: {\n overflow: 'hidden',\n position: 'relative',\n },\n\n container: {\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n height,\n },\n\n viewport: {\n height,\n },\n\n controls: {\n position: 'absolute',\n zIndex: 1,\n left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,\n right: horizontal ? 0 : undefined,\n top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,\n bottom: horizontal ? undefined : 0,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingLeft: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingRight: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingTop: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingBottom: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n pointerEvents: 'none',\n },\n\n control: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minWidth: controlSize,\n minHeight: controlSize,\n borderRadius: controlSize,\n pointerEvents: 'all',\n backgroundColor: theme.white,\n color: theme.black,\n boxShadow: theme.shadows.md,\n opacity: theme.colorScheme === 'dark' ? 0.65 : 0.85,\n border: `1px solid ${theme.colors.gray[3]}`,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n ...theme.fn.hover({ opacity: 1 }),\n '&:active': theme.activeStyles,\n },\n\n indicators: {\n position: 'absolute',\n bottom: horizontal ? theme.spacing.md : 0,\n top: horizontal ? undefined : 0,\n left: horizontal ? 0 : undefined,\n right: horizontal ? 0 : theme.spacing.md,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n justifyContent: 'center',\n gap: 8,\n pointerEvents: 'none',\n },\n\n indicator: {\n pointerEvents: 'all',\n width: horizontal ? 25 : 5,\n height: horizontal ? 5 : 25,\n borderRadius: 10000,\n backgroundColor: theme.white,\n boxShadow: theme.shadows.sm,\n opacity: 0.6,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n\n '&[data-active]': {\n opacity: 1,\n },\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.styles.js","sources":["../src/Carousel.styles.ts"],"sourcesContent":["import { createStyles, getSortedBreakpoints, MantineNumberSize } from '@mantine/core';\nimport { CarouselBreakpoint } from './types';\n\nexport interface CarouselStylesParams {\n controlSize: number;\n controlsOffset: MantineNumberSize;\n orientation: 'vertical' | 'horizontal';\n height: React.CSSProperties['height'];\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n slideGap: MantineNumberSize;\n}\n\nexport default createStyles(\n (\n theme,\n {\n controlSize,\n controlsOffset,\n orientation,\n height,\n includeGapInSize,\n breakpoints = [],\n slideGap,\n }: CarouselStylesParams\n ) => {\n const horizontal = orientation === 'horizontal';\n\n // Container styles by slideGap (for includeGapInSize case)\n const getContainerStyles = (gap: MantineNumberSize) => {\n if (!includeGapInSize) return {};\n\n const slideGapValue = theme.fn.size({\n size: gap,\n sizes: theme.spacing,\n });\n\n return {\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: slideGapValue * -1,\n };\n };\n\n const hasDiff = breakpoints.some(\n (v) => typeof v.slideGap !== 'undefined' || typeof v.slideSize !== 'undefined'\n );\n\n // Apply styles for breakpoints only if has different gap or size\n const containerBreakpoints = !hasDiff\n ? null\n : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n const breakpointSize = theme.fn.size({\n size: (property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth)!,\n sizes: theme.breakpoints,\n });\n\n const breakpointSlideGap =\n (typeof breakpoint.slideGap === 'undefined' ? slideGap : breakpoint.slideGap) ?? 0;\n\n acc[`@media (${property}: ${breakpointSize - (property === 'max-width' ? 1 : 0)}px)`] =\n getContainerStyles(breakpointSlideGap);\n\n return acc;\n }, {} as any);\n\n return {\n root: {\n position: 'relative',\n },\n viewport: {\n height,\n overflow: 'hidden',\n },\n\n container: {\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n height,\n ...getContainerStyles(slideGap),\n ...containerBreakpoints,\n },\n\n controls: {\n position: 'absolute',\n zIndex: 1,\n left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,\n right: horizontal ? 0 : undefined,\n top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,\n bottom: horizontal ? undefined : 0,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingLeft: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingRight: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingTop: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingBottom: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n pointerEvents: 'none',\n },\n\n control: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minWidth: controlSize,\n minHeight: controlSize,\n borderRadius: controlSize,\n pointerEvents: 'all',\n backgroundColor: theme.white,\n color: theme.black,\n boxShadow: theme.shadows.md,\n opacity: theme.colorScheme === 'dark' ? 0.65 : 0.85,\n border: `1px solid ${theme.colors.gray[3]}`,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n ...theme.fn.hover({ opacity: 1 }),\n '&:active': theme.activeStyles,\n },\n\n indicators: {\n position: 'absolute',\n bottom: horizontal ? theme.spacing.md : 0,\n top: horizontal ? undefined : 0,\n left: horizontal ? 0 : undefined,\n right: horizontal ? 0 : theme.spacing.md,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n justifyContent: 'center',\n gap: 8,\n pointerEvents: 'none',\n },\n\n indicator: {\n pointerEvents: 'all',\n width: horizontal ? 25 : 5,\n height: horizontal ? 5 : 25,\n borderRadius: 10000,\n backgroundColor: theme.white,\n boxShadow: theme.shadows.sm,\n opacity: 0.6,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n\n '&[data-active]': {\n opacity: 1,\n },\n },\n };\n }\n);\n"],"names":["createStyles","getSortedBreakpoints"],"mappings":"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"}
|
|
@@ -21,37 +21,36 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var useStyles = core.createStyles((theme, { size, gap, orientation, includeGapInSize, breakpoints = [] }) => {
|
|
24
|
-
const
|
|
24
|
+
const getSlideStyles = (slideGap, slideSize) => {
|
|
25
|
+
const slideGapValue = theme.fn.size({
|
|
26
|
+
size: slideGap,
|
|
27
|
+
sizes: theme.spacing
|
|
28
|
+
});
|
|
29
|
+
const flexBasisValue = typeof slideSize === "number" ? `${slideSize}px` : slideSize;
|
|
30
|
+
const marginStyles = includeGapInSize ? {
|
|
31
|
+
[orientation === "horizontal" ? "paddingRight" : "paddinBottom"]: slideGapValue
|
|
32
|
+
} : {
|
|
33
|
+
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: slideGapValue
|
|
34
|
+
};
|
|
35
|
+
return __spreadValues({
|
|
36
|
+
flex: `0 0 ${flexBasisValue}`
|
|
37
|
+
}, marginStyles);
|
|
38
|
+
};
|
|
39
|
+
const hasDiff = breakpoints.some((v) => typeof v.slideGap !== "undefined" || typeof v.slideSize !== "undefined");
|
|
40
|
+
const slideBreakpoints = !hasDiff ? null : core.getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
|
|
25
41
|
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
26
42
|
const breakpointSize = theme.fn.size({
|
|
27
43
|
size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
|
|
28
44
|
sizes: theme.breakpoints
|
|
29
45
|
});
|
|
30
46
|
const breakpointGap = typeof breakpoint.slideGap === "undefined" ? gap : breakpoint.slideGap;
|
|
31
|
-
acc[`@media (${property}: ${breakpointSize
|
|
32
|
-
flex: `0 0 calc(${typeof breakpoint.slideSize === "number" ? `${breakpoint.slideSize}px` : breakpoint.slideSize} - ${includeGapInSize ? theme.fn.size({
|
|
33
|
-
size: breakpointGap,
|
|
34
|
-
sizes: theme.spacing
|
|
35
|
-
}) / 2 : 0}px)`,
|
|
36
|
-
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
|
|
37
|
-
size: breakpointGap,
|
|
38
|
-
sizes: theme.spacing
|
|
39
|
-
})
|
|
40
|
-
};
|
|
47
|
+
acc[`@media (${property}: ${breakpointSize - (property === "max-width" ? 1 : 0)}px)`] = getSlideStyles(breakpointGap, breakpoint.slideSize);
|
|
41
48
|
return acc;
|
|
42
49
|
}, {});
|
|
43
50
|
return {
|
|
44
|
-
slide: __spreadValues({
|
|
45
|
-
position: "relative"
|
|
46
|
-
|
|
47
|
-
size: gap,
|
|
48
|
-
sizes: theme.spacing
|
|
49
|
-
}) / 2 : 0}px)`,
|
|
50
|
-
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
|
|
51
|
-
size: gap,
|
|
52
|
-
sizes: theme.spacing
|
|
53
|
-
})
|
|
54
|
-
}, slideBreakpoints)
|
|
51
|
+
slide: __spreadValues(__spreadValues({
|
|
52
|
+
position: "relative"
|
|
53
|
+
}, getSlideStyles(gap, size)), slideBreakpoints)
|
|
55
54
|
};
|
|
56
55
|
});
|
|
57
56
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.styles.js","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSortedBreakpoints } from '@mantine/core';\nimport { CarouselOrientation, CarouselBreakpoint } from '../types';\n\nexport interface CarouselSlideStylesParams {\n size: string | number;\n gap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport default createStyles(\n (\n theme,\n { size, gap, orientation, includeGapInSize, breakpoints = [] }: CarouselSlideStylesParams\n ) => {\n
|
|
1
|
+
{"version":3,"file":"CarouselSlide.styles.js","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSortedBreakpoints } from '@mantine/core';\nimport { CarouselOrientation, CarouselBreakpoint } from '../types';\n\nexport interface CarouselSlideStylesParams {\n size: string | number;\n gap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport default createStyles(\n (\n theme,\n { size, gap, orientation, includeGapInSize, breakpoints = [] }: CarouselSlideStylesParams\n ) => {\n // Slide styles by slideGap and slideSize\n const getSlideStyles = (slideGap: MantineNumberSize, slideSize: string | number) => {\n const slideGapValue = theme.fn.size({\n size: slideGap,\n sizes: theme.spacing,\n });\n\n const flexBasisValue = typeof slideSize === 'number' ? `${slideSize}px` : slideSize;\n\n const marginStyles = includeGapInSize\n ? {\n [orientation === 'horizontal' ? 'paddingRight' : 'paddinBottom']: slideGapValue,\n }\n : {\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: slideGapValue,\n };\n\n return {\n flex: `0 0 ${flexBasisValue}`,\n ...marginStyles,\n };\n };\n\n const hasDiff = breakpoints.some(\n (v) => typeof v.slideGap !== 'undefined' || typeof v.slideSize !== 'undefined'\n );\n\n // Apply styles for breakpoints only if has different gap or size\n const slideBreakpoints = !hasDiff\n ? null\n : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n const breakpointSize = theme.fn.size({\n size: property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n const breakpointGap =\n typeof breakpoint.slideGap === 'undefined' ? gap : breakpoint.slideGap;\n\n acc[`@media (${property}: ${breakpointSize - (property === 'max-width' ? 1 : 0)}px)`] =\n getSlideStyles(breakpointGap, breakpoint.slideSize);\n\n return acc;\n }, {});\n\n return {\n slide: {\n position: 'relative',\n ...getSlideStyles(gap, size),\n ...slideBreakpoints,\n },\n };\n }\n);\n"],"names":["createStyles","getSortedBreakpoints"],"mappings":"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"}
|
package/esm/Carousel.js
CHANGED
|
@@ -125,7 +125,7 @@ const _Carousel = forwardRef((props, ref) => {
|
|
|
125
125
|
"skipSnaps",
|
|
126
126
|
"containScroll"
|
|
127
127
|
]);
|
|
128
|
-
const { classes, cx, theme } = useStyles({ controlSize, controlsOffset, orientation, height }, { name: "Carousel", classNames, styles, unstyled });
|
|
128
|
+
const { classes, cx, theme } = useStyles({ controlSize, controlsOffset, orientation, height, includeGapInSize, breakpoints, slideGap }, { name: "Carousel", classNames, styles, unstyled });
|
|
129
129
|
const [emblaRefElement, embla] = useEmblaCarousel({
|
|
130
130
|
axis: orientation === "horizontal" ? "x" : "y",
|
|
131
131
|
direction: theme.dir,
|
package/esm/Carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef, useEffect, useCallback, useState, Children } from 'react';\nimport {\n useComponentDefaultProps,\n Box,\n DefaultProps,\n UnstyledButton,\n ChevronIcon,\n MantineNumberSize,\n StylesApiProvider,\n Selectors,\n} from '@mantine/core';\nimport { clamp } from '@mantine/hooks';\nimport useEmblaCarousel, { EmblaPluginType } from 'embla-carousel-react';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { CarouselSlide, CarouselSlideStylesNames } from './CarouselSlide/CarouselSlide';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport useStyles, { CarouselStylesParams } from './Carousel.styles';\n\nexport type CarouselStylesNames = CarouselSlideStylesNames | Selectors<typeof useStyles>;\n\nexport interface CarouselProps\n extends DefaultProps<CarouselStylesNames, CarouselStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** <Carousel.Slide /> components */\n children?: React.ReactNode;\n\n /** Called when user clicks next button */\n onNextSlide?(): void;\n\n /** Called when user clicks previous button */\n onPreviousSlide?(): void;\n\n /** Get embla API as ref */\n getEmblaApi?(embla: Embla): void;\n\n /** Next control aria-label */\n nextControlLabel?: string;\n\n /** Previous control aria-label */\n previousControlLabel?: string;\n\n /** Previous/next controls size in px */\n controlSize?: number;\n\n /** Key of theme.spacing or number to set space between next/previous control and carousel boundary */\n controlsOffset?: MantineNumberSize;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n slideSize?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n slideGap?: MantineNumberSize;\n\n /** Control slideSize and slideGap at different viewport sizes */\n breakpoints?: CarouselBreakpoint[];\n\n /** Carousel orientation, horizontal by default */\n orientation?: CarouselOrientation;\n\n /** Slides container height, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */\n align?: 'start' | 'center' | 'end' | number;\n\n /** Number of slides that should be scrolled with next/previous buttons */\n slidesToScroll?: number;\n\n /** Determines whether gap should be treated as part of the slide size, true by default */\n includeGapInSize?: boolean;\n\n /** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */\n draggable?: boolean;\n\n /** Determines whether momentum scrolling should be enabled, false by default */\n dragFree?: boolean;\n\n /** Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop. */\n loop?: boolean;\n\n /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */\n speed?: number;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */\n inViewThreshold?: number;\n\n /** Determines whether next/previous controls should be displayed, true by default */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed, false by default */\n withIndicators?: boolean;\n\n /** An array of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of next control */\n nextControlIcon?: React.ReactNode;\n\n /** Previous control icon */\n previousControlIcon?: React.ReactNode;\n\n /** Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default */\n skipSnaps?: boolean;\n\n /** Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them. */\n containScroll?: 'trimSnaps' | 'keepSnaps' | '';\n}\n\nconst defaultProps: Partial<CarouselProps> = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n align: 'center',\n slidesToScroll: 1,\n includeGapInSize: true,\n draggable: true,\n dragFree: false,\n loop: false,\n speed: 10,\n initialSlide: 0,\n inViewThreshold: 0,\n withControls: true,\n withIndicators: false,\n skipSnaps: false,\n containScroll: '',\n};\n\nexport const _Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n const {\n children,\n className,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n nextControlLabel,\n previousControlLabel,\n controlSize,\n controlsOffset,\n classNames,\n styles,\n unstyled,\n slideSize,\n slideGap,\n orientation,\n height,\n align,\n slidesToScroll,\n includeGapInSize,\n draggable,\n dragFree,\n loop,\n speed,\n initialSlide,\n inViewThreshold,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n breakpoints,\n skipSnaps,\n containScroll,\n ...others\n } = useComponentDefaultProps('Carousel', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { controlSize, controlsOffset, orientation, height },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: theme.dir,\n startIndex: initialSlide,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) return;\n setSelected(embla.selectedScrollSnap());\n }, [embla, setSelected]);\n\n const handlePrevious = useCallback(() => {\n embla?.scrollPrev();\n onPreviousSlide?.();\n }, [embla]);\n\n const handleNext = useCallback(() => {\n embla?.scrollNext();\n onNextSlide?.();\n }, [embla]);\n\n const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n },\n [embla]\n );\n\n useEffect(() => {\n if (embla) {\n getEmblaApi?.(embla);\n handleSelect();\n setSlidesCount(embla.scrollSnapList().length);\n embla.on('select', handleSelect);\n\n return () => {\n embla.off('select', handleSelect);\n };\n }\n\n return undefined;\n }, [embla]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n key={index}\n data-active={index === selected || undefined}\n className={classes.indicator}\n aria-hidden\n tabIndex={-1}\n onClick={() => handleScroll(index)}\n />\n ));\n\n return (\n <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n <CarouselProvider\n value={{ slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }}\n >\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n onKeyDownCapture={handleKeydown}\n {...others}\n >\n <div className={classes.viewport} ref={emblaRefElement}>\n <div className={classes.container}>{children}</div>\n </div>\n\n {withIndicators && <div className={classes.indicators}>{indicators}</div>}\n\n {withControls && (\n <div className={classes.controls}>\n <UnstyledButton\n onClick={handlePrevious}\n className={classes.control}\n aria-label={previousControlLabel}\n data-inactive={!canScrollPrev || undefined}\n tabIndex={canScrollPrev ? 0 : -1}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n onClick={handleNext}\n className={classes.control}\n aria-label={nextControlLabel}\n data-inactive={!canScrollNext || undefined}\n tabIndex={canScrollNext ? 0 : -1}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n </Box>\n </CarouselProvider>\n </StylesApiProvider>\n );\n}) as any;\n\n_Carousel.Slide = CarouselSlide;\n_Carousel.displayName = '@mantine/carousel/Carousel';\n\nexport const Carousel: ForwardRefWithStaticComponents<\n CarouselProps,\n { Slide: typeof CarouselSlide }\n> = _Carousel;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef, useEffect, useCallback, useState, Children } from 'react';\nimport {\n useComponentDefaultProps,\n Box,\n DefaultProps,\n UnstyledButton,\n ChevronIcon,\n MantineNumberSize,\n StylesApiProvider,\n Selectors,\n} from '@mantine/core';\nimport { clamp } from '@mantine/hooks';\nimport useEmblaCarousel, { EmblaPluginType } from 'embla-carousel-react';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { CarouselSlide, CarouselSlideStylesNames } from './CarouselSlide/CarouselSlide';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselOrientation, Embla, CarouselBreakpoint } from './types';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport useStyles, { CarouselStylesParams } from './Carousel.styles';\n\nexport type CarouselStylesNames = CarouselSlideStylesNames | Selectors<typeof useStyles>;\n\nexport interface CarouselProps\n extends DefaultProps<CarouselStylesNames, CarouselStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** <Carousel.Slide /> components */\n children?: React.ReactNode;\n\n /** Called when user clicks next button */\n onNextSlide?(): void;\n\n /** Called when user clicks previous button */\n onPreviousSlide?(): void;\n\n /** Get embla API as ref */\n getEmblaApi?(embla: Embla): void;\n\n /** Next control aria-label */\n nextControlLabel?: string;\n\n /** Previous control aria-label */\n previousControlLabel?: string;\n\n /** Previous/next controls size in px */\n controlSize?: number;\n\n /** Key of theme.spacing or number to set space between next/previous control and carousel boundary */\n controlsOffset?: MantineNumberSize;\n\n /** Slide width, defaults to 100%, examples: 200px, 50% */\n slideSize?: string | number;\n\n /** Key of theme.spacing or number to set gap between slides in px */\n slideGap?: MantineNumberSize;\n\n /** Control slideSize and slideGap at different viewport sizes */\n breakpoints?: CarouselBreakpoint[];\n\n /** Carousel orientation, horizontal by default */\n orientation?: CarouselOrientation;\n\n /** Slides container height, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */\n align?: 'start' | 'center' | 'end' | number;\n\n /** Number of slides that should be scrolled with next/previous buttons */\n slidesToScroll?: number | 'auto';\n\n /** Determines whether gap should be treated as part of the slide size, true by default */\n includeGapInSize?: boolean;\n\n /** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */\n draggable?: boolean;\n\n /** Determines whether momentum scrolling should be enabled, false by default */\n dragFree?: boolean;\n\n /** Enables infinite looping. Automatically falls back to false if slide content isn't enough to loop. */\n loop?: boolean;\n\n /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */\n speed?: number;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */\n inViewThreshold?: number;\n\n /** Determines whether next/previous controls should be displayed, true by default */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed, false by default */\n withIndicators?: boolean;\n\n /** An array of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of next control */\n nextControlIcon?: React.ReactNode;\n\n /** Previous control icon */\n previousControlIcon?: React.ReactNode;\n\n /** Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default */\n skipSnaps?: boolean;\n\n /** Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them. */\n containScroll?: 'trimSnaps' | 'keepSnaps' | '';\n}\n\nconst defaultProps: Partial<CarouselProps> = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n align: 'center',\n slidesToScroll: 1,\n includeGapInSize: true,\n draggable: true,\n dragFree: false,\n loop: false,\n speed: 10,\n initialSlide: 0,\n inViewThreshold: 0,\n withControls: true,\n withIndicators: false,\n skipSnaps: false,\n containScroll: '',\n};\n\nexport const _Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n const {\n children,\n className,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n nextControlLabel,\n previousControlLabel,\n controlSize,\n controlsOffset,\n classNames,\n styles,\n unstyled,\n slideSize,\n slideGap,\n orientation,\n height,\n align,\n slidesToScroll,\n includeGapInSize,\n draggable,\n dragFree,\n loop,\n speed,\n initialSlide,\n inViewThreshold,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n breakpoints,\n skipSnaps,\n containScroll,\n ...others\n } = useComponentDefaultProps('Carousel', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { controlSize, controlsOffset, orientation, height, includeGapInSize, breakpoints, slideGap },\n { name: 'Carousel', classNames, styles, unstyled }\n );\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: theme.dir,\n startIndex: initialSlide,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n },\n plugins\n );\n\n const [selected, setSelected] = useState(0);\n const [slidesCount, setSlidesCount] = useState(0);\n\n const handleScroll = useCallback((index: number) => embla && embla.scrollTo(index), [embla]);\n\n const handleSelect = useCallback(() => {\n if (!embla) return;\n setSelected(embla.selectedScrollSnap());\n }, [embla, setSelected]);\n\n const handlePrevious = useCallback(() => {\n embla?.scrollPrev();\n onPreviousSlide?.();\n }, [embla]);\n\n const handleNext = useCallback(() => {\n embla?.scrollNext();\n onNextSlide?.();\n }, [embla]);\n\n const handleKeydown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n handleNext();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n handlePrevious();\n }\n },\n [embla]\n );\n\n useEffect(() => {\n if (embla) {\n getEmblaApi?.(embla);\n handleSelect();\n setSlidesCount(embla.scrollSnapList().length);\n embla.on('select', handleSelect);\n\n return () => {\n embla.off('select', handleSelect);\n };\n }\n\n return undefined;\n }, [embla]);\n\n useEffect(() => {\n if (embla) {\n embla.reInit();\n setSlidesCount(embla.scrollSnapList().length);\n setSelected((currentSelected) =>\n clamp(currentSelected, 0, Children.toArray(children).length - 1)\n );\n }\n }, [Children.toArray(children).length]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n key={index}\n data-active={index === selected || undefined}\n className={classes.indicator}\n aria-hidden\n tabIndex={-1}\n onClick={() => handleScroll(index)}\n />\n ));\n\n return (\n <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n <CarouselProvider\n value={{ slideGap, slideSize, embla, orientation, includeGapInSize, breakpoints }}\n >\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n onKeyDownCapture={handleKeydown}\n {...others}\n >\n <div className={classes.viewport} ref={emblaRefElement}>\n <div className={classes.container}>{children}</div>\n </div>\n\n {withIndicators && <div className={classes.indicators}>{indicators}</div>}\n\n {withControls && (\n <div className={classes.controls}>\n <UnstyledButton\n onClick={handlePrevious}\n className={classes.control}\n aria-label={previousControlLabel}\n data-inactive={!canScrollPrev || undefined}\n tabIndex={canScrollPrev ? 0 : -1}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n onClick={handleNext}\n className={classes.control}\n aria-label={nextControlLabel}\n data-inactive={!canScrollNext || undefined}\n tabIndex={canScrollNext ? 0 : -1}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <ChevronIcon\n style={{\n transform: `rotate(${getChevronRotation({\n dir: theme.dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n </Box>\n </CarouselProvider>\n </StylesApiProvider>\n );\n}) as any;\n\n_Carousel.Slide = CarouselSlide;\n_Carousel.displayName = '@mantine/carousel/Carousel';\n\nexport const Carousel: ForwardRefWithStaticComponents<\n CarouselProps,\n { Slide: typeof CarouselSlide }\n> = _Carousel;\n"],"names":[],"mappings":";;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAeF,MAAM,YAAY,GAAG;AACrB,EAAE,WAAW,EAAE,EAAE;AACjB,EAAE,cAAc,EAAE,IAAI;AACtB,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,QAAQ,EAAE,CAAC;AACb,EAAE,WAAW,EAAE,YAAY;AAC3B,EAAE,KAAK,EAAE,QAAQ;AACjB,EAAE,cAAc,EAAE,CAAC;AACnB,EAAE,gBAAgB,EAAE,IAAI;AACxB,EAAE,SAAS,EAAE,IAAI;AACjB,EAAE,QAAQ,EAAE,KAAK;AACjB,EAAE,IAAI,EAAE,KAAK;AACb,EAAE,KAAK,EAAE,EAAE;AACX,EAAE,YAAY,EAAE,CAAC;AACjB,EAAE,eAAe,EAAE,CAAC;AACpB,EAAE,YAAY,EAAE,IAAI;AACpB,EAAE,cAAc,EAAE,KAAK;AACvB,EAAE,SAAS,EAAE,KAAK;AAClB,EAAE,aAAa,EAAE,EAAE;AACnB,CAAC,CAAC;AACU,MAAC,SAAS,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACpD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACxE,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,MAAM;AACV,IAAI,KAAK;AACT,IAAI,cAAc;AAClB,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,eAAe;AACnB,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,OAAO;AACX,IAAI,eAAe;AACnB,IAAI,mBAAmB;AACvB,IAAI,WAAW;AACf,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,gBAAgB;AACpB,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;AACzB,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC9L,EAAE,MAAM,CAAC,eAAe,EAAE,KAAK,CAAC,GAAG,gBAAgB,CAAC;AACpD,IAAI,IAAI,EAAE,WAAW,KAAK,YAAY,GAAG,GAAG,GAAG,GAAG;AAClD,IAAI,SAAS,EAAE,KAAK,CAAC,GAAG;AACxB,IAAI,UAAU,EAAE,YAAY;AAC5B,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,QAAQ;AACZ,IAAI,KAAK;AACT,IAAI,eAAe;AACnB,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,GAAG,EAAE,OAAO,CAAC,CAAC;AACd,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC9C,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpD,EAAE,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACvF,EAAE,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM;AACzC,IAAI,IAAI,CAAC,KAAK;AACd,MAAM,OAAO;AACb,IAAI,WAAW,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC5C,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3B,EAAE,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM;AAC3C,IAAI,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;AAChD,IAAI,eAAe,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,eAAe,EAAE,CAAC;AACzD,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM;AACvC,IAAI,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;AAChD,IAAI,WAAW,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,WAAW,EAAE,CAAC;AACjD,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAK,KAAK;AAC/C,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;AACpC,MAAM,KAAK,CAAC,cAAc,EAAE,CAAC;AAC7B,MAAM,UAAU,EAAE,CAAC;AACnB,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;AACnC,MAAM,KAAK,CAAC,cAAc,EAAE,CAAC;AAC7B,MAAM,cAAc,EAAE,CAAC;AACvB,KAAK;AACL,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,WAAW,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AACxD,MAAM,YAAY,EAAE,CAAC;AACrB,MAAM,cAAc,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AACvC,MAAM,OAAO,MAAM;AACnB,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAC1C,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,KAAK,CAAC,MAAM,EAAE,CAAC;AACrB,MAAM,cAAc,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,WAAW,CAAC,CAAC,eAAe,KAAK,KAAK,CAAC,eAAe,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;AACzG,KAAK;AACL,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1C,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,EAAE,KAAK,KAAK,CAAC;AAClF,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,EAAE,KAAK,KAAK,CAAC;AAClF,EAAE,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE;AACtH,IAAI,GAAG,EAAE,KAAK;AACd,IAAI,aAAa,EAAE,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC;AAC/C,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,aAAa,EAAE,IAAI;AACvB,IAAI,QAAQ,EAAE,CAAC,CAAC;AAChB,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC;AACtC,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE;AAChE,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE;AAC3D,IAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE;AACrF,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AAC7D,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG;AACP,IAAI,gBAAgB,EAAE,aAAa;AACnC,GAAG,EAAE,MAAM,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACzD,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ;AAC/B,IAAI,GAAG,EAAE,eAAe;AACxB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,cAAc,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC9E,IAAI,SAAS,EAAE,OAAO,CAAC,UAAU;AACjC,GAAG,EAAE,UAAU,CAAC,EAAE,YAAY,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7E,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ;AAC/B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE;AACzD,IAAI,OAAO,EAAE,cAAc;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,IAAI,YAAY,EAAE,oBAAoB;AACtC,IAAI,eAAe,EAAE,CAAC,aAAa,IAAI,KAAK,CAAC;AAC7C,IAAI,QAAQ,EAAE,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC;AACpC,GAAG,EAAE,OAAO,mBAAmB,KAAK,WAAW,GAAG,mBAAmB,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACzH,IAAI,KAAK,EAAE;AACX,MAAM,SAAS,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC;AAC9C,QAAQ,GAAG,EAAE,KAAK,CAAC,GAAG;AACtB,QAAQ,WAAW;AACnB,QAAQ,SAAS,EAAE,UAAU;AAC7B,OAAO,CAAC,CAAC,IAAI,CAAC;AACd,KAAK;AACL,GAAG,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE;AAC3D,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,SAAS,EAAE,OAAO,CAAC,OAAO;AAC9B,IAAI,YAAY,EAAE,gBAAgB;AAClC,IAAI,eAAe,EAAE,CAAC,aAAa,IAAI,KAAK,CAAC;AAC7C,IAAI,QAAQ,EAAE,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC;AACpC,GAAG,EAAE,OAAO,eAAe,KAAK,WAAW,GAAG,eAAe,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACjH,IAAI,KAAK,EAAE;AACX,MAAM,SAAS,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC;AAC9C,QAAQ,GAAG,EAAE,KAAK,CAAC,GAAG;AACtB,QAAQ,WAAW;AACnB,QAAQ,SAAS,EAAE,MAAM;AACzB,OAAO,CAAC,CAAC,IAAI,CAAC;AACd,KAAK;AACL,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACV,CAAC,EAAE;AACH,SAAS,CAAC,KAAK,GAAG,aAAa,CAAC;AAChC,SAAS,CAAC,WAAW,GAAG,4BAA4B,CAAC;AACzC,MAAC,QAAQ,GAAG;;;;"}
|
package/esm/Carousel.styles.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createStyles } from '@mantine/core';
|
|
1
|
+
import { createStyles, getSortedBreakpoints } from '@mantine/core';
|
|
2
2
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __defProps = Object.defineProperties;
|
|
@@ -19,21 +19,52 @@ var __spreadValues = (a, b) => {
|
|
|
19
19
|
return a;
|
|
20
20
|
};
|
|
21
21
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
|
-
var useStyles = createStyles((theme, {
|
|
22
|
+
var useStyles = createStyles((theme, {
|
|
23
|
+
controlSize,
|
|
24
|
+
controlsOffset,
|
|
25
|
+
orientation,
|
|
26
|
+
height,
|
|
27
|
+
includeGapInSize,
|
|
28
|
+
breakpoints = [],
|
|
29
|
+
slideGap
|
|
30
|
+
}) => {
|
|
23
31
|
const horizontal = orientation === "horizontal";
|
|
32
|
+
const getContainerStyles = (gap) => {
|
|
33
|
+
if (!includeGapInSize)
|
|
34
|
+
return {};
|
|
35
|
+
const slideGapValue = theme.fn.size({
|
|
36
|
+
size: gap,
|
|
37
|
+
sizes: theme.spacing
|
|
38
|
+
});
|
|
39
|
+
return {
|
|
40
|
+
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: slideGapValue * -1
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
const hasDiff = breakpoints.some((v) => typeof v.slideGap !== "undefined" || typeof v.slideSize !== "undefined");
|
|
44
|
+
const containerBreakpoints = !hasDiff ? null : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
|
|
45
|
+
var _a;
|
|
46
|
+
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
47
|
+
const breakpointSize = theme.fn.size({
|
|
48
|
+
size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
|
|
49
|
+
sizes: theme.breakpoints
|
|
50
|
+
});
|
|
51
|
+
const breakpointSlideGap = (_a = typeof breakpoint.slideGap === "undefined" ? slideGap : breakpoint.slideGap) != null ? _a : 0;
|
|
52
|
+
acc[`@media (${property}: ${breakpointSize - (property === "max-width" ? 1 : 0)}px)`] = getContainerStyles(breakpointSlideGap);
|
|
53
|
+
return acc;
|
|
54
|
+
}, {});
|
|
24
55
|
return {
|
|
25
56
|
root: {
|
|
26
|
-
overflow: "hidden",
|
|
27
57
|
position: "relative"
|
|
28
58
|
},
|
|
29
|
-
|
|
59
|
+
viewport: {
|
|
60
|
+
height,
|
|
61
|
+
overflow: "hidden"
|
|
62
|
+
},
|
|
63
|
+
container: __spreadValues(__spreadValues({
|
|
30
64
|
display: "flex",
|
|
31
65
|
flexDirection: horizontal ? "row" : "column",
|
|
32
66
|
height
|
|
33
|
-
},
|
|
34
|
-
viewport: {
|
|
35
|
-
height
|
|
36
|
-
},
|
|
67
|
+
}, getContainerStyles(slideGap)), containerBreakpoints),
|
|
37
68
|
controls: {
|
|
38
69
|
position: "absolute",
|
|
39
70
|
zIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.styles.js","sources":["../src/Carousel.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/core';\n\nexport interface CarouselStylesParams {\n controlSize: number;\n controlsOffset: MantineNumberSize;\n orientation: 'vertical' | 'horizontal';\n height: React.CSSProperties['height'];\n}\n\nexport default createStyles(\n (theme, { controlSize, controlsOffset, orientation, height }: CarouselStylesParams) => {\n const horizontal = orientation === 'horizontal';\n return {\n root: {\n overflow: 'hidden',\n position: 'relative',\n },\n\n container: {\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n height,\n },\n\n viewport: {\n height,\n },\n\n controls: {\n position: 'absolute',\n zIndex: 1,\n left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,\n right: horizontal ? 0 : undefined,\n top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,\n bottom: horizontal ? undefined : 0,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingLeft: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingRight: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingTop: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingBottom: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n pointerEvents: 'none',\n },\n\n control: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minWidth: controlSize,\n minHeight: controlSize,\n borderRadius: controlSize,\n pointerEvents: 'all',\n backgroundColor: theme.white,\n color: theme.black,\n boxShadow: theme.shadows.md,\n opacity: theme.colorScheme === 'dark' ? 0.65 : 0.85,\n border: `1px solid ${theme.colors.gray[3]}`,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n ...theme.fn.hover({ opacity: 1 }),\n '&:active': theme.activeStyles,\n },\n\n indicators: {\n position: 'absolute',\n bottom: horizontal ? theme.spacing.md : 0,\n top: horizontal ? undefined : 0,\n left: horizontal ? 0 : undefined,\n right: horizontal ? 0 : theme.spacing.md,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n justifyContent: 'center',\n gap: 8,\n pointerEvents: 'none',\n },\n\n indicator: {\n pointerEvents: 'all',\n width: horizontal ? 25 : 5,\n height: horizontal ? 5 : 25,\n borderRadius: 10000,\n backgroundColor: theme.white,\n boxShadow: theme.shadows.sm,\n opacity: 0.6,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n\n '&[data-active]': {\n opacity: 1,\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.styles.js","sources":["../src/Carousel.styles.ts"],"sourcesContent":["import { createStyles, getSortedBreakpoints, MantineNumberSize } from '@mantine/core';\nimport { CarouselBreakpoint } from './types';\n\nexport interface CarouselStylesParams {\n controlSize: number;\n controlsOffset: MantineNumberSize;\n orientation: 'vertical' | 'horizontal';\n height: React.CSSProperties['height'];\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n slideGap: MantineNumberSize;\n}\n\nexport default createStyles(\n (\n theme,\n {\n controlSize,\n controlsOffset,\n orientation,\n height,\n includeGapInSize,\n breakpoints = [],\n slideGap,\n }: CarouselStylesParams\n ) => {\n const horizontal = orientation === 'horizontal';\n\n // Container styles by slideGap (for includeGapInSize case)\n const getContainerStyles = (gap: MantineNumberSize) => {\n if (!includeGapInSize) return {};\n\n const slideGapValue = theme.fn.size({\n size: gap,\n sizes: theme.spacing,\n });\n\n return {\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: slideGapValue * -1,\n };\n };\n\n const hasDiff = breakpoints.some(\n (v) => typeof v.slideGap !== 'undefined' || typeof v.slideSize !== 'undefined'\n );\n\n // Apply styles for breakpoints only if has different gap or size\n const containerBreakpoints = !hasDiff\n ? null\n : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n const breakpointSize = theme.fn.size({\n size: (property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth)!,\n sizes: theme.breakpoints,\n });\n\n const breakpointSlideGap =\n (typeof breakpoint.slideGap === 'undefined' ? slideGap : breakpoint.slideGap) ?? 0;\n\n acc[`@media (${property}: ${breakpointSize - (property === 'max-width' ? 1 : 0)}px)`] =\n getContainerStyles(breakpointSlideGap);\n\n return acc;\n }, {} as any);\n\n return {\n root: {\n position: 'relative',\n },\n viewport: {\n height,\n overflow: 'hidden',\n },\n\n container: {\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n height,\n ...getContainerStyles(slideGap),\n ...containerBreakpoints,\n },\n\n controls: {\n position: 'absolute',\n zIndex: 1,\n left: horizontal ? 0 : `calc(50% - ${controlSize / 2}px)`,\n right: horizontal ? 0 : undefined,\n top: horizontal ? `calc(50% - ${controlSize / 2}px)` : 0,\n bottom: horizontal ? undefined : 0,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingLeft: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingRight: horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingTop: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n paddingBottom: !horizontal\n ? theme.fn.size({ size: controlsOffset, sizes: theme.spacing })\n : undefined,\n pointerEvents: 'none',\n },\n\n control: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minWidth: controlSize,\n minHeight: controlSize,\n borderRadius: controlSize,\n pointerEvents: 'all',\n backgroundColor: theme.white,\n color: theme.black,\n boxShadow: theme.shadows.md,\n opacity: theme.colorScheme === 'dark' ? 0.65 : 0.85,\n border: `1px solid ${theme.colors.gray[3]}`,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n ...theme.fn.hover({ opacity: 1 }),\n '&:active': theme.activeStyles,\n },\n\n indicators: {\n position: 'absolute',\n bottom: horizontal ? theme.spacing.md : 0,\n top: horizontal ? undefined : 0,\n left: horizontal ? 0 : undefined,\n right: horizontal ? 0 : theme.spacing.md,\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n justifyContent: 'center',\n gap: 8,\n pointerEvents: 'none',\n },\n\n indicator: {\n pointerEvents: 'all',\n width: horizontal ? 25 : 5,\n height: horizontal ? 5 : 25,\n borderRadius: 10000,\n backgroundColor: theme.white,\n boxShadow: theme.shadows.sm,\n opacity: 0.6,\n transition: `opacity 150ms ${theme.transitionTimingFunction}`,\n\n '&[data-active]': {\n opacity: 1,\n },\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -17,37 +17,36 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var useStyles = createStyles((theme, { size, gap, orientation, includeGapInSize, breakpoints = [] }) => {
|
|
20
|
-
const
|
|
20
|
+
const getSlideStyles = (slideGap, slideSize) => {
|
|
21
|
+
const slideGapValue = theme.fn.size({
|
|
22
|
+
size: slideGap,
|
|
23
|
+
sizes: theme.spacing
|
|
24
|
+
});
|
|
25
|
+
const flexBasisValue = typeof slideSize === "number" ? `${slideSize}px` : slideSize;
|
|
26
|
+
const marginStyles = includeGapInSize ? {
|
|
27
|
+
[orientation === "horizontal" ? "paddingRight" : "paddinBottom"]: slideGapValue
|
|
28
|
+
} : {
|
|
29
|
+
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: slideGapValue
|
|
30
|
+
};
|
|
31
|
+
return __spreadValues({
|
|
32
|
+
flex: `0 0 ${flexBasisValue}`
|
|
33
|
+
}, marginStyles);
|
|
34
|
+
};
|
|
35
|
+
const hasDiff = breakpoints.some((v) => typeof v.slideGap !== "undefined" || typeof v.slideSize !== "undefined");
|
|
36
|
+
const slideBreakpoints = !hasDiff ? null : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
|
|
21
37
|
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
22
38
|
const breakpointSize = theme.fn.size({
|
|
23
39
|
size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
|
|
24
40
|
sizes: theme.breakpoints
|
|
25
41
|
});
|
|
26
42
|
const breakpointGap = typeof breakpoint.slideGap === "undefined" ? gap : breakpoint.slideGap;
|
|
27
|
-
acc[`@media (${property}: ${breakpointSize
|
|
28
|
-
flex: `0 0 calc(${typeof breakpoint.slideSize === "number" ? `${breakpoint.slideSize}px` : breakpoint.slideSize} - ${includeGapInSize ? theme.fn.size({
|
|
29
|
-
size: breakpointGap,
|
|
30
|
-
sizes: theme.spacing
|
|
31
|
-
}) / 2 : 0}px)`,
|
|
32
|
-
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
|
|
33
|
-
size: breakpointGap,
|
|
34
|
-
sizes: theme.spacing
|
|
35
|
-
})
|
|
36
|
-
};
|
|
43
|
+
acc[`@media (${property}: ${breakpointSize - (property === "max-width" ? 1 : 0)}px)`] = getSlideStyles(breakpointGap, breakpoint.slideSize);
|
|
37
44
|
return acc;
|
|
38
45
|
}, {});
|
|
39
46
|
return {
|
|
40
|
-
slide: __spreadValues({
|
|
41
|
-
position: "relative"
|
|
42
|
-
|
|
43
|
-
size: gap,
|
|
44
|
-
sizes: theme.spacing
|
|
45
|
-
}) / 2 : 0}px)`,
|
|
46
|
-
[orientation === "horizontal" ? "marginRight" : "marginBottom"]: theme.fn.size({
|
|
47
|
-
size: gap,
|
|
48
|
-
sizes: theme.spacing
|
|
49
|
-
})
|
|
50
|
-
}, slideBreakpoints)
|
|
47
|
+
slide: __spreadValues(__spreadValues({
|
|
48
|
+
position: "relative"
|
|
49
|
+
}, getSlideStyles(gap, size)), slideBreakpoints)
|
|
51
50
|
};
|
|
52
51
|
});
|
|
53
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.styles.js","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSortedBreakpoints } from '@mantine/core';\nimport { CarouselOrientation, CarouselBreakpoint } from '../types';\n\nexport interface CarouselSlideStylesParams {\n size: string | number;\n gap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport default createStyles(\n (\n theme,\n { size, gap, orientation, includeGapInSize, breakpoints = [] }: CarouselSlideStylesParams\n ) => {\n
|
|
1
|
+
{"version":3,"file":"CarouselSlide.styles.js","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSortedBreakpoints } from '@mantine/core';\nimport { CarouselOrientation, CarouselBreakpoint } from '../types';\n\nexport interface CarouselSlideStylesParams {\n size: string | number;\n gap: MantineNumberSize;\n orientation: CarouselOrientation;\n includeGapInSize: boolean;\n breakpoints: CarouselBreakpoint[];\n}\n\nexport default createStyles(\n (\n theme,\n { size, gap, orientation, includeGapInSize, breakpoints = [] }: CarouselSlideStylesParams\n ) => {\n // Slide styles by slideGap and slideSize\n const getSlideStyles = (slideGap: MantineNumberSize, slideSize: string | number) => {\n const slideGapValue = theme.fn.size({\n size: slideGap,\n sizes: theme.spacing,\n });\n\n const flexBasisValue = typeof slideSize === 'number' ? `${slideSize}px` : slideSize;\n\n const marginStyles = includeGapInSize\n ? {\n [orientation === 'horizontal' ? 'paddingRight' : 'paddinBottom']: slideGapValue,\n }\n : {\n [orientation === 'horizontal' ? 'marginRight' : 'marginBottom']: slideGapValue,\n };\n\n return {\n flex: `0 0 ${flexBasisValue}`,\n ...marginStyles,\n };\n };\n\n const hasDiff = breakpoints.some(\n (v) => typeof v.slideGap !== 'undefined' || typeof v.slideSize !== 'undefined'\n );\n\n // Apply styles for breakpoints only if has different gap or size\n const slideBreakpoints = !hasDiff\n ? null\n : getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n const breakpointSize = theme.fn.size({\n size: property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n const breakpointGap =\n typeof breakpoint.slideGap === 'undefined' ? gap : breakpoint.slideGap;\n\n acc[`@media (${property}: ${breakpointSize - (property === 'max-width' ? 1 : 0)}px)`] =\n getSlideStyles(breakpointGap, breakpoint.slideSize);\n\n return acc;\n }, {});\n\n return {\n slide: {\n position: 'relative',\n ...getSlideStyles(gap, size),\n ...slideBreakpoints,\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
package/lib/Carousel.d.ts
CHANGED
|
@@ -36,7 +36,7 @@ export interface CarouselProps extends DefaultProps<CarouselStylesNames, Carouse
|
|
|
36
36
|
/** Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 equals 50% */
|
|
37
37
|
align?: 'start' | 'center' | 'end' | number;
|
|
38
38
|
/** Number of slides that should be scrolled with next/previous buttons */
|
|
39
|
-
slidesToScroll?: number;
|
|
39
|
+
slidesToScroll?: number | 'auto';
|
|
40
40
|
/** Determines whether gap should be treated as part of the slide size, true by default */
|
|
41
41
|
includeGapInSize?: boolean;
|
|
42
42
|
/** Determines whether carousel can be scrolled with mouse and touch interactions, true by default */
|
package/lib/Carousel.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAGL,YAAY,EAGZ,iBAAiB,EAEjB,SAAS,EACV,MAAM,eAAe,CAAC;AAEvB,OAAyB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,8BAA8B,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAExF,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEzE,OAAO,SAAS,EAAE,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,oBAAY,mBAAmB,GAAG,wBAAwB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,EAC7D,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,0CAA0C;IAC1C,WAAW,CAAC,IAAI,IAAI,CAAC;IAErB,8CAA8C;IAC9C,eAAe,CAAC,IAAI,IAAI,CAAC;IAEzB,2BAA2B;IAC3B,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAEjC,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kCAAkC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,sGAAsG;IACtG,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAEnC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAE7B,iEAAiE;IACjE,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEnC,kDAAkD;IAClD,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC,iEAAiE;IACjE,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEvC,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAE5C,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"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"}
|
package/lib/Carousel.styles.d.ts
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MantineNumberSize } from '@mantine/core';
|
|
3
|
+
import { CarouselBreakpoint } from './types';
|
|
3
4
|
export interface CarouselStylesParams {
|
|
4
5
|
controlSize: number;
|
|
5
6
|
controlsOffset: MantineNumberSize;
|
|
6
7
|
orientation: 'vertical' | 'horizontal';
|
|
7
8
|
height: React.CSSProperties['height'];
|
|
9
|
+
includeGapInSize: boolean;
|
|
10
|
+
breakpoints: CarouselBreakpoint[];
|
|
11
|
+
slideGap: MantineNumberSize;
|
|
8
12
|
}
|
|
9
|
-
declare const _default: (params: CarouselStylesParams, options?: import("@mantine/core").UseStylesOptions<"root" | "
|
|
10
|
-
classes: Record<"root" | "
|
|
13
|
+
declare const _default: (params: CarouselStylesParams, options?: import("@mantine/core").UseStylesOptions<"root" | "viewport" | "container" | "controls" | "control" | "indicators" | "indicator">) => {
|
|
14
|
+
classes: Record<"root" | "viewport" | "container" | "controls" | "control" | "indicators" | "indicator", string>;
|
|
11
15
|
cx: (...args: any) => string;
|
|
12
16
|
theme: import("@mantine/core").MantineTheme;
|
|
13
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.styles.d.ts","sourceRoot":"","sources":["../src/Carousel.styles.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Carousel.styles.d.ts","sourceRoot":"","sources":["../src/Carousel.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAsC,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,iBAAiB,CAAC;IAClC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,kBAAkB,EAAE,CAAC;IAClC,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;;;;;;AAED,wBA8IE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.styles.d.ts","sourceRoot":"","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAwB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,EAAE,iBAAiB,CAAC;IACvB,WAAW,EAAE,mBAAmB,CAAC;IACjC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,kBAAkB,EAAE,CAAC;CACnC;;;;;;AAED,
|
|
1
|
+
{"version":3,"file":"CarouselSlide.styles.d.ts","sourceRoot":"","sources":["../../src/CarouselSlide/CarouselSlide.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAwB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,EAAE,iBAAiB,CAAC;IACvB,WAAW,EAAE,mBAAmB,CAAC;IACjC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,kBAAkB,EAAE,CAAC;CACnC;;;;;;AAED,wBA2DE"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/carousel",
|
|
3
3
|
"description": "Embla based carousel",
|
|
4
|
-
"version": "5.4.
|
|
4
|
+
"version": "5.4.2",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"author": "Vitaly Rtishchev <rtivital@gmail.com>",
|
|
10
|
-
"homepage": "https://mantine.dev/
|
|
10
|
+
"homepage": "https://mantine.dev/others/carousel/",
|
|
11
11
|
"keywords": [
|
|
12
12
|
"react",
|
|
13
13
|
"next",
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"slick"
|
|
23
23
|
],
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@mantine/core": "5.4.
|
|
26
|
-
"@mantine/hooks": "5.4.
|
|
25
|
+
"@mantine/core": "5.4.2",
|
|
26
|
+
"@mantine/hooks": "5.4.2",
|
|
27
27
|
"embla-carousel-react": "^7.0.0",
|
|
28
28
|
"react": ">=16.8.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@mantine/utils": "5.4.
|
|
31
|
+
"@mantine/utils": "5.4.2"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {}
|
|
34
34
|
}
|