@skodaflow/web-library 8.3.0 → 8.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/advancedTable/agGrid.d.ts +15 -0
- package/cjs/components/advancedTable/agGrid.js +1 -1
- package/cjs/components/advancedTable/agGrid.js.map +1 -1
- package/cjs/components/advancedTable/agGridIcons.d.ts +8 -2
- package/cjs/components/advancedTable/agGridIcons.js +1 -1
- package/cjs/components/advancedTable/agGridIcons.js.map +1 -1
- package/cjs/components/bottomSheet/BottomSheet.d.ts +3 -0
- package/cjs/components/bottomSheet/BottomSheet.js.map +1 -1
- package/cjs/components/carousel/Autoplay.d.ts +4 -4
- package/cjs/components/carousel/Navigation.d.ts +2 -2
- package/cjs/components/carousel/Navigation.js +1 -1
- package/cjs/components/carousel/Navigation.js.map +1 -1
- package/cjs/components/code/Code.d.ts +8 -0
- package/cjs/components/code/Code.js +2 -0
- package/cjs/components/code/Code.js.map +1 -0
- package/cjs/components/code/index.d.ts +1 -0
- package/cjs/components/errorContent/ErrorContent.js +1 -1
- package/cjs/components/errorContent/ErrorContent.js.map +1 -1
- package/cjs/components/footer/FooterIconButton.d.ts +1 -1
- package/cjs/components/footer/FooterIconButton.js.map +1 -1
- package/cjs/components/footer/FooterMenu.js +1 -1
- package/cjs/components/footer/FooterMenu.js.map +1 -1
- package/cjs/components/footer/FooterMenuCollapse.d.ts +25 -0
- package/cjs/components/footer/FooterMenuCollapse.js +2 -0
- package/cjs/components/footer/FooterMenuCollapse.js.map +1 -0
- package/cjs/components/header/Header.d.ts +16 -2
- package/cjs/components/header/Header.js +1 -1
- package/cjs/components/header/Header.js.map +1 -1
- package/cjs/components/header/HeaderButton.d.ts +1 -0
- package/cjs/components/header/HeaderButton.js +1 -1
- package/cjs/components/header/HeaderButton.js.map +1 -1
- package/cjs/components/header/HeaderContext.d.ts +22 -0
- package/cjs/components/header/HeaderContext.js +2 -0
- package/cjs/components/header/HeaderContext.js.map +1 -0
- package/cjs/components/header/HeaderLanguageSelect.js.map +1 -1
- package/cjs/components/header/HeaderLogo.d.ts +1 -1
- package/cjs/components/header/HeaderLogo.js +1 -1
- package/cjs/components/header/HeaderLogo.js.map +1 -1
- package/cjs/components/header/HeaderNavigationHero.d.ts +1 -1
- package/cjs/components/header/HeaderNavigationHero.js +1 -1
- package/cjs/components/header/HeaderNavigationHero.js.map +1 -1
- package/cjs/components/header/HeaderNavigationLink.d.ts +1 -0
- package/cjs/components/header/HeaderNavigationLink.js +1 -1
- package/cjs/components/header/HeaderNavigationLink.js.map +1 -1
- package/cjs/components/header/HeaderNavigationMenu.js +1 -1
- package/cjs/components/header/HeaderNavigationMenu.js.map +1 -1
- package/cjs/components/header/index.d.ts +1 -0
- package/cjs/components/index.d.ts +1 -0
- package/cjs/components/label/Label.js +1 -1
- package/cjs/components/label/Label.js.map +1 -1
- package/cjs/components/notification/NotificationCenterHeaderButton.d.ts +1 -1
- package/cjs/components/playPauseButton/PlayPauseButton.d.ts +1 -1
- package/cjs/components/promptBar/PromptAttachments.js +1 -1
- package/cjs/components/promptBar/PromptAttachments.js.map +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.d.ts +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.js +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.js.map +1 -1
- package/cjs/components/quickLink/QuickLink.js +1 -1
- package/cjs/components/quickLink/QuickLink.js.map +1 -1
- package/cjs/components/search/Search.js +1 -1
- package/cjs/components/search/Search.js.map +1 -1
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/cjs/components/skodaThemeProvider/SkodaThemeProvider.js +1 -1
- package/cjs/components/skodaThemeProvider/SkodaThemeProvider.js.map +1 -1
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.d.ts +1 -2
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.js +1 -1
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.js.map +1 -1
- package/cjs/components/textAndCta/AppStoreButton.js +1 -1
- package/cjs/components/textAndCta/AppStoreButton.js.map +1 -1
- package/cjs/components/textAndCta/TextAndCta.d.ts +1 -1
- package/cjs/components/tooltipHeader/TooltipHeader.d.ts +2 -1
- package/cjs/components/upload/Upload.d.ts +1 -1
- package/cjs/components/upload/components/uploadList/UploadListItem.d.ts +1 -1
- package/cjs/components/upload/components/uploadPreview/UploadPreviewImage.d.ts +1 -1
- package/cjs/components/upload/components/uploadWrapper/UploadContent.d.ts +2 -2
- package/cjs/components/upload/components/uploadWrapper/UploadWrapper.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/cjs/materialui/badge/badge.theme.js +1 -1
- package/cjs/materialui/badge/badge.theme.js.map +1 -1
- package/cjs/materialui/button/button.theme.js.map +1 -1
- package/cjs/materialui/button/buttonBase.theme.js +1 -1
- package/cjs/materialui/button/buttonBase.theme.js.map +1 -1
- package/cjs/materialui/dialog/DialogTitle.js +1 -1
- package/cjs/materialui/dialog/DialogTitle.js.map +1 -1
- package/cjs/materialui/slider/SliderValues.d.ts +5 -0
- package/cjs/materialui/slider/SliderValues.js +1 -1
- package/cjs/materialui/slider/SliderValues.js.map +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.d.ts +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.js +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.js.map +1 -1
- package/cjs/materialui/table/stories/actions.d.ts +1 -1
- package/cjs/materialui/table/stories/basic.d.ts +1 -1
- package/cjs/materialui/table/stories/interactive.d.ts +1 -1
- package/cjs/materialui/table/stories/pagination.d.ts +3 -3
- package/cjs/materialui/table/stories/scrollbar.d.ts +1 -1
- package/cjs/materialui/table/stories/selectSort.d.ts +1 -1
- package/cjs/materialui/table/stories/small.d.ts +1 -1
- package/cjs/materialui/table/tablePagination.theme.js +1 -1
- package/cjs/materialui/table/tablePagination.theme.js.map +1 -1
- package/cjs/materialui/tabs/TabPanel.d.ts +2 -2
- package/cjs/materialui/tabs/TabsScrollButton.d.ts +1 -1
- package/cjs/materialui/tabs/tabs.theme.js +1 -1
- package/cjs/materialui/tabs/tabs.theme.js.map +1 -1
- package/cjs/materialui/textfield/inputBase.theme.js +1 -1
- package/cjs/materialui/textfield/inputBase.theme.js.map +1 -1
- package/cjs/materialui/textfield/inputLabel.theme.js +1 -1
- package/cjs/materialui/textfield/inputLabel.theme.js.map +1 -1
- package/cjs/materialui/theme/theme.extensions.d.ts +1 -1
- package/cjs/materialui/themeProvider/baseline.theme.js +1 -1
- package/cjs/materialui/themeProvider/baseline.theme.js.map +1 -1
- package/components/advancedTable/agGrid.d.ts +15 -0
- package/components/advancedTable/agGrid.js +1 -1
- package/components/advancedTable/agGrid.js.map +1 -1
- package/components/advancedTable/agGridIcons.d.ts +8 -2
- package/components/advancedTable/agGridIcons.js +1 -1
- package/components/advancedTable/agGridIcons.js.map +1 -1
- package/components/bottomSheet/BottomSheet.d.ts +3 -0
- package/components/bottomSheet/BottomSheet.js.map +1 -1
- package/components/carousel/Autoplay.d.ts +4 -4
- package/components/carousel/Navigation.d.ts +2 -2
- package/components/carousel/Navigation.js +1 -1
- package/components/carousel/Navigation.js.map +1 -1
- package/components/code/Code.d.ts +8 -0
- package/components/code/Code.js +2 -0
- package/components/code/Code.js.map +1 -0
- package/components/code/index.d.ts +1 -0
- package/components/errorContent/ErrorContent.js +1 -1
- package/components/errorContent/ErrorContent.js.map +1 -1
- package/components/footer/FooterIconButton.d.ts +1 -1
- package/components/footer/FooterIconButton.js.map +1 -1
- package/components/footer/FooterMenu.js +1 -1
- package/components/footer/FooterMenu.js.map +1 -1
- package/components/footer/FooterMenuCollapse.d.ts +25 -0
- package/components/footer/FooterMenuCollapse.js +2 -0
- package/components/footer/FooterMenuCollapse.js.map +1 -0
- package/components/header/Header.d.ts +16 -2
- package/components/header/Header.js +1 -1
- package/components/header/Header.js.map +1 -1
- package/components/header/HeaderButton.d.ts +1 -0
- package/components/header/HeaderButton.js +1 -1
- package/components/header/HeaderButton.js.map +1 -1
- package/components/header/HeaderContext.d.ts +22 -0
- package/components/header/HeaderContext.js +2 -0
- package/components/header/HeaderContext.js.map +1 -0
- package/components/header/HeaderLanguageSelect.js.map +1 -1
- package/components/header/HeaderLogo.d.ts +1 -1
- package/components/header/HeaderLogo.js +1 -1
- package/components/header/HeaderLogo.js.map +1 -1
- package/components/header/HeaderNavigationHero.d.ts +1 -1
- package/components/header/HeaderNavigationHero.js +1 -1
- package/components/header/HeaderNavigationHero.js.map +1 -1
- package/components/header/HeaderNavigationLink.d.ts +1 -0
- package/components/header/HeaderNavigationLink.js +1 -1
- package/components/header/HeaderNavigationLink.js.map +1 -1
- package/components/header/HeaderNavigationMenu.js +1 -1
- package/components/header/HeaderNavigationMenu.js.map +1 -1
- package/components/header/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/components/label/Label.js +1 -1
- package/components/label/Label.js.map +1 -1
- package/components/notification/NotificationCenterHeaderButton.d.ts +1 -1
- package/components/playPauseButton/PlayPauseButton.d.ts +1 -1
- package/components/promptBar/PromptAttachments.js +1 -1
- package/components/promptBar/PromptAttachments.js.map +1 -1
- package/components/promptBar/PromptSubmitIconButton.d.ts +1 -1
- package/components/promptBar/PromptSubmitIconButton.js +1 -1
- package/components/promptBar/PromptSubmitIconButton.js.map +1 -1
- package/components/quickLink/QuickLink.js +1 -1
- package/components/quickLink/QuickLink.js.map +1 -1
- package/components/search/Search.js +1 -1
- package/components/search/Search.js.map +1 -1
- package/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/components/skodaThemeProvider/SkodaThemeProvider.js +1 -1
- package/components/skodaThemeProvider/SkodaThemeProvider.js.map +1 -1
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.d.ts +1 -2
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.js +1 -1
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.js.map +1 -1
- package/components/textAndCta/AppStoreButton.js +1 -1
- package/components/textAndCta/AppStoreButton.js.map +1 -1
- package/components/textAndCta/TextAndCta.d.ts +1 -1
- package/components/tooltipHeader/TooltipHeader.d.ts +2 -1
- package/components/upload/Upload.d.ts +1 -1
- package/components/upload/components/uploadList/UploadListItem.d.ts +1 -1
- package/components/upload/components/uploadPreview/UploadPreviewImage.d.ts +1 -1
- package/components/upload/components/uploadWrapper/UploadContent.d.ts +2 -2
- package/components/upload/components/uploadWrapper/UploadWrapper.d.ts +1 -1
- package/index.js +1 -1
- package/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/materialui/badge/badge.theme.js +1 -1
- package/materialui/badge/badge.theme.js.map +1 -1
- package/materialui/button/button.theme.js.map +1 -1
- package/materialui/button/buttonBase.theme.js +1 -1
- package/materialui/button/buttonBase.theme.js.map +1 -1
- package/materialui/dialog/DialogTitle.js +1 -1
- package/materialui/dialog/DialogTitle.js.map +1 -1
- package/materialui/slider/SliderValues.d.ts +5 -0
- package/materialui/slider/SliderValues.js +1 -1
- package/materialui/slider/SliderValues.js.map +1 -1
- package/materialui/stepper/StepLabelIcon.d.ts +1 -1
- package/materialui/stepper/StepLabelIcon.js +1 -1
- package/materialui/stepper/StepLabelIcon.js.map +1 -1
- package/materialui/table/stories/actions.d.ts +1 -1
- package/materialui/table/stories/basic.d.ts +1 -1
- package/materialui/table/stories/interactive.d.ts +1 -1
- package/materialui/table/stories/pagination.d.ts +3 -3
- package/materialui/table/stories/scrollbar.d.ts +1 -1
- package/materialui/table/stories/selectSort.d.ts +1 -1
- package/materialui/table/stories/small.d.ts +1 -1
- package/materialui/table/tablePagination.theme.js +1 -1
- package/materialui/table/tablePagination.theme.js.map +1 -1
- package/materialui/tabs/TabPanel.d.ts +2 -2
- package/materialui/tabs/TabsScrollButton.d.ts +1 -1
- package/materialui/tabs/tabs.theme.js +1 -1
- package/materialui/tabs/tabs.theme.js.map +1 -1
- package/materialui/textfield/inputBase.theme.js +1 -1
- package/materialui/textfield/inputBase.theme.js.map +1 -1
- package/materialui/textfield/inputLabel.theme.js +1 -1
- package/materialui/textfield/inputLabel.theme.js.map +1 -1
- package/materialui/theme/theme.extensions.d.ts +1 -1
- package/materialui/themeProvider/baseline.theme.js +1 -1
- package/materialui/themeProvider/baseline.theme.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n IconButtonProps,\n SwipeableDrawer,\n SwipeableDrawerProps,\n IconButton,\n Typography,\n TypographyProps,\n useTheme,\n SvgIconProps,\n PaperProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingBoxShadow } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' | 'onOpen' | 'title'> {\n /**\n * Open state component flag\n */\n open: boolean;\n /**\n * Open state component function\n */\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n /**\n * Flag for displaying close button\n */\n closeButton?: boolean;\n /**\n * Props applied to closeButton IconButton\n */\n closeButtonProps?: Partial<IconButtonProps>;\n /**\n * Props applied to Icon in closeButton\n */\n closeButtonIconProps?: SvgIconProps;\n /**\n * Icon node to be used\n */\n CloseButtonIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Flag for displaying bar that visualizes pulling function\n */\n puller?: boolean;\n /**\n * Props applied to wrapper of puller\n */\n pullerWrapperProps?: BoxProps<ElementType>;\n /**\n * Props applied to puller\n */\n pullerProps?: BoxProps<ElementType>;\n /**\n * Footer children slot\n */\n footerSlot?: React.ReactNode;\n /**\n * Text in header\n */\n title?: React.ReactNode;\n /**\n * Text props\n */\n titleProps?: TypographyProps<ElementType>;\n /**\n * Max height of whole component in percentages\n * @default 60\n */\n maxHeight?: number;\n /**\n * Wrapper of header\n */\n headerWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of title and close button\n */\n titleWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of content\n */\n contentWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of footer\n */\n footerWrapper?: BoxProps<ElementType>;\n}\n\nexport const BottomSheet: React.FC<BottomSheetProps> = forwardRef(\n (\n {\n children,\n open,\n setOpen,\n slotProps,\n puller,\n pullerWrapperProps,\n pullerProps,\n closeButton,\n closeButtonProps,\n closeButtonIconProps,\n CloseButtonIconComponent,\n footerSlot,\n title,\n titleProps = {},\n headerWrapper,\n titleWrapper,\n contentWrapper,\n footerWrapper,\n maxHeight = 60,\n ...rest\n },\n ref,\n ) => {\n const { sx: headerSx, ...restHeader } = headerWrapper ?? {};\n const { sx: titleWrapperSx, ...restTitleWrapper } = titleWrapper ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: pullerWrapperSx, ...restPullerWrapper } = pullerWrapperProps ?? {};\n const { sx: pullerSx, ...restPuller } = pullerProps ?? {};\n const { sx: closeButtonSx, ...restCloseButton } = closeButtonProps ?? {};\n const { sx: contentSx, ...restContent } = contentWrapper ?? {};\n const { sx: footerSx, ...restFooter } = footerWrapper ?? {};\n const theme = useTheme();\n const BottomSheetCloseButtonIcon = CloseButtonIconComponent || CloseIcon;\n\n const { isScrollable, elementRef } = useElementScrollable('y');\n\n return (\n <SwipeableDrawer\n dir={theme.direction}\n anchor=\"bottom\"\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n disableSwipeToOpen\n ModalProps={{\n keepMounted: true,\n }}\n data-testid=\"BottomSheet\"\n slotProps={{\n ...slotProps,\n paper: {\n ...slotProps?.paper,\n sx: {\n boxShadow: 'none',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n maxHeight: `${maxHeight}%`,\n ...(slotProps?.paper as PaperProps)?.sx,\n },\n },\n }}\n ref={ref}\n {...rest}\n >\n {(title || closeButton || puller) && (\n <Box sx={sxOverride({ px: 2 }, headerSx)} data-testid=\"BottomSheet-header\" {...restHeader}>\n {puller && (\n <Box\n sx={sxOverride(\n {\n position: 'relative',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n pullerWrapperSx,\n )}\n {...restPullerWrapper}\n >\n <Box\n data-testid=\"BottomSheet-puller\"\n sx={sxOverride(\n {\n width: '28px',\n height: '4px',\n backgroundColor: 'onSurface.os500',\n mt: 1,\n mb: 1.5,\n borderRadius: '8px',\n },\n pullerSx,\n )}\n {...restPuller}\n />\n </Box>\n )}\n {(title || (closeButton && !puller)) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n justifyContent: title ? 'space-between' : 'flex-end',\n alignItems: 'flex-start',\n gap: 1,\n pt: isScrollable && puller ? 1 : 0,\n },\n titleWrapperSx,\n )}\n {...restTitleWrapper}\n >\n {title && (\n <Typography\n data-testid=\"BottomSheet-title\"\n variant=\"h4\"\n component=\"h2\"\n sx={sxOverride(\n {\n mt: puller ? 0 : 2,\n mb: isScrollable ? 2 : 0,\n overflow: 'hidden',\n },\n titleSx,\n )}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {closeButton && !puller && (\n <IconButton\n data-testid=\"BottomSheet-closeButton\"\n size=\"medium\"\n onClick={() => setOpen(false)}\n aria-label=\"Close bottom sheet\"\n sx={sxOverride(\n {\n my: '4px',\n mr: '-6px',\n },\n closeButtonSx,\n )}\n {...restCloseButton}\n >\n <BottomSheetCloseButtonIcon {...closeButtonIconProps} />\n </IconButton>\n )}\n </Box>\n )}\n </Box>\n )}\n <Box\n data-testid=\"BottomSheet-content\"\n ref={elementRef}\n sx={sxOverride(\n {\n overflow: 'auto',\n borderTop: isScrollable ? 1 : 0,\n borderBottom: isScrollable && footerSlot ? 1 : 0,\n borderColor: 'surface.secondary',\n p: 2,\n // can be focused since scrollable\n '&:focus-visible': {\n outline: 'none',\n boxShadow: getFocusRingBoxShadow(theme, true),\n },\n },\n contentSx,\n )}\n {...restContent}\n >\n {children}\n </Box>\n {footerSlot && (\n <Box\n data-testid=\"BottomSheet-footer\"\n sx={sxOverride(\n {\n px: 2,\n pt: 3,\n pb: 2,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexDirection: 'column',\n gap: '16px',\n },\n footerSx,\n )}\n {...restFooter}\n >\n {footerSlot}\n </Box>\n )}\n </SwipeableDrawer>\n );\n },\n);\n"],"names":["BottomSheet","forwardRef","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","ref","sx","headerSx","restHeader","titleWrapperSx","restTitleWrapper","titleSx","restTitle","pullerWrapperSx","restPullerWrapper","pullerSx","restPuller","closeButtonSx","restCloseButton","contentSx","restContent","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","boxShadow","borderTopLeftRadius","borderTopRightRadius","Box","sxOverride","px","_jsx","position","display","flexDirection","justifyContent","alignItems","width","height","backgroundColor","mt","mb","borderRadius","gap","pt","Typography","variant","component","overflow","IconButton","size","onClick","my","mr","borderTop","borderBottom","borderColor","p","outline","getFocusRingBoxShadow","pb"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n IconButtonProps,\n SwipeableDrawer,\n SwipeableDrawerProps,\n IconButton,\n Typography,\n TypographyProps,\n useTheme,\n SvgIconProps,\n PaperProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingBoxShadow } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' | 'onOpen' | 'title'> {\n /**\n * Open state component flag\n */\n open: boolean;\n /**\n * Open state component function\n */\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n /**\n * Flag for displaying close button\n */\n closeButton?: boolean;\n /**\n * Props applied to closeButton IconButton\n */\n closeButtonProps?: Partial<IconButtonProps>;\n /**\n * Props applied to Icon in closeButton\n */\n closeButtonIconProps?: SvgIconProps;\n /**\n * Icon node to be used\n */\n CloseButtonIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Flag for displaying bar that visualizes pulling function\n */\n puller?: boolean;\n /**\n * Props applied to wrapper of puller\n */\n pullerWrapperProps?: BoxProps<ElementType>;\n /**\n * Props applied to puller\n */\n pullerProps?: BoxProps<ElementType>;\n /**\n * Footer children slot\n */\n footerSlot?: React.ReactNode;\n /**\n * Text in header\n */\n title?: React.ReactNode;\n /**\n * Text props\n */\n titleProps?: TypographyProps<ElementType>;\n /**\n * Max height of whole component in percentages\n * @default 60\n */\n maxHeight?: number;\n /**\n * Wrapper of header\n */\n headerWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of title and close button\n */\n titleWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of content\n */\n contentWrapper?: BoxProps<ElementType>;\n /**\n * Wrapper of footer\n */\n footerWrapper?: BoxProps<ElementType>;\n}\n\n/**\n * Implementation of bottom Drawer with preset layout\n */\nexport const BottomSheet: React.FC<BottomSheetProps> = forwardRef(\n (\n {\n children,\n open,\n setOpen,\n slotProps,\n puller,\n pullerWrapperProps,\n pullerProps,\n closeButton,\n closeButtonProps,\n closeButtonIconProps,\n CloseButtonIconComponent,\n footerSlot,\n title,\n titleProps = {},\n headerWrapper,\n titleWrapper,\n contentWrapper,\n footerWrapper,\n maxHeight = 60,\n ...rest\n },\n ref,\n ) => {\n const { sx: headerSx, ...restHeader } = headerWrapper ?? {};\n const { sx: titleWrapperSx, ...restTitleWrapper } = titleWrapper ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: pullerWrapperSx, ...restPullerWrapper } = pullerWrapperProps ?? {};\n const { sx: pullerSx, ...restPuller } = pullerProps ?? {};\n const { sx: closeButtonSx, ...restCloseButton } = closeButtonProps ?? {};\n const { sx: contentSx, ...restContent } = contentWrapper ?? {};\n const { sx: footerSx, ...restFooter } = footerWrapper ?? {};\n const theme = useTheme();\n const BottomSheetCloseButtonIcon = CloseButtonIconComponent || CloseIcon;\n\n const { isScrollable, elementRef } = useElementScrollable('y');\n\n return (\n <SwipeableDrawer\n dir={theme.direction}\n anchor=\"bottom\"\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n disableSwipeToOpen\n ModalProps={{\n keepMounted: true,\n }}\n data-testid=\"BottomSheet\"\n slotProps={{\n ...slotProps,\n paper: {\n ...slotProps?.paper,\n sx: {\n boxShadow: 'none',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n maxHeight: `${maxHeight}%`,\n ...(slotProps?.paper as PaperProps)?.sx,\n },\n },\n }}\n ref={ref}\n {...rest}\n >\n {(title || closeButton || puller) && (\n <Box sx={sxOverride({ px: 2 }, headerSx)} data-testid=\"BottomSheet-header\" {...restHeader}>\n {puller && (\n <Box\n sx={sxOverride(\n {\n position: 'relative',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n pullerWrapperSx,\n )}\n {...restPullerWrapper}\n >\n <Box\n data-testid=\"BottomSheet-puller\"\n sx={sxOverride(\n {\n width: '28px',\n height: '4px',\n backgroundColor: 'onSurface.os500',\n mt: 1,\n mb: 1.5,\n borderRadius: '8px',\n },\n pullerSx,\n )}\n {...restPuller}\n />\n </Box>\n )}\n {(title || (closeButton && !puller)) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n justifyContent: title ? 'space-between' : 'flex-end',\n alignItems: 'flex-start',\n gap: 1,\n pt: isScrollable && puller ? 1 : 0,\n },\n titleWrapperSx,\n )}\n {...restTitleWrapper}\n >\n {title && (\n <Typography\n data-testid=\"BottomSheet-title\"\n variant=\"h4\"\n component=\"h2\"\n sx={sxOverride(\n {\n mt: puller ? 0 : 2,\n mb: isScrollable ? 2 : 0,\n overflow: 'hidden',\n },\n titleSx,\n )}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {closeButton && !puller && (\n <IconButton\n data-testid=\"BottomSheet-closeButton\"\n size=\"medium\"\n onClick={() => setOpen(false)}\n aria-label=\"Close bottom sheet\"\n sx={sxOverride(\n {\n my: '4px',\n mr: '-6px',\n },\n closeButtonSx,\n )}\n {...restCloseButton}\n >\n <BottomSheetCloseButtonIcon {...closeButtonIconProps} />\n </IconButton>\n )}\n </Box>\n )}\n </Box>\n )}\n <Box\n data-testid=\"BottomSheet-content\"\n ref={elementRef}\n sx={sxOverride(\n {\n overflow: 'auto',\n borderTop: isScrollable ? 1 : 0,\n borderBottom: isScrollable && footerSlot ? 1 : 0,\n borderColor: 'surface.secondary',\n p: 2,\n // can be focused since scrollable\n '&:focus-visible': {\n outline: 'none',\n boxShadow: getFocusRingBoxShadow(theme, true),\n },\n },\n contentSx,\n )}\n {...restContent}\n >\n {children}\n </Box>\n {footerSlot && (\n <Box\n data-testid=\"BottomSheet-footer\"\n sx={sxOverride(\n {\n px: 2,\n pt: 3,\n pb: 2,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexDirection: 'column',\n gap: '16px',\n },\n footerSx,\n )}\n {...restFooter}\n >\n {footerSlot}\n </Box>\n )}\n </SwipeableDrawer>\n );\n },\n);\n"],"names":["BottomSheet","forwardRef","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","ref","sx","headerSx","restHeader","titleWrapperSx","restTitleWrapper","titleSx","restTitle","pullerWrapperSx","restPullerWrapper","pullerSx","restPuller","closeButtonSx","restCloseButton","contentSx","restContent","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","boxShadow","borderTopLeftRadius","borderTopRightRadius","Box","sxOverride","px","_jsx","position","display","flexDirection","justifyContent","alignItems","width","height","backgroundColor","mt","mb","borderRadius","gap","pt","Typography","variant","component","overflow","IconButton","size","onClick","my","mr","borderTop","borderBottom","borderColor","p","outline","getFocusRingBoxShadow","pb"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
2
|
import { Swiper as CarouselInstance } from 'swiper';
|
|
3
|
-
import { PlayPauseButtonProps } from '
|
|
4
|
-
import { SpinnerProps } from '
|
|
3
|
+
import { PlayPauseButtonProps } from '../playPauseButton/PlayPauseButton';
|
|
4
|
+
import { SpinnerProps } from '../progress/Spinner';
|
|
5
5
|
export interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' | 'position'> {
|
|
6
6
|
/**
|
|
7
7
|
* Optional Carousel instance from useCarouselInstance hook
|
|
@@ -19,7 +19,7 @@ export interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children'
|
|
|
19
19
|
/**
|
|
20
20
|
* Spinner with autoplay progress value
|
|
21
21
|
*/
|
|
22
|
-
export declare const CarouselAutoplayProgress: ({ carousel: carouselProp, sx, spinnerProps, position, ...rest }: CarouselAutoplayProgressProps) => import("react
|
|
22
|
+
export declare const CarouselAutoplayProgress: ({ carousel: carouselProp, sx, spinnerProps, position, ...rest }: CarouselAutoplayProgressProps) => import("react").JSX.Element;
|
|
23
23
|
export interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseButtonProps>, 'aria-label'> {
|
|
24
24
|
/**
|
|
25
25
|
* Optional Carousel instance from useCarouselInstance hook
|
|
@@ -34,4 +34,4 @@ export interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseB
|
|
|
34
34
|
/**
|
|
35
35
|
* IconButton controlling play/paused state of the autoplay
|
|
36
36
|
*/
|
|
37
|
-
export declare function CarouselAutoplayIconButton({ carousel: carouselProp, 'aria-label': ariaLabel, ...rest }: CarouselAutoplayIconButtonProps): import("react
|
|
37
|
+
export declare function CarouselAutoplayIconButton({ carousel: carouselProp, 'aria-label': ariaLabel, ...rest }: CarouselAutoplayIconButtonProps): import("react").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
1
|
+
import React, { ComponentType } from 'react';
|
|
2
2
|
import { IconButtonProps, SvgIconProps } from '@mui/material';
|
|
3
3
|
import type { Swiper as CarouselInstance } from 'swiper';
|
|
4
4
|
export interface CarouselNavigationProps {
|
|
@@ -54,4 +54,4 @@ export interface CarouselNavigationProps {
|
|
|
54
54
|
/**
|
|
55
55
|
* Left & Right navigation arrows
|
|
56
56
|
*/
|
|
57
|
-
export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, autoHideNavigation, }: CarouselNavigationProps):
|
|
57
|
+
export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, autoHideNavigation, }: CarouselNavigationProps): React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{useCarousel as n,useCarouselPeekEffect as s}from"./hooks.js";import{useTheme as i,useMediaQuery as a,IconButton as c}from"@mui/material";import{ChevronLeftIcon as l}from"../icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as p}from"../icon/stroke/ChevronRightIcon.js";import{ArrowLeftIcon as d}from"../icon/stroke/ArrowLeftIcon.js";import{ArrowRightIcon as m}from"../icon/stroke/ArrowRightIcon.js";import{getInteractiveStyle as x}from"../../materialui/button/interactive.js";import{sxOverride as u}from"../../utils/sxOverride/sxOverride.js";function f({carousel:f,peekEffect:b=!1,prevButtonProps:v,prevIconProps:k,PrevIconComponent:I,nextButtonProps:g,nextIconProps:h,NextIconComponent:C,arrows:j=!0,onBackground:P=!1,autoHideNavigation:y=!1}){const M=n(),E=f||M,L="fade"!==E?.params?.effect&&b,w=i(),B=a(w.breakpoints.up("md")),{sx:N,...S}=v||{},{sx:z,...A}=g||{},[O,R]=s(E),H=I||(j?d:l),q=C||(j?m:p),D=t(()=>({position:"absolute",zIndex:"100",top:"50%",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},mt:{xs:"-16px",md:"-20px",xl:"-22px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}},...x({color:"text.primary",borderColor:P?"transparent":"onSurface.os100",backgroundColor:P?"transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:P?"transparent":"disabled.secondary",backgroundColor:P?"transparent":"disabled.secondary"}}),[]);return y&&E?.isLocked?null:o(r,{children:[e(c,{disabled:E&&!E.params?.loop&&E.isBeginning,onClick:()=>{E?.slidePrev(),L&&O&&R("reset")},onMouseEnter:()=>B&&L&&R("prev"),onMouseLeave:()=>L&&O&&R("reset"),sx:u({...D,insetInlineStart:"16px"},N),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...S,children:"rtl"===w.direction?e(q,{...k}):e(H,{...k})}),e(c,{disabled:E&&!E.params?.loop&&E.isEnd,onClick:()=>{E?.slideNext(),L&&O&&R("reset")},onMouseEnter:()=>B&&L&&R("next"),onMouseLeave:()=>L&&O&&R("reset"),sx:u({...D,insetInlineEnd:"16px"},z),"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...A,children:"rtl"===w.direction?e(H,{...h}):e(q,{...h})})]})}export{f as CarouselNavigation};
|
|
2
2
|
//# sourceMappingURL=Navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface CarouselNavigationProps {\n /**\n * Optional Carousel instance from useCarouselInstance hook\n */\n carousel?: CarouselInstance;\n /**\n * Enable/disable peek effect on hover\n * @default: false\n */\n peekEffect?: boolean;\n /**\n * Previous Slide IconButton\n */\n prevButtonProps?: Partial<IconButtonProps>;\n /**\n * Previous icon props\n */\n prevIconProps?: SvgIconProps;\n /**\n * Previous icon node\n */\n PrevIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Next Slide IconButton\n */\n nextButtonProps?: Partial<IconButtonProps>;\n /**\n * Previous icon props\n */\n nextIconProps?: SvgIconProps;\n /**\n * Next icon node\n */\n NextIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Replaces Chevrons with Arrows\n * @default true\n */\n arrows?: boolean;\n /**\n * Enable if placing on a plain background (not on top of an image/video)\n * @default false\n */\n onBackground?: boolean;\n /**\n * Hide navigation buttons on case there are not enough slides for sliding\n * @default false\n */\n autoHideNavigation?: boolean;\n}\n\n/**\n * Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n carousel: carouselProp,\n peekEffect: propPeekEffect = false,\n prevButtonProps,\n prevIconProps,\n PrevIconComponent,\n nextButtonProps,\n nextIconProps,\n NextIconComponent,\n arrows = true,\n onBackground = false,\n autoHideNavigation = false,\n}: CarouselNavigationProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp || carouselHook;\n const peekEffect = carousel?.params?.effect !== 'fade' && propPeekEffect;\n const theme = useTheme();\n const upMD = useMediaQuery(theme.breakpoints.up('md'));\n const { sx: prevSx, ...restPrev } = prevButtonProps || {};\n const { sx: nextSx, ...restNext } = nextButtonProps || {};\n const [peek, setPeek] = useCarouselPeekEffect(carousel);\n const PrevIcon = PrevIconComponent || (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n const NextIcon = NextIconComponent || (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n // shared style between buttons\n const sharedSx = useMemo(\n () => ({\n // absolute inside the carousel position\n position: 'absolute',\n zIndex: '100',\n top: '50%',\n // responsive\n width: { xs: '32px', md: '40px', xl: '44px' },\n height: { xs: '32px', md: '40px', xl: '44px' },\n // manual v-align, half the icon size\n mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n '& .MuiSvgIcon-root': {\n fontSize: { xs: '17px', xl: '20px' },\n },\n // highlight border\n ...getInteractiveStyle(\n {\n color: 'text.primary',\n borderColor: onBackground ? 'transparent
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface CarouselNavigationProps {\n /**\n * Optional Carousel instance from useCarouselInstance hook\n */\n carousel?: CarouselInstance;\n /**\n * Enable/disable peek effect on hover\n * @default: false\n */\n peekEffect?: boolean;\n /**\n * Previous Slide IconButton\n */\n prevButtonProps?: Partial<IconButtonProps>;\n /**\n * Previous icon props\n */\n prevIconProps?: SvgIconProps;\n /**\n * Previous icon node\n */\n PrevIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Next Slide IconButton\n */\n nextButtonProps?: Partial<IconButtonProps>;\n /**\n * Previous icon props\n */\n nextIconProps?: SvgIconProps;\n /**\n * Next icon node\n */\n NextIconComponent?: ComponentType<SvgIconProps>;\n /**\n * Replaces Chevrons with Arrows\n * @default true\n */\n arrows?: boolean;\n /**\n * Enable if placing on a plain background (not on top of an image/video)\n * @default false\n */\n onBackground?: boolean;\n /**\n * Hide navigation buttons on case there are not enough slides for sliding\n * @default false\n */\n autoHideNavigation?: boolean;\n}\n\n/**\n * Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n carousel: carouselProp,\n peekEffect: propPeekEffect = false,\n prevButtonProps,\n prevIconProps,\n PrevIconComponent,\n nextButtonProps,\n nextIconProps,\n NextIconComponent,\n arrows = true,\n onBackground = false,\n autoHideNavigation = false,\n}: CarouselNavigationProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp || carouselHook;\n const peekEffect = carousel?.params?.effect !== 'fade' && propPeekEffect;\n const theme = useTheme();\n const upMD = useMediaQuery(theme.breakpoints.up('md'));\n const { sx: prevSx, ...restPrev } = prevButtonProps || {};\n const { sx: nextSx, ...restNext } = nextButtonProps || {};\n const [peek, setPeek] = useCarouselPeekEffect(carousel);\n const PrevIcon = PrevIconComponent || (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n const NextIcon = NextIconComponent || (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n // shared style between buttons\n const sharedSx = useMemo(\n () => ({\n // absolute inside the carousel position\n position: 'absolute',\n zIndex: '100',\n top: '50%',\n // responsive\n width: { xs: '32px', md: '40px', xl: '44px' },\n height: { xs: '32px', md: '40px', xl: '44px' },\n // manual v-align, half the icon size\n mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n '& .MuiSvgIcon-root': {\n fontSize: { xs: '17px', xl: '20px' },\n },\n // highlight border\n ...getInteractiveStyle(\n {\n color: 'text.primary',\n borderColor: onBackground ? 'transparent' : 'onSurface.os100',\n backgroundColor: onBackground ? 'transparent' : 'surface.primary',\n },\n {\n backgroundColor: 'surface.secondary',\n },\n ),\n // disabled state\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n borderColor: onBackground ? 'transparent' : 'disabled.secondary',\n backgroundColor: onBackground ? 'transparent' : 'disabled.secondary',\n },\n }),\n [],\n );\n\n // hide navigation when not needed\n if (autoHideNavigation && carousel?.isLocked) {\n return null;\n }\n return (\n <>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isBeginning}\n onClick={() => {\n carousel?.slidePrev();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineStart: '16px',\n },\n prevSx,\n )}\n aria-label=\"Previous slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n size=\"medium\"\n {...restPrev}\n >\n {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n </IconButton>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isEnd}\n onClick={() => {\n carousel?.slideNext();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineEnd: '16px',\n },\n nextSx,\n )}\n aria-label=\"Next slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n {...restNext}\n >\n {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n </IconButton>\n </>\n );\n}\n"],"names":["CarouselNavigation","carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","sxOverride","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"opBAiEgBA,GACdC,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,IACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,IACRC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAgBC,GAC1DC,EAAWzB,IAAsBC,EAASyB,EAAiBC,GAG3DC,EAAWC,EACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,EACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,cAAgB,kBAC5CyC,gBAAiBzC,EAAe,cAAgB,mBAElD,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,cAAgB,qBAC5CyC,gBAAiBzC,EAAe,cAAgB,wBAGpD,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,eACEC,EAACC,GACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACH4B,iBAAkB,QAEpBzC,GACD,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNgB,KAAK,YACDzC,EAAQ0C,SAES,QAApBlD,EAAMmD,UAAsBb,EAACrB,EAAQ,IAAK7B,IAAoBkD,EAACxB,EAAQ,IAAK1B,MAE/EkD,EAACC,EAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAASqE,MACzDT,QAAS,KACP5D,GAAUsE,YACVpE,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,EACF,IACK3B,EACHkC,eAAgB,QAElB7C,GACD,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,EAAQwC,SAES,QAApBlD,EAAMmD,UAAsBb,EAACxB,EAAQ,IAAKvB,IAAoB+C,EAACrB,EAAQ,IAAK1B,QAIrF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Code.js","sources":["../../../src/components/code/Code.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface CodeProps extends BoxProps<'code'> {}\n\n/**\n * Inline or block code rendered as a styled `<code>` element\n */\nexport const Code: React.FC<CodeProps> = forwardRef((props, ref) => <Box ref={ref} component=\"code\" {...props} />);\n"],"names":["Code","forwardRef","props","ref","_jsx","Box","component"],"mappings":"+GAQO,MAAMA,EAA4BC,EAAW,CAACC,EAAOC,IAAQC,EAACC,EAAG,CAACF,IAAKA,EAAKG,UAAU,UAAWJ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Code';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r,Typography as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r,Typography as s}from"@mui/material";import{forwardRef as o}from"react";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const n=o(({sx:o,children:n,status:a,message:c,actions:d,description:l,stacktrace:p,statusProps:m,messageProps:x,descriptionProps:f,actionsProps:h,stacktraceProps:u,...g},C)=>{const{sx:y,...v}=h??{},{sx:E,...P}=u??{};return t(r,{sx:i({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:{xs:2,md:4},textAlign:"center",margin:"0 auto",width:"600px",maxWidth:"100%",p:2},o),ref:C,...g,children:[a&&e(s,{component:"h1",variant:"display","data-testid":"ErrorContent.status",...m,children:a}),c&&e(s,{component:"h2",variant:"h3","data-testid":"ErrorContent.message",...x,children:c}),l&&e(s,{"data-testid":"ErrorContent.description",...f,children:l}),n,d&&e(r,{sx:i({display:"flex",gap:1,flexDirection:{xs:"column",md:"row"},alignItems:{xs:"stretch",md:"center"},justifyContent:"center"},y),"data-testid":"ErrorContent.actions",...v,children:d}),p&&e(r,{component:"code",sx:i({display:"block",border:1,borderColor:"divider",overflow:"auto",py:1,px:2,borderRadius:"8px",textAlign:"left",alignSelf:"stretch"},E),"data-testid":"ErrorContent.stacktrace",...P,children:p})]})});export{n as ErrorContent};
|
|
2
2
|
//# sourceMappingURL=ErrorContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorContent.js","sources":["../../../src/components/errorContent/ErrorContent.tsx"],"sourcesContent":["import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ErrorContentProps extends BoxProps<ElementType> {\n /**\n * Error Status code, eg. 404 or 500\n */\n status?: ReactNode;\n /**\n * Short message describing the error\n */\n message?: ReactNode;\n /**\n * Longer description of the error\n */\n description?: ReactNode;\n /**\n * Actions that user can interact with\n */\n actions?: ReactNode;\n /**\n * Stacktrace of an error\n */\n stacktrace?: ReactNode;\n /**\n * Properties passed to status code\n */\n statusProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to message\n */\n messageProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to description\n */\n descriptionProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to wrapper of actions\n */\n actionsProps?: BoxProps<ElementType>;\n /**\n * Properties passed to code stacktrace\n */\n stacktraceProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders an information about error\n */\nexport const ErrorContent: FC<ErrorContentProps> = forwardRef(\n (\n {\n sx,\n children,\n status,\n message,\n actions,\n description,\n stacktrace,\n statusProps,\n messageProps,\n descriptionProps,\n actionsProps,\n stacktraceProps,\n ...rest\n },\n ref,\n ) => {\n const { sx: actionsSx, ...restActions } = actionsProps ?? {};\n const { sx: stacktraceSx, ...restStacktrace } = stacktraceProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: { xs: 2, md: 4 },\n textAlign: 'center',\n margin: '0 auto',\n width: '600px',\n maxWidth: '100%',\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {status && (\n <Typography component=\"h1\" variant=\"display\" data-testid=\"ErrorContent.status\" {...statusProps}>\n {status}\n </Typography>\n )}\n {message && (\n <Typography component=\"h2\" variant=\"h3\" data-testid=\"ErrorContent.message\" {...messageProps}>\n {message}\n </Typography>\n )}\n {description && (\n <Typography data-testid=\"ErrorContent.description\" {...descriptionProps}>\n {description}\n </Typography>\n )}\n {children}\n {actions && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n gap: 1,\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'stretch', md: 'center' },\n justifyContent: 'center',\n },\n actionsSx,\n )}\n data-testid=\"ErrorContent.actions\"\n {...restActions}\n >\n {actions}\n </Box>\n )}\n {stacktrace && (\n <Box\n component=\"code\"\n sx={sxOverride(\n {\n display: 'block',\n border: 1,\n borderColor: 'divider',\n
|
|
1
|
+
{"version":3,"file":"ErrorContent.js","sources":["../../../src/components/errorContent/ErrorContent.tsx"],"sourcesContent":["import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport React, { ElementType, FC, forwardRef, ReactNode } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface ErrorContentProps extends BoxProps<ElementType> {\n /**\n * Error Status code, eg. 404 or 500\n */\n status?: ReactNode;\n /**\n * Short message describing the error\n */\n message?: ReactNode;\n /**\n * Longer description of the error\n */\n description?: ReactNode;\n /**\n * Actions that user can interact with\n */\n actions?: ReactNode;\n /**\n * Stacktrace of an error\n */\n stacktrace?: ReactNode;\n /**\n * Properties passed to status code\n */\n statusProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to message\n */\n messageProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to description\n */\n descriptionProps?: TypographyProps<ElementType>;\n /**\n * Properties passed to wrapper of actions\n */\n actionsProps?: BoxProps<ElementType>;\n /**\n * Properties passed to code stacktrace\n */\n stacktraceProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders an information about error\n */\nexport const ErrorContent: FC<ErrorContentProps> = forwardRef(\n (\n {\n sx,\n children,\n status,\n message,\n actions,\n description,\n stacktrace,\n statusProps,\n messageProps,\n descriptionProps,\n actionsProps,\n stacktraceProps,\n ...rest\n },\n ref,\n ) => {\n const { sx: actionsSx, ...restActions } = actionsProps ?? {};\n const { sx: stacktraceSx, ...restStacktrace } = stacktraceProps ?? {};\n\n return (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n gap: { xs: 2, md: 4 },\n textAlign: 'center',\n margin: '0 auto',\n width: '600px',\n maxWidth: '100%',\n p: 2,\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {status && (\n <Typography component=\"h1\" variant=\"display\" data-testid=\"ErrorContent.status\" {...statusProps}>\n {status}\n </Typography>\n )}\n {message && (\n <Typography component=\"h2\" variant=\"h3\" data-testid=\"ErrorContent.message\" {...messageProps}>\n {message}\n </Typography>\n )}\n {description && (\n <Typography data-testid=\"ErrorContent.description\" {...descriptionProps}>\n {description}\n </Typography>\n )}\n {children}\n {actions && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n gap: 1,\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'stretch', md: 'center' },\n justifyContent: 'center',\n },\n actionsSx,\n )}\n data-testid=\"ErrorContent.actions\"\n {...restActions}\n >\n {actions}\n </Box>\n )}\n {stacktrace && (\n <Box\n component=\"code\"\n sx={sxOverride(\n {\n display: 'block',\n border: 1,\n borderColor: 'divider',\n overflow: 'auto',\n py: 1,\n px: 2,\n borderRadius: '8px',\n textAlign: 'left',\n alignSelf: 'stretch',\n },\n stacktraceSx,\n )}\n data-testid=\"ErrorContent.stacktrace\"\n {...restStacktrace}\n >\n {stacktrace}\n </Box>\n )}\n </Box>\n );\n },\n);\n"],"names":["ErrorContent","forwardRef","sx","children","status","message","actions","description","stacktrace","statusProps","messageProps","descriptionProps","actionsProps","stacktraceProps","rest","ref","actionsSx","restActions","stacktraceSx","restStacktrace","_jsxs","Box","sxOverride","display","flexDirection","alignItems","justifyContent","gap","xs","md","textAlign","margin","width","maxWidth","p","_jsx","Typography","component","variant","border","borderColor","overflow","py","px","borderRadius","alignSelf"],"mappings":"2MAkDO,MAAMA,EAAsCC,EACjD,EAEIC,KACAC,WACAC,SACAC,UACAC,UACAC,cACAC,aACAC,cACAC,eACAC,mBACAC,eACAC,qBACGC,GAELC,KAEA,MAAQb,GAAIc,KAAcC,GAAgBL,GAAgB,CAAA,GAClDV,GAAIgB,KAAiBC,GAAmBN,GAAmB,CAAA,EAEnE,OACEO,EAACC,GACCnB,GAAIoB,EACF,CACEC,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,eAAgB,SAChBC,IAAK,CAAEC,GAAI,EAAGC,GAAI,GAClBC,UAAW,SACXC,OAAQ,SACRC,MAAO,QACPC,SAAU,OACVC,EAAG,GAELhC,GAEFa,IAAKA,KACDD,EAAIX,SAAA,CAEPC,GACC+B,EAACC,EAAU,CAACC,UAAU,KAAKC,QAAQ,UAAS,cAAa,yBAA0B7B,EAAWN,SAC3FC,IAGJC,GACC8B,EAACC,GAAWC,UAAU,KAAKC,QAAQ,KAAI,cAAa,0BAA2B5B,EAAYP,SACxFE,IAGJE,GACC4B,EAACC,EAAU,CAAA,cAAa,8BAA+BzB,EAAgBR,SACpEI,IAGJJ,EACAG,GACC6B,EAACd,GACCnB,GAAIoB,EACF,CACEC,QAAS,OACTI,IAAK,EACLH,cAAe,CAAEI,GAAI,SAAUC,GAAI,OACnCJ,WAAY,CAAEG,GAAI,UAAWC,GAAI,UACjCH,eAAgB,UAElBV,GACD,cACW,0BACRC,EAAWd,SAEdG,IAGJE,GACC2B,EAACd,EAAG,CACFgB,UAAU,OACVnC,GAAIoB,EACF,CACEC,QAAS,QACTgB,OAAQ,EACRC,YAAa,UACbC,SAAU,OACVC,GAAI,EACJC,GAAI,EACJC,aAAc,MACdd,UAAW,OACXe,UAAW,WAEb3B,GACD,cACW,6BACRC,EAAchB,SAEjBK"}
|
|
@@ -3,6 +3,6 @@ import { IconButtonProps } from '@mui/material';
|
|
|
3
3
|
export interface FooterIconButtonProps extends IconButtonProps<ElementType> {
|
|
4
4
|
}
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* IconButton for the footer, can be used for social media
|
|
7
7
|
*/
|
|
8
8
|
export declare const FooterIconButton: FC<FooterIconButtonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterIconButton.js","sources":["../../../src/components/footer/FooterIconButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport { IconButton, IconButtonProps } from '@mui/material';\n\nexport interface FooterIconButtonProps extends IconButtonProps<ElementType> {}\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"FooterIconButton.js","sources":["../../../src/components/footer/FooterIconButton.tsx"],"sourcesContent":["import React, { ElementType, FC, ForwardedRef, forwardRef } from 'react';\nimport { IconButton, IconButtonProps } from '@mui/material';\n\nexport interface FooterIconButtonProps extends IconButtonProps<ElementType> {}\n\n/**\n * IconButton for the footer, can be used for social media\n */\nexport const FooterIconButton: FC<FooterIconButtonProps> = forwardRef(({ children, ...rest }, ref) => {\n return (\n <IconButton\n size=\"medium\"\n color=\"white\"\n ref={ref as ForwardedRef<HTMLButtonElement>}\n data-testid=\"FooterIconButton\"\n {...rest}\n >\n {children}\n </IconButton>\n );\n});\n"],"names":["FooterIconButton","forwardRef","children","rest","ref","_jsx","IconButton","size","color"],"mappings":"sHAQO,MAAMA,EAA8CC,EAAW,EAAGC,cAAaC,GAAQC,IAE1FC,EAACC,EAAU,CACTC,KAAK,SACLC,MAAM,QACNJ,IAAKA,EAAsC,cAC/B,sBACRD,EAAID,SAEPA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as t}from"react";import{FooterAccordion as e}from"./FooterAccordion.js";import{FooterMenuCollapse as n}from"./FooterMenuCollapse.js";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";const i=r(({sx:r,children:i,label:s,accordionSummaryProps:c,contentProps:d,variant:p="auto",...l},u)=>{const{sx:m,...x}=d??{},{sx:f,...y}=c??{},b=o=>"list"===p?"&":o.breakpoints.up("lg"),[g,h]=t(!1);return o(e,{ref:u,"data-testid":"FooterMenu",expanded:"list"===p||g,onChange:(o,r)=>h(r),variant:"standard",..."auto"===p&&{slots:{transition:n}},sx:a(o=>({flexBasis:{lg:"20%"},borderColor:"onSurface.os700",..."accordion"!==p&&{[b(o)]:{border:"none"}}}),r),accordionSummaryProps:{"data-testid":"FooterMenu.label",sx:a(o=>({padding:"14px 0","& .MuiLink-root":{...o.typography.subheadline,p:0,"&, &:hover":{textDecoration:"none",color:"common.white"}},..."accordion"!==p&&{[b(o)]:{padding:"18px 0 8px",overflow:"visible","&&:not(.Mui-disabled)":{cursor:"unset"},"& .MuiAccordionSummary-expandIconWrapper":{display:"none"}}}}),f),...y},label:s,contentProps:{component:"div","data-testid":"FooterMenu.content",sx:a(o=>({display:"flex",alignItems:"flex-start",justifyContent:"flex-start",flexDirection:"column",gap:1.5,"& .MuiLink-root":{...o.typography.caption2,p:0,"&, &:hover":{textDecoration:"none",color:"onSurface.os200"}}}),m),...x},...l,children:i})});export{i as FooterMenu};
|
|
2
2
|
//# sourceMappingURL=FooterMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme
|
|
1
|
+
{"version":3,"file":"FooterMenu.js","sources":["../../../src/components/footer/FooterMenu.tsx"],"sourcesContent":["import React, { FC, forwardRef, useState } from 'react';\nimport { Theme } from '@mui/material';\nimport { FooterAccordion, FooterAccordionProps } from './FooterAccordion';\nimport { FooterMenuCollapse } from './FooterMenuCollapse';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface FooterMenuProps extends Omit<FooterAccordionProps, 'variant' | 'children'> {\n /**\n * Items in the menu\n */\n children?: React.ReactNode;\n /**\n * Variant of the menu\n * - auto: renders on large resolution as list and on mobile as accordion\n * - list: renders as list with title\n * - accordion: renders as collapsible accordion\n * @default auto\n */\n variant?: 'auto' | 'list' | 'accordion';\n}\n\n/**\n * Section for the secondary links, copyright and optional button\n */\nexport const FooterMenu: FC<FooterMenuProps> = forwardRef(\n ({ sx, children, label, accordionSummaryProps, contentProps, variant = 'auto', ...rest }, ref) => {\n const { sx: contentSx, ...restContent } = contentProps ?? {};\n const { sx: accSummarySx, ...restAccSummary } = accordionSummaryProps ?? {};\n // variant is static, so no media query is needed (renders correctly during pre-render);\n // for auto, the desktop \"list\" look is applied from the lg breakpoint up, always for list\n const listLookSelector = (theme: Theme) => (variant === 'list' ? '&' : theme.breakpoints.up('lg'));\n const [expanded, setExpanded] = useState(false);\n\n return (\n <FooterAccordion\n ref={ref}\n data-testid=\"FooterMenu\"\n expanded={variant === 'list' ? true : expanded}\n onChange={(_, v) => setExpanded(v)}\n variant=\"standard\"\n {...(variant === 'auto' && { slots: { transition: FooterMenuCollapse } })}\n sx={sxOverride(\n (theme) => ({\n // spacing in the FooterSectionMenu, take max 1/5 of space\n flexBasis: { lg: '20%' },\n borderColor: 'onSurface.os700',\n ...(variant !== 'accordion' && {\n [listLookSelector(theme)]: { border: 'none' },\n }),\n }),\n sx,\n )}\n accordionSummaryProps={{\n ['data-testid']: 'FooterMenu.label',\n sx: sxOverride(\n (theme) => ({\n // adjust proportions\n padding: '14px 0',\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.subheadline,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'common.white',\n },\n },\n // non-collapsible \"list\" appearance (always for list, desktop+ for auto)\n ...(variant !== 'accordion' && {\n [listLookSelector(theme)]: {\n // adjust proportions to be closer to menu\n padding: '18px 0 8px',\n // allow overflow of focus ring\n overflow: 'visible',\n // no longer clickable\n '&&:not(.Mui-disabled)': {\n cursor: 'unset',\n },\n // hide icon\n '& .MuiAccordionSummary-expandIconWrapper': {\n display: 'none',\n },\n },\n }),\n }),\n accSummarySx,\n ),\n ...restAccSummary,\n }}\n label={label}\n contentProps={{\n component: 'div',\n ['data-testid']: 'FooterMenu.content',\n sx: sxOverride(\n (theme) => ({\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexDirection: 'column',\n gap: 1.5,\n // manipulates style of links inside\n '& .MuiLink-root': {\n ...theme.typography.caption2,\n p: 0,\n '&, &:hover': {\n textDecoration: 'none',\n color: 'onSurface.os200',\n },\n },\n }),\n contentSx,\n ),\n ...restContent,\n }}\n {...rest}\n >\n {children}\n </FooterAccordion>\n );\n },\n);\n"],"names":["FooterMenu","forwardRef","sx","children","label","accordionSummaryProps","contentProps","variant","rest","ref","contentSx","restContent","accSummarySx","restAccSummary","listLookSelector","theme","breakpoints","up","expanded","setExpanded","useState","_jsx","FooterAccordion","onChange","_","v","slots","transition","FooterMenuCollapse","sxOverride","flexBasis","lg","borderColor","border","padding","typography","subheadline","p","textDecoration","color","overflow","cursor","display","component","alignItems","justifyContent","flexDirection","gap","caption2"],"mappings":"+QAwBO,MAAMA,EAAkCC,EAC7C,EAAGC,KAAIC,WAAUC,QAAOC,wBAAuBC,eAAcC,UAAU,UAAWC,GAAQC,KACxF,MAAQP,GAAIQ,KAAcC,GAAgBL,GAAgB,CAAA,GAClDJ,GAAIU,KAAiBC,GAAmBR,GAAyB,CAAA,EAGnES,EAAoBC,GAA8B,SAAZR,EAAqB,IAAMQ,EAAMC,YAAYC,GAAG,OACrFC,EAAUC,GAAeC,GAAS,GAEzC,OACEC,EAACC,EAAe,CACdb,IAAKA,EAAG,cACI,aACZS,SAAsB,SAAZX,GAA4BW,EACtCK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChClB,QAAQ,cACS,SAAZA,GAAsB,CAAEmB,MAAO,CAAEC,WAAYC,IAClD1B,GAAI2B,EACDd,IAAK,CAEJe,UAAW,CAAEC,GAAI,OACjBC,YAAa,qBACG,cAAZzB,GAA2B,CAC7B,CAACO,EAAiBC,IAAS,CAAEkB,OAAQ,WAGzC/B,GAEFG,sBAAuB,CACrB,cAAiB,mBACjBH,GAAI2B,EACDd,IAAK,CAEJmB,QAAS,SAET,kBAAmB,IACdnB,EAAMoB,WAAWC,YACpBC,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,oBAIK,cAAZhC,GAA2B,CAC7B,CAACO,EAAiBC,IAAS,CAEzBmB,QAAS,aAETM,SAAU,UAEV,wBAAyB,CACvBC,OAAQ,SAGV,2CAA4C,CAC1CC,QAAS,YAKjB9B,MAECC,GAELT,MAAOA,EACPE,aAAc,CACZqC,UAAW,MACX,cAAiB,qBACjBzC,GAAI2B,EACDd,IAAK,CACJ2B,QAAS,OACTE,WAAY,aACZC,eAAgB,aAChBC,cAAe,SACfC,IAAK,IAEL,kBAAmB,IACdhC,EAAMoB,WAAWa,SACpBX,EAAG,EACH,aAAc,CACZC,eAAgB,OAChBC,MAAO,sBAIb7B,MAECC,MAEDH,EAAIL,SAEPA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ElementType, FC, ReactNode } from 'react';
|
|
2
|
+
import { BoxProps } from '@mui/material';
|
|
3
|
+
export interface FooterMenuCollapseProps extends BoxProps<ElementType> {
|
|
4
|
+
/**
|
|
5
|
+
* Expanded state, provided by the Accordion transition slot
|
|
6
|
+
*/
|
|
7
|
+
in?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Transition duration in ms, 0 disables the animation (provided by the transition slot)
|
|
10
|
+
*/
|
|
11
|
+
timeout?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Ignored owner state forwarded by the transition slot
|
|
14
|
+
*/
|
|
15
|
+
ownerState?: unknown;
|
|
16
|
+
/**
|
|
17
|
+
* Collapsible content
|
|
18
|
+
*/
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* CSS-only collapse used as the Accordion transition slot, so auto footer menus render
|
|
23
|
+
* expanded from desktop up without a JS media query (renders correctly during pre-render)
|
|
24
|
+
*/
|
|
25
|
+
export declare const FooterMenuCollapse: FC<FooterMenuCollapseProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as t}from"@mui/material";import{sxOverride as i}from"../../utils/sxOverride/sxOverride.js";const a=e(({in:e,timeout:a,sx:o,children:d,ownerState:n,...s},m)=>r(t,{ref:m,"data-expanded":`${!!e}`,sx:i(r=>({display:"grid",gridTemplateRows:"0fr",transition:r.transitions.create("grid-template-rows",{duration:"number"==typeof a?a:r.transitions.duration.standard}),'&[data-expanded="true"]':{gridTemplateRows:"1fr"},"& > *":{minHeight:"0",overflow:"hidden"},[r.breakpoints.up("lg")]:{gridTemplateRows:"1fr"}}),o),...s,children:d}));export{a as FooterMenuCollapse};
|
|
2
|
+
//# sourceMappingURL=FooterMenuCollapse.js.map
|
|
@@ -0,0 +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":"iLA2BO,MAAMA,EAAkDC,EAC7D,EAAGC,GAAIC,EAAUC,UAASC,KAAIC,WAAUC,WAAYC,KAAgBC,GAAQC,IAC1EC,EAACC,GACCF,IAAKA,EAAG,gBACO,KAAKP,IACpBE,GAAIQ,EACDC,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,5 +1,6 @@
|
|
|
1
1
|
import { FC, ReactNode, ElementType } from 'react';
|
|
2
|
-
import { AppBarProps, BoxProps, DrawerProps, ToolbarProps } from '@mui/material';
|
|
2
|
+
import { AppBarProps, BoxProps, Breakpoint, DrawerProps, Theme, ToolbarProps } from '@mui/material';
|
|
3
|
+
import { SystemStyleObject } from '@mui/system';
|
|
3
4
|
import { HeaderButtonProps } from './HeaderButton';
|
|
4
5
|
export interface HeaderProps extends Omit<AppBarProps, 'color'> {
|
|
5
6
|
/**
|
|
@@ -22,9 +23,14 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
|
|
|
22
23
|
/**
|
|
23
24
|
* Controls if mobile version of Header should be shown, this collapses children into mobile menu
|
|
24
25
|
*
|
|
25
|
-
* @default undefined, leads to usage
|
|
26
|
+
* @default undefined, leads to usage of breakpoint media query
|
|
26
27
|
*/
|
|
27
28
|
mobile?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Breakpoint at which Header collapses into mobile menu, number is treated as px value
|
|
31
|
+
* @default 'lg'
|
|
32
|
+
*/
|
|
33
|
+
breakpoint?: Breakpoint | number;
|
|
28
34
|
/**
|
|
29
35
|
* Controls open/close state of mobile menu
|
|
30
36
|
*/
|
|
@@ -53,6 +59,10 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
|
|
|
53
59
|
* Properties applied to button wrapper
|
|
54
60
|
*/
|
|
55
61
|
buttonsProps?: BoxProps<ElementType>;
|
|
62
|
+
/**
|
|
63
|
+
* Properties applied to wrapper of buttons that collapse into drawer, rendered only with visibleButtons
|
|
64
|
+
*/
|
|
65
|
+
collapsibleButtonsProps?: BoxProps<ElementType>;
|
|
56
66
|
/**
|
|
57
67
|
* Properties applied to hamburger menu
|
|
58
68
|
*/
|
|
@@ -70,6 +80,10 @@ export interface HeaderProps extends Omit<AppBarProps, 'color'> {
|
|
|
70
80
|
*/
|
|
71
81
|
drawerProps?: DrawerProps;
|
|
72
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* Picks desktop or mobile styles, explicit mobile value wins over breakpoint media queries
|
|
85
|
+
*/
|
|
86
|
+
export declare function variantSx(theme: Theme, mobile: boolean | undefined, breakpoint: Breakpoint | number, desktop: SystemStyleObject<Theme>, mobileStyles: SystemStyleObject<Theme>): SystemStyleObject<Theme>;
|
|
73
87
|
/**
|
|
74
88
|
* Component to render Header with navigation and action buttons at the top of the page
|
|
75
89
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as
|
|
1
|
+
import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as s,Children as n,isValidElement as i,Fragment as l}from"react";import{sxOverride as a}from"../../utils/sxOverride/sxOverride.js";import{useTheme as d,AppBar as p,Toolbar as c,Box as m,Drawer as x}from"@mui/material";import{MenuIcon as u}from"../icon/stroke/MenuIcon.js";import{CloseIcon as f}from"../icon/stroke/CloseIcon.js";import{getFocusRingStyle as b}from"../focusring/focusring.js";import{HeaderButton as h}from"./HeaderButton.js";import{HeaderContext as g,headerDesktopContext as y,headerMobileContext as v}from"./HeaderContext.js";function k(e,o,t,r,s){return void 0===o?{[e.breakpoints.down(t)]:s,[e.breakpoints.up(t)]:r}:o?s:r}function P(e){return n.toArray(e).some(e=>!i(e)||e.type!==l||P(e.props.children))}const j=r(({children:r,logo:n,buttons:i,visibleButtons:l,mobile:j,open:C,setOpen:I,inContainer:H=!1,breakpoint:w="lg",toolbarProps:B,logoProps:M,contentProps:S,mobileContentProps:F,buttonsProps:O,collapsibleButtonsProps:T,menuButtonProps:z,menuIcon:A,closeMenuIcon:G,drawerProps:D,...E},L)=>{const R=d(),{sx:V,...W}=M??{},{sx:$,...q}=S??{},{sx:J,...K}=F??{},{sx:N,...Q}=O??{},{sx:U,...X}=T??{},{sx:Y,...Z}=z??{},{sx:_,slotProps:ee,...oe}=D??{},{paper:te,backdrop:re,...se}=ee??{},{sx:ne,...ie}=te??{},{sx:le,...ae}=re??{},[de,pe]=s(!1),ce=C??de,me=I??pe,xe=P(r),ue=P(i),fe=!0!==l&&P(l),be=!!l&&ue,he=!1!==j&&(xe||be);return e(o,{children:[t(p,{ref:L,"data-testid":"Header",...E,children:t(g.Provider,{value:y,children:e(c,{disableGutters:!H,...B,children:[n&&t(m,{"data-testid":"Header.logo",sx:a({color:"dark"===R.palette.mode?"brand.secondary":"brand.tertiary",flexShrink:"0",display:"flex",alignItems:"center",justifyContent:"flex-start","& .MuiLink-root":{display:"block",position:"relative",py:1,...b(R),"&.Mui-focusVisible":{boxShadow:"none"}},"& .MuiSvgIcon-root":{display:"block"}},V),...W,children:n}),t(m,{sx:a({minWidth:"0",flexGrow:"1",alignSelf:"stretch",...k(R,j,w,{display:"flex",...n&&{pl:4}},{display:"none"}),alignItems:"stretch",justifyContent:"flex-start",gap:{xs:2,xl:4},mb:"-1px"},$),"data-testid":"Header.nav",...q,children:r}),(fe||ue||he)&&e(m,{sx:a({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:.25,ml:"auto",...k(R,j,w,{mr:0},{mr:-1})},N),"data-testid":"Header.btns",...Q,children:[!0!==l&&l,l?ue&&t(m,{sx:a({...k(R,j,w,{display:"contents"},{display:"none"})},U),"data-testid":"Header.collapsiblebtns",...X,children:i}):i,he&&t(h,{"aria-label":"Toggle menu",extend:!1,onClick:()=>me(e=>!e),sx:a(ce?{display:"inline-flex"}:k(R,j,w,{display:"none"},{display:"inline-flex"}),Y),...Z,children:ce?G||t(f,{}):A||t(u,{})},"menu")]})]})})}),he&&t(x,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,anchor:"top",open:ce,onClose:()=>me(!1),sx:a({zIndex:R.zIndex.appBar-10,top:R.mixins.toolbar.minHeight,bottom:"auto",height:`calc(100vh - ${R.mixins.toolbar.minHeight})`,position:"absolute"},_),slotProps:{backdrop:{sx:a({position:"absolute"},le),...ae},paper:{sx:a({position:"absolute",height:"100%",display:"grid",gridTemplateRows:"auto max-content"},ne),...ie},...se},...oe,children:e(g.Provider,{value:v,children:[t(m,{sx:a({p:2,overflow:"auto"},J),"data-testid":"Header.mobilenav",...K,children:r}),be&&t(m,{sx:{p:2,pt:0},children:t(m,{sx:{pt:.75,display:"flex",flexDirection:"column-reverse",alignItems:"stretch",justifyContent:"flex-start",borderTop:1,borderColor:"dark"===R.palette.mode?"onSurface.os700":"surface.secondary"},children:i})})]})})]})});export{j as Header,k as variantSx};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.tsx"],"sourcesContent":["import React, {\n FC,\n useState,\n forwardRef,\n ReactNode,\n ElementType,\n Children,\n cloneElement,\n useMemo,\n Fragment,\n isValidElement,\n} from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport {\n AppBar,\n AppBarProps,\n BackdropProps,\n Box,\n BoxProps,\n Drawer,\n DrawerProps,\n PaperProps,\n Toolbar,\n ToolbarProps,\n useMediaQuery,\n useTheme,\n} from '@mui/material';\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 { HeaderLanguageSelect } from './HeaderLanguageSelect';\nimport { HeaderNavigationLink } from './HeaderNavigationLink';\nimport { HeaderNavigationHero } from './HeaderNavigationHero';\nimport { HeaderNavigationMenu } from './HeaderNavigationMenu';\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 useMediaQuery(theme.breakpoints.down('lg'))\n */\n mobile?: boolean;\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 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 * 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: propMobile,\n open: propOpen,\n setOpen: propSetOpen,\n inContainer = false,\n toolbarProps,\n logoProps,\n contentProps,\n mobileContentProps,\n buttonsProps,\n menuButtonProps,\n menuIcon,\n closeMenuIcon,\n drawerProps,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const downLg = useMediaQuery(theme.breakpoints.down('lg'));\n // determine if mobile condition is controlled or default downLg\n const mobile = propMobile === undefined ? downLg : propMobile;\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: 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 /**\n * Process child nodes\n */\n const [processedChildren, processedButtons, drawerButtons] = useMemo(() => {\n function flatten(nodes, extend, keyid) {\n const result = [];\n Children.forEach(nodes, (child, idx) => {\n if (child?.type === Fragment) {\n result.push(...flatten(child.props.children, extend, `${keyid}-n`));\n } else if (\n isValidElement(child) &&\n [\n HeaderButton,\n HeaderLanguageSelect,\n HeaderNavigationLink,\n HeaderNavigationHero,\n HeaderNavigationMenu,\n ].includes(child?.type as FC) &&\n extend\n ) {\n result.push(\n cloneElement(child, {\n extend: true,\n key: `${keyid}-${idx}`,\n } as HeaderButtonProps),\n );\n } else {\n if (typeof child === 'string') {\n result.push(child);\n } else {\n result.push(cloneElement(child, { key: `${keyid}-${idx}` }));\n }\n }\n });\n return result?.length ? result : undefined;\n }\n\n const flattenedChildren = flatten(children, mobile, 'children');\n // check if we have visibleButtons property\n if (visibleButtons) {\n const flattenedVisibleButtons =\n visibleButtons === true ? undefined : flatten(visibleButtons, false, 'visibleButtons');\n const flattenedRestButtons = flatten(buttons, mobile, 'restButton');\n // mobile\n if (mobile) {\n // split visible buttons and put buttons in drawer\n return [flattenedChildren, flattenedVisibleButtons, flattenedRestButtons];\n } else {\n // on PC, all buttons are visible\n return [flattenedChildren, [...(flattenedVisibleButtons || []), ...(flattenedRestButtons || [])], undefined];\n }\n } else {\n // in case visibleButtons property is not provided, do not put buttons into drawer at all\n return [flattenedChildren, flatten(buttons, false, 'buttons'), undefined];\n }\n }, [children, visibleButtons, buttons, mobile]);\n\n return (\n <>\n <AppBar ref={ref} data-testid=\"Header\" {...rest}>\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 display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'flex-start',\n gap: { lg: 2, xl: 4 },\n ...(!mobile &&\n logo && {\n // increase size between logo and nav\n pl: 4,\n }),\n // move directly into border\n mb: '-1px',\n },\n contentSx,\n )}\n data-testid=\"Header.nav\"\n {...restContent}\n >\n {!mobile && processedChildren}\n </Box>\n {(processedButtons || (mobile && (processedChildren || drawerButtons))) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 0.25,\n mr: { xs: -1, lg: 0 },\n },\n buttonsSx,\n )}\n data-testid=\"Header.btns\"\n {...restButtons}\n >\n {processedButtons}\n {mobile && (processedChildren || drawerButtons) && (\n <HeaderButton\n key=\"menu\"\n aria-label=\"Toggle menu\"\n extend={false}\n onClick={() => setOpen((prev: boolean) => !prev)}\n {...menuButtonProps}\n >\n {open ? closeMenuIcon || <CloseIcon /> : menuIcon || <MenuIcon />}\n </HeaderButton>\n )}\n </Box>\n )}\n </Toolbar>\n </AppBar>\n {mobile && (processedChildren || drawerButtons) && (\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 <Box\n sx={sxOverride(\n {\n p: 2,\n overflow: 'auto',\n },\n mobileContentSx,\n )}\n data-testid=\"Header.mobilenav\"\n {...restMobileContent}\n >\n {processedChildren}\n </Box>\n {drawerButtons && (\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 {drawerButtons}\n </Box>\n </Box>\n )}\n </Drawer>\n )}\n </>\n );\n },\n);\n"],"names":["Header","forwardRef","children","logo","buttons","visibleButtons","mobile","propMobile","open","propOpen","setOpen","propSetOpen","inContainer","toolbarProps","logoProps","contentProps","mobileContentProps","buttonsProps","menuButtonProps","menuIcon","closeMenuIcon","drawerProps","rest","ref","theme","useTheme","downLg","useMediaQuery","breakpoints","down","undefined","sx","logoSx","restLogo","contentSx","restContent","mobileContentSx","restMobileContent","buttonsSx","restButtons","drawerSx","slotProps","drawerSlotProps","restDrawer","paper","drawerPaperProps","backdrop","drawerBackdropProps","restDrawerSlotProps","drawerPaperSx","restDrawerPaper","drawerBackdropSx","restDrawerBackdrop","rawOpen","rawSetOpen","useState","processedChildren","processedButtons","drawerButtons","useMemo","flatten","nodes","extend","keyid","result","Children","forEach","child","idx","type","Fragment","push","props","isValidElement","HeaderButton","HeaderLanguageSelect","HeaderNavigationLink","HeaderNavigationHero","HeaderNavigationMenu","includes","cloneElement","key","length","flattenedChildren","flattenedVisibleButtons","flattenedRestButtons","_jsxs","_Fragment","_jsx","AppBar","Toolbar","disableGutters","Box","sxOverride","color","palette","mode","flexShrink","display","alignItems","justifyContent","position","py","getFocusRingStyle","boxShadow","minWidth","flexGrow","alignSelf","gap","lg","xl","pl","mb","mr","xs","onClick","prev","CloseIcon","MenuIcon","Drawer","disablePortal","disableEnforceFocus","disableAutoFocus","anchor","onClose","zIndex","appBar","top","mixins","toolbar","minHeight","bottom","height","gridTemplateRows","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, ...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,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{useTheme as i,ButtonBase as o,Badge as s,Tooltip as n,IconButton as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{useTheme as i,ButtonBase as o,Badge as s,Tooltip as n,IconButton as d}from"@mui/material";import{getFocusRingStyle as a}from"../focusring/focusring.js";import{getInteractiveStyle as l}from"../../materialui/button/interactive.js";import{sxOverride as m}from"../../utils/sxOverride/sxOverride.js";import{useHeaderContext as p}from"./HeaderContext.js";const f=r(({children:r,sx:f,label:c,extend:u,tooltipProps:x,badgeProps:g,...h},b)=>{const j=i(),y=p(),v=u??y?.extend,{title:H,...z}=x??{};return v?t(o,{sx:m({...j.typography.list,display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1.25,py:1.5,px:1.25,"& .MuiSvgIcon-root":{fontSize:"17px"},"&.Mui-disabled":{color:"disabled.tertiary"},...l({fontWeight:"300"},{fontWeight:"700"}),...a(j),"&&:before":{borderRadius:"4px"}},f),ref:b,"data-testid":"HeaderButton",...h,children:[e(s,{...g,children:r}),c||H]}):e(n,{title:c||H,...z,children:e(d,{sx:f,size:"medium",ref:b,"data-testid":"HeaderButton",...h,children:e(s,{...g,children:r})})})});export{f as HeaderButton};
|
|
2
2
|
//# sourceMappingURL=HeaderButton.js.map
|