@zidsa/zidmui 2.5.12 → 2.5.14
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/dist/react/cjs/components/app-accordion.js +3 -1
- package/dist/react/cjs/components/app-accordion.js.map +1 -1
- package/dist/react/cjs/theme/components/accordion.js +9 -3
- package/dist/react/cjs/theme/components/accordion.js.map +1 -1
- package/dist/react/es/components/app-accordion.js +3 -1
- package/dist/react/es/components/app-accordion.js.map +1 -1
- package/dist/react/es/theme/components/accordion.js +9 -3
- package/dist/react/es/theme/components/accordion.js.map +1 -1
- package/dist/react/types/components/app-accordion.d.ts +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -27,7 +27,8 @@ const AppAccordion = ({
|
|
|
27
27
|
isDetailsLoading,
|
|
28
28
|
detailsLoader,
|
|
29
29
|
detailsLoaderProps,
|
|
30
|
-
disable
|
|
30
|
+
disable,
|
|
31
|
+
roundedCorners = "all"
|
|
31
32
|
}) => {
|
|
32
33
|
const expandedProp = isOpen !== void 0 ? { expanded: isOpen } : {};
|
|
33
34
|
const defaultSummaryLoader = /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "img", src: zidLogoSpinner, sx: { width: 24 } });
|
|
@@ -40,6 +41,7 @@ const AppAccordion = ({
|
|
|
40
41
|
onChange: onToggle,
|
|
41
42
|
disabled: disable,
|
|
42
43
|
slotProps: { transition: { unmountOnExit } },
|
|
44
|
+
"data-rounded-corners": roundedCorners,
|
|
43
45
|
color,
|
|
44
46
|
...expandedProp,
|
|
45
47
|
...accordionProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n Accordion,\n type AccordionProps,\n AccordionDetails,\n AccordionSummary,\n type AccordionSummaryProps,\n type Theme,\n SxProps,\n Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionProps = {\n children?: React.ReactNode;\n isOpen?: boolean;\n onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n color?: AppAccordionColor;\n disable?: boolean;\n\n accordionProps?: Partial<AccordionProps>;\n accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n unmountOnExit?: boolean;\n\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n\n isSummaryLoading?: boolean;\n summaryLoader?: React.ReactNode;\n summaryLoaderProps?: StackRowProps;\n\n isDetailsLoading?: boolean;\n detailsLoader?: React.ReactNode;\n detailsLoaderProps?: StackRowProps;\n\n sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n isOpen,\n color,\n onToggle,\n accordionProps,\n title,\n description,\n descriptionProps,\n accordionSummaryProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n unmountOnExit = true,\n isSummaryLoading,\n summaryLoader,\n summaryLoaderProps,\n isDetailsLoading,\n detailsLoader,\n detailsLoaderProps,\n disable,\n}) => {\n // Determine if controlled or uncontrolled mode\n const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n // Default loader component\n const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n // Determine which loader to show\n const summaryLoaderContent = isSummaryLoading\n ? summaryLoader === undefined\n ? defaultSummaryLoader\n : summaryLoader\n : null;\n\n const detailsLoaderContent = isDetailsLoading\n ? detailsLoader === undefined\n ? defaultDetailsLoader\n : detailsLoader\n : null;\n\n return (\n <Accordion\n onChange={onToggle}\n disabled={disable}\n slotProps={{ transition: { unmountOnExit } }}\n color={color}\n {...expandedProp}\n {...accordionProps}\n >\n {/* Summary */}\n <AccordionSummary\n expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n {...accordionSummaryProps}\n >\n <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography\n variant=\"subtitle1\"\n color={disable ? 'text.tertiary' : 'text.primary'}\n gap={1}\n {...titleProps}\n >\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color={disable ? 'text.disabled' : 'text.tertiary'}\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n\n {summaryLoaderContent && (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n {summaryLoaderContent}\n </StackRow>\n )}\n </StackRow>\n </AccordionSummary>\n\n {/* Details */}\n <AccordionDetails>\n {detailsLoaderContent ? (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n {detailsLoaderContent}\n </StackRow>\n ) : (\n children\n )}\n </AccordionDetails>\n </Accordion>\n );\n};\n"],"names":["jsx","Box","ZidLogoSpinner","jsxs","Accordion","AccordionSummary","IconArrowDownSLine","StackRow","StackColumn","AppTypography","AccordionDetails"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n Accordion,\n type AccordionProps,\n AccordionDetails,\n AccordionSummary,\n type AccordionSummaryProps,\n type Theme,\n SxProps,\n Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n children?: React.ReactNode;\n isOpen?: boolean;\n onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n color?: AppAccordionColor;\n disable?: boolean;\n\n roundedCorners?: AppAccordionRoundedCorners;\n\n accordionProps?: Partial<AccordionProps>;\n accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n unmountOnExit?: boolean;\n\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n\n isSummaryLoading?: boolean;\n summaryLoader?: React.ReactNode;\n summaryLoaderProps?: StackRowProps;\n\n isDetailsLoading?: boolean;\n detailsLoader?: React.ReactNode;\n detailsLoaderProps?: StackRowProps;\n\n sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n isOpen,\n color,\n onToggle,\n accordionProps,\n title,\n description,\n descriptionProps,\n accordionSummaryProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n unmountOnExit = true,\n isSummaryLoading,\n summaryLoader,\n summaryLoaderProps,\n isDetailsLoading,\n detailsLoader,\n detailsLoaderProps,\n disable,\n roundedCorners = 'all',\n}) => {\n // Determine if controlled or uncontrolled mode\n const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n // Default loader component\n const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n // Determine which loader to show\n const summaryLoaderContent = isSummaryLoading\n ? summaryLoader === undefined\n ? defaultSummaryLoader\n : summaryLoader\n : null;\n\n const detailsLoaderContent = isDetailsLoading\n ? detailsLoader === undefined\n ? defaultDetailsLoader\n : detailsLoader\n : null;\n\n return (\n <Accordion\n onChange={onToggle}\n disabled={disable}\n slotProps={{ transition: { unmountOnExit } }}\n data-rounded-corners={roundedCorners}\n color={color}\n {...expandedProp}\n {...accordionProps}\n >\n {/* Summary */}\n <AccordionSummary\n expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n {...accordionSummaryProps}\n >\n <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography\n variant=\"subtitle1\"\n color={disable ? 'text.tertiary' : 'text.primary'}\n gap={1}\n {...titleProps}\n >\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color={disable ? 'text.disabled' : 'text.tertiary'}\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n\n {summaryLoaderContent && (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n {summaryLoaderContent}\n </StackRow>\n )}\n </StackRow>\n </AccordionSummary>\n\n {/* Details */}\n <AccordionDetails>\n {detailsLoaderContent ? (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n {detailsLoaderContent}\n </StackRow>\n ) : (\n children\n )}\n </AccordionDetails>\n </Accordion>\n );\n};\n"],"names":["jsx","Box","ZidLogoSpinner","jsxs","Accordion","AccordionSummary","IconArrowDownSLine","StackRow","StackColumn","AppTypography","AccordionDetails"],"mappings":";;;;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuBA,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuBF,2BAAAA,IAACC,cAAA,EAAI,WAAU,OAAM,KAAKC,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAAJ,2BAAAA;AAAAA,UAACK,SAAAA;AAAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAYL,2BAAAA,IAACM,eAAAA,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,0CAACC,mBAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAEDJ,2BAAAA,KAACK,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChBL,2BAAAA;AAAAA,kBAACM,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACCT,2BAAAA;AAAAA,kBAACS,cAAAA;AAAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,uDACEF,mBAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIFP,2BAAAA,IAACU,SAAAA,kBAAA,EACE,UAAA,uBACCV,2BAAAA,IAACO,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
|
|
@@ -9,6 +9,10 @@ const MuiAccordion = {
|
|
|
9
9
|
root: ({ theme }) => ({
|
|
10
10
|
border: `1px solid ${theme.palette.divider}`,
|
|
11
11
|
backgroundColor: theme.palette.background.paper,
|
|
12
|
+
overflow: "hidden",
|
|
13
|
+
"&.Mui-disabled": {
|
|
14
|
+
backgroundColor: theme.palette.action.disabledBackground
|
|
15
|
+
},
|
|
12
16
|
":first-of-type": {
|
|
13
17
|
borderTopLeftRadius: theme.spacing(2),
|
|
14
18
|
borderTopRightRadius: theme.spacing(2)
|
|
@@ -17,9 +21,8 @@ const MuiAccordion = {
|
|
|
17
21
|
borderBottomLeftRadius: theme.spacing(2),
|
|
18
22
|
borderBottomRightRadius: theme.spacing(2)
|
|
19
23
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
backgroundColor: theme.palette.action.disabledBackground
|
|
24
|
+
'&[data-rounded-corners="all"]': {
|
|
25
|
+
borderRadius: theme.spacing(2)
|
|
23
26
|
}
|
|
24
27
|
})
|
|
25
28
|
},
|
|
@@ -93,6 +96,9 @@ const MuiAccordionSummary = {
|
|
|
93
96
|
const MuiAccordionDetails = {
|
|
94
97
|
styleOverrides: {
|
|
95
98
|
root: ({ theme, ownerState }) => ({
|
|
99
|
+
display: "flex",
|
|
100
|
+
flexDirection: "column",
|
|
101
|
+
gap: theme.spacing(1.5),
|
|
96
102
|
background: theme.palette.background.paper,
|
|
97
103
|
padding: theme.spacing(2),
|
|
98
104
|
marginInline: theme.spacing(0.5),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n defaultProps: {\n disableGutters: true,\n elevation: 0,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n ':first-of-type': {\n borderTopLeftRadius: theme.spacing(2),\n borderTopRightRadius: theme.spacing(2),\n },\n ':last-of-type': {\n borderBottomLeftRadius: theme.spacing(2),\n borderBottomRightRadius: theme.spacing(2),\n },\n
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n defaultProps: {\n disableGutters: true,\n elevation: 0,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n overflow: 'hidden',\n '&.Mui-disabled': {\n backgroundColor: theme.palette.action.disabledBackground,\n },\n ':first-of-type': {\n borderTopLeftRadius: theme.spacing(2),\n borderTopRightRadius: theme.spacing(2),\n },\n ':last-of-type': {\n borderBottomLeftRadius: theme.spacing(2),\n borderBottomRightRadius: theme.spacing(2),\n },\n '&[data-rounded-corners=\"all\"]': {\n borderRadius: theme.spacing(2),\n },\n }),\n },\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.primary.background,\n borderColor: theme.palette._components.accordion.primary.border,\n },\n }),\n },\n {\n props: { color: 'success' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.success.background,\n borderColor: theme.palette._components.accordion.success.border,\n },\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.error.background,\n borderColor: theme.palette._components.accordion.error.border,\n },\n }),\n },\n {\n props: { color: 'warning' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.warning.background,\n borderColor: theme.palette._components.accordion.warning.border,\n },\n }),\n },\n {\n props: { color: 'info' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.info.background,\n borderColor: theme.palette._components.accordion.info.border,\n },\n }),\n },\n {\n props: { color: 'neutral' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.neutral.background,\n borderColor: theme.palette._components.accordion.neutral.border,\n },\n }),\n },\n ],\n};\n\nexport const MuiAccordionSummary: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n marginInline: theme.spacing(0.5),\n }),\n content: ({ theme }) => ({\n marginBlock: theme.spacing(2),\n }),\n },\n};\n\nexport const MuiAccordionDetails: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1.5),\n background: theme.palette.background.paper,\n padding: theme.spacing(2),\n marginInline: theme.spacing(0.5),\n marginBottom: theme.spacing(0.5),\n borderBottomLeftRadius: theme.spacing(1.5),\n borderBottomRightRadius: theme.spacing(1.5),\n ...(ownerState.color && {\n borderRadius: theme.spacing(1.5),\n marginTop: '-2px',\n }),\n ...(!ownerState.color && {\n borderTop: `1px solid ${theme.palette.divider}`,\n marginTop: 0,\n }),\n '.Mui-disabled &': {\n opacity: 0.5,\n },\n }),\n },\n};\n"],"names":[],"mappings":";;AAKO,MAAM,eAEO;AAAA,EAClB,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,WAAW;AAAA,EAAA;AAAA,EAEb,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,MAC1C,iBAAiB,MAAM,QAAQ,WAAW;AAAA,MAC1C,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,QAAQ,OAAO;AAAA,MAAA;AAAA,MAExC,kBAAkB;AAAA,QAChB,qBAAqB,MAAM,QAAQ,CAAC;AAAA,QACpC,sBAAsB,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,MAEvC,iBAAiB;AAAA,QACf,wBAAwB,MAAM,QAAQ,CAAC;AAAA,QACvC,yBAAyB,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,MAE1C,iCAAiC;AAAA,QAC/B,cAAc,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,QAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,MAAM;AAAA,UAC3D,aAAa,MAAM,QAAQ,YAAY,UAAU,MAAM;AAAA,QAAA;AAAA,MACzD;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,OAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,KAAK;AAAA,UAC1D,aAAa,MAAM,QAAQ,YAAY,UAAU,KAAK;AAAA,QAAA;AAAA,MACxD;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO,EAAE,OAAO,UAAA;AAAA,MAChB,OAAO,CAAC,EAAE,aAAa;AAAA,QACrB,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,UAC7D,aAAa,MAAM,QAAQ,YAAY,UAAU,QAAQ;AAAA,QAAA;AAAA,MAC3D;AAAA,IACF;AAAA,EACF;AAEJ;AAEO,MAAM,sBAEc;AAAA,EACzB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,aAAa;AAAA,MACpB,cAAc,MAAM,QAAQ,GAAG;AAAA,IAAA;AAAA,IAEjC,SAAS,CAAC,EAAE,aAAa;AAAA,MACvB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,EAC9B;AAEJ;AAEO,MAAM,sBAEc;AAAA,EACzB,gBAAgB;AAAA,IACd,MAAM,CAAC,EAAE,OAAO,kBAAkB;AAAA,MAChC,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,MAAM,QAAQ,GAAG;AAAA,MACtB,YAAY,MAAM,QAAQ,WAAW;AAAA,MACrC,SAAS,MAAM,QAAQ,CAAC;AAAA,MACxB,cAAc,MAAM,QAAQ,GAAG;AAAA,MAC/B,cAAc,MAAM,QAAQ,GAAG;AAAA,MAC/B,wBAAwB,MAAM,QAAQ,GAAG;AAAA,MACzC,yBAAyB,MAAM,QAAQ,GAAG;AAAA,MAC1C,GAAI,WAAW,SAAS;AAAA,QACtB,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,WAAW;AAAA,MAAA;AAAA,MAEb,GAAI,CAAC,WAAW,SAAS;AAAA,QACvB,WAAW,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC7C,WAAW;AAAA,MAAA;AAAA,MAEb,mBAAmB;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;;;;"}
|
|
@@ -25,7 +25,8 @@ const AppAccordion = ({
|
|
|
25
25
|
isDetailsLoading,
|
|
26
26
|
detailsLoader,
|
|
27
27
|
detailsLoaderProps,
|
|
28
|
-
disable
|
|
28
|
+
disable,
|
|
29
|
+
roundedCorners = "all"
|
|
29
30
|
}) => {
|
|
30
31
|
const expandedProp = isOpen !== void 0 ? { expanded: isOpen } : {};
|
|
31
32
|
const defaultSummaryLoader = /* @__PURE__ */ jsx(Box, { component: "img", src: ZidLogoSpinner, sx: { width: 24 } });
|
|
@@ -38,6 +39,7 @@ const AppAccordion = ({
|
|
|
38
39
|
onChange: onToggle,
|
|
39
40
|
disabled: disable,
|
|
40
41
|
slotProps: { transition: { unmountOnExit } },
|
|
42
|
+
"data-rounded-corners": roundedCorners,
|
|
41
43
|
color,
|
|
42
44
|
...expandedProp,
|
|
43
45
|
...accordionProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n Accordion,\n type AccordionProps,\n AccordionDetails,\n AccordionSummary,\n type AccordionSummaryProps,\n type Theme,\n SxProps,\n Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionProps = {\n children?: React.ReactNode;\n isOpen?: boolean;\n onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n color?: AppAccordionColor;\n disable?: boolean;\n\n accordionProps?: Partial<AccordionProps>;\n accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n unmountOnExit?: boolean;\n\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n\n isSummaryLoading?: boolean;\n summaryLoader?: React.ReactNode;\n summaryLoaderProps?: StackRowProps;\n\n isDetailsLoading?: boolean;\n detailsLoader?: React.ReactNode;\n detailsLoaderProps?: StackRowProps;\n\n sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n isOpen,\n color,\n onToggle,\n accordionProps,\n title,\n description,\n descriptionProps,\n accordionSummaryProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n unmountOnExit = true,\n isSummaryLoading,\n summaryLoader,\n summaryLoaderProps,\n isDetailsLoading,\n detailsLoader,\n detailsLoaderProps,\n disable,\n}) => {\n // Determine if controlled or uncontrolled mode\n const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n // Default loader component\n const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n // Determine which loader to show\n const summaryLoaderContent = isSummaryLoading\n ? summaryLoader === undefined\n ? defaultSummaryLoader\n : summaryLoader\n : null;\n\n const detailsLoaderContent = isDetailsLoading\n ? detailsLoader === undefined\n ? defaultDetailsLoader\n : detailsLoader\n : null;\n\n return (\n <Accordion\n onChange={onToggle}\n disabled={disable}\n slotProps={{ transition: { unmountOnExit } }}\n color={color}\n {...expandedProp}\n {...accordionProps}\n >\n {/* Summary */}\n <AccordionSummary\n expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n {...accordionSummaryProps}\n >\n <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography\n variant=\"subtitle1\"\n color={disable ? 'text.tertiary' : 'text.primary'}\n gap={1}\n {...titleProps}\n >\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color={disable ? 'text.disabled' : 'text.tertiary'}\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n\n {summaryLoaderContent && (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n {summaryLoaderContent}\n </StackRow>\n )}\n </StackRow>\n </AccordionSummary>\n\n {/* Details */}\n <AccordionDetails>\n {detailsLoaderContent ? (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n {detailsLoaderContent}\n </StackRow>\n ) : (\n children\n )}\n </AccordionDetails>\n </Accordion>\n );\n};\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"app-accordion.js","sources":["../../../../src/components/app-accordion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\nimport { IconArrowDownSLine } from '../icons/arrows/arrow-down-s-line';\n\nimport {\n Accordion,\n type AccordionProps,\n AccordionDetails,\n AccordionSummary,\n type AccordionSummaryProps,\n type Theme,\n SxProps,\n Box,\n} from '@mui/material';\nimport { StackRow, type StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\nimport ZidLogoSpinner from '../logos/zid/zid-logo-spinner.svg';\n\n//\n//\n\nexport type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppAccordionRoundedCorners = 'grouped' | 'all';\n\nexport type AppAccordionProps = {\n children?: React.ReactNode;\n isOpen?: boolean;\n onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;\n color?: AppAccordionColor;\n disable?: boolean;\n\n roundedCorners?: AppAccordionRoundedCorners;\n\n accordionProps?: Partial<AccordionProps>;\n accordionSummaryProps?: Partial<AccordionSummaryProps>;\n\n unmountOnExit?: boolean;\n\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n\n isSummaryLoading?: boolean;\n summaryLoader?: React.ReactNode;\n summaryLoaderProps?: StackRowProps;\n\n isDetailsLoading?: boolean;\n detailsLoader?: React.ReactNode;\n detailsLoaderProps?: StackRowProps;\n\n sx?: SxProps<Theme>;\n};\n\nexport const AppAccordion: React.FC<AppAccordionProps> = ({\n isOpen,\n color,\n onToggle,\n accordionProps,\n title,\n description,\n descriptionProps,\n accordionSummaryProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n unmountOnExit = true,\n isSummaryLoading,\n summaryLoader,\n summaryLoaderProps,\n isDetailsLoading,\n detailsLoader,\n detailsLoaderProps,\n disable,\n roundedCorners = 'all',\n}) => {\n // Determine if controlled or uncontrolled mode\n const expandedProp = isOpen !== undefined ? { expanded: isOpen } : {};\n\n // Default loader component\n const defaultSummaryLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 24 }} />;\n const defaultDetailsLoader = <Box component=\"img\" src={ZidLogoSpinner} sx={{ width: 56 }} />;\n\n // Determine which loader to show\n const summaryLoaderContent = isSummaryLoading\n ? summaryLoader === undefined\n ? defaultSummaryLoader\n : summaryLoader\n : null;\n\n const detailsLoaderContent = isDetailsLoading\n ? detailsLoader === undefined\n ? defaultDetailsLoader\n : detailsLoader\n : null;\n\n return (\n <Accordion\n onChange={onToggle}\n disabled={disable}\n slotProps={{ transition: { unmountOnExit } }}\n data-rounded-corners={roundedCorners}\n color={color}\n {...expandedProp}\n {...accordionProps}\n >\n {/* Summary */}\n <AccordionSummary\n expandIcon={summaryLoaderContent ? undefined : <IconArrowDownSLine />}\n {...accordionSummaryProps}\n >\n <StackRow alignItems=\"center\" gap={1} width=\"100%\">\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography\n variant=\"subtitle1\"\n color={disable ? 'text.tertiary' : 'text.primary'}\n gap={1}\n {...titleProps}\n >\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color={disable ? 'text.disabled' : 'text.tertiary'}\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n\n {summaryLoaderContent && (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...summaryLoaderProps}>\n {summaryLoaderContent}\n </StackRow>\n )}\n </StackRow>\n </AccordionSummary>\n\n {/* Details */}\n <AccordionDetails>\n {detailsLoaderContent ? (\n <StackRow alignItems=\"center\" justifyContent=\"center\" {...detailsLoaderProps}>\n {detailsLoaderContent}\n </StackRow>\n ) : (\n children\n )}\n </AccordionDetails>\n </Accordion>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA4DO,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AAEJ,QAAM,eAAe,WAAW,SAAY,EAAE,UAAU,OAAA,IAAW,CAAA;AAGnE,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAC1F,QAAM,uBAAuB,oBAAC,KAAA,EAAI,WAAU,OAAM,KAAK,gBAAgB,IAAI,EAAE,OAAO,GAAA,EAAG,CAAG;AAG1F,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,QAAM,uBAAuB,mBACzB,kBAAkB,SAChB,uBACA,gBACF;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,EAAE,YAAY,EAAE,gBAAc;AAAA,MACzC,wBAAsB;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY,uBAAuB,SAAY,oBAAC,oBAAA,CAAA,CAAmB;AAAA,YAClE,GAAG;AAAA,YAEJ,+BAAC,UAAA,EAAS,YAAW,UAAS,KAAK,GAAG,OAAM,QACzC,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,gBAAA,OAAO,UAAU,WAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,KAAK;AAAA,oBACJ,GAAG;AAAA,oBAEH,UAAA;AAAA,sBAAA;AAAA,sBAAM;AAAA,sBAAE,cAAc,cAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA,IAGvC;AAAA,gBAGD,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,UAAU,kBAAkB;AAAA,oBACnC,YAAW;AAAA,oBACV,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GAEJ;AAAA,cAEC,4CACE,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIF,oBAAC,kBAAA,EACE,UAAA,uBACC,oBAAC,UAAA,EAAS,YAAW,UAAS,gBAAe,UAAU,GAAG,oBACvD,UAAA,qBAAA,CACH,IAEA,SAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -7,6 +7,10 @@ const MuiAccordion = {
|
|
|
7
7
|
root: ({ theme }) => ({
|
|
8
8
|
border: `1px solid ${theme.palette.divider}`,
|
|
9
9
|
backgroundColor: theme.palette.background.paper,
|
|
10
|
+
overflow: "hidden",
|
|
11
|
+
"&.Mui-disabled": {
|
|
12
|
+
backgroundColor: theme.palette.action.disabledBackground
|
|
13
|
+
},
|
|
10
14
|
":first-of-type": {
|
|
11
15
|
borderTopLeftRadius: theme.spacing(2),
|
|
12
16
|
borderTopRightRadius: theme.spacing(2)
|
|
@@ -15,9 +19,8 @@ const MuiAccordion = {
|
|
|
15
19
|
borderBottomLeftRadius: theme.spacing(2),
|
|
16
20
|
borderBottomRightRadius: theme.spacing(2)
|
|
17
21
|
},
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
backgroundColor: theme.palette.action.disabledBackground
|
|
22
|
+
'&[data-rounded-corners="all"]': {
|
|
23
|
+
borderRadius: theme.spacing(2)
|
|
21
24
|
}
|
|
22
25
|
})
|
|
23
26
|
},
|
|
@@ -91,6 +94,9 @@ const MuiAccordionSummary = {
|
|
|
91
94
|
const MuiAccordionDetails = {
|
|
92
95
|
styleOverrides: {
|
|
93
96
|
root: ({ theme, ownerState }) => ({
|
|
97
|
+
display: "flex",
|
|
98
|
+
flexDirection: "column",
|
|
99
|
+
gap: theme.spacing(1.5),
|
|
94
100
|
background: theme.palette.background.paper,
|
|
95
101
|
padding: theme.spacing(2),
|
|
96
102
|
marginInline: theme.spacing(0.5),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n defaultProps: {\n disableGutters: true,\n elevation: 0,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n ':first-of-type': {\n borderTopLeftRadius: theme.spacing(2),\n borderTopRightRadius: theme.spacing(2),\n },\n ':last-of-type': {\n borderBottomLeftRadius: theme.spacing(2),\n borderBottomRightRadius: theme.spacing(2),\n },\n
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../../../src/theme/components/accordion.ts"],"sourcesContent":["import { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nexport const MuiAccordion: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordion'] = {\n defaultProps: {\n disableGutters: true,\n elevation: 0,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n overflow: 'hidden',\n '&.Mui-disabled': {\n backgroundColor: theme.palette.action.disabledBackground,\n },\n ':first-of-type': {\n borderTopLeftRadius: theme.spacing(2),\n borderTopRightRadius: theme.spacing(2),\n },\n ':last-of-type': {\n borderBottomLeftRadius: theme.spacing(2),\n borderBottomRightRadius: theme.spacing(2),\n },\n '&[data-rounded-corners=\"all\"]': {\n borderRadius: theme.spacing(2),\n },\n }),\n },\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.primary.background,\n borderColor: theme.palette._components.accordion.primary.border,\n },\n }),\n },\n {\n props: { color: 'success' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.success.background,\n borderColor: theme.palette._components.accordion.success.border,\n },\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.error.background,\n borderColor: theme.palette._components.accordion.error.border,\n },\n }),\n },\n {\n props: { color: 'warning' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.warning.background,\n borderColor: theme.palette._components.accordion.warning.border,\n },\n }),\n },\n {\n props: { color: 'info' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.info.background,\n borderColor: theme.palette._components.accordion.info.border,\n },\n }),\n },\n {\n props: { color: 'neutral' },\n style: ({ theme }) => ({\n '&.Mui-expanded': {\n backgroundColor: theme.palette._components.accordion.neutral.background,\n borderColor: theme.palette._components.accordion.neutral.border,\n },\n }),\n },\n ],\n};\n\nexport const MuiAccordionSummary: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionSummary'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n marginInline: theme.spacing(0.5),\n }),\n content: ({ theme }) => ({\n marginBlock: theme.spacing(2),\n }),\n },\n};\n\nexport const MuiAccordionDetails: Components<\n Omit<Theme, 'components' | 'palette'> & CssVarsTheme\n>['MuiAccordionDetails'] = {\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1.5),\n background: theme.palette.background.paper,\n padding: theme.spacing(2),\n marginInline: theme.spacing(0.5),\n marginBottom: theme.spacing(0.5),\n borderBottomLeftRadius: theme.spacing(1.5),\n borderBottomRightRadius: theme.spacing(1.5),\n ...(ownerState.color && {\n borderRadius: theme.spacing(1.5),\n marginTop: '-2px',\n }),\n ...(!ownerState.color && {\n borderTop: `1px solid ${theme.palette.divider}`,\n marginTop: 0,\n }),\n '.Mui-disabled &': {\n opacity: 0.5,\n },\n }),\n },\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -3,12 +3,14 @@ import { AppTypographyProps } from './app-typography';
|
|
|
3
3
|
import { AccordionProps, AccordionSummaryProps, Theme, SxProps } from '@mui/material';
|
|
4
4
|
import { StackRowProps } from './stack-row';
|
|
5
5
|
export type AppAccordionColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
6
|
+
export type AppAccordionRoundedCorners = 'grouped' | 'all';
|
|
6
7
|
export type AppAccordionProps = {
|
|
7
8
|
children?: React.ReactNode;
|
|
8
9
|
isOpen?: boolean;
|
|
9
10
|
onToggle?: (event: React.SyntheticEvent, expanded: boolean) => void;
|
|
10
11
|
color?: AppAccordionColor;
|
|
11
12
|
disable?: boolean;
|
|
13
|
+
roundedCorners?: AppAccordionRoundedCorners;
|
|
12
14
|
accordionProps?: Partial<AccordionProps>;
|
|
13
15
|
accordionSummaryProps?: Partial<AccordionSummaryProps>;
|
|
14
16
|
unmountOnExit?: boolean;
|