@skodaflow/web-library 8.3.0 → 8.3.1
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.js +1 -1
- package/cjs/components/header/Header.js.map +1 -1
- package/cjs/components/header/HeaderLogo.d.ts +1 -1
- package/cjs/components/header/HeaderNavigationHero.d.ts +1 -1
- package/cjs/components/header/HeaderNavigationHero.js.map +1 -1
- package/cjs/components/header/HeaderNavigationLink.js +1 -1
- package/cjs/components/header/HeaderNavigationLink.js.map +1 -1
- 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/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/badge/badge.theme.js +1 -1
- package/cjs/materialui/badge/badge.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/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.js +1 -1
- package/components/header/Header.js.map +1 -1
- package/components/header/HeaderLogo.d.ts +1 -1
- package/components/header/HeaderNavigationHero.d.ts +1 -1
- package/components/header/HeaderNavigationHero.js.map +1 -1
- package/components/header/HeaderNavigationLink.js +1 -1
- package/components/header/HeaderNavigationLink.js.map +1 -1
- 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/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/badge/badge.theme.js +1 -1
- package/materialui/badge/badge.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/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,6 +1,21 @@
|
|
|
1
1
|
import { BoxProps, CSSObject, Theme } from '@mui/material';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export declare const agGridStyles: (theme: Theme) => CSSObject;
|
|
4
|
+
/**
|
|
5
|
+
* Pre-configured SkodaFlow AG Grid props.
|
|
6
|
+
*
|
|
7
|
+
* Note: the AG Grid `theme` is intentionally NOT provided here. Building the theme requires
|
|
8
|
+
* imports from `ag-grid-community` (`themeQuartz`, `iconOverrides`), which we do not want to pull
|
|
9
|
+
* in as a direct dependency of the library. The consuming project should build the theme with the
|
|
10
|
+
* exported `skodaAgThemeParams` and `skodaAgGridIconOverrides` helpers and pass it to `AgGridReact`.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useSkodaAgGridProps: () => {
|
|
13
|
+
domLayout: "autoHeight";
|
|
14
|
+
animateRows: boolean;
|
|
15
|
+
suppressDragLeaveHidesColumns: boolean;
|
|
16
|
+
enableRtl: boolean;
|
|
17
|
+
enableCellTextSelection: boolean;
|
|
18
|
+
};
|
|
4
19
|
interface SkodaAgGridProviderProps extends BoxProps {
|
|
5
20
|
}
|
|
6
21
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var a=require("react/jsx-runtime"),e=require("@mui/material"),
|
|
1
|
+
"use strict";var a=require("react/jsx-runtime"),e=require("@mui/material"),r=require("react"),o=require("./agGridVariables.js"),i=require("./agGridSkodaTheme.js"),t=require("./agGridIcons.js"),n=require("../../utils/sxOverride/sxOverride.js");const g=a=>{const e=i.skodaAgThemeParams(a);return{width:"100%","*":{maxWidth:"none"},'&:not(:has([class*="ag-theme-params-"])),&.ag-theme-material':{...o.agGridVariables(a)},".ag-row-last":{borderBottom:"none"},".ag-column-last .ag-header-cell-resize":{display:"none"},..."ltr"===a.direction&&{".ag-center-cols-container":{minWidth:"100%"}},".ag-center-cols-viewport":{minHeight:"56px"},"& .ag-header-cell .ag-header-cell-text":{fontWeight:`${e.headerFontWeight}`},"& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden":{display:"block !important",cursor:"initial"},"& .ag-pinned-left-header .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden, & .ag-pinned-right-header .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden":{display:"none !important"},"@supports selector(::-webkit-scrollbar)":{"& .ag-body-horizontal-scroll":{alignItems:"center",borderTop:"1px solid",borderTopColor:a.palette.surface.secondary,maxHeight:"none !important",height:"auto !important"},"& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport":{height:"48px !important",maxHeight:"48px !important",minHeight:"48px !important"},"& .ag-body-horizontal-scroll-viewport::-webkit-scrollbar:horizontal":{height:"48px"},"& .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal, & .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track:horizontal":{borderWidth:"22px"},"& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport":{height:"0 !important",maxHeight:"0 !important",minHeight:"0 !important",overflow:"hidden"},"& .ag-body-horizontal-scroll .ag-horizontal-left-spacer, & .ag-body-horizontal-scroll .ag-horizontal-right-spacer":{overflow:"hidden"}},"& .ag-paging-panel":{justifyContent:"center",px:"24px"},"& .ag-paging-panel .ag-paging-page-size":{position:"absolute"},"& .ag-paging-panel .ag-paging-page-summary-panel":{marginLeft:"auto"},"& .ag-paging-row-summary-panel":{display:"none"},"& .ag-paging-description":{fontSize:"18px",px:"18px"},"& .ag-paging-panel .ag-paging-description span":{color:"text.primary",px:"2px"},"& .ag-paging-panel .ag-paging-description .ag-paging-number":{fontWeight:"700"},"& .ag-paging-panel .ag-paging-description span:last-child":{fontWeight:"300"},"& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last":{display:"none"},"& .ag-paging-panel .ag-picker-field-wrapper":{border:"none",px:"0",cursor:"pointer",minWidth:"auto"},"& .ag-paging-panel .ag-picker-field-display":{minWidth:"28px",width:"auto",pr:"6px",fontSize:"18px",fontWeight:"700",textAlign:"center"},"& .ag-paging-panel .ag-label":{mr:"6px",fontSize:"18px"},"& .ag-popup > *":{backgroundColor:"onSurface.os0",cursor:"pointer",borderRadius:"0px"},"& .ag-selectable .ag-cell":{cursor:"auto"},"& .skoda-ag-row-pointer .ag-row:hover, & .skoda-ag-row-pointer .ag-row:hover .ag-cell":{cursor:"pointer"},...t.agGridCssIcons,"& .ag-icon-asc, & .ag-icon-desc":{color:a.palette.onSurface.os600},"& .ag-icon-asc:hover, & .ag-icon-desc:hover":{color:a.palette.text.primary},"& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)":{display:"inline-block !important"},fontFamily:e.fontFamily}},l=r.forwardRef(({sx:r,children:o,...i},t)=>a.jsx(e.Box,{sx:n.sxOverride(a=>({...g(a)}),r),ref:t,...i,children:o}));exports.SkodaAgGridProvider=l,exports.agGridStyles=g,exports.useSkodaAgGridProps=()=>({domLayout:"autoHeight",animateRows:!1,suppressDragLeaveHidesColumns:!0,enableRtl:"rtl"===e.useTheme().direction,enableCellTextSelection:!0});
|
|
2
2
|
//# sourceMappingURL=agGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agGrid.js","sources":["../../../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject, Theme } from '@mui/material';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons, agGridIconsDefinition } from './agGridIcons';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n const agTheme = skodaAgThemeParams(theme);\n\n return {\n width: '100%',\n // support applying global style on all elements maxWidth: '100%'\n '*': {\n maxWidth: 'none',\n },\n // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params-* class)\n '&:not(:has([class*=\"ag-theme-params-\"])),&.ag-theme-material': {\n ...agGridVariables(theme),\n },\n\n '.ag-row-last': { borderBottom: 'none' },\n '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n // Row lines full width\n '.ag-center-cols-container': {\n minWidth: '100%',\n },\n\n '.ag-center-cols-viewport': {\n // reduce to 1 row from default 150px\n minHeight: '56px',\n },\n\n // # Header styles\n '& .ag-header-cell .ag-header-cell-text': {\n fontWeight: `${agTheme.headerFontWeight}`,\n },\n\n // # Header Separators (only when column resizing is not activated and not for the last column)\n '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n display: 'block !important',\n cursor: 'initial',\n },\n\n // # Horizontal Scrollbar\n '& .ag-body-horizontal-scroll': {\n alignItems: 'center',\n px: '22px',\n borderTop: '1px solid',\n borderTopColor: theme.palette.surface.secondary,\n maxHeight: 'none !important',\n height: 'auto !important',\n },\n '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n mt: '16px',\n mb: '23px',\n },\n '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n my: 0,\n },\n\n // # Pagination styles\n '& .ag-paging-panel': {\n justifyContent: 'center',\n px: '24px',\n },\n\n // Pagination layout - rows per page centered, arrows right-aligned\n '& .ag-paging-panel .ag-paging-page-size': {\n position: 'absolute',\n },\n '& .ag-paging-panel .ag-paging-page-summary-panel': {\n marginLeft: 'auto',\n },\n\n // Disable pagination summary\n '& .ag-paging-row-summary-panel': {\n display: 'none',\n },\n\n // Text styling within pagination arrows\n '& .ag-paging-description': {\n fontSize: '18px',\n px: '18px',\n },\n '& .ag-paging-panel .ag-paging-description span': {\n color: 'text.primary',\n px: '2px',\n },\n '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n fontWeight: '700',\n },\n '& .ag-paging-panel .ag-paging-description span:last-child': {\n fontWeight: '300',\n },\n\n // Disable AG-grid pagination icons - start, end\n '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n display: 'none',\n },\n\n // Pagination - rows per page\n '& .ag-paging-panel .ag-picker-field-wrapper': {\n border: 'none',\n px: '0',\n cursor: 'pointer',\n minWidth: 'auto',\n },\n '& .ag-paging-panel .ag-picker-field-display': {\n minWidth: '28px',\n width: 'auto',\n pr: '6px',\n fontSize: '18px',\n fontWeight: '700',\n textAlign: 'center',\n },\n '& .ag-paging-panel .ag-label': {\n mr: '6px',\n fontSize: '18px',\n },\n\n '& .ag-popup > *': {\n backgroundColor: 'onSurface.os0',\n cursor: 'pointer',\n borderRadius: '0px',\n },\n\n // # Opt-in className=\"skoda-ag-pointer\"\n '& .skoda-ag-row-pointer .ag-row:hover': {\n cursor: 'pointer',\n },\n\n // Additional icons\n ...agGridCssIcons,\n\n // Show icons according to the SkodaFlow design\n '& .ag-icon-asc, & .ag-icon-desc': {\n color: theme.palette.onSurface.os600,\n },\n '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n color: theme.palette.text.primary,\n },\n '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n {\n display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n },\n\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n content: '\"\"',\n display: 'flex',\n width: '17px',\n height: '17px',\n maskSize: 'contain',\n maskRepeat: 'no-repeat',\n maskPosition: 'center',\n verticalAlign: 'middle',\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n },\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n },\n\n // Legacy class approach, no theme\n fontFamily: agTheme.fontFamily,\n };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/**\n * A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n return (\n <Box\n sx={sxOverride(\n (theme) => ({\n ...agGridStyles(theme),\n }),\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","width","maxWidth","agGridVariables","borderBottom","display","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","px","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","mt","mb","my","justifyContent","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","content","maskSize","maskRepeat","maskPosition","verticalAlign","maskImage","encodeURIComponent","agGridIconsDefinition","ascHover","svg","asc","fontFamily","SkodaAgGridProvider","forwardRef","sx","children","rest","ref","_jsx","Box","sxOverride"],"mappings":"mPAOO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,MAAO,CACLG,MAAO,OAEP,IAAK,CACHC,SAAU,QAGZ,+DAAgE,IAC3DC,EAAAA,gBAAgBL,IAGrB,eAAgB,CAAEM,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGT,EAAQU,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBhB,EAAMiB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAEV,mEAAoE,CAClEC,GAAI,OACJC,GAAI,QAEN,gFAAiF,CAC/EC,GAAI,GAIN,qBAAsB,CACpBC,eAAgB,SAChBX,GAAI,QAIN,0CAA2C,CACzCY,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVd,GAAI,QAEN,iDAAkD,CAChDe,MAAO,eACPf,GAAI,OAEN,8DAA+D,CAC7DJ,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEH,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRhB,GAAI,IACJF,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVL,MAAO,OACP4B,GAAI,MACJH,SAAU,OACVlB,WAAY,MACZsB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBtB,OAAQ,UACRuB,aAAc,OAIhB,wCAAyC,CACvCvB,OAAQ,cAIPwB,EAAAA,eAGH,kCAAmC,CACjCP,MAAO7B,EAAMiB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO7B,EAAMiB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,OACTJ,MAAO,OACPkB,OAAQ,OACRqB,SAAU,UACVC,WAAY,YACZC,aAAc,SACdC,cAAe,SACfC,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBC,SAASC,SAE9F,mEAAoE,CAClEJ,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBG,IAAID,SAIzFE,WAAYnD,EAAQmD,aASXC,EAA0DC,EAAAA,WAAW,EAAGC,KAAIC,cAAaC,GAAQC,IAE1GC,EAAAA,IAACC,EAAAA,IAAG,CACFL,GAAIM,EAAAA,WACD7D,IAAK,IACDD,EAAaC,KAElBuD,GAEFG,IAAKA,KACDD,EAAID,SAEPA"}
|
|
1
|
+
{"version":3,"file":"agGrid.js","sources":["../../../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject, Theme, useTheme } from '@mui/material';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons } from './agGridIcons';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n const agTheme = skodaAgThemeParams(theme);\n\n return {\n width: '100%',\n // support applying global style on all elements maxWidth: '100%'\n '*': {\n maxWidth: 'none',\n },\n // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params-* class)\n '&:not(:has([class*=\"ag-theme-params-\"])),&.ag-theme-material': {\n ...agGridVariables(theme),\n },\n\n '.ag-row-last': { borderBottom: 'none' },\n '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n // Row lines full width (not in RTL where it causes layout issues)\n ...(theme.direction === 'ltr' && {\n '.ag-center-cols-container': {\n minWidth: '100%',\n },\n }),\n\n '.ag-center-cols-viewport': {\n // reduce to 1 row from default 150px\n minHeight: '56px',\n },\n\n // # Header styles\n '& .ag-header-cell .ag-header-cell-text': {\n fontWeight: `${agTheme.headerFontWeight}`,\n },\n\n // # Header Separators (only when column resizing is not activated and not for the last column)\n '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n display: 'block !important', // beats AG Grid's .ag-hidden display: none !important\n cursor: 'initial',\n },\n // No separator on pinned columns - ag-column-last only marks the grid's last column, so the rule\n // above would otherwise force one onto them. The pinned section already has its own divider.\n '& .ag-pinned-left-header .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden, & .ag-pinned-right-header .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden':\n {\n display: 'none !important',\n },\n\n // # Horizontal Scrollbar\n // Webkit only: relies on ::-webkit-scrollbar. Firefox falls back to the baseline thin scrollbar.\n '@supports selector(::-webkit-scrollbar)': {\n '& .ag-body-horizontal-scroll': {\n alignItems: 'center',\n borderTop: '1px solid',\n borderTopColor: theme.palette.surface.secondary,\n maxHeight: 'none !important',\n height: 'auto !important',\n },\n // Tall scrollbar inset via the thumb/track border (like MuiTableContainer), so the viewport\n // keeps full width and the proxy stays in sync with the grid body. !important beats AG Grid's\n // inline height, which it pins to the ~8px scrollbar width.\n '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n // 4px visible bar + 2x 22px transparent margin\n height: '48px !important',\n maxHeight: '48px !important',\n minHeight: '48px !important',\n },\n '& .ag-body-horizontal-scroll-viewport::-webkit-scrollbar:horizontal': {\n height: '48px',\n },\n '& .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal, & .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track:horizontal':\n {\n borderWidth: '22px',\n },\n // No overflow: re-collapse the viewport, otherwise our !important height keeps a tall empty band.\n '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n height: '0 !important',\n maxHeight: '0 !important',\n minHeight: '0 !important',\n overflow: 'hidden',\n },\n // Hide the stray scrollbar the pinned spacers render via their own overflow-x: scroll.\n '& .ag-body-horizontal-scroll .ag-horizontal-left-spacer, & .ag-body-horizontal-scroll .ag-horizontal-right-spacer':\n {\n overflow: 'hidden',\n },\n },\n\n // # Pagination styles\n '& .ag-paging-panel': {\n justifyContent: 'center',\n px: '24px',\n },\n\n // Pagination layout - rows per page centered, arrows right-aligned\n '& .ag-paging-panel .ag-paging-page-size': {\n position: 'absolute',\n },\n '& .ag-paging-panel .ag-paging-page-summary-panel': {\n marginLeft: 'auto',\n },\n\n // Disable pagination summary\n '& .ag-paging-row-summary-panel': {\n display: 'none',\n },\n\n // Text styling within pagination arrows\n '& .ag-paging-description': {\n fontSize: '18px',\n px: '18px',\n },\n '& .ag-paging-panel .ag-paging-description span': {\n color: 'text.primary',\n px: '2px',\n },\n '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n fontWeight: '700',\n },\n '& .ag-paging-panel .ag-paging-description span:last-child': {\n fontWeight: '300',\n },\n\n // Disable AG-grid pagination icons - start, end\n '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n display: 'none',\n },\n\n // Pagination - rows per page\n '& .ag-paging-panel .ag-picker-field-wrapper': {\n border: 'none',\n px: '0',\n cursor: 'pointer',\n minWidth: 'auto',\n },\n '& .ag-paging-panel .ag-picker-field-display': {\n minWidth: '28px',\n width: 'auto',\n pr: '6px',\n fontSize: '18px',\n fontWeight: '700',\n textAlign: 'center',\n },\n '& .ag-paging-panel .ag-label': {\n mr: '6px',\n fontSize: '18px',\n },\n\n '& .ag-popup > *': {\n backgroundColor: 'onSurface.os0',\n cursor: 'pointer',\n borderRadius: '0px',\n },\n\n // Let the cursor reflect content (I-beam over text, default elsewhere) - AG Grid forces\n // cursor: default on the root. ag-selectable is present only when enableCellTextSelection is on.\n '& .ag-selectable .ag-cell': {\n cursor: 'auto',\n },\n\n // # Opt-in className=\"skoda-ag-pointer\"\n // Cell-level so it wins over the .ag-cell text cursor above (the cell sets its own cursor).\n '& .skoda-ag-row-pointer .ag-row:hover, & .skoda-ag-row-pointer .ag-row:hover .ag-cell': {\n cursor: 'pointer',\n },\n\n // Additional icons\n ...agGridCssIcons,\n\n // Show icons according to the SkodaFlow design\n '& .ag-icon-asc, & .ag-icon-desc': {\n color: theme.palette.onSurface.os600,\n },\n '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n color: theme.palette.text.primary,\n },\n '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n {\n display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n },\n\n // Legacy class approach, no theme\n fontFamily: agTheme.fontFamily,\n };\n};\n\n/**\n * Pre-configured SkodaFlow AG Grid props.\n *\n * Note: the AG Grid `theme` is intentionally NOT provided here. Building the theme requires\n * imports from `ag-grid-community` (`themeQuartz`, `iconOverrides`), which we do not want to pull\n * in as a direct dependency of the library. The consuming project should build the theme with the\n * exported `skodaAgThemeParams` and `skodaAgGridIconOverrides` helpers and pass it to `AgGridReact`.\n */\nexport const useSkodaAgGridProps = () => {\n const theme = useTheme();\n\n return {\n domLayout: 'autoHeight' as const,\n animateRows: false,\n suppressDragLeaveHidesColumns: true,\n enableRtl: theme.direction === 'rtl',\n // allow selecting/copying cell text (off in AG Grid by default)\n enableCellTextSelection: true,\n };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/**\n * A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n return (\n <Box\n sx={sxOverride(\n (theme) => ({\n ...agGridStyles(theme),\n }),\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","width","maxWidth","agGridVariables","borderBottom","display","direction","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","borderWidth","overflow","justifyContent","px","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","fontFamily","SkodaAgGridProvider","forwardRef","sx","children","rest","ref","_jsx","Box","sxOverride","domLayout","animateRows","suppressDragLeaveHidesColumns","enableRtl","useTheme","enableCellTextSelection"],"mappings":"mPAOO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,MAAO,CACLG,MAAO,OAEP,IAAK,CACHC,SAAU,QAGZ,+DAAgE,IAC3DC,EAAAA,gBAAgBL,IAGrB,eAAgB,CAAEM,aAAc,QAChC,yCAA0C,CAAEC,QAAS,WAG7B,QAApBP,EAAMQ,WAAuB,CAC/B,4BAA6B,CAC3BC,SAAU,SAId,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGV,EAAQW,oBAIzB,4EAA6E,CAC3EL,QAAS,mBACTM,OAAQ,WAIV,sMACE,CACEN,QAAS,mBAKb,0CAA2C,CACzC,+BAAgC,CAC9BO,WAAY,SACZC,UAAW,YACXC,eAAgBhB,EAAMiB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAKV,mEAAoE,CAElEA,OAAQ,kBACRD,UAAW,kBACXV,UAAW,mBAEb,sEAAuE,CACrEW,OAAQ,QAEV,uJACE,CACEC,YAAa,QAGjB,gFAAiF,CAC/ED,OAAQ,eACRD,UAAW,eACXV,UAAW,eACXa,SAAU,UAGZ,oHACE,CACEA,SAAU,WAKhB,qBAAsB,CACpBC,eAAgB,SAChBC,GAAI,QAIN,0CAA2C,CACzCC,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVH,GAAI,QAEN,iDAAkD,CAChDI,MAAO,eACPJ,GAAI,OAEN,8DAA+D,CAC7Dd,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEJ,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRL,GAAI,IACJZ,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVN,MAAO,OACP4B,GAAI,MACJH,SAAU,OACVjB,WAAY,MACZqB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBrB,OAAQ,UACRsB,aAAc,OAKhB,4BAA6B,CAC3BtB,OAAQ,QAKV,wFAAyF,CACvFA,OAAQ,cAIPuB,EAAAA,eAGH,kCAAmC,CACjCP,MAAO7B,EAAMiB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO7B,EAAMiB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAIbkC,WAAYxC,EAAQwC,aA8BXC,EAA0DC,EAAAA,WAAW,EAAGC,KAAIC,cAAaC,GAAQC,IAE1GC,EAAAA,IAACC,EAAAA,IAAG,CACFL,GAAIM,EAAAA,WACDlD,IAAK,IACDD,EAAaC,KAElB4C,GAEFG,IAAKA,KACDD,EAAID,SAEPA,sFA9B4B,KAG1B,CACLM,UAAW,aACXC,aAAa,EACbC,+BAA+B,EAC/BC,UAA+B,QANnBC,EAAAA,WAMK/C,UAEjBgD,yBAAyB"}
|
|
@@ -65,10 +65,16 @@ export declare const skodaAgGridIconOverrides: (customIcons?: {
|
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
67
|
export declare const agGridCssIcons: {
|
|
68
|
-
'.ag-icon-desc:hover::before': {
|
|
68
|
+
'.ag-icon-desc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc:hover::before': {
|
|
69
69
|
maskImage: string;
|
|
70
70
|
};
|
|
71
|
-
'.ag-icon-asc:hover::before': {
|
|
71
|
+
'.ag-icon-asc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {
|
|
72
|
+
maskImage: string;
|
|
73
|
+
};
|
|
74
|
+
'.ag-icon-desc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc::before': {
|
|
75
|
+
maskImage: string;
|
|
76
|
+
};
|
|
77
|
+
'.ag-icon-asc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {
|
|
72
78
|
maskImage: string;
|
|
73
79
|
};
|
|
74
80
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const o={previous:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.86 18.24L11.58 19.52L4.02 11.96L11.58 4.4L12.86 5.68L7.56 10.92H19.58V13H7.56L12.86 18.24Z"></path></svg>'},next:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4.42 10.92H16.44L11.14 5.68L12.42 4.4L19.98 11.96L12.42 19.52L11.14 18.24L16.44 13H4.42V10.92Z"></path></svg>'},first:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.3 11.96L17.36 5L18.64 6.44L12.1 11.96L18.64 17.48L17.36 18.92L9.3 11.96ZM6.3 5.32H8.26V18.6H6.3V5.32Z"></path></svg>'},last:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 11.96L6.64 18.92L5.36 17.48L11.9 11.96L5.36 6.44L6.64 5L14.7 11.96ZM17.7 18.6H15.74V5.32H17.7V18.6Z"></path></svg>'},"small-down":{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.42L4.64 9.06L6.12 7.58L12 13.46L17.88 7.58L19.36 9.06L12 16.42Z"></path></svg>'},asc:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM11.22 15.92H12.78V10.4L15.34 13.04L16.3 12.1L11.96 7.76L7.7 12.1L8.66 13.04L11.22 10.34V15.92Z"></path></svg>'},ascHover:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98ZM11.22 15.92V10.36L8.66 13.04L7.7 12.1L12 7.76L16.3 12.1L15.34 13.04L12.78 10.36V15.92H11.22Z"></path></svg>'},desc:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12.78 8H11.22V13.52L8.66 10.88L7.7 11.82L12.04 16.16L16.3 11.82L15.34 10.88L12.78 13.58V8Z"></path></svg>'},descHover:{svg:'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="2 2 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94ZM12.78 8V13.56L15.34 10.88L16.3 11.82L12 16.16L7.7 11.82L8.66 10.88L11.22 13.56V8H12.78Z"></path></svg>'}},s={".ag-icon-desc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(o.desc.svg)})`},".ag-icon-asc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(o.asc.svg)})`},".ag-icon-desc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(o.descHover.svg)})`},".ag-icon-asc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(o.ascHover.svg)})`}};exports.agGridCssIcons=s,exports.agGridIconsDefinition=o,exports.skodaAgGridIconOverrides=s=>({type:"image",mask:!0,icons:{...o,...Object.fromEntries((s??[]).map(o=>[o.name,{svg:o.svg}]))}});
|
|
2
2
|
//# sourceMappingURL=agGridIcons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agGridIcons.js","sources":["../../../../../src/components/advancedTable/agGridIcons.tsx"],"sourcesContent":["// hotfix to avoid using react-dom/server which can cause issues in Next\n// later the source of flow-icons2 should be used instead\nexport const agGridIconsDefinition = {\n previous: {\n // ArrowLeftIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.86 18.24L11.58 19.52L4.02 11.96L11.58 4.4L12.86 5.68L7.56 10.92H19.58V13H7.56L12.86 18.24Z\"></path></svg>',\n },\n next: {\n // ArrowRightIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.42 10.92H16.44L11.14 5.68L12.42 4.4L19.98 11.96L12.42 19.52L11.14 18.24L16.44 13H4.42V10.92Z\"></path></svg>',\n },\n first: {\n // ChevronPreviousIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.3 11.96L17.36 5L18.64 6.44L12.1 11.96L18.64 17.48L17.36 18.92L9.3 11.96ZM6.3 5.32H8.26V18.6H6.3V5.32Z\"></path></svg>',\n },\n last: {\n // ChevronNextIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.7 11.96L6.64 18.92L5.36 17.48L11.9 11.96L5.36 6.44L6.64 5L14.7 11.96ZM17.7 18.6H15.74V5.32H17.7V18.6Z\"></path></svg>',\n },\n 'small-down': {\n // ChevronDownIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 16.42L4.64 9.06L6.12 7.58L12 13.46L17.88 7.58L19.36 9.06L12 16.42Z\"></path></svg>',\n },\n asc: {\n // ArrowCircleUpFilledIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM11.22 15.92H12.78V10.4L15.34 13.04L16.3 12.1L11.96 7.76L7.7 12.1L8.66 13.04L11.22 10.34V15.92Z\"></path></svg>',\n },\n ascHover: {\n // ArrowCircleUpIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98ZM11.22 15.92V10.36L8.66 13.04L7.7 12.1L12 7.76L16.3 12.1L15.34 13.04L12.78 10.36V15.92H11.22Z\"></path></svg>',\n },\n desc: {\n // ArrowCircleDownFilledIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12.78 8H11.22V13.52L8.66 10.88L7.7 11.82L12.04 16.16L16.3 11.82L15.34 10.88L12.78 13.58V8Z\"></path></svg>',\n },\n descHover: {\n // ArrowCircleDownIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94ZM12.78 8V13.56L15.34 10.88L16.3 11.82L12 16.16L7.7 11.82L8.66 10.88L11.22 13.56V8H12.78Z\"></path></svg>',\n },\n};\n\n/** Maps AG Grid icons to Skoda Flow library icons, overrides icons in AG Grid Theme */\nexport const skodaAgGridIconOverrides = (customIcons?: { name: string; svg: string }[]) => {\n return {\n type: 'image' as const,\n mask: true, // for icons to use AG Grid currentColor\n icons: {\n ...agGridIconsDefinition,\n ...Object.fromEntries((customIcons ?? []).map((icon) => [icon.name, { svg: icon.svg }])),\n },\n };\n};\n\nexport const agGridCssIcons = {\n '.ag-icon-desc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.descHover.svg)})`,\n },\n '.ag-icon-asc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n },\n};\n"],"names":["agGridIconsDefinition","previous","svg","next","first","last","asc","ascHover","desc","descHover","agGridCssIcons","maskImage","encodeURIComponent","customIcons","type","mask","icons","Object","fromEntries","map","icon","name"],"mappings":"aAEO,MAAMA,EAAwB,CACnCC,SAAU,CAERC,IAAK,ySAEPC,KAAM,CAEJD,IAAK,0SAEPE,MAAO,CAELF,IAAK,mTAEPG,KAAM,CAEJH,IAAK,oTAEP,aAAc,CAEZA,IAAK,iRAEPI,IAAK,CAEHJ,IAAK,obAEPK,SAAU,CAERL,IAAK,ujBAEPM,KAAM,CAEJN,IAAK,+aAEPO,UAAW,CAETP,IAAK,mjBAgBIQ,EAAiB,CAC5B,
|
|
1
|
+
{"version":3,"file":"agGridIcons.js","sources":["../../../../../src/components/advancedTable/agGridIcons.tsx"],"sourcesContent":["// hotfix to avoid using react-dom/server which can cause issues in Next\n// later the source of flow-icons2 should be used instead\nexport const agGridIconsDefinition = {\n previous: {\n // ArrowLeftIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.86 18.24L11.58 19.52L4.02 11.96L11.58 4.4L12.86 5.68L7.56 10.92H19.58V13H7.56L12.86 18.24Z\"></path></svg>',\n },\n next: {\n // ArrowRightIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.42 10.92H16.44L11.14 5.68L12.42 4.4L19.98 11.96L12.42 19.52L11.14 18.24L16.44 13H4.42V10.92Z\"></path></svg>',\n },\n first: {\n // ChevronPreviousIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.3 11.96L17.36 5L18.64 6.44L12.1 11.96L18.64 17.48L17.36 18.92L9.3 11.96ZM6.3 5.32H8.26V18.6H6.3V5.32Z\"></path></svg>',\n },\n last: {\n // ChevronNextIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.7 11.96L6.64 18.92L5.36 17.48L11.9 11.96L5.36 6.44L6.64 5L14.7 11.96ZM17.7 18.6H15.74V5.32H17.7V18.6Z\"></path></svg>',\n },\n 'small-down': {\n // ChevronDownIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 16.42L4.64 9.06L6.12 7.58L12 13.46L17.88 7.58L19.36 9.06L12 16.42Z\"></path></svg>',\n },\n asc: {\n // ArrowCircleUpFilledIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM11.22 15.92H12.78V10.4L15.34 13.04L16.3 12.1L11.96 7.76L7.7 12.1L8.66 13.04L11.22 10.34V15.92Z\"></path></svg>',\n },\n ascHover: {\n // ArrowCircleUpIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74ZM12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98ZM11.22 15.92V10.36L8.66 13.04L7.7 12.1L12 7.76L16.3 12.1L15.34 13.04L12.78 10.36V15.92H11.22Z\"></path></svg>',\n },\n desc: {\n // ArrowCircleDownFilledIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12.78 8H11.22V13.52L8.66 10.88L7.7 11.82L12.04 16.16L16.3 11.82L15.34 10.88L12.78 13.58V8Z\"></path></svg>',\n },\n descHover: {\n // ArrowCircleDownIcon\n svg: '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"2 2 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3.18C16.82 3.18 20.82 7.16 20.82 11.96C20.82 16.76 16.82 20.74 12 20.74C7.18 20.74 3.18 16.76 3.18 11.96C3.18 7.16 7.18 3.18 12 3.18ZM12 18.94C15.8 18.94 18.94 15.78 18.94 11.96C18.94 8.14 15.8 4.98 12 4.98C8.2 4.98 5.06 8.14 5.06 11.96C5.06 15.78 8.2 18.94 12 18.94ZM12.78 8V13.56L15.34 10.88L16.3 11.82L12 16.16L7.7 11.82L8.66 10.88L11.22 13.56V8H12.78Z\"></path></svg>',\n },\n};\n\n/** Maps AG Grid icons to Skoda Flow library icons, overrides icons in AG Grid Theme */\nexport const skodaAgGridIconOverrides = (customIcons?: { name: string; svg: string }[]) => {\n return {\n type: 'image' as const,\n mask: true, // for icons to use AG Grid currentColor\n icons: {\n ...agGridIconsDefinition,\n ...Object.fromEntries((customIcons ?? []).map((icon) => [icon.name, { svg: icon.svg }])),\n },\n };\n};\n\nexport const agGridCssIcons = {\n '.ag-icon-desc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.desc.svg)})`,\n },\n '.ag-icon-asc::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n },\n '.ag-icon-desc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-desc::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.descHover.svg)})`,\n },\n '.ag-icon-asc:hover::before, .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n },\n};\n"],"names":["agGridIconsDefinition","previous","svg","next","first","last","asc","ascHover","desc","descHover","agGridCssIcons","maskImage","encodeURIComponent","customIcons","type","mask","icons","Object","fromEntries","map","icon","name"],"mappings":"aAEO,MAAMA,EAAwB,CACnCC,SAAU,CAERC,IAAK,ySAEPC,KAAM,CAEJD,IAAK,0SAEPE,MAAO,CAELF,IAAK,mTAEPG,KAAM,CAEJH,IAAK,oTAEP,aAAc,CAEZA,IAAK,iRAEPI,IAAK,CAEHJ,IAAK,obAEPK,SAAU,CAERL,IAAK,ujBAEPM,KAAM,CAEJN,IAAK,+aAEPO,UAAW,CAETP,IAAK,mjBAgBIQ,EAAiB,CAC5B,yFAA0F,CACxFC,UAAW,+BAA+BC,mBAAmBZ,EAAsBQ,KAAKN,SAE1F,uFAAwF,CACtFS,UAAW,+BAA+BC,mBAAmBZ,EAAsBM,IAAIJ,SAEzF,yFAA0F,CACxFS,UAAW,+BAA+BC,mBAAmBZ,EAAsBS,UAAUP,SAE/F,uFAAwF,CACtFS,UAAW,+BAA+BC,mBAAmBZ,EAAsBO,SAASL,oGAtBvDW,IAChC,CACLC,KAAM,QACNC,MAAM,EACNC,MAAO,IACFhB,KACAiB,OAAOC,aAAaL,GAAe,IAAIM,IAAKC,GAAS,CAACA,EAAKC,KAAM,CAAEnB,IAAKkB,EAAKlB"}
|
|
@@ -71,4 +71,7 @@ export interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' |
|
|
|
71
71
|
*/
|
|
72
72
|
footerWrapper?: BoxProps<ElementType>;
|
|
73
73
|
}
|
|
74
|
+
/**
|
|
75
|
+
* Implementation of bottom Drawer with preset layout
|
|
76
|
+
*/
|
|
74
77
|
export declare const BottomSheet: React.FC<BottomSheetProps>;
|
|
@@ -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
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./hooks.js"),s=require("@mui/material"),n=require("../icon/stroke/ChevronLeftIcon.js"),t=require("../icon/stroke/ChevronRightIcon.js"),i=require("../icon/stroke/ArrowLeftIcon.js"),a=require("../icon/stroke/ArrowRightIcon.js"),c=require("../../materialui/button/interactive.js"),u=require("../../utils/sxOverride/sxOverride.js");exports.CarouselNavigation=function({carousel:l,peekEffect:d=!1,prevButtonProps:x,prevIconProps:p,PrevIconComponent:v,nextButtonProps:m,nextIconProps:I,NextIconComponent:f,arrows:b=!0,onBackground:g=!1,autoHideNavigation:h=!1}){const C=o.useCarousel(),j=l||C,k="fade"!==j?.params?.effect&&d,q=s.useTheme(),y=s.useMediaQuery(q.breakpoints.up("md")),{sx:M,...P}=x||{},{sx:L,...w}=m||{},[B,E]=o.useCarouselPeekEffect(j),N=v||(b?i.ArrowLeftIcon:n.ChevronLeftIcon),S=f||(b?a.ArrowRightIcon:t.ChevronRightIcon),A=r.useMemo(()=>({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"}},...c.getInteractiveStyle({color:"text.primary",borderColor:g?"transparent
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./hooks.js"),s=require("@mui/material"),n=require("../icon/stroke/ChevronLeftIcon.js"),t=require("../icon/stroke/ChevronRightIcon.js"),i=require("../icon/stroke/ArrowLeftIcon.js"),a=require("../icon/stroke/ArrowRightIcon.js"),c=require("../../materialui/button/interactive.js"),u=require("../../utils/sxOverride/sxOverride.js");exports.CarouselNavigation=function({carousel:l,peekEffect:d=!1,prevButtonProps:x,prevIconProps:p,PrevIconComponent:v,nextButtonProps:m,nextIconProps:I,NextIconComponent:f,arrows:b=!0,onBackground:g=!1,autoHideNavigation:h=!1}){const C=o.useCarousel(),j=l||C,k="fade"!==j?.params?.effect&&d,q=s.useTheme(),y=s.useMediaQuery(q.breakpoints.up("md")),{sx:M,...P}=x||{},{sx:L,...w}=m||{},[B,E]=o.useCarouselPeekEffect(j),N=v||(b?i.ArrowLeftIcon:n.ChevronLeftIcon),S=f||(b?a.ArrowRightIcon:t.ChevronRightIcon),A=r.useMemo(()=>({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"}},...c.getInteractiveStyle({color:"text.primary",borderColor:g?"transparent":"onSurface.os100",backgroundColor:g?"transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:g?"transparent":"disabled.secondary",backgroundColor:g?"transparent":"disabled.secondary"}}),[]);return h&&j?.isLocked?null:e.jsxs(e.Fragment,{children:[e.jsx(s.IconButton,{disabled:j&&!j.params?.loop&&j.isBeginning,onClick:()=>{j?.slidePrev(),k&&B&&E("reset")},onMouseEnter:()=>y&&k&&E("prev"),onMouseLeave:()=>k&&B&&E("reset"),sx:u.sxOverride({...A,insetInlineStart:"16px"},M),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...P,children:"rtl"===q.direction?e.jsx(S,{...p}):e.jsx(N,{...p})}),e.jsx(s.IconButton,{disabled:j&&!j.params?.loop&&j.isEnd,onClick:()=>{j?.slideNext(),k&&B&&E("reset")},onMouseEnter:()=>y&&k&&E("next"),onMouseLeave:()=>k&&B&&E("reset"),sx:u.sxOverride({...A,insetInlineEnd:"16px"},L),"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...w,children:"rtl"===q.direction?e.jsx(N,{...I}):e.jsx(S,{...I})})]})};
|
|
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":["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":"2bAkEEA,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,EAAAA,cACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAAA,sBAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAWzB,IAAsBC,EAASyB,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,QACf,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,sBACD,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,EAAAA,2BACEC,EAAAA,IAACC,EAAAA,YACCC,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,aACF,IACK3B,EACH4B,iBAAkB,QAEpBzC,GACD,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNgB,KAAK,YACDzC,EAAQ0C,SAES,QAApBlD,EAAMmD,UAAsBb,EAAAA,IAACrB,EAAQ,IAAK7B,IAAoBkD,EAAAA,IAACxB,EAAQ,IAAK1B,MAE/EkD,EAAAA,IAACC,EAAAA,WAAU,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,aACF,IACK3B,EACHkC,eAAgB,QAElB7C,GACD,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,EAAQwC,SAES,QAApBlD,EAAMmD,UAAsBb,EAAAA,IAACxB,EAAQ,IAAKvB,IAAoB+C,EAAAA,IAACrB,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":"8FAQO,MAAMA,EAA4BC,EAAAA,WAAW,CAACC,EAAOC,IAAQC,EAAAA,IAACC,EAAAA,IAAG,CAACF,IAAKA,EAAKG,UAAU,UAAWJ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Code';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("react"),s=require("../../utils/sxOverride/sxOverride.js");const i=t.forwardRef(({sx:t,children:i,status:o,message:n,actions:a,description:d,stacktrace:c,statusProps:x,messageProps:l,descriptionProps:p,actionsProps:u,stacktraceProps:m,...h},g)=>{const{sx:y,...f}=u??{},{sx:j,...v}=m??{};return e.jsxs(r.Box,{sx:s.sxOverride({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:{xs:2,md:4},textAlign:"center",margin:"0 auto",width:"600px",maxWidth:"100%",p:2},t),ref:g,...h,children:[o&&e.jsx(r.Typography,{component:"h1",variant:"display","data-testid":"ErrorContent.status",...x,children:o}),n&&e.jsx(r.Typography,{component:"h2",variant:"h3","data-testid":"ErrorContent.message",...l,children:n}),d&&e.jsx(r.Typography,{"data-testid":"ErrorContent.description",...p,children:d}),i,a&&e.jsx(r.Box,{sx:s.sxOverride({display:"flex",gap:1,flexDirection:{xs:"column",md:"row"},alignItems:{xs:"stretch",md:"center"},justifyContent:"center"},y),"data-testid":"ErrorContent.actions",...f,children:a}),c&&e.jsx(r.Box,{component:"code",sx:s.sxOverride({display:"block",border:1,borderColor:"divider",overflow:"auto",py:1,px:2,borderRadius:"8px",textAlign:"left",alignSelf:"stretch"},j),"data-testid":"ErrorContent.stacktrace",...v,children:c})]})});exports.ErrorContent=i;
|
|
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":"gJAkDO,MAAMA,EAAsCC,EAAAA,WACjD,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,OAACC,EAAAA,KACCnB,GAAIoB,EAAAA,WACF,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,EAAAA,IAACC,aAAU,CAACC,UAAU,KAAKC,QAAQ,UAAS,cAAa,yBAA0B7B,EAAWN,SAC3FC,IAGJC,GACC8B,MAACC,EAAAA,YAAWC,UAAU,KAAKC,QAAQ,KAAI,cAAa,0BAA2B5B,EAAYP,SACxFE,IAGJE,GACC4B,EAAAA,IAACC,EAAAA,WAAU,CAAA,cAAa,8BAA+BzB,EAAgBR,SACpEI,IAGJJ,EACAG,GACC6B,EAAAA,IAACd,EAAAA,KACCnB,GAAIoB,EAAAA,WACF,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,EAAAA,IAACd,MAAG,CACFgB,UAAU,OACVnC,GAAIoB,aACF,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":"8FAQO,MAAMA,EAA8CC,EAAAA,WAAW,EAAGC,cAAaC,GAAQC,IAE1FC,EAAAA,IAACC,EAAAA,WAAU,CACTC,KAAK,SACLC,MAAM,QACNJ,IAAKA,EAAsC,cAC/B,sBACRD,EAAID,SAEPA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("react"),r=require("./FooterAccordion.js"),t=require("./FooterMenuCollapse.js"),n=require("../../utils/sxOverride/sxOverride.js");const i=o.forwardRef(({sx:i,children:a,label:s,accordionSummaryProps:d,contentProps:c,variant:l="auto",...u},p)=>{const{sx:x,...v}=c??{},{sx:f,...m}=d??{},y=e=>"list"===l?"&":e.breakpoints.up("lg"),[M,b]=o.useState(!1);return e.jsx(r.FooterAccordion,{ref:p,"data-testid":"FooterMenu",expanded:"list"===l||M,onChange:(e,o)=>b(o),variant:"standard",..."auto"===l&&{slots:{transition:t.FooterMenuCollapse}},sx:n.sxOverride(e=>({flexBasis:{lg:"20%"},borderColor:"onSurface.os700",..."accordion"!==l&&{[y(e)]:{border:"none"}}}),i),accordionSummaryProps:{"data-testid":"FooterMenu.label",sx:n.sxOverride(e=>({padding:"14px 0","& .MuiLink-root":{...e.typography.subheadline,p:0,"&, &:hover":{textDecoration:"none",color:"common.white"}},..."accordion"!==l&&{[y(e)]:{padding:"18px 0 8px",overflow:"visible","&&:not(.Mui-disabled)":{cursor:"unset"},"& .MuiAccordionSummary-expandIconWrapper":{display:"none"}}}}),f),...m},label:s,contentProps:{component:"div","data-testid":"FooterMenu.content",sx:n.sxOverride(e=>({display:"flex",alignItems:"flex-start",justifyContent:"flex-start",flexDirection:"column",gap:1.5,"& .MuiLink-root":{...e.typography.caption2,p:0,"&, &:hover":{textDecoration:"none",color:"onSurface.os200"}}}),x),...v},...u,children:a})});exports.FooterMenu=i;
|
|
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":"4LAwBO,MAAMA,EAAkCC,EAAAA,WAC7C,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,EAAAA,UAAS,GAEzC,OACEC,EAAAA,IAACC,EAAAA,gBAAe,CACdb,IAAKA,EAAG,cACI,aACZS,SAAsB,SAAZX,GAA4BW,EACtCK,SAAU,CAACC,EAAGC,IAAMN,EAAYM,GAChClB,QAAQ,cACS,SAAZA,GAAsB,CAAEmB,MAAO,CAAEC,WAAYC,EAAAA,qBAClD1B,GAAI2B,EAAAA,WACDd,IAAK,CAEJe,UAAW,CAAEC,GAAI,OACjBC,YAAa,qBACG,cAAZzB,GAA2B,CAC7B,CAACO,EAAiBC,IAAS,CAAEkB,OAAQ,WAGzC/B,GAEFG,sBAAuB,CACrB,cAAiB,mBACjBH,GAAI2B,EAAAA,WACDd,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,EAAAA,WACDd,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
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js");const a=r.forwardRef(({in:r,timeout:a,sx:s,children:d,ownerState:n,...o},u)=>e.jsx(t.Box,{ref:u,"data-expanded":`${!!r}`,sx:i.sxOverride(e=>({display:"grid",gridTemplateRows:"0fr",transition:e.transitions.create("grid-template-rows",{duration:"number"==typeof a?a:e.transitions.duration.standard}),'&[data-expanded="true"]':{gridTemplateRows:"1fr"},"& > *":{minHeight:"0",overflow:"hidden"},[e.breakpoints.up("lg")]:{gridTemplateRows:"1fr"}}),s),...o,children:d}));exports.FooterMenuCollapse=a;
|
|
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":"gJA2BO,MAAMA,EAAkDC,EAAAA,WAC7D,EAAGC,GAAIC,EAAUC,UAASC,KAAIC,WAAUC,WAAYC,KAAgBC,GAAQC,IAC1EC,EAAAA,IAACC,EAAAA,KACCF,IAAKA,EAAG,gBACO,KAAKP,IACpBE,GAAIQ,EAAAA,WACDC,IAAK,CACJC,QAAS,OAETC,iBAAkB,MAClBC,WAAYH,EAAMI,YAAYC,OAAO,qBAAsB,CACzDC,SAA6B,iBAAZhB,EAAuBA,EAAUU,EAAMI,YAAYE,SAASC,WAE/E,0BAA2B,CACzBL,iBAAkB,OAGpB,QAAS,CACPM,UAAW,IACXC,SAAU,UAGZ,CAACT,EAAMU,YAAYC,GAAG,OAAQ,CAC5BT,iBAAkB,SAGtBX,MAEEI,WAEHH"}
|