{"version":3,"file":"DynamicItemCarousel.lieldayh.js","sources":["../../../wwwdev/esm/components/generic/ScrollSnapSlider/components/DynamicItemCarousel.tsx"],"sourcesContent":["import { Spacing8 } from 'autogen/design-tokens/tokens';\r\nimport Icon from 'components/Icon';\r\nimport useElementSizeEffect from 'hooks/globals/useElementSizeEffect';\r\nimport { invisibleScrollbar } from 'modules/helpers/mixins';\r\nimport { useState } from 'react';\r\nimport styled, { type RuleSet, css } from 'styled-components';\r\nimport { breakpoint, sizes } from 'variables';\r\nimport ScrollSnapSliderContext from '../context/ScrollSnapSliderContext';\r\nimport useScrollSnapSlider from '../hooks/useScrollSnapSlider';\r\nimport ScrollSnapSlider from '../ScrollSnapSlider';\r\nimport { StyledNavigationButtonLeft, StyledNavigationButtonRight } from './ItemCarousel';\r\n\r\nconst defaultItemSize = 260;\r\n\r\nconst RootContainer = styled.div`\r\n    position: relative;\r\n    min-width: 0;\r\n\r\n    @media print {\r\n        display: none;\r\n    }\r\n`;\r\nconst StaticContainer = styled.div<{ $itemsPerSlide: number; $gapSize: string }>`\r\n    && {\r\n        display: grid;\r\n        grid-auto-flow: column;\r\n        grid-auto-columns: 100%;\r\n\r\n        ${breakpoint.up(sizes.sm)} {\r\n            grid-auto-columns: ${({ $itemsPerSlide, $gapSize }) =>\r\n                `calc(100% / ${Math.max(1, $itemsPerSlide)} - ${$gapSize} + calc(${$gapSize} / ${Math.max(\r\n                    1,\r\n                    $itemsPerSlide\r\n                )}))`};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledScrollSnapSlider = styled(ScrollSnapSlider)<{\r\n    $itemsPerSlide: number;\r\n    $hidden: boolean;\r\n    $gapSize: string;\r\n    $teaseNextItem: boolean;\r\n    $nextItemMobileIndentation?: string;\r\n}>`\r\n    && {\r\n        display: grid;\r\n        grid-auto-flow: column;\r\n        ${({ $gapSize }) => `gap: ${$gapSize};`}\r\n        scroll-snap-type: none;\r\n        scroll-snap-stop: normal;\r\n        visibility: ${({ $hidden }) => ($hidden ? 'visible' : 'hidden')};\r\n\r\n        ${({ $itemsPerSlide, $nextItemMobileIndentation, $teaseNextItem, $gapSize }) =>\r\n            $nextItemMobileIndentation\r\n                ? css`\r\n                      grid-auto-columns: ${`calc(100% / ${$itemsPerSlide} - ${$nextItemMobileIndentation})`};\r\n                  `\r\n                : css`\r\n                      grid-auto-columns: ${`calc(100% / calc(${$itemsPerSlide}${\r\n                          $teaseNextItem ? '.5' : ''\r\n                      }) - calc(calc(${$gapSize} * ${$itemsPerSlide - 1}) / ${$itemsPerSlide}))`};\r\n                  `}\r\n\r\n        ${breakpoint.up(sizes.sm)} {\r\n            grid-auto-columns: ${({ $itemsPerSlide, $teaseNextItem, $gapSize }) =>\r\n                `calc(100% / calc(${$itemsPerSlide}${$teaseNextItem ? '.5' : ''}) - calc(calc(${$gapSize} * ${\r\n                    $itemsPerSlide - 1\r\n                }) / ${$itemsPerSlide}))`};\r\n        }\r\n\r\n        ${breakpoint.up(sizes.xl)} {\r\n            scroll-snap-type: x mandatory;\r\n            scroll-snap-stop: always;\r\n            grid-auto-columns: ${({ $itemsPerSlide, $gapSize }) =>\r\n                `calc(100% / ${$itemsPerSlide} - ${$gapSize} + calc(${$gapSize} / ${$itemsPerSlide}))`};\r\n        }\r\n\r\n        ${invisibleScrollbar()}\r\n    }\r\n`;\r\n\r\nconst options = {\r\n    draggable: true,\r\n    loop: false\r\n};\r\n\r\ntype Props<T> = {\r\n    items: T[];\r\n    itemRenderer: (item: T, index: number) => JSX.Element | JSX.Element[] | null;\r\n    itemSize?: number;\r\n    hideCarouselButtons?: boolean;\r\n    scrollContainerCss?: RuleSet;\r\n    nextItemMobileIndentation?: string;\r\n    gapSize?: string;\r\n};\r\n\r\n/*\r\n    The DynamicItemCarousel will adjust the number of items per slide automatically based on a provided itemSize.\r\n    If this behavior is not needed and the number of items per slide is static or based on window width, use the itemCarousel instead.\r\n*/\r\nexport default function DynamicItemCarousel<T>({\r\n    items,\r\n    itemRenderer,\r\n    itemSize = defaultItemSize,\r\n    hideCarouselButtons = false,\r\n    scrollContainerCss,\r\n    nextItemMobileIndentation,\r\n    gapSize = Spacing8,\r\n    ...restProps\r\n}: Props<T>) {\r\n    const { ref, slider } = useScrollSnapSlider(options);\r\n    const [itemsPerSlide, setItemsPerSlide] = useState<number>(0);\r\n    const [teaseNextSlide, setTeaseNextSlide] = useState(false);\r\n    const getItemsThatCanFitInContainer = (containerWidth, itemWidth) =>\r\n        Math.max(Math.floor(containerWidth / itemWidth), 1);\r\n    const maxItemsPerSlide = 6;\r\n\r\n    const [sizeRef] = useElementSizeEffect((size) => {\r\n        const itemsThatCanFitInContainer = getItemsThatCanFitInContainer(size.width, itemSize);\r\n        const nextState = Math.min(itemsThatCanFitInContainer, maxItemsPerSlide);\r\n        setItemsPerSlide(nextState);\r\n\r\n        if (ref.current) {\r\n            setTeaseNextSlide(items.length > itemsThatCanFitInContainer);\r\n        }\r\n    });\r\n\r\n    const attachRefs = (node) => {\r\n        ref.current = node;\r\n        sizeRef.current = node;\r\n    };\r\n\r\n    if (!items.length) return null;\r\n\r\n    if (items.length === 1)\r\n        return (\r\n            <RootContainer {...restProps}>\r\n                <StaticContainer\r\n                    ref={attachRefs}\r\n                    $itemsPerSlide={itemsPerSlide}\r\n                    $gapSize={gapSize}\r\n                    css={scrollContainerCss}\r\n                >\r\n                    {items.map((item, index) => itemRenderer(item, index))}\r\n                </StaticContainer>\r\n            </RootContainer>\r\n        );\r\n\r\n    return (\r\n        <ScrollSnapSliderContext.Provider value={slider}>\r\n            <RootContainer {...restProps}>\r\n                <StyledNavigationButtonRight\r\n                    $isVisible={hideCarouselButtons}\r\n                    navType=\"next\"\r\n                    slideAmount={itemsPerSlide}\r\n                    size=\"lg\"\r\n                    variant={null}\r\n                >\r\n                    <Icon type=\"ChevronRight\" size={16} />\r\n                </StyledNavigationButtonRight>\r\n\r\n                <StyledNavigationButtonLeft\r\n                    $isVisible={hideCarouselButtons}\r\n                    navType=\"prev\"\r\n                    slideAmount={itemsPerSlide}\r\n                    size=\"lg\"\r\n                    variant={null}\r\n                >\r\n                    <Icon type=\"ChevronLeft\" size={16} />\r\n                </StyledNavigationButtonLeft>\r\n\r\n                <StyledScrollSnapSlider\r\n                    css={scrollContainerCss}\r\n                    $hidden={!!itemsPerSlide}\r\n                    $itemsPerSlide={itemsPerSlide}\r\n                    $teaseNextItem={teaseNextSlide}\r\n                    $nextItemMobileIndentation={nextItemMobileIndentation}\r\n                    $gapSize={gapSize}\r\n                    ref={attachRefs}\r\n                >\r\n                    {items.map((item, index) => itemRenderer(item, index))}\r\n                </StyledScrollSnapSlider>\r\n            </RootContainer>\r\n        </ScrollSnapSliderContext.Provider>\r\n    );\r\n}\r\n"],"names":["defaultItemSize","RootContainer","styled","div","withConfig","displayName","componentId","StaticContainer","breakpoint","up","sizes","sm","$itemsPerSlide","$gapSize","Math","max","_StyledStaticContainer","p","$_css","StyledScrollSnapSlider","ScrollSnapSlider","$hidden","$nextItemMobileIndentation","$teaseNextItem","css","xl","invisibleScrollbar","_StyledStyledScrollSnapSlider","$_css2","options","draggable","loop","DynamicItemCarousel","items","itemRenderer","itemSize","hideCarouselButtons","scrollContainerCss","nextItemMobileIndentation","gapSize","Spacing8","restProps","ref","slider","useScrollSnapSlider","itemsPerSlide","setItemsPerSlide","useState","teaseNextSlide","setTeaseNextSlide","getItemsThatCanFitInContainer","containerWidth","itemWidth","floor","maxItemsPerSlide","sizeRef","useElementSizeEffect","size","itemsThatCanFitInContainer","width","nextState","min","current","length","attachRefs","node","jsx","map","item","index","ScrollSnapSliderContext","jsxs","StyledNavigationButtonRight","Icon","StyledNavigationButtonLeft"],"mappings":"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"}