npm - @skodaflow/web-library - Versions diffs - 8.3.2 → 8.5.0 - Mend

@skodaflow/web-library 8.3.2 → 8.5.0

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.

Files changed (308) hide show

package/cjs/components/carousel/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../../../src/components/carousel/Pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/SliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' \| 'position'> {\n /*\n Carousel instance from useCarousel hook\n /\n carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n variant?: 'dots';\n /\n Properties applied to wrapper of dots\n /\n dotsWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to each dot, or a factory receiving the dot index\n /\n dotProps?: BoxProps<ElementType> \| ((index: number, active: boolean) => BoxProps<ElementType>);\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n variant?: 'fraction';\n /\n Properties applied to button used to render text\n /\n buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n variant?: 'lines';\n /\n Properties applied to each line, or a factory receiving the line index\n /\n linesProps?: ButtonProps \| ((index: number, active: boolean) => ButtonProps);\n /\n Show progress in active line instead\n /\n lineProgress?: number;\n /\n Properties applied to active line progress, or a factory receiving the line index\n /\n lineProgressProps?: BoxProps<ElementType> \| ((index: number, active: boolean) => BoxProps<ElementType>);\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n variant?: 'slider';\n /\n Properties applied to Slider\n /\n sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n variant?: 'scrollbar';\n /\n Properties applied to Slider\n /\n sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n /\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Append style to wrapper box to change position of control\n * @default outside\n /\n position?: 'outside' \| 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n (\n \| Omit<CarouselPaginationDotsProps, 'carousel'>\n \| Omit<CarouselPaginationFractionProps, 'carousel'>\n \| Omit<CarouselPaginationLinesProps, 'carousel'>\n \| Omit<CarouselPaginationSliderProps, 'carousel'>\n \| Omit<CarouselPaginationScrollbarProps, 'carousel'>\n );\n\n/\n Pagination controls\n /\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n ({ carousel: carouselProp, position, variant, sx, ...rest }, ref) => {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n // decide on component used\n const VariantComponent = useMemo(() => {\n switch (variant) {\n case 'scrollbar':\n return ScrollbarVariant;\n case 'slider':\n return SliderVariant;\n case 'fraction':\n return FractionVariant;\n case 'lines':\n return LinesVariant;\n case 'dots':\n return DotsVariant;\n default:\n return DotsVariant;\n }\n }, [variant]);\n\n return (\n <VariantComponent\n carousel={carousel}\n sx={sxOverride(\n {\n ...(position === 'inside' && {\n position: 'absolute',\n zIndex: '90',\n bottom: '0',\n left: '0',\n right: '0',\n }),\n },\n sx,\n )}\n ref={ref}\n position={position}\n {...rest}\n />\n );\n },\n);\n\n/\n Dots variant (...)\n /\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n p: 2,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '1000px',\n py: 0.5,\n px: 1,\n gap: 0.5,\n // ensure width does not change during transition\n // dots width space + gap space + extra active dot space + padding\n width: `${(carousel?.slides.length \|\| 0) 12 + ((carousel?.slides.length \|\| 1) - 1) * 4 + 4 + 16}px`,\n // on image variant from Figma\n ...(position === 'inside' && {\n backgroundColor: (theme) =>\n theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop',\n }),\n },\n dotsWrapperSx,\n )}\n {...restDotsWrapper}\n >\n {carousel?.slides?.map((_, idx) => {\n const active =\n (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length \|\| 0) - 1) \|\|\n ((!carousel?.isEnd \|\| carousel.params?.loop) && idx === carousel?.realIndex);\n const { sx: dotSx, ...restDot } = (typeof dotProps === 'function' ? dotProps(idx, active) : dotProps) ?? {};\n\n return (\n <Box\n key={idx}\n className={active ? 'active' : undefined}\n sx={sxOverride(\n {\n p: '0',\n width: '12px',\n height: '12px',\n // scale to 8px\n transform: 'scale(0.6667)',\n borderRadius: '100%',\n backgroundColor: 'onSurface.os500',\n transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n '&.active': {\n transform: 'scale(1)',\n backgroundColor: 'text.primary',\n margin: '0 2px',\n },\n },\n dotSx,\n )}\n {...restDot}\n />\n );\n })}\n </Box>\n </Box>\n );\n },\n);\n\n/*\n Fraction variant (text 1/3)\n /\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // space is needed for focus overflow\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n <Button\n variant=\"text\"\n aria-controls=\"carousel\"\n sx={sxOverride(\n {\n px: 2,\n py: 0.25,\n borderRadius: '4px',\n // custom typography according to Figma (Pagination/Compact)\n fontSize: '18px',\n lineHeight: '28px',\n letterSpacing: '0.02em',\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.backdrop',\n },\n {\n backgroundColor: 'onSurface.os100',\n },\n ),\n },\n buttonSx,\n )}\n onClick={() =>\n // at the end, slide to beginning\n carousel?.isEnd && !carousel.params?.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n }\n {...restButton}\n >\n <Box component=\"span\">\n <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n {`${(carousel?.realIndex \|\| 0) + 1}`}\n </Box>\n <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n {' / '}\n </Box>\n <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n {`${carousel?.slides.length \|\| 0}`}\n </Box>\n </Box>\n </Button>\n </Box>\n );\n },\n);\n\n/\n Lines variant (- - -)\n /\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: { xs: 'stretch', md: 'center' },\n flexGrow: { xs: '1', md: '0' },\n gap: 1,\n // space is needed for focus overflow\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {carousel?.slides?.map((_, idx) => {\n const active =\n (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length \|\| 0) - 1) \|\|\n ((!carousel?.isEnd \|\| carousel.params?.loop) && idx === carousel?.realIndex);\n const seen = idx <= (carousel?.realIndex \|\| 0);\n const { sx: lineSx, ...lineRest } =\n (typeof linesProps === 'function' ? linesProps(idx, active) : linesProps) ?? {};\n const { sx: lineProgressSx, ...lineProgressRest } =\n (typeof lineProgressProps === 'function' ? lineProgressProps(idx, active) : lineProgressProps) ?? {};\n\n return (\n <Button\n key={idx}\n color=\"inherit\"\n className={active ? 'active' : undefined}\n sx={sxOverride(\n {\n p: 0,\n minHeight: '0',\n height: active \|\| seen ? '8px' : '4px',\n borderRadius: active \|\| seen ? '4px' : '2px',\n width: { xs: 'auto', md: '56px' },\n flexGrow: { xs: '1', md: '0' },\n justifyContent: 'flex-start',\n ...getInteractiveStyle(\n {\n backgroundColor: 'surface.primary',\n '& .progress-line': {\n backgroundColor: 'brand.secondary',\n },\n },\n {\n backgroundColor: 'surface.secondary',\n '& .progress-line': {\n backgroundColor: 'brandHover.secondary',\n },\n },\n ),\n },\n lineSx,\n )}\n aria-controls=\"carousel\"\n onClick={() => carousel?.[carousel.params?.loop ? 'slideToLoop' : 'slideTo'](idx)}\n {...lineRest}\n >\n <Box\n sx={{\n // invisible hitbox expanding clickable area\n position: 'absolute',\n top: '50%',\n left: '0',\n right: '0',\n height: '24px', // Minimum a11y click area\n transform: 'translateY(-50%)',\n pointerEvents: 'auto',\n }}\n />\n <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n <Box\n className=\"progress-line\"\n {...(active && {\n role: 'progressbar',\n })}\n {...(active &&\n lineProgress !== undefined && {\n 'aria-valuenow': lineProgress,\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n })}\n sx={sxOverride(\n {\n opacity: lineProgress !== undefined \|\| seen ? '1' : '0',\n width: '100%',\n backgroundColor: 'brand.secondary',\n height: '100%',\n transformOrigin: 'left',\n transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n },\n lineProgressSx,\n )}\n {...lineProgressRest}\n />\n </Box>\n </Button>\n );\n })}\n </Box>\n );\n },\n);\n\n/\n Slider variant (___)\n /\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n // slider current value that might not match carousel progress\n const [value, setValue] = useState<number>(Math.round((carousel?.progress \|\| 0) 100));\n // watch user manipulating slider\n const dragging = useRef<boolean>(false);\n const [, setRerender] = useState({});\n // monitor carousel progress to update slider value\n useEffect(() => {\n if (!dragging.current) {\n setValue(Math.round((carousel?.progress \|\| 0) * 100));\n }\n }, [carousel?.progress]);\n // extra monitor of states\n useEffect(() => {\n if (carousel) {\n const handleMove = () => {\n if (!dragging.current) {\n setRerender({});\n }\n };\n\n // monitor of movement to immediately move thumb\n carousel.on('sliderMove', handleMove);\n\n return () => {\n carousel.off('sliderMove', handleMove);\n };\n }\n }, [carousel]);\n\n return (\n <Box sx={sxOverride({ my: 2 }, sx)} ref={ref} {...rest}>\n <Slider\n value={value}\n min={0}\n max={100}\n onChange={(_, newValue: number) => {\n // prevent value updates from carousel progress\n dragging.current = true;\n // smoothly move carousel\n carousel?.setProgress(newValue / 100, 150);\n // update slider value\n setValue(newValue);\n }}\n onChangeCommitted={() => {\n // make sure to slide to correct position after user stop touching slider\n carousel?.slideToClosest(300);\n // enable changing value from carousel progress\n dragging.current = false;\n }}\n sx={sxOverride(\n {\n display: 'block',\n // from 6px to 4px\n height: '4px',\n // keep 32px height\n py: '14px',\n // restyle to less prominent variant\n '.MuiSlider-rail': {\n color: 'surface.primary',\n },\n '.MuiSlider-track': {\n color: 'onSurface.os500',\n // match transition speed of carousel\n transitionDuration: `${carousel?.params?.speed ?? 300}ms`,\n },\n // hide control thumb\n '.MuiSlider-thumb': {\n display: 'none',\n },\n },\n sliderSx,\n )}\n aria-controls=\"carousel\"\n {...restSlider}\n />\n </Box>\n );\n },\n);\n\n/*\n Scrollbar variant (_--)\n /\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n ({ carousel, sliderProps, position, ...rest }, ref) => {\n const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n // watch states\n const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n const [, setRerender] = useState({});\n // extra monitor of states\n useEffect(() => {\n if (carousel) {\n const handleDragStart = () => setCarouselDragging(true);\n const handleDragEnd = () => setCarouselDragging(false);\n const handleResize = () => setRerender({});\n\n // monitor of dragging to remove thumb transition for immediate feedback\n carousel.on('touchStart', handleDragStart);\n carousel.on('touchEnd', handleDragEnd);\n // monitor resize to change size of the thumb\n carousel.on('resize', handleResize);\n\n return () => {\n carousel.off('touchStart', handleDragStart);\n carousel.off('touchEnd', handleDragEnd);\n carousel.off('resize', handleResize);\n };\n }\n }, [carousel]);\n // calculate size of the thumb based on the visible content and full content\n const thumbSize = useMemo<number>(() => {\n if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n const size = Math.ceil(carousel?.width * 2 / carousel?.wrapperEl?.scrollWidth);\n return Math.max(size, 40);\n }\n return 40;\n }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n return (\n <SliderVariant\n ref={ref}\n carousel={carousel}\n component={SliderContainer}\n thumbSize={thumbSize}\n sliderProps={{\n // prevent selection via keyboard, Carousel can be already controlled with Keyboard, and we are not showing focus ring\n tabIndex: -1,\n // remove valueLabel tooltip above thumb\n valueLabelDisplay: 'off',\n sx: sxOverride(\n {\n // restyle to match scrollbar\n '.MuiSlider-rail, .MuiSlider-track': {\n color: 'surface.primary',\n },\n '.MuiSlider-thumb': {\n display: 'flex',\n width: `${thumbSize}px`,\n maxWidth: 'none',\n height: '4px',\n border: 'none',\n backgroundColor: 'onSurface.os500',\n // hitbox target\n '&:after': {\n width: `${thumbSize}px`,\n },\n // match transition speed of carousel\n ...(!carouselDragging && {\n transition: `left ${carousel?.params?.speed ?? 300}ms ease-out`,\n }),\n // remove focus style\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n '&:before': {\n content: 'none',\n },\n },\n },\n },\n sliderSx,\n ),\n ...restSlider,\n }}\n {...rest}\n />\n );\n },\n);\n"],"names":["CarouselPagination","forwardRef","carousel","carouselProp","position","variant","sx","rest","ref","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","_jsx","sxOverride","zIndex","bottom","left","right","dotsWrapperProps","dotProps","dotsWrapperSx","restDotsWrapper","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","map","_","idx","active","params","loop","isEnd","realIndex","dotSx","restDot","className","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","xs","md","flexGrow","seen","lineSx","lineRest","lineProgressSx","lineProgressRest","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","maxWidth","border","boxShadow","content"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../../src/components/carousel/Pagination.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo, useState, useRef } from 'react';\nimport { Box, BoxProps, Button, ButtonProps, Slider, SliderProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useCarousel } from './hooks';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { SliderContainer } from '@/src/materialui/slider/SliderContainer';\n\nexport interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' \| 'position'> {\n /*\n Carousel instance from useCarousel hook\n /\n carousel: CarouselInstance;\n}\nexport interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {\n variant?: 'dots';\n /\n Properties applied to wrapper of dots\n /\n dotsWrapperProps?: BoxProps<ElementType>;\n /\n Properties applied to each dot, or a factory receiving the dot index\n /\n dotProps?: BoxProps<ElementType> \| ((index: number, active: boolean) => BoxProps<ElementType>);\n}\nexport interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {\n variant?: 'fraction';\n /\n Properties applied to button used to render text\n /\n buttonProps?: ButtonProps;\n}\nexport interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {\n variant?: 'lines';\n /\n Properties applied to each line, or a factory receiving the line index\n /\n linesProps?: ButtonProps \| ((index: number, active: boolean) => ButtonProps);\n /\n Show progress in active line instead\n /\n lineProgress?: number;\n /\n Properties applied to active line progress, or a factory receiving the line index\n /\n lineProgressProps?: BoxProps<ElementType> \| ((index: number, active: boolean) => BoxProps<ElementType>);\n}\nexport interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {\n variant?: 'slider';\n /\n Properties applied to Slider\n /\n sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {\n variant?: 'scrollbar';\n /\n Properties applied to Slider\n /\n sliderProps?: SliderProps;\n}\nexport interface CarouselPaginationBaseProps {\n /\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Append style to wrapper box to change position of control\n * @default outside\n /\n position?: 'outside' \| 'inside';\n}\nexport type CarouselPaginationProps = CarouselPaginationBaseProps &\n (\n \| Omit<CarouselPaginationDotsProps, 'carousel'>\n \| Omit<CarouselPaginationFractionProps, 'carousel'>\n \| Omit<CarouselPaginationLinesProps, 'carousel'>\n \| Omit<CarouselPaginationSliderProps, 'carousel'>\n \| Omit<CarouselPaginationScrollbarProps, 'carousel'>\n );\n\n/\n Pagination controls\n /\nexport const CarouselPagination: React.FC<CarouselPaginationProps> = forwardRef(\n ({ carousel: carouselProp, position, variant, sx, ...rest }, ref) => {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n // decide on component used\n const VariantComponent = useMemo(() => {\n switch (variant) {\n case 'scrollbar':\n return ScrollbarVariant;\n case 'slider':\n return SliderVariant;\n case 'fraction':\n return FractionVariant;\n case 'lines':\n return LinesVariant;\n case 'dots':\n return DotsVariant;\n default:\n return DotsVariant;\n }\n }, [variant]);\n\n return (\n <VariantComponent\n carousel={carousel}\n sx={sxOverride(\n {\n ...(position === 'inside' && {\n position: 'absolute',\n zIndex: '90',\n bottom: '0',\n left: '0',\n right: '0',\n }),\n },\n sx,\n )}\n ref={ref}\n position={position}\n {...rest}\n />\n );\n },\n);\n\n/\n Dots variant (...)\n /\nexport const DotsVariant: React.FC<CarouselPaginationDotsProps> = forwardRef(\n ({ carousel, dotsWrapperProps, dotProps, position, sx, ...rest }, ref) => {\n const { sx: dotsWrapperSx, ...restDotsWrapper } = dotsWrapperProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n p: 2,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '1000px',\n py: 0.5,\n px: 1,\n gap: 0.5,\n // ensure width does not change during transition\n // dots width space + gap space + extra active dot space + padding\n width: `${(carousel?.slides.length \|\| 0) 12 + ((carousel?.slides.length \|\| 1) - 1) * 4 + 4 + 16}px`,\n // on image variant from Figma\n ...(position === 'inside' && {\n backgroundColor: (theme) =>\n theme.palette.mode === 'dark' ? 'surface.primary' : 'transparent.backdrop',\n }),\n },\n dotsWrapperSx,\n )}\n {...restDotsWrapper}\n >\n {carousel?.slides?.map((_, idx) => {\n const active =\n (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length \|\| 0) - 1) \|\|\n ((!carousel?.isEnd \|\| carousel.params?.loop) && idx === carousel?.realIndex);\n const { sx: dotSx, ...restDot } = (typeof dotProps === 'function' ? dotProps(idx, active) : dotProps) ?? {};\n\n return (\n <Box\n key={idx}\n className={active ? 'active' : undefined}\n sx={sxOverride(\n {\n p: '0',\n width: '12px',\n height: '12px',\n // scale to 8px\n transform: 'scale(0.6667)',\n borderRadius: '100%',\n backgroundColor: 'onSurface.os500',\n transition: 'transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out',\n '&.active': {\n transform: 'scale(1)',\n backgroundColor: 'text.primary',\n margin: '0 2px',\n },\n },\n dotSx,\n )}\n {...restDot}\n />\n );\n })}\n </Box>\n </Box>\n );\n },\n);\n\n/*\n Fraction variant (text 1/3)\n /\nexport const FractionVariant: React.FC<CarouselPaginationFractionProps> = forwardRef(\n ({ carousel, buttonProps, position, sx, ...rest }, ref) => {\n const { sx: buttonSx, ...restButton } = buttonProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // space is needed for focus overflow\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n <Button\n variant=\"text\"\n aria-controls=\"carousel\"\n sx={sxOverride(\n {\n px: 2,\n py: 0.25,\n borderRadius: '4px',\n // custom typography according to Figma (Pagination/Compact)\n fontSize: '18px',\n lineHeight: '28px',\n letterSpacing: '0.02em',\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent.backdrop',\n },\n {\n backgroundColor: 'onSurface.os100',\n },\n ),\n },\n buttonSx,\n )}\n onClick={() =>\n // at the end, slide to beginning\n carousel?.isEnd && !carousel.params?.loop ? carousel?.slideTo(0) : carousel?.slideNext()\n }\n {...restButton}\n >\n <Box component=\"span\">\n <Box component=\"span\" sx={{ fontWeight: '700', color: 'onSurface.os900' }}>\n {`${(carousel?.realIndex \|\| 0) + 1}`}\n </Box>\n <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '400', mx: 0.5 }}>\n {' / '}\n </Box>\n <Box component=\"span\" sx={{ color: 'onSurface.os700', fontWeight: '300' }}>\n {`${carousel?.slides.length \|\| 0}`}\n </Box>\n </Box>\n </Button>\n </Box>\n );\n },\n);\n\n/\n Lines variant (- - -)\n /\nexport const LinesVariant: React.FC<CarouselPaginationLinesProps> = forwardRef(\n ({ carousel, sx, linesProps, lineProgress, lineProgressProps, position, ...rest }, ref) => {\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: { xs: 'stretch', md: 'center' },\n flexGrow: { xs: '1', md: '0' },\n gap: 1,\n // space is needed for focus overflow\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {carousel?.slides?.map((_, idx) => {\n const active =\n (!carousel?.params?.loop && carousel?.isEnd && idx === (carousel?.slides.length \|\| 0) - 1) \|\|\n ((!carousel?.isEnd \|\| carousel.params?.loop) && idx === carousel?.realIndex);\n const seen = idx <= (carousel?.realIndex \|\| 0);\n const { sx: lineSx, ...lineRest } =\n (typeof linesProps === 'function' ? linesProps(idx, active) : linesProps) ?? {};\n const { sx: lineProgressSx, ...lineProgressRest } =\n (typeof lineProgressProps === 'function' ? lineProgressProps(idx, active) : lineProgressProps) ?? {};\n\n return (\n <Button\n key={idx}\n color=\"inherit\"\n className={active ? 'active' : undefined}\n sx={sxOverride(\n {\n p: 0,\n minHeight: '0',\n height: active \|\| seen ? '8px' : '4px',\n borderRadius: active \|\| seen ? '4px' : '2px',\n width: { xs: 'auto', md: '56px' },\n flexGrow: { xs: '1', md: '0' },\n justifyContent: 'flex-start',\n ...getInteractiveStyle(\n {\n backgroundColor: 'surface.primary',\n '& .progress-line': {\n backgroundColor: 'brand.secondary',\n },\n },\n {\n backgroundColor: 'surface.secondary',\n '& .progress-line': {\n backgroundColor: 'brandHover.secondary',\n },\n },\n ),\n },\n lineSx,\n )}\n aria-controls=\"carousel\"\n aria-label={`Go to slide ${idx + 1}`}\n {...(active && { 'aria-current': true })}\n onClick={() => carousel?.[carousel.params?.loop ? 'slideToLoop' : 'slideTo'](idx)}\n {...lineRest}\n >\n <Box\n sx={{\n // invisible hitbox expanding clickable area\n position: 'absolute',\n top: '50%',\n left: '0',\n right: '0',\n height: '24px', // Minimum a11y click area\n transform: 'translateY(-50%)',\n pointerEvents: 'auto',\n }}\n />\n <Box sx={{ borderRadius: '4px', height: '100%', width: '100%', overflow: 'hidden' }}>\n <Box\n className=\"progress-line\"\n {...(active && {\n role: 'progressbar',\n })}\n {...(active &&\n lineProgress !== undefined && {\n 'aria-valuenow': lineProgress,\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n })}\n sx={sxOverride(\n {\n opacity: lineProgress !== undefined \|\| seen ? '1' : '0',\n width: '100%',\n backgroundColor: 'brand.secondary',\n height: '100%',\n transformOrigin: 'left',\n transform: `scaleX(${lineProgress !== undefined && active ? lineProgress / 100 : seen ? 1 : 0})`,\n transition: `${lineProgress !== undefined ? 'transform 300ms ease-in-out, ' : ''}opacity 300ms ease-out, background-color 300ms ease-out`,\n },\n lineProgressSx,\n )}\n {...lineProgressRest}\n />\n </Box>\n </Button>\n );\n })}\n </Box>\n );\n },\n);\n\n/\n Slider variant (___)\n /\nexport const SliderVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n ({ carousel, sliderProps, sx, progressProps: __, position, ...rest }, ref) => {\n const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n // slider current value that might not match carousel progress\n const [value, setValue] = useState<number>(Math.round((carousel?.progress \|\| 0) 100));\n // watch user manipulating slider\n const dragging = useRef<boolean>(false);\n const [, setRerender] = useState({});\n // monitor carousel progress to update slider value\n useEffect(() => {\n if (!dragging.current) {\n setValue(Math.round((carousel?.progress \|\| 0) * 100));\n }\n }, [carousel?.progress]);\n // extra monitor of states\n useEffect(() => {\n if (carousel) {\n const handleMove = () => {\n if (!dragging.current) {\n setRerender({});\n }\n };\n\n // monitor of movement to immediately move thumb\n carousel.on('sliderMove', handleMove);\n\n return () => {\n carousel.off('sliderMove', handleMove);\n };\n }\n }, [carousel]);\n\n return (\n <Box sx={sxOverride({ my: 2 }, sx)} ref={ref} {...rest}>\n <Slider\n value={value}\n min={0}\n max={100}\n onChange={(_, newValue: number) => {\n // prevent value updates from carousel progress\n dragging.current = true;\n // smoothly move carousel\n carousel?.setProgress(newValue / 100, 150);\n // update slider value\n setValue(newValue);\n }}\n onChangeCommitted={() => {\n // make sure to slide to correct position after user stop touching slider\n carousel?.slideToClosest(300);\n // enable changing value from carousel progress\n dragging.current = false;\n }}\n sx={sxOverride(\n {\n display: 'block',\n // from 6px to 4px\n height: '4px',\n // keep 32px height\n py: '14px',\n // restyle to less prominent variant\n '.MuiSlider-rail': {\n color: 'surface.primary',\n },\n '.MuiSlider-track': {\n color: 'onSurface.os500',\n // match transition speed of carousel\n transitionDuration: `${carousel?.params?.speed ?? 300}ms`,\n },\n // hide control thumb\n '.MuiSlider-thumb': {\n display: 'none',\n },\n },\n sliderSx,\n )}\n aria-controls=\"carousel\"\n {...restSlider}\n />\n </Box>\n );\n },\n);\n\n/*\n Scrollbar variant (_--)\n /\nexport const ScrollbarVariant: React.FC<CarouselPaginationSliderProps> = forwardRef(\n ({ carousel, sliderProps, position, ...rest }, ref) => {\n const { sx: sliderSx, ...restSlider } = sliderProps ?? {};\n // watch states\n const [carouselDragging, setCarouselDragging] = useState<boolean>(false);\n const [, setRerender] = useState({});\n // extra monitor of states\n useEffect(() => {\n if (carousel) {\n const handleDragStart = () => setCarouselDragging(true);\n const handleDragEnd = () => setCarouselDragging(false);\n const handleResize = () => setRerender({});\n\n // monitor of dragging to remove thumb transition for immediate feedback\n carousel.on('touchStart', handleDragStart);\n carousel.on('touchEnd', handleDragEnd);\n // monitor resize to change size of the thumb\n carousel.on('resize', handleResize);\n\n return () => {\n carousel.off('touchStart', handleDragStart);\n carousel.off('touchEnd', handleDragEnd);\n carousel.off('resize', handleResize);\n };\n }\n }, [carousel]);\n // calculate size of the thumb based on the visible content and full content\n const thumbSize = useMemo<number>(() => {\n if (carousel?.wrapperEl?.scrollWidth && carousel?.width) {\n const size = Math.ceil(carousel?.width * 2 / carousel?.wrapperEl?.scrollWidth);\n return Math.max(size, 40);\n }\n return 40;\n }, [carousel?.wrapperEl?.scrollWidth, carousel?.width]);\n\n return (\n <SliderVariant\n ref={ref}\n carousel={carousel}\n component={SliderContainer}\n thumbSize={thumbSize}\n sliderProps={{\n // prevent selection via keyboard, Carousel can be already controlled with Keyboard, and we are not showing focus ring\n tabIndex: -1,\n // remove valueLabel tooltip above thumb\n valueLabelDisplay: 'off',\n sx: sxOverride(\n {\n // restyle to match scrollbar\n '.MuiSlider-rail, .MuiSlider-track': {\n color: 'surface.primary',\n },\n '.MuiSlider-thumb': {\n display: 'flex',\n width: `${thumbSize}px`,\n maxWidth: 'none',\n height: '4px',\n border: 'none',\n backgroundColor: 'onSurface.os500',\n // hitbox target\n '&:after': {\n width: `${thumbSize}px`,\n },\n // match transition speed of carousel\n ...(!carouselDragging && {\n transition: `left ${carousel?.params?.speed ?? 300}ms ease-out`,\n }),\n // remove focus style\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n '&:before': {\n content: 'none',\n },\n },\n },\n },\n sliderSx,\n ),\n ...restSlider,\n }}\n {...rest}\n />\n );\n },\n);\n"],"names":["CarouselPagination","forwardRef","carousel","carouselProp","position","variant","sx","rest","ref","carouselHook","useCarousel","VariantComponent","useMemo","ScrollbarVariant","SliderVariant","FractionVariant","LinesVariant","DotsVariant","_jsx","sxOverride","zIndex","bottom","left","right","dotsWrapperProps","dotProps","dotsWrapperSx","restDotsWrapper","Box","p","display","alignItems","justifyContent","children","borderRadius","py","px","gap","width","slides","length","backgroundColor","theme","palette","mode","map","_","idx","active","params","loop","isEnd","realIndex","dotSx","restDot","className","undefined","height","transform","transition","margin","buttonProps","buttonSx","restButton","Button","fontSize","lineHeight","letterSpacing","getInteractiveStyle","onClick","slideTo","slideNext","_jsxs","component","fontWeight","color","mx","linesProps","lineProgress","lineProgressProps","xs","md","flexGrow","seen","lineSx","lineRest","lineProgressSx","lineProgressRest","minHeight","top","pointerEvents","overflow","role","opacity","transformOrigin","sliderProps","progressProps","__","sliderSx","restSlider","value","setValue","useState","Math","round","progress","dragging","useRef","setRerender","useEffect","current","handleMove","on","off","my","Slider","min","max","onChange","newValue","setProgress","onChangeCommitted","slideToClosest","transitionDuration","speed","carouselDragging","setCarouselDragging","handleDragStart","handleDragEnd","handleResize","thumbSize","wrapperEl","scrollWidth","size","ceil","SliderContainer","tabIndex","valueLabelDisplay","maxWidth","border","boxShadow","content"],"mappings":"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"}

package/cjs/components/copyButton/CopyButton.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import React, { type ComponentType } from 'react';
+import { ButtonProps, SvgIconProps } from '@mui/material';
+import { UseCopyActionProps } from './useCopyAction';
+export interface CopyButtonProps extends Omit<ButtonProps, 'onError' | 'value'>, UseCopyActionProps {
+    /**
+     * Renders as Button, set to false to render as IconButton
+     * @default true
+     */
+    button?: boolean;
+    /**
+     * Props applied while success state, e.g. children or aria-label
+     * @default { children: 'Copied', 'aria-label': 'Copied' }
+     */
+    copiedProps?: Partial<Omit<CopyButtonProps, 'copiedProps' | 'errorProps'>>;
+    /**
+     * Props applied while error state, e.g. children or aria-label
+     */
+    errorProps?: Partial<Omit<CopyButtonProps, 'copiedProps' | 'errorProps'>>;
+    /**
+     * Custom component for the copy icon, shown in idle state
+     */
+    CopyIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the success icon
+     */
+    CopiedIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the error icon
+     */
+    ErrorIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the loading indicator
+     */
+    LoadingIconComponent?: ComponentType<SvgIconProps>;
+}
+/**
+ * Button that copies value to clipboard using copyToClipboard by default
+ */
+export declare const CopyButton: React.FC<CopyButtonProps>;

package/cjs/components/copyButton/CopyButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),o=require("react"),r=require("@mui/material"),n=require("../icon/stroke/CheckIcon.js"),s=require("../icon/stroke/CloseIcon.js"),i=require("../icon/stroke/CopyIcon.js"),c=require("../progress/Spinner.js"),a=require("./useCopyAction.js");const t=o.forwardRef(({value:t,copyFn:l,resetDelay:u,onCopied:p,onError:d,button:C=!0,copiedProps:m,errorProps:y,children:I="Copy",CopyIconComponent:j,CopiedIconComponent:q,ErrorIconComponent:b,LoadingIconComponent:f,disabled:h,onClick:k,size:x="small","aria-label":g,...v},z)=>{const{children:B="Copied",...E}=m??{},{children:M=I,...w}=y??{},{state:A,copy:D}=a.useCopyAction({value:t,copyFn:l,resetDelay:u,onCopied:p,onError:d}),F=j??i.CopyIcon,P=q??n.CheckIcon,S=b??s.CloseIcon,L=o.useMemo(()=>f??(()=>e.jsx(c.Spinner,{size:"medium"===x?"medium":"small"})),[f,x]),R=o.useMemo(()=>{switch(A){case"loading":return L;case"success":return P;case"error":return S;default:return F}},[A,L,P,S,F]),G=o.useMemo(()=>C?r.Button:r.IconButton,[C]);return e.jsxs(G,{ref:z,"data-state":A,disabled:h\|\|"loading"===A,size:x,onClick:e=>{k?.(e),D()},...C&&{color:"surface",startIcon:e.jsx(R,{}),"aria-label":g},...!C&&{variant:"filled",color:"surface","aria-label":g??"Copy"},...v,..."success"===A&&{"aria-label":"Copied",...E},..."error"===A&&w,children:[C&&{idle:I,loading:I,success:B,error:M}[A],!C&&e.jsx(R,{})]})});exports.CopyButton=t;
2	+ //# sourceMappingURL=CopyButton.js.map

package/cjs/components/copyButton/CopyButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CopyButton.js","sources":["../../../../../src/components/copyButton/CopyButton.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, type ComponentType } from 'react';\nimport { Button, ButtonBaseProps, ButtonProps, IconButton, SvgIconProps } from '@mui/material';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { CopyIcon } from '@/src/components/icon/stroke/CopyIcon';\nimport { Spinner } from '@/src/components/progress/Spinner';\nimport { UseCopyActionProps, useCopyAction } from './useCopyAction';\n\nexport interface CopyButtonProps extends Omit<ButtonProps, 'onError' | 'value'>, UseCopyActionProps {\n /**\n * Renders as Button, set to false to render as IconButton\n * @default true\n */\n button?: boolean;\n /**\n * Props applied while success state, e.g. children or aria-label\n * @default { children: 'Copied', 'aria-label': 'Copied' }\n */\n copiedProps?: Partial<Omit<CopyButtonProps, 'copiedProps' | 'errorProps'>>;\n /**\n * Props applied while error state, e.g. children or aria-label\n */\n errorProps?: Partial<Omit<CopyButtonProps, 'copiedProps' | 'errorProps'>>;\n /**\n * Custom component for the copy icon, shown in idle state\n */\n CopyIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the success icon\n */\n CopiedIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the error icon\n */\n ErrorIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Custom component for the loading indicator\n */\n LoadingIconComponent?: ComponentType<SvgIconProps>;\n}\n\n/**\n * Button that copies value to clipboard using copyToClipboard by default\n */\nexport const CopyButton: React.FC<CopyButtonProps> = forwardRef(\n (\n {\n value,\n copyFn,\n resetDelay,\n onCopied,\n onError,\n button = true,\n copiedProps,\n errorProps,\n children = 'Copy',\n CopyIconComponent,\n CopiedIconComponent,\n ErrorIconComponent,\n LoadingIconComponent,\n disabled,\n onClick,\n size = 'small',\n 'aria-label': ariaLabel,\n ...rest\n },\n ref,\n ) => {\n const { children: copiedChildren = 'Copied', ...copiedRest } = copiedProps ?? {};\n const { children: errorChildren = children, ...errorRest } = errorProps ?? {};\n const { state, copy } = useCopyAction({ value, copyFn, resetDelay, onCopied, onError });\n\n const IdleIcon = CopyIconComponent ?? CopyIcon;\n const SuccessIcon = CopiedIconComponent ?? CheckIcon;\n const ErrorIcon = ErrorIconComponent ?? CloseIcon;\n const LoadingIcon = useMemo<ComponentType<SvgIconProps>>(\n () => LoadingIconComponent ?? (() => <Spinner size={size === 'medium' ? 'medium' : 'small'} />),\n [LoadingIconComponent, size],\n );\n\n const Icon = useMemo(() => {\n switch (state) {\n case 'loading':\n return LoadingIcon;\n case 'success':\n return SuccessIcon;\n case 'error':\n return ErrorIcon;\n case 'idle':\n default:\n return IdleIcon;\n }\n }, [state, LoadingIcon, SuccessIcon, ErrorIcon, IdleIcon]);\n\n const Component = useMemo<ComponentType<ButtonBaseProps>>(() => (button ? Button : IconButton), [button]);\n\n return (\n <Component\n ref={ref}\n data-state={state}\n disabled={disabled || state === 'loading'}\n size={size}\n onClick={(event) => {\n onClick?.(event);\n void copy();\n }}\n {...(button && {\n color: 'surface',\n startIcon: <Icon />,\n 'aria-label': ariaLabel,\n })}\n {...(!button && {\n variant: 'filled',\n color: 'surface',\n 'aria-label': ariaLabel ?? 'Copy',\n })}\n {...rest}\n {...(state === 'success' && { 'aria-label': 'Copied', ...copiedRest })}\n {...(state === 'error' && errorRest)}\n >\n {button &&\n {\n idle: children,\n loading: children,\n success: copiedChildren,\n error: errorChildren,\n }[state]}\n {!button && <Icon />}\n </Component>\n );\n },\n);\n"],"names":["CopyButton","forwardRef","value","copyFn","resetDelay","onCopied","onError","button","copiedProps","errorProps","children","CopyIconComponent","CopiedIconComponent","ErrorIconComponent","LoadingIconComponent","disabled","onClick","size","ariaLabel","rest","ref","copiedChildren","copiedRest","errorChildren","errorRest","state","copy","useCopyAction","IdleIcon","CopyIcon","SuccessIcon","CheckIcon","ErrorIcon","CloseIcon","LoadingIcon","useMemo","_jsx","Spinner","Icon","Component","Button","IconButton","_jsxs","event","color","startIcon","variant","idle","loading","success","error"],"mappings":"4RA4CO,MAAMA,EAAwCC,EAAAA,WACnD,EAEIC,QACAC,SACAC,aACAC,WACAC,UACAC,UAAS,EACTC,cACAC,aACAC,WAAW,OACXC,oBACAC,sBACAC,qBACAC,uBACAC,WACAC,UACAC,OAAO,QACP,aAAcC,KACXC,GAELC,KAEA,MAAQV,SAAUW,EAAiB,YAAaC,GAAed,GAAe,CAAA,GACtEE,SAAUa,EAAgBb,KAAac,GAAcf,GAAc,CAAA,GACrEgB,MAAEA,EAAKC,KAAEA,GAASC,gBAAc,CAAEzB,QAAOC,SAAQC,aAAYC,WAAUC,YAEvEsB,EAAWjB,GAAqBkB,EAAAA,SAChCC,EAAclB,GAAuBmB,EAAAA,UACrCC,EAAYnB,GAAsBoB,EAAAA,UAClCC,EAAcC,EAAAA,QAClB,IAAMrB,GAAoB,KAAWsB,EAAAA,IAACC,EAAAA,QAAO,CAACpB,KAAe,WAATA,EAAoB,SAAW,WACnF,CAACH,EAAsBG,IAGnBqB,EAAOH,EAAAA,QAAQ,KACnB,OAAQV,GACN,IAAK,UACH,OAAOS,EACT,IAAK,UACH,OAAOJ,EACT,IAAK,QACH,OAAOE,EAET,QACE,OAAOJ,IAEV,CAACH,EAAOS,EAAaJ,EAAaE,EAAWJ,IAE1CW,EAAYJ,EAAAA,QAAwC,IAAO5B,EAASiC,EAAAA,OAASC,aAAa,CAAClC,IAEjG,OACEmC,EAAAA,KAACH,EAAS,CACRnB,IAAKA,EAAG,aACIK,EACZV,SAAUA,GAAsB,YAAVU,EACtBR,KAAMA,EACND,QAAU2B,IACR3B,IAAU2B,GACLjB,QAEFnB,GAAU,CACbqC,MAAO,UACPC,UAAWT,EAAAA,IAACE,EAAI,IAChB,aAAcpB,OAEVX,GAAU,CACduC,QAAS,SACTF,MAAO,UACP,aAAc1B,GAAa,WAEzBC,KACW,YAAVM,GAAuB,CAAE,aAAc,YAAaH,MAC1C,UAAVG,GAAqBD,EAAUd,SAAA,CAEnCH,GACC,CACEwC,KAAMrC,EACNsC,QAAStC,EACTuC,QAAS5B,EACT6B,MAAO3B,GACPE,IACFlB,GAAU6B,EAAAA,IAACE,EAAI,CAAA"}

package/cjs/components/copyButton/CopyIconButton.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CopyButtonProps } from './CopyButton';
+export interface CopyIconButtonProps extends Omit<CopyButtonProps, 'button'> {
+}
+/**
+ * CopyIconButton is a proxy component to <CopyButton button={false} />
+ */
+export declare const CopyIconButton: React.FC<CopyIconButtonProps>;

package/cjs/components/copyButton/CopyIconButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var r=require("react/jsx-runtime"),t=require("react"),e=require("./CopyButton.js");const o=t.forwardRef((t,o)=>r.jsx(e.CopyButton,{ref:o,button:!1,...t}));exports.CopyIconButton=o;
2	+ //# sourceMappingURL=CopyIconButton.js.map

package/cjs/components/copyButton/CopyIconButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CopyIconButton.js","sources":["../../../../../src/components/copyButton/CopyIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { CopyButton, CopyButtonProps } from './CopyButton';\n\nexport interface CopyIconButtonProps extends Omit<CopyButtonProps, 'button'> {}\n\n/**\n * CopyIconButton is a proxy component to <CopyButton button={false} />\n */\nexport const CopyIconButton: React.FC<CopyIconButtonProps> = forwardRef((props, ref) => (\n <CopyButton ref={ref} button={false} {...props} />\n));\n"],"names":["CopyIconButton","forwardRef","props","ref","_jsx","CopyButton","button"],"mappings":"gGAQO,MAAMA,EAAgDC,EAAAA,WAAW,CAACC,EAAOC,IAC9EC,EAAAA,IAACC,EAAAA,WAAU,CAACF,IAAKA,EAAKG,QAAQ,KAAWJ"}

package/cjs/components/copyButton/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './CopyButton';
+export * from './CopyIconButton';
+export * from './useCopyAction';

package/cjs/components/copyButton/useCopyAction.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+export type CopyState = 'idle' | 'loading' | 'success' | 'error';
+export interface UseCopyActionProps {
+    /**
+     * Text value to copy
+     */
+    value: string;
+    /**
+     * Custom copy implementation, defaults to copyToClipboard from the library
+     */
+    copyFn?: (text: string) => unknown;
+    /**
+     * How long the success / error state stays visible before returning to idle
+     * @default 2000
+     */
+    resetDelay?: number;
+    /**
+     * Called after successful copy
+     */
+    onCopied?: () => void;
+    /**
+     * Called when copy fails
+     */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Shared copy state for CopyButton and CopyIconButton
+ */
+export declare const useCopyAction: ({ value, copyFn, resetDelay, onCopied, onError, }: UseCopyActionProps) => {
+    state: CopyState;
+    copy: () => Promise<void>;
+};

package/cjs/components/copyButton/useCopyAction.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react"),r=require("../../utils/copyToClipboard/copyToClipboard.js");exports.useCopyAction=({value:o,copyFn:t=r.copyToClipboard,resetDelay:s=2e3,onCopied:c,onError:u})=>{const[i,a]=e.useState("idle"),n=e.useRef(!1);e.useEffect(()=>{if("success"!==i&&"error"!==i)return;const e=setTimeout(()=>{a("idle")},s);return()=>clearTimeout(e)},[i,s]);return{state:i,copy:async()=>{if(!n.current){n.current=!0,a("loading");try{await Promise.resolve(t(o)),a("success"),c?.()}catch(e){a("error"),u?.(e)}n.current=!1}}}};
2	+ //# sourceMappingURL=useCopyAction.js.map

package/cjs/components/copyButton/useCopyAction.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useCopyAction.js","sources":["../../../../../src/components/copyButton/useCopyAction.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { copyToClipboard } from '@/src/utils/copyToClipboard/copyToClipboard';\n\nexport type CopyState = 'idle' | 'loading' | 'success' | 'error';\n\nexport interface UseCopyActionProps {\n /**\n * Text value to copy\n */\n value: string;\n /**\n * Custom copy implementation, defaults to copyToClipboard from the library\n */\n copyFn?: (text: string) => unknown;\n /**\n * How long the success / error state stays visible before returning to idle\n * @default 2000\n */\n resetDelay?: number;\n /**\n * Called after successful copy\n */\n onCopied?: () => void;\n /**\n * Called when copy fails\n */\n onError?: (error: unknown) => void;\n}\n\n/**\n * Shared copy state for CopyButton and CopyIconButton\n */\nexport const useCopyAction = ({\n value,\n copyFn = copyToClipboard,\n resetDelay = 2000,\n onCopied,\n onError,\n}: UseCopyActionProps): { state: CopyState; copy: () => Promise<void> } => {\n const [state, setState] = useState<CopyState>('idle');\n // prevent double call\n const isCopyingRef = useRef(false);\n\n // reset success/error back to idle after resetDelay\n useEffect(() => {\n if (state !== 'success' && state !== 'error') {\n return;\n }\n\n const timeout = setTimeout(() => {\n setState('idle');\n }, resetDelay);\n\n return () => clearTimeout(timeout);\n }, [state, resetDelay]);\n\n const copy = async () => {\n // synchronous lock\n if (isCopyingRef.current) {\n return;\n }\n\n isCopyingRef.current = true;\n setState('loading');\n\n try {\n await Promise.resolve(copyFn(value));\n setState('success');\n onCopied?.();\n } catch (error) {\n setState('error');\n onError?.(error);\n }\n\n isCopyingRef.current = false;\n };\n\n return { state, copy };\n};\n"],"names":["value","copyFn","copyToClipboard","resetDelay","onCopied","onError","state","setState","useState","isCopyingRef","useRef","useEffect","timeout","setTimeout","clearTimeout","copy","async","current","Promise","resolve","error"],"mappings":"sHAgC6B,EAC3BA,QACAC,SAASC,EAAAA,gBACTC,aAAa,IACbC,WACAC,cAEA,MAAOC,EAAOC,GAAYC,EAAAA,SAAoB,QAExCC,EAAeC,EAAAA,QAAO,GAG5BC,EAAAA,UAAU,KACR,GAAc,YAAVL,GAAiC,UAAVA,EACzB,OAGF,MAAMM,EAAUC,WAAW,KACzBN,EAAS,SACRJ,GAEH,MAAO,IAAMW,aAAaF,IACzB,CAACN,EAAOH,IAuBX,MAAO,CAAEG,QAAOS,KArBHC,UAEX,IAAIP,EAAaQ,QAAjB,CAIAR,EAAaQ,SAAU,EACvBV,EAAS,WAET,UACQW,QAAQC,QAAQlB,EAAOD,IAC7BO,EAAS,WACTH,KACF,CAAE,MAAOgB,GACPb,EAAS,SACTF,IAAUe,EACZ,CAEAX,EAAaQ,SAAU,CAdvB"}

package/cjs/components/footer/FooterMenuCollapse.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js");const a=r.forwardRef(({in:r,timeout:a,sx:s,children:d,ownerState:n,...o},u)=>e.jsx(t.Box,{ref:u,"data-expanded":`${!!r}`,sx:i.sxOverride(e=>({display:"grid",gridTemplateRows:"0fr",transition:e.transitions.create("grid-template-rows",{duration:"number"==typeof a?a:e.transitions.duration.standard}),'&[data-expanded="true"]':{gridTemplateRows:"1fr"},"& > *":{minHeight:"0",overflow:"hidden"},[e.breakpoints.up("lg")]:{gridTemplateRows:"1fr"}}),s),...o,children:d}));exports.FooterMenuCollapse=a;
+"use strict";var i=require("react/jsx-runtime"),e=require("react"),r=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js");const s=e.forwardRef(({in:e,timeout:s,sx:a,children:d,ownerState:n,...o},l)=>i.jsx(r.Box,{ref:l,"data-expanded":`${!!e}`,sx:t.sxOverride(i=>({display:"grid",gridTemplateRows:"0fr",visibility:"hidden",transition:i.transitions.create(["grid-template-rows","visibility"],{duration:"number"==typeof s?s:i.transitions.duration.standard}),"& > *":{minHeight:"0",overflow:"hidden"},'&[data-expanded="true"]':{gridTemplateRows:"1fr",visibility:"visible"},[i.breakpoints.up("lg")]:{gridTemplateRows:"1fr",visibility:"visible"}}),a),...o,children:d}));exports.FooterMenuCollapse=s;
 //# sourceMappingURL=FooterMenuCollapse.js.map

package/cjs/components/footer/FooterMenuCollapse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterMenuCollapse.js","sources":["../../../../../src/components/footer/FooterMenuCollapse.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuCollapseProps extends BoxProps<ElementType> {\n /*\n Expanded state, provided by the Accordion transition slot\n /\n in?: boolean;\n /\n Transition duration in ms, 0 disables the animation (provided by the transition slot)\n /\n timeout?: number;\n /\n Ignored owner state forwarded by the transition slot\n /\n ownerState?: unknown;\n /\n Collapsible content\n /\n children?: ReactNode;\n}\n\n/\n CSS-only collapse used as the Accordion transition slot, so auto footer menus render\n * expanded from desktop up without a JS media query (renders correctly during pre-render)\n /\nexport const FooterMenuCollapse: FC<FooterMenuCollapseProps> = forwardRef(\n ({ in: expanded, timeout, sx, children, ownerState: _ownerState, ...rest }, ref) => (\n <Box\n ref={ref}\n data-expanded={`${!!expanded}`}\n sx={sxOverride(\n (theme) => ({\n display: 'grid',\n // collapsed on mobile, the row track animates open/closed\n gridTemplateRows: '0fr',\n transition: theme.transitions.create('grid-template-rows', {\n duration: typeof timeout === 'number' ? timeout : theme.transitions.duration.standard,\n }),\n ~~'&[data-expanded=\"true\"]': {\n gridTemplateRows: '1fr',\n },\n~~ // clip the content while the track is collapsed\n '& > ': {\n minHeight: '0',\n overflow: 'hidden',\n },\n // always open from desktop up, replaces the removed media query\n [theme.breakpoints.up('lg')]: {\n gridTemplateRows: '1fr',\n },\n }),\n sx,\n )}\n {...rest}\n >\n {children}\n </Box>\n ),\n);\n"],"names":["FooterMenuCollapse","forwardRef","in","expanded","timeout","sx","children","ownerState","_ownerState","rest","ref","_jsx","Box","sxOverride","theme","display","gridTemplateRows","transition","transitions","create","duration","standard","minHeight","overflow","breakpoints","up"],"mappings":"gJA2BO,MAAMA,EAAkDC,EAAAA,WAC7D,EAAGC,GAAIC,EAAUC,UAASC,KAAIC,WAAUC,WAAYC,KAAgBC,GAAQC,IAC1EC,EAAAA,IAACC,EAAAA,KACCF,IAAKA,EAAG,gBACO,KAAKP,IACpBE,GAAIQ,EAAAA,WACDC,IAAK,CACJC,QAAS,OAETC,iBAAkB,~~MAClBC~~,~~WAAYH~~,~~EAAMI~~,YAAYC,OAAO,qBAAsB,~~CACzDC~~,SAA6B,~~iBAAZhB~~,EAAuBA,EAAUU,~~EAAMI~~,YAAYE,SAASC,~~WAE~~/E,~~0BAA2B,CACzBL,iBAAkB,OAGpB,~~QAAS,~~CACPM~~,UAAW,IACXC,SAAU,UAGZ,~~CAACT~~,~~EAAMU~~,YAAYC,GAAG,OAAQ,~~CAC5BT~~,iBAAkB,~~SAGtBX~~,MAEEI,WAEHH"}
1	+ {"version":3,"file":"FooterMenuCollapse.js","sources":["../../../../../src/components/footer/FooterMenuCollapse.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuCollapseProps extends BoxProps<ElementType> {\n /*\n Expanded state, provided by the Accordion transition slot\n /\n in?: boolean;\n /\n Transition duration in ms, 0 disables the animation (provided by the transition slot)\n /\n timeout?: number;\n /\n Ignored owner state forwarded by the transition slot\n /\n ownerState?: unknown;\n /\n Collapsible content\n /\n children?: ReactNode;\n}\n\n/\n CSS-only collapse used as the Accordion transition slot, so auto footer menus render\n * expanded from desktop up without a JS media query (renders correctly during pre-render)\n /\nexport const FooterMenuCollapse: FC<FooterMenuCollapseProps> = forwardRef(\n ({ in: expanded, timeout, sx, children, ownerState: _ownerState, ...rest }, ref) => (\n <Box\n ref={ref}\n data-expanded={`${!!expanded}`}\n sx={sxOverride(\n (theme) => ({\n display: 'grid',\n // collapsed on mobile, the row track animates open/closed\n gridTemplateRows: '0fr',\n // hidden from keyboard and assistive technology while collapsed, like the default Collapse\n visibility: 'hidden',\n // visibility switches at the end of collapsing and at the start of expanding\n transition: theme.transitions.create(['grid-template-rows', 'visibility'], {\n duration: typeof timeout === 'number' ? timeout : theme.transitions.duration.standard,\n }),\n // clip the content while the track is collapsed\n '& > ': {\n minHeight: '0',\n overflow: 'hidden',\n },\n // expanded\n '&[data-expanded=\"true\"]': {\n gridTemplateRows: '1fr',\n visibility: 'visible',\n },\n // always open from desktop up, replaces the removed media query\n [theme.breakpoints.up('lg')]: {\n gridTemplateRows: '1fr',\n visibility: 'visible',\n },\n }),\n sx,\n )}\n {...rest}\n >\n {children}\n </Box>\n ),\n);\n"],"names":["FooterMenuCollapse","forwardRef","in","expanded","timeout","sx","children","ownerState","_ownerState","rest","ref","_jsx","Box","sxOverride","theme","display","gridTemplateRows","visibility","transition","transitions","create","duration","standard","minHeight","overflow","breakpoints","up"],"mappings":"gJA2BO,MAAMA,EAAkDC,EAAAA,WAC7D,EAAGC,GAAIC,EAAUC,UAASC,KAAIC,WAAUC,WAAYC,KAAgBC,GAAQC,IAC1EC,EAAAA,IAACC,EAAAA,KACCF,IAAKA,EAAG,gBACO,KAAKP,IACpBE,GAAIQ,EAAAA,WACDC,IAAK,CACJC,QAAS,OAETC,iBAAkB,MAElBC,WAAY,SAEZC,WAAYJ,EAAMK,YAAYC,OAAO,CAAC,qBAAsB,cAAe,CACzEC,SAA6B,iBAAZjB,EAAuBA,EAAUU,EAAMK,YAAYE,SAASC,WAG/E,QAAS,CACPC,UAAW,IACXC,SAAU,UAGZ,0BAA2B,CACzBR,iBAAkB,MAClBC,WAAY,WAGd,CAACH,EAAMW,YAAYC,GAAG,OAAQ,CAC5BV,iBAAkB,MAClBC,WAAY,aAGhBZ,MAEEI,WAEHH"}

package/cjs/components/header/Header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("../../utils/sxOverride/sxOverride.js"),o=require("@mui/material"),t=require("../icon/stroke/MenuIcon.js"),i=require("../icon/stroke/CloseIcon.js"),n=require("../focusring/focusring.js"),a=require("./HeaderButton.js"),l=require("./HeaderContext.js");function d(e,r,s,o,t){return void 0===r?{[e.breakpoints.down(s)]:t,[e.breakpoints.up(s)]:o}:r?t:o}function x(e){return r.Children.toArray(e).some(e=>!r.isValidElement(e)||e.type!==r.Fragment||x(e.props.children))}const p=r.forwardRef(({children:p,logo:c,buttons:u,visibleButtons:b,mobile:h,open:m,setOpen:f,inContainer:j=!1,breakpoint:g="lg",toolbarProps:v,logoProps:y,contentProps:C,mobileContentProps:k,buttonsProps:B,collapsibleButtonsProps:H,menuButtonProps:I,menuIcon:P,closeMenuIcon:O,drawerProps:q,...w},S)=>{const M=o.useTheme(),{sx:F,...T}=y??{},{sx:A,...D}=C??{},{sx:R,...z}=k??{},{sx:E,...G}=B??{},{sx:V,...L}=H??{},{sx:W,...$}=I??{},{sx:J,slotProps:K,...N}=q??{},{paper:Q,backdrop:U,...X}=K??{},{sx:Y,...Z}=Q??{},{sx:_,...ee}=U??{},[re,se]=r.useState(!1),oe=m??re,te=f??se,ie=x(p),ne=x(u),ae=!0!==b&&x(b),le=!!b&&ne,de=!1!==h&&(ie||le);return e.jsxs(e.Fragment,{children:[e.jsx(o.AppBar,{ref:S,"data-testid":"Header",...w,children:e.jsx(l.HeaderContext.Provider,{value:l.headerDesktopContext,children:e.jsxs(o.Toolbar,{disableGutters:!j,...v,children:[c&&e.jsx(o.Box,{"data-testid":"Header.logo",sx:s.sxOverride({color:"dark"===M.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...n.getFocusRingStyle(M),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},F),...T,children:c}),e.jsx(o.Box,{sx:s.sxOverride({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...d(M,h,g,{display:"flex",...c&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},A),"data-testid":"Header.nav",...D,children:p}),(ae||ne||de)&&e.jsxs(o.Box,{sx:s.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...d(M,h,g,{mr:0},{mr:-1})},E),"data-testid":"Header.btns",...G,children:[!0!==b&&b,b?ne&&e.jsx(o.Box,{sx:s.sxOverride({...d(M,h,g,{display:"contents"},{display:"none"})},V),"data-testid":"Header.collapsiblebtns",...L,children:u}):u,de&&e.jsx(a.HeaderButton,{"aria-label":"Toggle menu",extend:!1,onClick:()=>te(e=>!e),sx:s.sxOverride(oe?{display:"inline-flex"}:d(M,h,g,{display:"none"},{display:"inline-flex"}),W),...$,children:oe?O||e.jsx(i.CloseIcon,{}):P||e.jsx(t.MenuIcon,{})},"menu")]})]})})}),de&&e.jsx(o.Drawer,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:oe,onClose:()=>te(!1),sx:s.sxOverride({zIndex:M.zIndex.appBar-10,top:M.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${M.mixins.toolbar.minHeight})`,position:"absolute"},J),slotProps:{backdrop:{sx:s.sxOverride({position:"absolute"},_),...ee},paper:{sx:s.sxOverride({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},Y),...Z},...X},...N,children:e.jsxs(l.HeaderContext.Provider,{value:l.headerMobileContext,children:[e.jsx(o.Box,{sx:s.sxOverride({p:2,overflow:"auto"},R),"data-testid":"Header.mobilenav",...z,children:p}),le&&e.jsx(o.Box,{sx:{p:2,pt:0},children:e.jsx(o.Box,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===M.palette.mode?"onSurface.os700":"surface.secondary"},children:u})})]})})]})});exports.Header=p,exports.variantSx=d;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("../../utils/sxOverride/sxOverride.js"),o=require("@mui/material"),t=require("../icon/stroke/MenuIcon.js"),i=require("../icon/stroke/CloseIcon.js"),n=require("../focusring/focusring.js"),a=require("./HeaderButton.js"),l=require("./HeaderContext.js");function d(e,r,s,o,t){return void 0===r?{[e.breakpoints.down(s)]:t,[e.breakpoints.up(s)]:o}:r?t:o}function x(e){return r.Children.toArray(e).some(e=>!r.isValidElement(e)||e.type!==r.Fragment||x(e.props.children))}const p=r.forwardRef(({children:p,logo:c,buttons:u,visibleButtons:b,mobile:h,open:m,setOpen:f,inContainer:j=!1,breakpoint:g="lg",toolbarProps:v,logoProps:y,contentProps:C,mobileContentProps:k,buttonsProps:B,collapsibleButtonsProps:H,menuButtonProps:I,menuIcon:P,closeMenuIcon:O,drawerProps:q,...w},S)=>{const M=o.useTheme(),{sx:F,...T}=y??{},{sx:A,...D}=C??{},{sx:R,...z}=k??{},{sx:E,...G}=B??{},{sx:V,...L}=H??{},{sx:W,onClick:$,...J}=I??{},{sx:K,slotProps:N,...Q}=q??{},{paper:U,backdrop:X,...Y}=N??{},{sx:Z,..._}=U??{},{sx:ee,...re}=X??{},[se,oe]=r.useState(!1),te=m??se,ie=f??oe,ne=x(p),ae=x(u),le=!0!==b&&x(b),de=!!b&&ae,xe=!1!==h&&(ne||de);return e.jsxs(e.Fragment,{children:[e.jsx(o.AppBar,{ref:S,"data-testid":"Header",...w,children:e.jsx(l.HeaderContext.Provider,{value:l.headerDesktopContext,children:e.jsxs(o.Toolbar,{disableGutters:!j,...v,children:[c&&e.jsx(o.Box,{"data-testid":"Header.logo",sx:s.sxOverride({color:"dark"===M.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...n.getFocusRingStyle(M),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},F),...T,children:c}),e.jsx(o.Box,{sx:s.sxOverride({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...d(M,h,g,{display:"flex",...c&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},A),"data-testid":"Header.nav",...D,children:p}),(le||ae||xe)&&e.jsxs(o.Box,{sx:s.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...d(M,h,g,{mr:0},{mr:-1})},E),"data-testid":"Header.btns",...G,children:[!0!==b&&b,b?ae&&e.jsx(o.Box,{sx:s.sxOverride({...d(M,h,g,{display:"contents"},{display:"none"})},V),"data-testid":"Header.collapsiblebtns",...L,children:u}):u,xe&&e.jsx(a.HeaderButton,{"aria-label":"Toggle menu","aria-expanded":te,extend:!1,onClick:e=>{$?.(e),ie(e=>!e)},sx:s.sxOverride(te?{display:"inline-flex"}:d(M,h,g,{display:"none"},{display:"inline-flex"}),W),...J,children:te?O||e.jsx(i.CloseIcon,{}):P||e.jsx(t.MenuIcon,{})},"menu")]})]})})}),xe&&e.jsx(o.Drawer,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:te,onClose:()=>ie(!1),sx:s.sxOverride({zIndex:M.zIndex.appBar-10,top:M.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${M.mixins.toolbar.minHeight})`,position:"absolute"},K),slotProps:{backdrop:{sx:s.sxOverride({position:"absolute"},ee),...re},paper:{sx:s.sxOverride({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},Z),..._},...Y},...Q,children:e.jsxs(l.HeaderContext.Provider,{value:l.headerMobileContext,children:[e.jsx(o.Box,{sx:s.sxOverride({p:2,overflow:"auto"},R),"data-testid":"Header.mobilenav",...z,children:p}),de&&e.jsx(o.Box,{sx:{p:2,pt:0},children:e.jsx(o.Box,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===M.palette.mode?"onSurface.os700":"surface.secondary"},children:u})})]})})]})});exports.Header=p,exports.variantSx=d;
 //# sourceMappingURL=Header.js.map

package/cjs/components/header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../../../../src/components/header/Header.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, ReactNode, ElementType, Children, Fragment, isValidElement } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n AppBar,\n AppBarProps,\n BackdropProps,\n Box,\n BoxProps,\n Breakpoint,\n Drawer,\n DrawerProps,\n PaperProps,\n Theme,\n Toolbar,\n ToolbarProps,\n useTheme,\n} from '@mui/material';\nimport { SystemStyleObject } from '@mui/system';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderContext, headerDesktopContext, headerMobileContext } from './HeaderContext';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n /*\n Logo component\n /\n logo?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n ActionButtons on the right side that stays visible even on mobile\n /\n visibleButtons?: ReactNode \| true;\n /\n Controls if mobile version of Header should be shown, this collapses children into mobile menu\n \n @default undefined, leads to usage of breakpoint media query\n /\n mobile?: boolean;\n /\n Breakpoint at which Header collapses into mobile menu, number is treated as px value\n * @default 'lg'\n /\n breakpoint?: Breakpoint \| number;\n /\n Controls open/close state of mobile menu\n /\n open?: boolean;\n /\n Function to toggle open state of menu\n /\n setOpen?: (open: boolean) => void;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to logo wrapper\n /\n logoProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper in drawer\n /\n mobileContentProps?: BoxProps<ElementType>;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n /\n Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons\n /\n collapsibleButtonsProps?: BoxProps<ElementType>;\n /\n Properties applied to hamburger menu\n /\n menuButtonProps?: HeaderButtonProps;\n /\n Icon of the hamburger menu\n /\n menuIcon?: ReactNode;\n /\n Icon of the close hamburger menu\n /\n closeMenuIcon?: ReactNode;\n /\n Props applied to mobile drawer\n /\n drawerProps?: DrawerProps;\n}\n\n/\n Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries\n /\nexport function variantSx(\n theme: Theme,\n mobile: boolean \| undefined,\n breakpoint: Breakpoint \| number,\n desktop: SystemStyleObject<Theme>,\n mobileStyles: SystemStyleObject<Theme>,\n): SystemStyleObject<Theme> {\n if (mobile === undefined) {\n return {\n [theme.breakpoints.down(breakpoint)]: mobileStyles,\n [theme.breakpoints.up(breakpoint)]: desktop,\n };\n }\n return mobile ? mobileStyles : desktop;\n}\n\n/\n Checks for renderable content, recursively unwraps fragments\n /\nfunction hasRenderableChildren(nodes: ReactNode): boolean {\n return Children.toArray(nodes).some((child) =>\n isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n ? hasRenderableChildren(child.props.children)\n : true,\n );\n}\n\n/\n Component to render Header with navigation and action buttons at the top of the page\n */\nexport const Header: FC<HeaderProps> = forwardRef(\n (\n {\n children,\n logo,\n buttons,\n visibleButtons,\n mobile,\n open: propOpen,\n setOpen: propSetOpen,\n inContainer = false,\n breakpoint = 'lg',\n toolbarProps,\n logoProps,\n contentProps,\n mobileContentProps,\n buttonsProps,\n collapsibleButtonsProps,\n menuButtonProps,\n menuIcon,\n closeMenuIcon,\n drawerProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: logoSx, ...restLogo } = logoProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: collapsibleButtonsSx, ...restCollapsibleButtons } = collapsibleButtonsProps ?? {};\n const { sx: menuButtonSx, ...restMenuButton } = menuButtonProps ?? {};\n const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n const [rawOpen, rawSetOpen] = useState(false);\n const open = propOpen ?? rawOpen;\n const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n const hasChildren = hasRenderableChildren(children);\n const hasButtons = hasRenderableChildren(buttons);\n const hasVisibleButtons = visibleButtons !== true && hasRenderableChildren(visibleButtons);\n // buttons collapse into drawer only when visibleButtons property is provided\n const collapseButtons = !!visibleButtons && hasButtons;\n const showMenu = mobile !== false && (hasChildren \|\| collapseButtons);\n\n return (\n <>\n <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n <HeaderContext.Provider value={headerDesktopContext}>\n <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n {logo && (\n <Box\n data-testid=\"Header.logo\"\n sx={sxOverride(\n {\n color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n flexShrink: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // restyle wrapper link, same style is applied in HeaderLogo\n '& .MuiLink-root': {\n display: 'block',\n position: 'relative',\n py: 1,\n // add proper focus ring\n ...getFocusRingStyle(theme),\n // remove default link box shadow\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n },\n },\n '& .MuiSvgIcon-root': {\n display: 'block',\n },\n },\n logoSx,\n )}\n {...restLogo}\n >\n {logo}\n </Box>\n )}\n <Box\n sx={sxOverride(\n {\n minWidth: '0',\n flexGrow: '1',\n alignSelf: 'stretch',\n // whole nav is hidden in mobile, children collapse into drawer\n ...variantSx(\n theme,\n mobile,\n breakpoint,\n {\n display: 'flex',\n ...(logo && {\n // increase size between logo and nav\n pl: 4,\n }),\n },\n { display: 'none' },\n ),\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: { xs: 2, xl: 4 },\n // move directly into border\n mb: '-1px',\n },\n contentSx,\n )}\n data-testid=\"Header.nav\"\n {...restContent}\n >\n {children}\n </Box>\n {(hasVisibleButtons \|\| hasButtons \|\| showMenu) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n // keep buttons on the right in mobile when nav is hidden\n ml: 'auto',\n // compensate icon padding in mobile\n ...variantSx(theme, mobile, breakpoint, { mr: 0 }, { mr: -1 }),\n },\n buttonsSx,\n )}\n data-testid=\"Header.btns\"\n {...restButtons}\n >\n {visibleButtons !== true && visibleButtons}\n {visibleButtons\n ? hasButtons && (\n <Box\n sx={sxOverride(\n {\n // contents keeps buttons in flex layout, none collapses them into drawer in mobile\n ...variantSx(theme, mobile, breakpoint, { display: 'contents' }, { display: 'none' }),\n },\n collapsibleButtonsSx,\n )}\n data-testid=\"Header.collapsiblebtns\"\n {...restCollapsibleButtons}\n >\n {buttons}\n </Box>\n )\n : buttons}\n {showMenu && (\n <HeaderButton\n key=\"menu\"\n aria-label=\"Toggle menu\"\n extend={false}\n onClick={() => setOpen((prev: boolean) => !prev)}\n sx={sxOverride(\n // toggle stays visible while drawer is open, so it can be closed even in desktop\n open\n ? { display: 'inline-flex' }\n : variantSx(theme, mobile, breakpoint, { display: 'none' }, { display: 'inline-flex' }),\n menuButtonSx,\n )}\n {...restMenuButton}\n >\n {open ? closeMenuIcon \|\| <CloseIcon /> : menuIcon \|\| <MenuIcon />}\n </HeaderButton>\n )}\n </Box>\n )}\n </Toolbar>\n </HeaderContext.Provider>\n </AppBar>\n {showMenu && (\n <Drawer\n disablePortal\n disableEnforceFocus\n disableAutoFocus\n anchor=\"top\"\n open={open}\n onClose={() => setOpen(false)}\n sx={sxOverride(\n {\n // bellow Header, above SecondaryNavigation\n zIndex: theme.zIndex.appBar - 10,\n // header offset\n top: theme.mixins.toolbar.minHeight,\n bottom: 'auto',\n height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n // adjust position\n position: 'absolute',\n },\n drawerSx,\n )}\n slotProps={{\n backdrop: {\n sx: sxOverride(\n {\n position: 'absolute',\n },\n drawerBackdropSx,\n ),\n ...restDrawerBackdrop,\n },\n paper: {\n sx: sxOverride(\n {\n position: 'absolute',\n height: '100%',\n display: 'grid',\n gridTemplateRows: 'auto max-content',\n },\n drawerPaperSx,\n ),\n ...restDrawerPaper,\n },\n ...restDrawerSlotProps,\n }}\n {...restDrawer}\n >\n <HeaderContext.Provider value={headerMobileContext}>\n <Box\n sx={sxOverride(\n {\n p: 2,\n overflow: 'auto',\n },\n mobileContentSx,\n )}\n data-testid=\"Header.mobilenav\"\n {...restMobileContent}\n >\n {children}\n </Box>\n {collapseButtons && (\n <Box sx={{ p: 2, pt: 0 }}>\n <Box\n sx={{\n pt: 0.75,\n display: 'flex',\n flexDirection: 'column-reverse',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n // border from appbar.theme.ts\n borderTop: 1,\n borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n }}\n >\n {buttons}\n </Box>\n </Box>\n )}\n </HeaderContext.Provider>\n </Drawer>\n )}\n </>\n );\n },\n);\n"],"names":["variantSx","theme","mobile","breakpoint","desktop","mobileStyles","undefined","breakpoints","down","up","hasRenderableChildren","nodes","Children","toArray","some","child","isValidElement","type","Fragment","props","children","Header","forwardRef","logo","buttons","visibleButtons","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","collapsibleButtonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","useTheme","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","collapsibleButtonsSx","restCollapsibleButtons","menuButtonSx","restMenuButton","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","hasChildren","hasButtons","hasVisibleButtons","collapseButtons","showMenu","_jsxs","_Fragment","_jsx","AppBar","HeaderContext","Provider","value","headerDesktopContext","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","pl","gap","xs","xl","mb","ml","mr","HeaderButton","extend","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","headerMobileContext","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}
1	+ {"version":3,"file":"Header.js","sources":["../../../../../src/components/header/Header.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, ReactNode, ElementType, Children, Fragment, isValidElement } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n AppBar,\n AppBarProps,\n BackdropProps,\n Box,\n BoxProps,\n Breakpoint,\n Drawer,\n DrawerProps,\n PaperProps,\n Theme,\n Toolbar,\n ToolbarProps,\n useTheme,\n} from '@mui/material';\nimport { SystemStyleObject } from '@mui/system';\nimport { MenuIcon } from '@/src/components/icon/stroke/MenuIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { HeaderButton, HeaderButtonProps } from './HeaderButton';\nimport { HeaderContext, headerDesktopContext, headerMobileContext } from './HeaderContext';\n\nexport interface HeaderProps extends Omit<AppBarProps, 'color'> {\n /*\n Logo component\n /\n logo?: ReactNode;\n /\n Wrap the navigation into container\n * @default false\n /\n inContainer?: boolean;\n /\n ActionButtons on the right side\n /\n buttons?: ReactNode;\n /\n ActionButtons on the right side that stays visible even on mobile\n /\n visibleButtons?: ReactNode \| true;\n /\n Controls if mobile version of Header should be shown, this collapses children into mobile menu\n \n @default undefined, leads to usage of breakpoint media query\n /\n mobile?: boolean;\n /\n Breakpoint at which Header collapses into mobile menu, number is treated as px value\n * @default 'lg'\n /\n breakpoint?: Breakpoint \| number;\n /\n Controls open/close state of mobile menu\n /\n open?: boolean;\n /\n Function to toggle open state of menu\n /\n setOpen?: (open: boolean) => void;\n /\n Properties applied to toolbar container\n /\n toolbarProps?: ToolbarProps<ElementType>;\n /\n Properties applied to logo wrapper\n /\n logoProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper\n /\n contentProps?: BoxProps<ElementType>;\n /\n Properties applied to content wrapper in drawer\n /\n mobileContentProps?: BoxProps<ElementType>;\n /\n Properties applied to button wrapper\n /\n buttonsProps?: BoxProps<ElementType>;\n /\n Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons\n /\n collapsibleButtonsProps?: BoxProps<ElementType>;\n /\n Properties applied to hamburger menu\n /\n menuButtonProps?: HeaderButtonProps;\n /\n Icon of the hamburger menu\n /\n menuIcon?: ReactNode;\n /\n Icon of the close hamburger menu\n /\n closeMenuIcon?: ReactNode;\n /\n Props applied to mobile drawer\n /\n drawerProps?: DrawerProps;\n}\n\n/\n Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries\n /\nexport function variantSx(\n theme: Theme,\n mobile: boolean \| undefined,\n breakpoint: Breakpoint \| number,\n desktop: SystemStyleObject<Theme>,\n mobileStyles: SystemStyleObject<Theme>,\n): SystemStyleObject<Theme> {\n if (mobile === undefined) {\n return {\n [theme.breakpoints.down(breakpoint)]: mobileStyles,\n [theme.breakpoints.up(breakpoint)]: desktop,\n };\n }\n return mobile ? mobileStyles : desktop;\n}\n\n/\n Checks for renderable content, recursively unwraps fragments\n /\nfunction hasRenderableChildren(nodes: ReactNode): boolean {\n return Children.toArray(nodes).some((child) =>\n isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n ? hasRenderableChildren(child.props.children)\n : true,\n );\n}\n\n/\n Component to render Header with navigation and action buttons at the top of the page\n */\nexport const Header: FC<HeaderProps> = forwardRef(\n (\n {\n children,\n logo,\n buttons,\n visibleButtons,\n mobile,\n open: propOpen,\n setOpen: propSetOpen,\n inContainer = false,\n breakpoint = 'lg',\n toolbarProps,\n logoProps,\n contentProps,\n mobileContentProps,\n buttonsProps,\n collapsibleButtonsProps,\n menuButtonProps,\n menuIcon,\n closeMenuIcon,\n drawerProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: logoSx, ...restLogo } = logoProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: mobileContentSx, ...restMobileContent } = mobileContentProps ?? {};\n const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n const { sx: collapsibleButtonsSx, ...restCollapsibleButtons } = collapsibleButtonsProps ?? {};\n const { sx: menuButtonSx, onClick: onMenuButtonClick, ...restMenuButton } = menuButtonProps ?? {};\n const { sx: drawerSx, slotProps: drawerSlotProps, ...restDrawer } = drawerProps ?? {};\n const { paper: drawerPaperProps, backdrop: drawerBackdropProps, ...restDrawerSlotProps } = drawerSlotProps ?? {};\n const { sx: drawerPaperSx, ...restDrawerPaper } = (drawerPaperProps as PaperProps) ?? {};\n const { sx: drawerBackdropSx, ...restDrawerBackdrop } = (drawerBackdropProps as BackdropProps) ?? {};\n const [rawOpen, rawSetOpen] = useState(false);\n const open = propOpen ?? rawOpen;\n const setOpen: React.Dispatch<React.SetStateAction<boolean>> = propSetOpen ?? rawSetOpen;\n\n const hasChildren = hasRenderableChildren(children);\n const hasButtons = hasRenderableChildren(buttons);\n const hasVisibleButtons = visibleButtons !== true && hasRenderableChildren(visibleButtons);\n // buttons collapse into drawer only when visibleButtons property is provided\n const collapseButtons = !!visibleButtons && hasButtons;\n const showMenu = mobile !== false && (hasChildren \|\| collapseButtons);\n\n return (\n <>\n <AppBar ref={ref} data-testid=\"Header\" {...rest}>\n <HeaderContext.Provider value={headerDesktopContext}>\n <Toolbar disableGutters={!inContainer} {...toolbarProps}>\n {logo && (\n <Box\n data-testid=\"Header.logo\"\n sx={sxOverride(\n {\n color: theme.palette.mode === 'dark' ? 'brand.secondary' : 'brand.tertiary',\n flexShrink: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n // restyle wrapper link, same style is applied in HeaderLogo\n '& .MuiLink-root': {\n display: 'block',\n position: 'relative',\n py: 1,\n // add proper focus ring\n ...getFocusRingStyle(theme),\n // remove default link box shadow\n '&.Mui-focusVisible': {\n boxShadow: 'none',\n },\n },\n '& .MuiSvgIcon-root': {\n display: 'block',\n },\n },\n logoSx,\n )}\n {...restLogo}\n >\n {logo}\n </Box>\n )}\n <Box\n sx={sxOverride(\n {\n minWidth: '0',\n flexGrow: '1',\n alignSelf: 'stretch',\n // whole nav is hidden in mobile, children collapse into drawer\n ...variantSx(\n theme,\n mobile,\n breakpoint,\n {\n display: 'flex',\n ...(logo && {\n // increase size between logo and nav\n pl: 4,\n }),\n },\n { display: 'none' },\n ),\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: { xs: 2, xl: 4 },\n // move directly into border\n mb: '-1px',\n },\n contentSx,\n )}\n data-testid=\"Header.nav\"\n {...restContent}\n >\n {children}\n </Box>\n {(hasVisibleButtons \|\| hasButtons \|\| showMenu) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n // keep buttons on the right in mobile when nav is hidden\n ml: 'auto',\n // compensate icon padding in mobile\n ...variantSx(theme, mobile, breakpoint, { mr: 0 }, { mr: -1 }),\n },\n buttonsSx,\n )}\n data-testid=\"Header.btns\"\n {...restButtons}\n >\n {visibleButtons !== true && visibleButtons}\n {visibleButtons\n ? hasButtons && (\n <Box\n sx={sxOverride(\n {\n // contents keeps buttons in flex layout, none collapses them into drawer in mobile\n ...variantSx(theme, mobile, breakpoint, { display: 'contents' }, { display: 'none' }),\n },\n collapsibleButtonsSx,\n )}\n data-testid=\"Header.collapsiblebtns\"\n {...restCollapsibleButtons}\n >\n {buttons}\n </Box>\n )\n : buttons}\n {showMenu && (\n <HeaderButton\n key=\"menu\"\n aria-label=\"Toggle menu\"\n aria-expanded={open}\n extend={false}\n onClick={(event) => {\n onMenuButtonClick?.(event);\n setOpen((prev: boolean) => !prev);\n }}\n sx={sxOverride(\n // toggle stays visible while drawer is open, so it can be closed even in desktop\n open\n ? { display: 'inline-flex' }\n : variantSx(theme, mobile, breakpoint, { display: 'none' }, { display: 'inline-flex' }),\n menuButtonSx,\n )}\n {...restMenuButton}\n >\n {open ? closeMenuIcon \|\| <CloseIcon /> : menuIcon \|\| <MenuIcon />}\n </HeaderButton>\n )}\n </Box>\n )}\n </Toolbar>\n </HeaderContext.Provider>\n </AppBar>\n {showMenu && (\n <Drawer\n disablePortal\n disableEnforceFocus\n disableAutoFocus\n anchor=\"top\"\n open={open}\n onClose={() => setOpen(false)}\n sx={sxOverride(\n {\n // bellow Header, above SecondaryNavigation\n zIndex: theme.zIndex.appBar - 10,\n // header offset\n top: theme.mixins.toolbar.minHeight,\n bottom: 'auto',\n height: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n // adjust position\n position: 'absolute',\n },\n drawerSx,\n )}\n slotProps={{\n backdrop: {\n sx: sxOverride(\n {\n position: 'absolute',\n },\n drawerBackdropSx,\n ),\n ...restDrawerBackdrop,\n },\n paper: {\n sx: sxOverride(\n {\n position: 'absolute',\n height: '100%',\n display: 'grid',\n gridTemplateRows: 'auto max-content',\n },\n drawerPaperSx,\n ),\n ...restDrawerPaper,\n },\n ...restDrawerSlotProps,\n }}\n {...restDrawer}\n >\n <HeaderContext.Provider value={headerMobileContext}>\n <Box\n sx={sxOverride(\n {\n p: 2,\n overflow: 'auto',\n },\n mobileContentSx,\n )}\n data-testid=\"Header.mobilenav\"\n {...restMobileContent}\n >\n {children}\n </Box>\n {collapseButtons && (\n <Box sx={{ p: 2, pt: 0 }}>\n <Box\n sx={{\n pt: 0.75,\n display: 'flex',\n flexDirection: 'column-reverse',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n // border from appbar.theme.ts\n borderTop: 1,\n borderColor: theme.palette.mode === 'dark' ? 'onSurface.os700' : 'surface.secondary',\n }}\n >\n {buttons}\n </Box>\n </Box>\n )}\n </HeaderContext.Provider>\n </Drawer>\n )}\n </>\n );\n },\n);\n"],"names":["variantSx","theme","mobile","breakpoint","desktop","mobileStyles","undefined","breakpoints","down","up","hasRenderableChildren","nodes","Children","toArray","some","child","isValidElement","type","Fragment","props","children","Header","forwardRef","logo","buttons","visibleButtons","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","collapsibleButtonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","useTheme","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","collapsibleButtonsSx","restCollapsibleButtons","menuButtonSx","onClick","onMenuButtonClick","restMenuButton","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","hasChildren","hasButtons","hasVisibleButtons","collapseButtons","showMenu","_jsxs","_Fragment","_jsx","AppBar","HeaderContext","Provider","value","headerDesktopContext","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","pl","gap","xs","xl","mb","ml","mr","HeaderButton","extend","event","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","headerMobileContext","p","overflow","pt","flexDirection","borderTop","borderColor"],"mappings":"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"}

package/cjs/components/header/HeaderNavigationHero.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),i=require("../icon/stroke/ChevronDownIcon.js"),s=require("./HeaderNavigationLink.js"),n=require("./HeaderContext.js");const a=r.forwardRef(({children:a,sx:d,label:x,icon:c,extend:l,inContainer:u=!1,disableBackdrop:p=!1,onClick:v,clickAwayListenerProps:g,contentProps:m,wrapperProps:h,containerProps:f,collapseProps:k,portalProps:j,backdropProps:C,...b},w)=>{const H=r.useRef(null),[y,P]=r.useState(!1),q=o.useTheme(),O=n.useHeaderContext(),S=l??O?.extend,B=o.useMediaQuery(q.breakpoints.down("lg")),I=void 0===S?B:S,{sx:z,...L}=C??{},{sx:N,...A}=h??{},{sx:D,...R}=m??{};return e.jsxs(e.Fragment,{children:[e.jsx(s.HeaderNavigationLink,{active:y,extend:S,icon:c||e.jsx(i.ChevronDownIcon,{sx:{"&&&":{fontSize:void 0===S?{xs:"20px",lg:"14px"}:["20px","14px"][+!S]},color:void 0===S?{xs:"dark"===q.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===q.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!S],transform:`rotate(${y?"180":"0"}deg)`,transition:void 0===S?{xs:q.transitions.create("transform",{duration:q.transitions.duration.shortest}),lg:"none"}:[q.transitions.create("transform",{duration:q.transitions.duration.shortest}),"none"][+!S]}}),onClick:e=>{v?.(e),P(e=>!e)},sx:t.sxOverride({justifyContent:void 0===S?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!S]},d),ref:w??H,"data-testid":"HeaderNavigationHero",...b,children:x}),e.jsx(o.ClickAwayListener,{onClickAway:e=>!(w??H)?.current?.contains(e?.target)&&P(!1),...g,children:e.jsx(o.Box,{sx:t.sxOverride({position:void 0===S?{xs:"static",lg:"absolute"}:["static","absolute"][+!S],zIndex:"10",left:"0",right:"0",top:q.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${q.mixins.toolbar.minHeight})`,overflow:"auto"},N),...A,children:e.jsx(o.Collapse,{in:y,...k,children:e.jsx(o.Box,{sx:t.sxOverride({backgroundColor:void 0===S?{xs:"unset",lg:"dark"===q.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===q.palette.mode?"surface.primary":"background.primary"][+!S],py:void 0===S?{xs:0,lg:2}:[0,2][+!S],px:void 0===S?{xs:1,lg:2}:[1,2][+!S],...u&&{px:0}},D),...R,children:u?e.jsx(o.Container,{maxWidth:"xl",...f,children:a}):a})})})}),!p&&!I&&e.jsx(o.Portal,{...j,children:e.jsx(o.Backdrop,{open:y,sx:t.sxOverride({zIndex:q.zIndex.appBar-50},z),...L})})]})});exports.HeaderNavigationHero=a;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),s=require("../icon/stroke/ChevronDownIcon.js"),i=require("./HeaderNavigationLink.js"),n=require("./HeaderContext.js");const a=r.forwardRef(({children:a,sx:d,label:x,icon:c,extend:l,inContainer:u=!1,disableBackdrop:p=!1,onClick:v,clickAwayListenerProps:g,contentProps:m,wrapperProps:f,containerProps:h,collapseProps:k,portalProps:j,backdropProps:C,...b},w)=>{const H=r.useRef(null),y=o.useForkRef(w,H),[P,q]=r.useState(!1),O=o.useTheme(),S=n.useHeaderContext(),B=l??S?.extend,I=o.useMediaQuery(O.breakpoints.down("lg")),z=void 0===B?I:B,{sx:L,...N}=C??{},{sx:A,...R}=f??{},{sx:D,...F}=m??{};return e.jsxs(e.Fragment,{children:[e.jsx(i.HeaderNavigationLink,{active:P,extend:B,icon:c||e.jsx(s.ChevronDownIcon,{sx:{"&&&":{fontSize:void 0===B?{xs:"20px",lg:"14px"}:["20px","14px"][+!B]},color:void 0===B?{xs:"dark"===O.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===O.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!B],transform:`rotate(${P?"180":"0"}deg)`,transition:void 0===B?{xs:O.transitions.create("transform",{duration:O.transitions.duration.shortest}),lg:"none"}:[O.transitions.create("transform",{duration:O.transitions.duration.shortest}),"none"][+!B]}}),onClick:e=>{v?.(e),q(e=>!e)},sx:t.sxOverride({justifyContent:void 0===B?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!B]},d),ref:y,"data-testid":"HeaderNavigationHero",...b,children:x}),e.jsx(o.ClickAwayListener,{onClickAway:e=>!H.current?.contains(e?.target)&&q(!1),...g,children:e.jsx(o.Box,{sx:t.sxOverride({position:void 0===B?{xs:"static",lg:"absolute"}:["static","absolute"][+!B],zIndex:"10",left:"0",right:"0",top:O.mixins.toolbar.minHeight,maxHeight:`calc(100vh - ${O.mixins.toolbar.minHeight})`,overflow:"auto"},A),...R,children:e.jsx(o.Collapse,{in:P,...k,children:e.jsx(o.Box,{sx:t.sxOverride({backgroundColor:void 0===B?{xs:"unset",lg:"dark"===O.palette.mode?"surface.primary":"background.primary"}:["unset","dark"===O.palette.mode?"surface.primary":"background.primary"][+!B],py:void 0===B?{xs:0,lg:2}:[0,2][+!B],px:void 0===B?{xs:1,lg:2}:[1,2][+!B],...u&&{px:0}},D),...F,children:u?e.jsx(o.Container,{maxWidth:"xl",...h,children:a}):a})})})}),!p&&!z&&e.jsx(o.Portal,{...j,children:e.jsx(o.Backdrop,{open:P,sx:t.sxOverride({zIndex:O.zIndex.appBar-50},L),...N})})]})});exports.HeaderNavigationHero=a;
 //# sourceMappingURL=HeaderNavigationHero.js.map

package/cjs/components/header/HeaderNavigationHero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderNavigationHero.js","sources":["../../../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState, ElementType, useRef } from 'react';\nimport {\n Collapse,\n Backdrop,\n ClickAwayListener,\n Box,\n BoxProps,\n Portal,\n Container,\n ClickAwayListenerProps,\n ContainerProps,\n PortalProps,\n BackdropProps,\n CollapseProps,\n useMediaQuery,\n Theme,\n useTheme,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {\n /*\n Wrap the content into container\n * @default false\n /\n inContainer?: boolean;\n /\n Controls appearance of backdrop when content opens\n * @default false\n /\n disableBackdrop?: boolean;\n /\n Props applied to ClickAwayListener\n /\n clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n /\n Props applied to main wrapper of content\n /\n contentProps?: BoxProps<ElementType>;\n /\n Props applied to main wrapper before collapsible\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n Props applied to Container if inContainer property is provided\n /\n containerProps?: ContainerProps;\n /\n Props applied to Collapse component\n /\n collapseProps?: CollapseProps;\n /\n Props applied to Portal if disableBackdrop property is not provided\n /\n portalProps?: PortalProps;\n /\n Props applied to Backdrop if disableBackdrop property is not provided\n /\n backdropProps?: BackdropProps;\n}\n\n/\n HeaderNavigationLink with the integration of the complex hero menu\n */\nexport const HeaderNavigationHero: FC<HeaderNavigationHeroProps> = forwardRef(\n (\n {\n children,\n sx,\n label,\n icon,\n extend: propExtend,\n inContainer = false,\n disableBackdrop = false,\n onClick,\n clickAwayListenerProps,\n contentProps,\n wrapperProps,\n containerProps,\n collapseProps,\n portalProps,\n backdropProps,\n ...rest\n },\n ref,\n ) => {\n const buttonRef = useRef(null);\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n const headerContext = useHeaderContext();\n const extend = propExtend ?? headerContext?.extend;\n // media query fallback only for standalone usage outside of Header\n const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n const mobile = extend === undefined ? downLg : extend;\n const { sx: backdropSx, ...restBackdrop } = backdropProps ?? {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n\n return (\n <>\n <HeaderNavigationLink\n active={open}\n extend={extend}\n icon={\n icon \|\| (\n <ChevronDownIcon\n sx={{\n '&&&': {\n fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n },\n color:\n extend === undefined\n ? {\n xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n lg: 'currentColor',\n }\n : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n +!extend\n ],\n transform: `rotate(${open ? '180' : '0'}deg)`,\n transition:\n extend === undefined\n ? {\n xs: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n lg: 'none',\n }\n : [\n theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n 'none',\n ][+!extend],\n }}\n />\n )\n }\n onClick={(e) => {\n onClick?.(e);\n setOpen((prev) => !prev);\n }}\n sx={sxOverride(\n {\n justifyContent:\n extend === undefined\n ? { xs: 'space-between', lg: 'flex-start' }\n : ['space-between', 'flex-start'][+!extend],\n },\n sx,\n )}\n ref={ref ?? buttonRef}\n data-testid=\"HeaderNavigationHero\"\n {...rest}\n >\n {label}\n </HeaderNavigationLink>\n <ClickAwayListener\n onClickAway={(e) =>\n !((ref as React.RefObject<HTMLButtonElement>) ?? buttonRef)?.current?.contains(e?.target as Node) &&\n setOpen(false)\n }\n {...clickAwayListenerProps}\n >\n <Box\n sx={sxOverride(\n {\n position: extend === undefined ? { xs: 'static', lg: 'absolute' } : ['static', 'absolute'][+!extend],\n zIndex: '10',\n left: '0',\n right: '0',\n top: theme.mixins.toolbar.minHeight,\n maxHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n overflow: 'auto',\n },\n wrapperSx,\n )}\n {...restWrapper}\n >\n <Collapse in={open} {...collapseProps}>\n <Box\n sx={sxOverride(\n {\n backgroundColor:\n extend === undefined\n ? {\n xs: 'unset',\n lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary',\n }\n : ['unset', theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary'][+!extend],\n py: extend === undefined ? { xs: 0, lg: 2 } : [0, 2][+!extend],\n px: extend === undefined ? { xs: 1, lg: 2 } : [1, 2][+!extend],\n ...(inContainer && {\n px: 0,\n }),\n },\n contentSx,\n )}\n {...restContent}\n >\n {inContainer ? (\n <Container maxWidth=\"xl\" {...containerProps}>\n {children}\n </Container>\n ) : (\n children\n )}\n </Box>\n </Collapse>\n </Box>\n </ClickAwayListener>\n {!disableBackdrop && !mobile && (\n <Portal {...portalProps}>\n <Backdrop open={open} sx={sxOverride({ zIndex: theme.zIndex.appBar - 50 }, backdropSx)} {...restBackdrop} />\n </Portal>\n )}\n </>\n );\n },\n);\n"],"names":["HeaderNavigationHero","forwardRef","children","sx","label","icon","extend","propExtend","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","ref","buttonRef","useRef","open","setOpen","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","backdropSx","restBackdrop","wrapperSx","restWrapper","contentSx","restContent","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Box","position","zIndex","left","right","top","mixins","toolbar","minHeight","maxHeight","overflow","Collapse","in","backgroundColor","py","px","Container","maxWidth","Portal","Backdrop","appBar"],"mappings":"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"}
1	+ {"version":3,"file":"HeaderNavigationHero.js","sources":["../../../../../src/components/header/HeaderNavigationHero.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState, ElementType, useRef } from 'react';\nimport {\n Collapse,\n Backdrop,\n ClickAwayListener,\n Box,\n BoxProps,\n Portal,\n Container,\n ClickAwayListenerProps,\n ContainerProps,\n PortalProps,\n BackdropProps,\n CollapseProps,\n useMediaQuery,\n Theme,\n useTheme,\n useForkRef,\n} from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { HeaderNavigationLink, HeaderNavigationLinkProps } from './HeaderNavigationLink';\nimport { useHeaderContext } from './HeaderContext';\n\nexport interface HeaderNavigationHeroProps extends HeaderNavigationLinkProps {\n /*\n Wrap the content into container\n * @default false\n /\n inContainer?: boolean;\n /\n Controls appearance of backdrop when content opens\n * @default false\n /\n disableBackdrop?: boolean;\n /\n Props applied to ClickAwayListener\n /\n clickAwayListenerProps?: Omit<ClickAwayListenerProps, 'children'>;\n /\n Props applied to main wrapper of content\n /\n contentProps?: BoxProps<ElementType>;\n /\n Props applied to main wrapper before collapsible\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n Props applied to Container if inContainer property is provided\n /\n containerProps?: ContainerProps;\n /\n Props applied to Collapse component\n /\n collapseProps?: CollapseProps;\n /\n Props applied to Portal if disableBackdrop property is not provided\n /\n portalProps?: PortalProps;\n /\n Props applied to Backdrop if disableBackdrop property is not provided\n /\n backdropProps?: BackdropProps;\n}\n\n/\n HeaderNavigationLink with the integration of the complex hero menu\n */\nexport const HeaderNavigationHero: FC<HeaderNavigationHeroProps> = forwardRef(\n (\n {\n children,\n sx,\n label,\n icon,\n extend: propExtend,\n inContainer = false,\n disableBackdrop = false,\n onClick,\n clickAwayListenerProps,\n contentProps,\n wrapperProps,\n containerProps,\n collapseProps,\n portalProps,\n backdropProps,\n ...rest\n },\n ref,\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n const headerContext = useHeaderContext();\n const extend = propExtend ?? headerContext?.extend;\n // media query fallback only for standalone usage outside of Header\n const downLg = useMediaQuery<Theme>(theme.breakpoints.down('lg'));\n const mobile = extend === undefined ? downLg : extend;\n const { sx: backdropSx, ...restBackdrop } = backdropProps ?? {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n\n return (\n <>\n <HeaderNavigationLink\n active={open}\n extend={extend}\n icon={\n icon \|\| (\n <ChevronDownIcon\n sx={{\n '&&&': {\n fontSize: extend === undefined ? { xs: '20px', lg: '14px' } : ['20px', '14px'][+!extend],\n },\n color:\n extend === undefined\n ? {\n xs: theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700',\n lg: 'currentColor',\n }\n : [theme.palette.mode === 'dark' ? 'onSurface.os300' : 'onSurface.os700', 'currentColor'][\n +!extend\n ],\n transform: `rotate(${open ? '180' : '0'}deg)`,\n transition:\n extend === undefined\n ? {\n xs: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n lg: 'none',\n }\n : [\n theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n 'none',\n ][+!extend],\n }}\n />\n )\n }\n onClick={(e) => {\n onClick?.(e);\n setOpen((prev) => !prev);\n }}\n sx={sxOverride(\n {\n justifyContent:\n extend === undefined\n ? { xs: 'space-between', lg: 'flex-start' }\n : ['space-between', 'flex-start'][+!extend],\n },\n sx,\n )}\n ref={handleRef}\n data-testid=\"HeaderNavigationHero\"\n {...rest}\n >\n {label}\n </HeaderNavigationLink>\n <ClickAwayListener\n onClickAway={(e) => !buttonRef.current?.contains(e?.target as Node) && setOpen(false)}\n {...clickAwayListenerProps}\n >\n <Box\n sx={sxOverride(\n {\n position: extend === undefined ? { xs: 'static', lg: 'absolute' } : ['static', 'absolute'][+!extend],\n zIndex: '10',\n left: '0',\n right: '0',\n top: theme.mixins.toolbar.minHeight,\n maxHeight: `calc(100vh - ${theme.mixins.toolbar.minHeight})`,\n overflow: 'auto',\n },\n wrapperSx,\n )}\n {...restWrapper}\n >\n <Collapse in={open} {...collapseProps}>\n <Box\n sx={sxOverride(\n {\n backgroundColor:\n extend === undefined\n ? {\n xs: 'unset',\n lg: theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary',\n }\n : ['unset', theme.palette.mode === 'dark' ? 'surface.primary' : 'background.primary'][+!extend],\n py: extend === undefined ? { xs: 0, lg: 2 } : [0, 2][+!extend],\n px: extend === undefined ? { xs: 1, lg: 2 } : [1, 2][+!extend],\n ...(inContainer && {\n px: 0,\n }),\n },\n contentSx,\n )}\n {...restContent}\n >\n {inContainer ? (\n <Container maxWidth=\"xl\" {...containerProps}>\n {children}\n </Container>\n ) : (\n children\n )}\n </Box>\n </Collapse>\n </Box>\n </ClickAwayListener>\n {!disableBackdrop && !mobile && (\n <Portal {...portalProps}>\n <Backdrop open={open} sx={sxOverride({ zIndex: theme.zIndex.appBar - 50 }, backdropSx)} {...restBackdrop} />\n </Portal>\n )}\n </>\n );\n },\n);\n"],"names":["HeaderNavigationHero","forwardRef","children","sx","label","icon","extend","propExtend","inContainer","disableBackdrop","onClick","clickAwayListenerProps","contentProps","wrapperProps","containerProps","collapseProps","portalProps","backdropProps","rest","ref","buttonRef","useRef","handleRef","useForkRef","open","setOpen","useState","theme","useTheme","headerContext","useHeaderContext","downLg","useMediaQuery","breakpoints","down","mobile","undefined","backdropSx","restBackdrop","wrapperSx","restWrapper","contentSx","restContent","_jsxs","_jsx","HeaderNavigationLink","active","ChevronDownIcon","fontSize","xs","lg","color","palette","mode","transform","transition","transitions","create","duration","shortest","e","prev","sxOverride","justifyContent","ClickAwayListener","onClickAway","current","contains","target","Box","position","zIndex","left","right","top","mixins","toolbar","minHeight","maxHeight","overflow","Collapse","in","backgroundColor","py","px","Container","maxWidth","Portal","Backdrop","appBar"],"mappings":"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"}

package/cjs/components/header/HeaderNavigationMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),n=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),o=require("../icon/stroke/ChevronDownIcon.js"),i=require("./HeaderNavigationLink.js"),s=require("../../materialui/button/interactive.js"),a=require("./HeaderContext.js");const u=r.forwardRef(({children:u,sx:l,label:c,icon:d,onClick:x,extend:f,menuItems:v,menuProps:g,collapseProps:p,clickAwayListenerProps:m,...h},j)=>{const k=r.useRef(null),[C,w]=r.useState(null),S=n.useTheme(),q=a.useHeaderContext(),b=f??q?.extend,M=n.useMediaQuery(S.breakpoints.down("lg")),y=void 0===b?M:b,{sx:H,...I}=p??{};return e.jsxs(e.Fragment,{children:[e.jsx(i.HeaderNavigationLink,{active:!!C,extend:b,icon:d||e.jsx(o.ChevronDownIcon,{sx:{"&&&":{fontSize:void 0===b?{xs:"20px",lg:"14px"}:["20px","14px"][+!b]},color:void 0===b?{xs:"dark"===S.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===S.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!b],transform:`rotate(${C?"180":"0"}deg)`,transition:void 0===b?{xs:S.transitions.create("transform",{duration:S.transitions.duration.shortest}),lg:"none"}:[S.transitions.create("transform",{duration:S.transitions.duration.shortest}),"none"][+!b]}}),onClick:e=>{x?.(e),w(r=>r?null:e.currentTarget)},sx:t.sxOverride({justifyContent:void 0===b?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!b]},l),ref:j??k,"data-testid":"HeaderNavigationMenu",...h,children:c}),y?e.jsx(n.ClickAwayListener,{onClickAway:e=>{!(j??k)?.current?.contains(e?.target)&&w(null)},...m,children:e.jsx(n.Collapse,{in:!!C,sx:t.sxOverride({"& .MuiMenuItem-root":{...s.getInteractiveStyle({background:"none",fontWeight:"300",color:"dark"===S.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"})}},H),...I,children:e.jsx(n.MenuList,{children:u||v})})}):e.jsx(n.Menu,{open:!!C,anchorEl:C,onClose:()=>w(null),...g,children:u||v})]})});exports.HeaderNavigationMenu=u;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),n=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),o=require("../icon/stroke/ChevronDownIcon.js"),i=require("./HeaderNavigationLink.js"),s=require("../../materialui/button/interactive.js"),a=require("./HeaderContext.js");const u=r.forwardRef(({children:u,sx:l,label:c,icon:d,onClick:x,extend:v,menuItems:p,menuProps:f,collapseProps:g,clickAwayListenerProps:k,...h},m)=>{const C=r.useRef(null),j=n.useForkRef(m,C),[w,M]=r.useState(null),S=n.useTheme(),{sx:q,...y}=f??{},b=a.useHeaderContext(),H=v??b?.extend,L=n.useMediaQuery(S.breakpoints.down("lg")),A=void 0===H?L:H,{sx:I,...O}=g??{};return e.jsxs(e.Fragment,{children:[e.jsx(i.HeaderNavigationLink,{active:!!w,extend:H,icon:d||e.jsx(o.ChevronDownIcon,{sx:{"&&&":{fontSize:void 0===H?{xs:"20px",lg:"14px"}:["20px","14px"][+!H]},color:void 0===H?{xs:"dark"===S.palette.mode?"onSurface.os300":"onSurface.os700",lg:"currentColor"}:["dark"===S.palette.mode?"onSurface.os300":"onSurface.os700","currentColor"][+!H],transform:`rotate(${w?"180":"0"}deg)`,transition:void 0===H?{xs:S.transitions.create("transform",{duration:S.transitions.duration.shortest}),lg:"none"}:[S.transitions.create("transform",{duration:S.transitions.duration.shortest}),"none"][+!H]}}),onClick:e=>{x?.(e),M(r=>r?null:e.currentTarget)},sx:t.sxOverride({justifyContent:void 0===H?{xs:"space-between",lg:"flex-start"}:["space-between","flex-start"][+!H]},l),ref:j,"data-testid":"HeaderNavigationMenu",...h,children:c}),A?e.jsx(n.ClickAwayListener,{onClickAway:e=>{!C.current?.contains(e?.target)&&M(null)},...k,children:e.jsx(n.Collapse,{in:!!w,sx:t.sxOverride({"& .MuiMenuItem-root":{...s.getInteractiveStyle({background:"none",fontWeight:"300",color:"dark"===S.palette.mode?"onSurface.os300":"onSurface.os700"},{background:"none",fontWeight:"700",color:"currentColor"})}},I),...O,children:e.jsx(n.MenuList,{children:u||p})})}):e.jsx(n.ClickAwayListener,{onClickAway:e=>!C.current?.contains(e?.target)&&M(null),...k,children:e.jsx(n.Menu,{open:!!w,anchorEl:w,onClose:()=>M(null),...y,sx:t.sxOverride({pointerEvents:"none","& .MuiMenu-paper":{pointerEvents:"auto"}},q),children:u||p})})]})});exports.HeaderNavigationMenu=u;
 //# sourceMappingURL=HeaderNavigationMenu.js.map