@mantine/carousel 9.0.0 → 9.0.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.cjs.map +1 -1
- package/esm/Carousel.mjs.map +1 -1
- package/lib/Carousel.d.ts +8 -0
- package/lib/index.d.mts +0 -7
- package/lib/index.d.ts +0 -7
- package/package.json +3 -3
package/cjs/Carousel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.cjs","names":["Children","UnstyledButton","CarouselProvider","CarouselContainerVariables","CarouselVariables","Box","VisuallyHidden","AccordionChevron","getChevronRotation","classes","CarouselSlide"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\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) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 (withKeyboardEvents) {\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 if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\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, emblaOptions?.slidesToScroll, handleSelect]);\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, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.cjs","names":["Children","UnstyledButton","CarouselProvider","CarouselContainerVariables","CarouselVariables","Box","VisuallyHidden","AccordionChevron","getChevronRotation","classes","CarouselSlide"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\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) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 (withKeyboardEvents) {\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 if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\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, emblaOptions?.slidesToScroll, handleSelect]);\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, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
package/esm/Carousel.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.mjs","names":["classes"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\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) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 (withKeyboardEvents) {\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 if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\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, emblaOptions?.slidesToScroll, handleSelect]);\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, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.mjs","names":["classes"],"sources":["../src/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useState } from 'react';\nimport type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n AccordionChevron,\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n rem,\n StyleProp,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useRandomClassName,\n useStyles,\n VisuallyHidden,\n} from '@mantine/core';\nimport { clamp, useId } from '@mantine/hooks';\nimport { CarouselProvider, type CarouselContextValue } from './Carousel.context';\nimport { CarouselSlide } from './CarouselSlide/CarouselSlide';\nimport {\n CarouselContainerVariables,\n CarouselVariables,\n} from './CarouselVariables/CarouselVariables';\nimport { getChevronRotation } from './get-chevron-rotation';\nimport classes from './Carousel.module.css';\n\nexport type CarouselStylesNames =\n | 'slide'\n | 'root'\n | 'viewport'\n | 'container'\n | 'controls'\n | 'control'\n | 'indicators'\n | 'indicator';\n\nexport type CarouselCssVariables = {\n root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';\n};\n\nexport interface CarouselProps\n extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {\n /** Options passed down to embla carousel */\n emblaOptions?: EmblaOptionsType;\n\n /** `Carousel.Slide` components */\n children?: React.ReactNode;\n\n /** Called when next slide is shown */\n onNextSlide?: () => void;\n\n /** Called when previous slider is shown */\n onPreviousSlide?: () => void;\n\n /** Called with slide index when slide changes */\n onSlideChange?: (index: number) => void;\n\n /** Get embla API as ref */\n getEmblaApi?: (embla: EmblaCarouselType) => void;\n\n /** Props passed down to next control */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed down to previous control */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Controls size of the next and previous controls @default 26 */\n controlSize?: React.CSSProperties['width'];\n\n /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */\n controlsOffset?: MantineSpacing;\n\n /** Controls slide width based on viewport width @default '100%' */\n slideSize?: StyleProp<string | number>;\n\n /** Key of theme.spacing or number to set gap between slides */\n slideGap?: StyleProp<MantineSpacing>;\n\n /** Carousel orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Determines type of queries used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Slides container `height`, required for vertical orientation */\n height?: React.CSSProperties['height'];\n\n /** Determines whether gap between slides should be treated as part of the slide size @default true */\n includeGapInSize?: boolean;\n\n /** Index of initial slide */\n initialSlide?: number;\n\n /** Determines whether next/previous controls should be displayed @default true */\n withControls?: boolean;\n\n /** Determines whether indicators should be displayed @default false */\n withIndicators?: boolean;\n\n /** A list of embla plugins */\n plugins?: EmblaPluginType[];\n\n /** Icon of the next control */\n nextControlIcon?: React.ReactNode;\n\n /** Icon of the previous control */\n previousControlIcon?: React.ReactNode;\n\n /** Determines whether arrow key should switch slides @default true */\n withKeyboardEvents?: boolean;\n\n /** Function to get props for indicator button */\n getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;\n}\n\nexport type CarouselFactory = Factory<{\n props: CarouselProps;\n ref: HTMLDivElement;\n stylesNames: CarouselStylesNames;\n vars: CarouselCssVariables;\n staticComponents: {\n Slide: typeof CarouselSlide;\n };\n}>;\n\nconst defaultProps = {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n} satisfies Partial<CarouselProps>;\n\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n};\n\nconst varsResolver = createVarsResolver<CarouselFactory>(\n (_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n })\n);\n\nexport const Carousel = factory<CarouselFactory>((_props) => {\n const props = useProps('Carousel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n getEmblaApi,\n onNextSlide,\n onPreviousSlide,\n onSlideChange,\n nextControlProps,\n previousControlProps,\n controlSize,\n controlsOffset,\n slideSize,\n slideGap,\n orientation,\n height,\n includeGapInSize,\n draggable,\n initialSlide,\n withControls,\n withIndicators,\n plugins,\n nextControlIcon,\n previousControlIcon,\n withKeyboardEvents,\n mod,\n type,\n emblaOptions,\n attributes,\n getIndicatorProps,\n id,\n ...others\n } = props;\n\n const getStyles = useStyles<CarouselFactory>({\n name: 'Carousel',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _id = useId(id);\n\n const responsiveClassName = useRandomClassName();\n const { dir } = useDirection();\n\n const [emblaRefElement, embla] = useEmblaCarousel(\n {\n axis: orientation === 'horizontal' ? 'x' : 'y',\n direction: orientation === 'horizontal' ? dir : undefined,\n startIndex: initialSlide,\n ...defaultEmblaOptions,\n ...emblaOptions,\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) {\n return;\n }\n const slide = embla.selectedScrollSnap();\n setSelected(slide);\n slide !== selected && onSlideChange?.(slide);\n }, [embla, setSelected, onSlideChange, selected]);\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 (withKeyboardEvents) {\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 if (event.key === 'Home') {\n event.preventDefault();\n embla?.scrollTo(0);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n embla?.scrollTo(embla.scrollSnapList().length - 1);\n }\n }\n },\n [embla, handleNext, handlePrevious]\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, emblaOptions?.slidesToScroll, handleSelect]);\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, emblaOptions?.slidesToScroll]);\n\n const canScrollPrev = embla?.canScrollPrev() || false;\n const canScrollNext = embla?.canScrollNext() || false;\n\n const handleIndicatorKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isHorizontal = orientation === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < slidesCount - 1 ? index + 1 : 0;\n handleScroll(nextIndex);\n const nextIndicator = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement;\n nextIndicator?.focus();\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : slidesCount - 1;\n handleScroll(prevIndex);\n const prevIndicator = event.currentTarget.parentElement?.children[prevIndex] as HTMLElement;\n prevIndicator?.focus();\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n handleScroll(0);\n const firstIndicator = event.currentTarget.parentElement?.children[0] as HTMLElement;\n firstIndicator?.focus();\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n handleScroll(slidesCount - 1);\n const lastIndicator = event.currentTarget.parentElement?.children[\n slidesCount - 1\n ] as HTMLElement;\n lastIndicator?.focus();\n }\n },\n [orientation, slidesCount, handleScroll]\n );\n\n const indicators = Array(slidesCount)\n .fill(0)\n .map((_, index) => (\n <UnstyledButton\n {...getStyles('indicator')}\n key={index}\n role=\"tab\"\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === selected}\n tabIndex={index === selected ? 0 : -1}\n data-active={index === selected || undefined}\n onClick={() => handleScroll(index)}\n onKeyDown={(event) => handleIndicatorKeyDown(event, index)}\n data-orientation={orientation}\n onMouseDown={(event) => event.preventDefault()}\n {...getIndicatorProps?.(index)}\n />\n ));\n\n return (\n <CarouselProvider value={{ getStyles, orientation }}>\n {type === 'container' ? (\n <CarouselContainerVariables {...props} selector={`.${responsiveClassName}`} />\n ) : (\n <CarouselVariables {...props} selector={`.${responsiveClassName}`} />\n )}\n\n <Box\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n id={_id}\n mod={[{ orientation, 'include-gap-in-size': includeGapInSize }, mod]}\n onKeyDownCapture={handleKeydown}\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`}\n </VisuallyHidden>\n\n {withControls && (\n <div {...getStyles('controls')} data-orientation={orientation}>\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Previous slide\"\n aria-disabled={!canScrollPrev}\n data-inactive={!canScrollPrev || undefined}\n data-type=\"previous\"\n tabIndex={canScrollPrev ? 0 : -1}\n {...previousControlProps}\n {...getStyles('control', {\n className: previousControlProps?.className,\n style: previousControlProps?.style,\n })}\n onClick={(event) => {\n handlePrevious();\n previousControlProps?.onClick?.(event);\n }}\n >\n {typeof previousControlIcon !== 'undefined' ? (\n previousControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'previous',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n\n <UnstyledButton\n aria-controls={_id}\n aria-label=\"Next slide\"\n aria-disabled={!canScrollNext}\n data-inactive={!canScrollNext || undefined}\n data-type=\"next\"\n tabIndex={canScrollNext ? 0 : -1}\n {...getStyles('control', {\n className: nextControlProps?.className,\n style: nextControlProps?.style,\n })}\n {...nextControlProps}\n onClick={(event) => {\n handleNext();\n nextControlProps?.onClick?.(event);\n }}\n >\n {typeof nextControlIcon !== 'undefined' ? (\n nextControlIcon\n ) : (\n <AccordionChevron\n style={{\n transform: `rotate(${getChevronRotation({\n dir,\n orientation,\n direction: 'next',\n })}deg)`,\n }}\n />\n )}\n </UnstyledButton>\n </div>\n )}\n\n <div {...getStyles('viewport')} ref={emblaRefElement} data-type={type}>\n <div\n {...getStyles('container', { className: responsiveClassName })}\n data-orientation={orientation}\n >\n {children}\n </div>\n </div>\n\n {withIndicators && (\n <div\n {...getStyles('indicators')}\n role=\"tablist\"\n aria-label=\"Slides\"\n data-orientation={orientation}\n >\n {indicators}\n </div>\n )}\n </Box>\n </CarouselProvider>\n );\n});\n\nCarousel.classes = classes;\nCarousel.varsResolver = varsResolver;\nCarousel.displayName = '@mantine/carousel/Carousel';\nCarousel.Slide = CarouselSlide;\n\nexport namespace Carousel {\n export type Props = CarouselProps;\n export type CssVariables = CarouselCssVariables;\n export type Factory = CarouselFactory;\n export type StylesNames = CarouselStylesNames;\n export type ContextValue = CarouselContextValue;\n}\n"],"mappings":"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"}
|
package/lib/Carousel.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
|
|
2
2
|
import { BoxProps, DataAttributes, ElementProps, Factory, MantineSpacing, StyleProp, StylesApiProps } from '@mantine/core';
|
|
3
|
+
import { type CarouselContextValue } from './Carousel.context';
|
|
3
4
|
import { CarouselSlide } from './CarouselSlide/CarouselSlide';
|
|
4
5
|
export type CarouselStylesNames = 'slide' | 'root' | 'viewport' | 'container' | 'controls' | 'control' | 'indicators' | 'indicator';
|
|
5
6
|
export type CarouselCssVariables = {
|
|
@@ -73,3 +74,10 @@ export declare const Carousel: import("@mantine/core").MantineComponent<{
|
|
|
73
74
|
Slide: typeof CarouselSlide;
|
|
74
75
|
};
|
|
75
76
|
}>;
|
|
77
|
+
export declare namespace Carousel {
|
|
78
|
+
type Props = CarouselProps;
|
|
79
|
+
type CssVariables = CarouselCssVariables;
|
|
80
|
+
type Factory = CarouselFactory;
|
|
81
|
+
type StylesNames = CarouselStylesNames;
|
|
82
|
+
type ContextValue = CarouselContextValue;
|
|
83
|
+
}
|
package/lib/index.d.mts
CHANGED
|
@@ -4,10 +4,3 @@ export { Carousel } from './Carousel.js';
|
|
|
4
4
|
export { useCarouselContext } from './Carousel.context.js';
|
|
5
5
|
export { CarouselSlide } from './CarouselSlide/CarouselSlide.js';
|
|
6
6
|
export type { CarouselProps, CarouselCssVariables, CarouselFactory, CarouselStylesNames, CarouselContextValue, };
|
|
7
|
-
export declare namespace Carousel {
|
|
8
|
-
type Props = CarouselProps;
|
|
9
|
-
type CssVariables = CarouselCssVariables;
|
|
10
|
-
type Factory = CarouselFactory;
|
|
11
|
-
type StylesNames = CarouselStylesNames;
|
|
12
|
-
type ContextValue = CarouselContextValue;
|
|
13
|
-
}
|
package/lib/index.d.ts
CHANGED
|
@@ -4,10 +4,3 @@ export { Carousel } from './Carousel.js';
|
|
|
4
4
|
export { useCarouselContext } from './Carousel.context.js';
|
|
5
5
|
export { CarouselSlide } from './CarouselSlide/CarouselSlide.js';
|
|
6
6
|
export type { CarouselProps, CarouselCssVariables, CarouselFactory, CarouselStylesNames, CarouselContextValue, };
|
|
7
|
-
export declare namespace Carousel {
|
|
8
|
-
type Props = CarouselProps;
|
|
9
|
-
type CssVariables = CarouselCssVariables;
|
|
10
|
-
type Factory = CarouselFactory;
|
|
11
|
-
type StylesNames = CarouselStylesNames;
|
|
12
|
-
type ContextValue = CarouselContextValue;
|
|
13
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/carousel",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.2",
|
|
4
4
|
"description": "Embla based carousel",
|
|
5
5
|
"homepage": "https://mantine.dev/x/carousel/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"directory": "packages/@mantine/carousel"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@mantine/core": "9.0.
|
|
48
|
-
"@mantine/hooks": "9.0.
|
|
47
|
+
"@mantine/core": "9.0.2",
|
|
48
|
+
"@mantine/hooks": "9.0.2",
|
|
49
49
|
"embla-carousel": ">=8.0.0",
|
|
50
50
|
"embla-carousel-react": ">=8.0.0",
|
|
51
51
|
"react": "^19.2.0",
|