@fluentui/react-accordion 9.7.5 → 9.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -2
- package/lib/components/Accordion/useAccordionStyles.styles.raw.js +9 -0
- package/lib/components/Accordion/useAccordionStyles.styles.raw.js.map +1 -0
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.raw.js +113 -0
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.raw.js.map +1 -0
- package/lib/components/AccordionItem/useAccordionItemStyles.styles.raw.js +9 -0
- package/lib/components/AccordionItem/useAccordionItemStyles.styles.raw.js.map +1 -0
- package/lib/components/AccordionPanel/useAccordionPanelStyles.styles.raw.js +18 -0
- package/lib/components/AccordionPanel/useAccordionPanelStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Accordion/useAccordionStyles.styles.raw.js +27 -0
- package/lib-commonjs/components/Accordion/useAccordionStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.styles.raw.js +131 -0
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.styles.raw.js +27 -0
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.styles.raw.js +36 -0
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.styles.raw.js.map +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:34 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.8.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:34 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.7.5..@fluentui/react-accordion_v9.8.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.7.5)
|
|
8
19
|
|
|
9
|
-
Wed, 16 Jul 2025 13:
|
|
20
|
+
Wed, 16 Jul 2025 13:52:50 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.7.4..@fluentui/react-accordion_v9.7.5)
|
|
11
22
|
|
|
12
23
|
### Patches
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { mergeClasses } from '@griffel/react';
|
|
2
|
+
export const accordionClassNames = {
|
|
3
|
+
root: 'fui-Accordion'
|
|
4
|
+
};
|
|
5
|
+
export const useAccordionStyles_unstable = (state)=>{
|
|
6
|
+
'use no memo';
|
|
7
|
+
state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
|
|
8
|
+
return state;
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordionStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionSlots, AccordionState } from './Accordion.types';\n\nexport const accordionClassNames: SlotClassNames<AccordionSlots> = {\n root: 'fui-Accordion',\n};\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","accordionClassNames","root","useAccordionStyles_unstable","state","className"],"rangeMappings":";;;;;;;;","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
4
|
+
export const accordionHeaderClassNames = {
|
|
5
|
+
root: 'fui-AccordionHeader',
|
|
6
|
+
button: 'fui-AccordionHeader__button',
|
|
7
|
+
expandIcon: 'fui-AccordionHeader__expandIcon',
|
|
8
|
+
icon: 'fui-AccordionHeader__icon'
|
|
9
|
+
};
|
|
10
|
+
const useStyles = makeStyles({
|
|
11
|
+
// TODO: this should be extracted to another package
|
|
12
|
+
resetButton: {
|
|
13
|
+
boxSizing: 'content-box',
|
|
14
|
+
backgroundColor: 'inherit',
|
|
15
|
+
color: 'inherit',
|
|
16
|
+
fontFamily: 'inherit',
|
|
17
|
+
fontSize: 'inherit',
|
|
18
|
+
lineHeight: 'normal',
|
|
19
|
+
overflow: 'visible',
|
|
20
|
+
padding: '0',
|
|
21
|
+
WebkitAppearance: 'button',
|
|
22
|
+
textAlign: 'unset'
|
|
23
|
+
},
|
|
24
|
+
focusIndicator: createFocusOutlineStyle(),
|
|
25
|
+
root: {
|
|
26
|
+
color: tokens.colorNeutralForeground1,
|
|
27
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
28
|
+
margin: '0',
|
|
29
|
+
borderRadius: tokens.borderRadiusMedium
|
|
30
|
+
},
|
|
31
|
+
rootDisabled: {
|
|
32
|
+
backgroundImage: 'none',
|
|
33
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
34
|
+
},
|
|
35
|
+
rootInline: {
|
|
36
|
+
display: 'inline-block'
|
|
37
|
+
},
|
|
38
|
+
button: {
|
|
39
|
+
position: 'relative',
|
|
40
|
+
width: '100%',
|
|
41
|
+
...shorthands.borderWidth('0'),
|
|
42
|
+
padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,
|
|
43
|
+
minHeight: '44px',
|
|
44
|
+
display: 'flex',
|
|
45
|
+
alignItems: 'flex-start',
|
|
46
|
+
cursor: 'pointer',
|
|
47
|
+
...typographyStyles.body1,
|
|
48
|
+
boxSizing: 'border-box'
|
|
49
|
+
},
|
|
50
|
+
buttonSmall: {
|
|
51
|
+
minHeight: '32px',
|
|
52
|
+
fontSize: tokens.fontSizeBase200
|
|
53
|
+
},
|
|
54
|
+
buttonLarge: {
|
|
55
|
+
lineHeight: tokens.lineHeightBase400,
|
|
56
|
+
fontSize: tokens.fontSizeBase400
|
|
57
|
+
},
|
|
58
|
+
buttonExtraLarge: {
|
|
59
|
+
lineHeight: tokens.lineHeightBase500,
|
|
60
|
+
fontSize: tokens.fontSizeBase500
|
|
61
|
+
},
|
|
62
|
+
buttonInline: {
|
|
63
|
+
display: 'inline-flex'
|
|
64
|
+
},
|
|
65
|
+
buttonExpandIconEndNoIcon: {
|
|
66
|
+
paddingLeft: tokens.spacingHorizontalM
|
|
67
|
+
},
|
|
68
|
+
buttonExpandIconEnd: {
|
|
69
|
+
paddingRight: tokens.spacingHorizontalMNudge
|
|
70
|
+
},
|
|
71
|
+
buttonDisabled: {
|
|
72
|
+
cursor: 'not-allowed'
|
|
73
|
+
},
|
|
74
|
+
expandIcon: {
|
|
75
|
+
height: '100%',
|
|
76
|
+
display: 'flex',
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
lineHeight: tokens.lineHeightBase500,
|
|
79
|
+
fontSize: tokens.fontSizeBase500
|
|
80
|
+
},
|
|
81
|
+
expandIconStart: {
|
|
82
|
+
paddingRight: tokens.spacingHorizontalS
|
|
83
|
+
},
|
|
84
|
+
expandIconEnd: {
|
|
85
|
+
flexGrow: 1,
|
|
86
|
+
flexShrink: 1,
|
|
87
|
+
flexBasis: '0%',
|
|
88
|
+
display: 'flex',
|
|
89
|
+
justifyContent: 'flex-end',
|
|
90
|
+
paddingLeft: tokens.spacingHorizontalS
|
|
91
|
+
},
|
|
92
|
+
icon: {
|
|
93
|
+
height: '100%',
|
|
94
|
+
display: 'flex',
|
|
95
|
+
alignItems: 'center',
|
|
96
|
+
paddingRight: tokens.spacingHorizontalS,
|
|
97
|
+
lineHeight: tokens.lineHeightBase500,
|
|
98
|
+
fontSize: tokens.fontSizeBase500
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{
|
|
102
|
+
'use no memo';
|
|
103
|
+
const styles = useStyles();
|
|
104
|
+
state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
|
|
105
|
+
state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);
|
|
106
|
+
if (state.expandIcon) {
|
|
107
|
+
state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
|
|
108
|
+
}
|
|
109
|
+
if (state.icon) {
|
|
110
|
+
state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
|
|
111
|
+
}
|
|
112
|
+
return state;
|
|
113
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon',\n};\n\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorTransparentBackground,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n rootInline: {\n display: 'inline-block',\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'flex-start',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n lineHeight: tokens.lineHeightBase400,\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: tokens.spacingHorizontalM,\n },\n buttonExpandIconEnd: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n buttonDisabled: {\n cursor: 'not-allowed',\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n expandIconStart: {\n paddingRight: tokens.spacingHorizontalS,\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: tokens.spacingHorizontalS,\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: tokens.spacingHorizontalS,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n accordionHeaderClassNames.root,\n styles.root,\n state.inline && styles.rootInline,\n state.disabled && styles.rootDisabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n accordionHeaderClassNames.button,\n styles.resetButton,\n styles.button,\n styles.focusIndicator,\n state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon,\n state.expandIconPosition === 'end' && styles.buttonExpandIconEnd,\n state.inline && styles.buttonInline,\n state.size === 'small' && styles.buttonSmall,\n state.size === 'large' && styles.buttonLarge,\n state.size === 'extra-large' && styles.buttonExtraLarge,\n state.disabled && styles.buttonDisabled,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n accordionHeaderClassNames.expandIcon,\n styles.expandIcon,\n state.expandIconPosition === 'start' && styles.expandIconStart,\n state.expandIconPosition === 'end' && styles.expandIconEnd,\n state.expandIcon.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","boxSizing","backgroundColor","color","fontFamily","fontSize","lineHeight","overflow","padding","WebkitAppearance","textAlign","focusIndicator","colorNeutralForeground1","colorTransparentBackground","margin","borderRadius","borderRadiusMedium","rootDisabled","backgroundImage","colorNeutralForegroundDisabled","rootInline","display","position","width","borderWidth","spacingHorizontalM","spacingHorizontalMNudge","minHeight","alignItems","cursor","body1","buttonSmall","fontSizeBase200","buttonLarge","lineHeightBase400","fontSizeBase400","buttonExtraLarge","lineHeightBase500","fontSizeBase500","buttonInline","buttonExpandIconEndNoIcon","paddingLeft","buttonExpandIconEnd","paddingRight","buttonDisabled","height","expandIconStart","spacingHorizontalS","expandIconEnd","flexGrow","flexShrink","flexBasis","justifyContent","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACtE,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYV,WAAW;IAC3B,oDAAoD;IACpDW,aAAa;QACXC,WAAW;QACXC,iBAAiB;QACjBC,OAAO;QACPC,YAAY;QACZC,UAAU;QACVC,YAAY;QACZC,UAAU;QACVC,SAAS;QACTC,kBAAkB;QAClBC,WAAW;IACb;IACAC,gBAAgBpB;IAChBI,MAAM;QACJQ,OAAOX,OAAOoB,uBAAuB;QACrCV,iBAAiBV,OAAOqB,0BAA0B;QAClDC,QAAQ;QACRC,cAAcvB,OAAOwB,kBAAkB;IACzC;IACAC,cAAc;QACZC,iBAAiB;QACjBf,OAAOX,OAAO2B,8BAA8B;IAC9C;IACAC,YAAY;QACVC,SAAS;IACX;IACAzB,QAAQ;QACN0B,UAAU;QACVC,OAAO;QACP,GAAGnC,WAAWoC,WAAW,CAAC,IAAI;QAC9BhB,SAAS,CAAC,EAAE,EAAEhB,OAAOiC,kBAAkB,CAAC,GAAG,EAAEjC,OAAOkC,uBAAuB,CAAC,CAAC;QAC7EC,WAAW;QACXN,SAAS;QACTO,YAAY;QACZC,QAAQ;QACR,GAAGpC,iBAAiBqC,KAAK;QACzB7B,WAAW;IACb;IACA8B,aAAa;QACXJ,WAAW;QACXtB,UAAUb,OAAOwC,eAAe;IAClC;IACAC,aAAa;QACX3B,YAAYd,OAAO0C,iBAAiB;QACpC7B,UAAUb,OAAO2C,eAAe;IAClC;IACAC,kBAAkB;QAChB9B,YAAYd,OAAO6C,iBAAiB;QACpChC,UAAUb,OAAO8C,eAAe;IAClC;IACAC,cAAc;QACZlB,SAAS;IACX;IACAmB,2BAA2B;QACzBC,aAAajD,OAAOiC,kBAAkB;IACxC;IACAiB,qBAAqB;QACnBC,cAAcnD,OAAOkC,uBAAuB;IAC9C;IACAkB,gBAAgB;QACdf,QAAQ;IACV;IACAhC,YAAY;QACVgD,QAAQ;QACRxB,SAAS;QACTO,YAAY;QACZtB,YAAYd,OAAO6C,iBAAiB;QACpChC,UAAUb,OAAO8C,eAAe;IAClC;IACAQ,iBAAiB;QACfH,cAAcnD,OAAOuD,kBAAkB;IACzC;IACAC,eAAe;QACbC,UAAU;QACVC,YAAY;QACZC,WAAW;QACX9B,SAAS;QACT+B,gBAAgB;QAChBX,aAAajD,OAAOuD,kBAAkB;IACxC;IACAjD,MAAM;QACJ+C,QAAQ;QACRxB,SAAS;QACTO,YAAY;QACZe,cAAcnD,OAAOuD,kBAAkB;QACvCzC,YAAYd,OAAO6C,iBAAiB;QACpChC,UAAUb,OAAO8C,eAAe;IAClC;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMe,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASxD;IACfuD,MAAM3D,IAAI,CAAC6D,SAAS,GAAGlE,aACrBI,0BAA0BC,IAAI,EAC9B4D,OAAO5D,IAAI,EACX2D,MAAMG,MAAM,IAAIF,OAAOnC,UAAU,EACjCkC,MAAMI,QAAQ,IAAIH,OAAOtC,YAAY,EACrCqC,MAAM3D,IAAI,CAAC6D,SAAS;IAGtBF,MAAM1D,MAAM,CAAC4D,SAAS,GAAGlE,aACvBI,0BAA0BE,MAAM,EAChC2D,OAAOvD,WAAW,EAClBuD,OAAO3D,MAAM,EACb2D,OAAO5C,cAAc,EACrB2C,MAAMK,kBAAkB,KAAK,SAAS,CAACL,MAAMxD,IAAI,IAAIyD,OAAOf,yBAAyB,EACrFc,MAAMK,kBAAkB,KAAK,SAASJ,OAAOb,mBAAmB,EAChEY,MAAMG,MAAM,IAAIF,OAAOhB,YAAY,EACnCe,MAAMM,IAAI,KAAK,WAAWL,OAAOxB,WAAW,EAC5CuB,MAAMM,IAAI,KAAK,WAAWL,OAAOtB,WAAW,EAC5CqB,MAAMM,IAAI,KAAK,iBAAiBL,OAAOnB,gBAAgB,EACvDkB,MAAMI,QAAQ,IAAIH,OAAOX,cAAc,EACvCU,MAAM1D,MAAM,CAAC4D,SAAS;IAGxB,IAAIF,MAAMzD,UAAU,EAAE;QACpByD,MAAMzD,UAAU,CAAC2D,SAAS,GAAGlE,aAC3BI,0BAA0BG,UAAU,EACpC0D,OAAO1D,UAAU,EACjByD,MAAMK,kBAAkB,KAAK,WAAWJ,OAAOT,eAAe,EAC9DQ,MAAMK,kBAAkB,KAAK,SAASJ,OAAOP,aAAa,EAC1DM,MAAMzD,UAAU,CAAC2D,SAAS;IAE9B;IACA,IAAIF,MAAMxD,IAAI,EAAE;QACdwD,MAAMxD,IAAI,CAAC0D,SAAS,GAAGlE,aAAaI,0BAA0BI,IAAI,EAAEyD,OAAOzD,IAAI,EAAEwD,MAAMxD,IAAI,CAAC0D,SAAS;IACvG;IACA,OAAOF;AACT,EAAE"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { mergeClasses } from '@griffel/react';
|
|
2
|
+
export const accordionItemClassNames = {
|
|
3
|
+
root: 'fui-AccordionItem'
|
|
4
|
+
};
|
|
5
|
+
export const useAccordionItemStyles_unstable = (state)=>{
|
|
6
|
+
'use no memo';
|
|
7
|
+
state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
|
|
8
|
+
return state;
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {\n root: 'fui-AccordionItem',\n};\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","accordionItemClassNames","root","useAccordionItemStyles_unstable","state","className"],"rangeMappings":";;;;;;;;","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
export const accordionPanelClassNames = {
|
|
4
|
+
root: 'fui-AccordionPanel'
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Styles for the root slot
|
|
8
|
+
*/ const useStyles = makeStyles({
|
|
9
|
+
root: {
|
|
10
|
+
margin: `0 ${tokens.spacingHorizontalM}`
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
/** Applies style classnames to slots */ export const useAccordionPanelStyles_unstable = (state)=>{
|
|
14
|
+
'use no memo';
|
|
15
|
+
const styles = useStyles();
|
|
16
|
+
state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
|
|
17
|
+
return state;
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanelStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';\n\nexport const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>> = {\n root: 'fui-AccordionPanel',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n margin: `0 ${tokens.spacingHorizontalM}`,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","accordionPanelClassNames","root","useStyles","margin","spacingHorizontalM","useAccordionPanelStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,2BAAwF;IACnGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,QAAQ,CAAC,EAAE,EAAEJ,OAAOK,kBAAkB,CAAC,CAAC;IAC1C;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGV,aAAaE,yBAAyBC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEpG,OAAOF;AACT,EAAE"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
accordionClassNames: function() {
|
|
13
|
+
return accordionClassNames;
|
|
14
|
+
},
|
|
15
|
+
useAccordionStyles_unstable: function() {
|
|
16
|
+
return useAccordionStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const accordionClassNames = {
|
|
21
|
+
root: 'fui-Accordion'
|
|
22
|
+
};
|
|
23
|
+
const useAccordionStyles_unstable = (state)=>{
|
|
24
|
+
'use no memo';
|
|
25
|
+
state.root.className = (0, _react.mergeClasses)(accordionClassNames.root, state.root.className);
|
|
26
|
+
return state;
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordionStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionSlots, AccordionState } from './Accordion.types';\n\nexport const accordionClassNames: SlotClassNames<AccordionSlots> = {\n root: 'fui-Accordion',\n};\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["accordionClassNames","useAccordionStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAIAC,2BAAAA;eAAAA;;;uBAPgB;AAGtB,MAAMD,sBAAsD;IACjEE,MAAM;AACR;AAEO,MAAMD,8BAA8B,CAACE;IAC1C;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,oBAAoBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAElF,OAAOD;AACT"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
accordionHeaderClassNames: function() {
|
|
13
|
+
return accordionHeaderClassNames;
|
|
14
|
+
},
|
|
15
|
+
useAccordionHeaderStyles_unstable: function() {
|
|
16
|
+
return useAccordionHeaderStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
21
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
+
const accordionHeaderClassNames = {
|
|
23
|
+
root: 'fui-AccordionHeader',
|
|
24
|
+
button: 'fui-AccordionHeader__button',
|
|
25
|
+
expandIcon: 'fui-AccordionHeader__expandIcon',
|
|
26
|
+
icon: 'fui-AccordionHeader__icon'
|
|
27
|
+
};
|
|
28
|
+
const useStyles = (0, _react.makeStyles)({
|
|
29
|
+
// TODO: this should be extracted to another package
|
|
30
|
+
resetButton: {
|
|
31
|
+
boxSizing: 'content-box',
|
|
32
|
+
backgroundColor: 'inherit',
|
|
33
|
+
color: 'inherit',
|
|
34
|
+
fontFamily: 'inherit',
|
|
35
|
+
fontSize: 'inherit',
|
|
36
|
+
lineHeight: 'normal',
|
|
37
|
+
overflow: 'visible',
|
|
38
|
+
padding: '0',
|
|
39
|
+
WebkitAppearance: 'button',
|
|
40
|
+
textAlign: 'unset'
|
|
41
|
+
},
|
|
42
|
+
focusIndicator: (0, _reacttabster.createFocusOutlineStyle)(),
|
|
43
|
+
root: {
|
|
44
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
45
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
46
|
+
margin: '0',
|
|
47
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
48
|
+
},
|
|
49
|
+
rootDisabled: {
|
|
50
|
+
backgroundImage: 'none',
|
|
51
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
52
|
+
},
|
|
53
|
+
rootInline: {
|
|
54
|
+
display: 'inline-block'
|
|
55
|
+
},
|
|
56
|
+
button: {
|
|
57
|
+
position: 'relative',
|
|
58
|
+
width: '100%',
|
|
59
|
+
..._react.shorthands.borderWidth('0'),
|
|
60
|
+
padding: `0 ${_reacttheme.tokens.spacingHorizontalM} 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
|
|
61
|
+
minHeight: '44px',
|
|
62
|
+
display: 'flex',
|
|
63
|
+
alignItems: 'flex-start',
|
|
64
|
+
cursor: 'pointer',
|
|
65
|
+
..._reacttheme.typographyStyles.body1,
|
|
66
|
+
boxSizing: 'border-box'
|
|
67
|
+
},
|
|
68
|
+
buttonSmall: {
|
|
69
|
+
minHeight: '32px',
|
|
70
|
+
fontSize: _reacttheme.tokens.fontSizeBase200
|
|
71
|
+
},
|
|
72
|
+
buttonLarge: {
|
|
73
|
+
lineHeight: _reacttheme.tokens.lineHeightBase400,
|
|
74
|
+
fontSize: _reacttheme.tokens.fontSizeBase400
|
|
75
|
+
},
|
|
76
|
+
buttonExtraLarge: {
|
|
77
|
+
lineHeight: _reacttheme.tokens.lineHeightBase500,
|
|
78
|
+
fontSize: _reacttheme.tokens.fontSizeBase500
|
|
79
|
+
},
|
|
80
|
+
buttonInline: {
|
|
81
|
+
display: 'inline-flex'
|
|
82
|
+
},
|
|
83
|
+
buttonExpandIconEndNoIcon: {
|
|
84
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalM
|
|
85
|
+
},
|
|
86
|
+
buttonExpandIconEnd: {
|
|
87
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
|
|
88
|
+
},
|
|
89
|
+
buttonDisabled: {
|
|
90
|
+
cursor: 'not-allowed'
|
|
91
|
+
},
|
|
92
|
+
expandIcon: {
|
|
93
|
+
height: '100%',
|
|
94
|
+
display: 'flex',
|
|
95
|
+
alignItems: 'center',
|
|
96
|
+
lineHeight: _reacttheme.tokens.lineHeightBase500,
|
|
97
|
+
fontSize: _reacttheme.tokens.fontSizeBase500
|
|
98
|
+
},
|
|
99
|
+
expandIconStart: {
|
|
100
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalS
|
|
101
|
+
},
|
|
102
|
+
expandIconEnd: {
|
|
103
|
+
flexGrow: 1,
|
|
104
|
+
flexShrink: 1,
|
|
105
|
+
flexBasis: '0%',
|
|
106
|
+
display: 'flex',
|
|
107
|
+
justifyContent: 'flex-end',
|
|
108
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalS
|
|
109
|
+
},
|
|
110
|
+
icon: {
|
|
111
|
+
height: '100%',
|
|
112
|
+
display: 'flex',
|
|
113
|
+
alignItems: 'center',
|
|
114
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalS,
|
|
115
|
+
lineHeight: _reacttheme.tokens.lineHeightBase500,
|
|
116
|
+
fontSize: _reacttheme.tokens.fontSizeBase500
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
const useAccordionHeaderStyles_unstable = (state)=>{
|
|
120
|
+
'use no memo';
|
|
121
|
+
const styles = useStyles();
|
|
122
|
+
state.root.className = (0, _react.mergeClasses)(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);
|
|
123
|
+
state.button.className = (0, _react.mergeClasses)(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);
|
|
124
|
+
if (state.expandIcon) {
|
|
125
|
+
state.expandIcon.className = (0, _react.mergeClasses)(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);
|
|
126
|
+
}
|
|
127
|
+
if (state.icon) {
|
|
128
|
+
state.icon.className = (0, _react.mergeClasses)(accordionHeaderClassNames.icon, styles.icon, state.icon.className);
|
|
129
|
+
}
|
|
130
|
+
return state;
|
|
131
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon',\n};\n\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorTransparentBackground,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n rootInline: {\n display: 'inline-block',\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'flex-start',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box',\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: tokens.fontSizeBase200,\n },\n buttonLarge: {\n lineHeight: tokens.lineHeightBase400,\n fontSize: tokens.fontSizeBase400,\n },\n buttonExtraLarge: {\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n buttonInline: {\n display: 'inline-flex',\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: tokens.spacingHorizontalM,\n },\n buttonExpandIconEnd: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n buttonDisabled: {\n cursor: 'not-allowed',\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n expandIconStart: {\n paddingRight: tokens.spacingHorizontalS,\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: tokens.spacingHorizontalS,\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: tokens.spacingHorizontalS,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n accordionHeaderClassNames.root,\n styles.root,\n state.inline && styles.rootInline,\n state.disabled && styles.rootDisabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n accordionHeaderClassNames.button,\n styles.resetButton,\n styles.button,\n styles.focusIndicator,\n state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon,\n state.expandIconPosition === 'end' && styles.buttonExpandIconEnd,\n state.inline && styles.buttonInline,\n state.size === 'small' && styles.buttonSmall,\n state.size === 'large' && styles.buttonLarge,\n state.size === 'extra-large' && styles.buttonExtraLarge,\n state.disabled && styles.buttonDisabled,\n state.button.className,\n );\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n accordionHeaderClassNames.expandIcon,\n styles.expandIcon,\n state.expandIconPosition === 'start' && styles.expandIconStart,\n state.expandIconPosition === 'end' && styles.expandIconEnd,\n state.expandIcon.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["accordionHeaderClassNames","useAccordionHeaderStyles_unstable","root","button","expandIcon","icon","useStyles","makeStyles","resetButton","boxSizing","backgroundColor","color","fontFamily","fontSize","lineHeight","overflow","padding","WebkitAppearance","textAlign","focusIndicator","createFocusOutlineStyle","tokens","colorNeutralForeground1","colorTransparentBackground","margin","borderRadius","borderRadiusMedium","rootDisabled","backgroundImage","colorNeutralForegroundDisabled","rootInline","display","position","width","shorthands","borderWidth","spacingHorizontalM","spacingHorizontalMNudge","minHeight","alignItems","cursor","typographyStyles","body1","buttonSmall","fontSizeBase200","buttonLarge","lineHeightBase400","fontSizeBase400","buttonExtraLarge","lineHeightBase500","fontSizeBase500","buttonInline","buttonExpandIconEndNoIcon","paddingLeft","buttonExpandIconEnd","paddingRight","buttonDisabled","height","expandIconStart","spacingHorizontalS","expandIconEnd","flexGrow","flexShrink","flexBasis","justifyContent","state","styles","className","mergeClasses","inline","disabled","expandIconPosition","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,yBAAAA;eAAAA;;IAoGAC,iCAAAA;eAAAA;;;uBA1GwC;8BACb;4BACC;AAIlC,MAAMD,4BAAkE;IAC7EE,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3B,oDAAoD;IACpDC,aAAa;QACXC,WAAW;QACXC,iBAAiB;QACjBC,OAAO;QACPC,YAAY;QACZC,UAAU;QACVC,YAAY;QACZC,UAAU;QACVC,SAAS;QACTC,kBAAkB;QAClBC,WAAW;IACb;IACAC,gBAAgBC,IAAAA,qCAAAA;IAChBlB,MAAM;QACJS,OAAOU,kBAAAA,CAAOC,uBAAuB;QACrCZ,iBAAiBW,kBAAAA,CAAOE,0BAA0B;QAClDC,QAAQ;QACRC,cAAcJ,kBAAAA,CAAOK,kBAAkB;IACzC;IACAC,cAAc;QACZC,iBAAiB;QACjBjB,OAAOU,kBAAAA,CAAOQ,8BAA8B;IAC9C;IACAC,YAAY;QACVC,SAAS;IACX;IACA5B,QAAQ;QACN6B,UAAU;QACVC,OAAO;QACP,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,IAAI;QAC9BnB,SAAS,CAAC,EAAE,EAAEK,kBAAAA,CAAOe,kBAAkB,CAAC,GAAG,EAAEf,kBAAAA,CAAOgB,uBAAuB,CAAC,CAAC;QAC7EC,WAAW;QACXP,SAAS;QACTQ,YAAY;QACZC,QAAQ;QACR,GAAGC,4BAAAA,CAAiBC,KAAK;QACzBjC,WAAW;IACb;IACAkC,aAAa;QACXL,WAAW;QACXzB,UAAUQ,kBAAAA,CAAOuB,eAAe;IAClC;IACAC,aAAa;QACX/B,YAAYO,kBAAAA,CAAOyB,iBAAiB;QACpCjC,UAAUQ,kBAAAA,CAAO0B,eAAe;IAClC;IACAC,kBAAkB;QAChBlC,YAAYO,kBAAAA,CAAO4B,iBAAiB;QACpCpC,UAAUQ,kBAAAA,CAAO6B,eAAe;IAClC;IACAC,cAAc;QACZpB,SAAS;IACX;IACAqB,2BAA2B;QACzBC,aAAahC,kBAAAA,CAAOe,kBAAkB;IACxC;IACAkB,qBAAqB;QACnBC,cAAclC,kBAAAA,CAAOgB,uBAAuB;IAC9C;IACAmB,gBAAgB;QACdhB,QAAQ;IACV;IACApC,YAAY;QACVqD,QAAQ;QACR1B,SAAS;QACTQ,YAAY;QACZzB,YAAYO,kBAAAA,CAAO4B,iBAAiB;QACpCpC,UAAUQ,kBAAAA,CAAO6B,eAAe;IAClC;IACAQ,iBAAiB;QACfH,cAAclC,kBAAAA,CAAOsC,kBAAkB;IACzC;IACAC,eAAe;QACbC,UAAU;QACVC,YAAY;QACZC,WAAW;QACXhC,SAAS;QACTiC,gBAAgB;QAChBX,aAAahC,kBAAAA,CAAOsC,kBAAkB;IACxC;IACAtD,MAAM;QACJoD,QAAQ;QACR1B,SAAS;QACTQ,YAAY;QACZgB,cAAclC,kBAAAA,CAAOsC,kBAAkB;QACvC7C,YAAYO,kBAAAA,CAAO4B,iBAAiB;QACpCpC,UAAUQ,kBAAAA,CAAO6B,eAAe;IAClC;AACF;AAGO,MAAMjD,oCAAoC,CAACgE;IAChD;IAEA,MAAMC,SAAS5D;IACf2D,MAAM/D,IAAI,CAACiE,SAAS,GAAGC,IAAAA,mBAAAA,EACrBpE,0BAA0BE,IAAI,EAC9BgE,OAAOhE,IAAI,EACX+D,MAAMI,MAAM,IAAIH,OAAOpC,UAAU,EACjCmC,MAAMK,QAAQ,IAAIJ,OAAOvC,YAAY,EACrCsC,MAAM/D,IAAI,CAACiE,SAAS;IAGtBF,MAAM9D,MAAM,CAACgE,SAAS,GAAGC,IAAAA,mBAAAA,EACvBpE,0BAA0BG,MAAM,EAChC+D,OAAO1D,WAAW,EAClB0D,OAAO/D,MAAM,EACb+D,OAAO/C,cAAc,EACrB8C,MAAMM,kBAAkB,KAAK,SAAS,CAACN,MAAM5D,IAAI,IAAI6D,OAAOd,yBAAyB,EACrFa,MAAMM,kBAAkB,KAAK,SAASL,OAAOZ,mBAAmB,EAChEW,MAAMI,MAAM,IAAIH,OAAOf,YAAY,EACnCc,MAAMO,IAAI,KAAK,WAAWN,OAAOvB,WAAW,EAC5CsB,MAAMO,IAAI,KAAK,WAAWN,OAAOrB,WAAW,EAC5CoB,MAAMO,IAAI,KAAK,iBAAiBN,OAAOlB,gBAAgB,EACvDiB,MAAMK,QAAQ,IAAIJ,OAAOV,cAAc,EACvCS,MAAM9D,MAAM,CAACgE,SAAS;IAGxB,IAAIF,MAAM7D,UAAU,EAAE;QACpB6D,MAAM7D,UAAU,CAAC+D,SAAS,GAAGC,IAAAA,mBAAAA,EAC3BpE,0BAA0BI,UAAU,EACpC8D,OAAO9D,UAAU,EACjB6D,MAAMM,kBAAkB,KAAK,WAAWL,OAAOR,eAAe,EAC9DO,MAAMM,kBAAkB,KAAK,SAASL,OAAON,aAAa,EAC1DK,MAAM7D,UAAU,CAAC+D,SAAS;IAE9B;IACA,IAAIF,MAAM5D,IAAI,EAAE;QACd4D,MAAM5D,IAAI,CAAC8D,SAAS,GAAGC,IAAAA,mBAAAA,EAAapE,0BAA0BK,IAAI,EAAE6D,OAAO7D,IAAI,EAAE4D,MAAM5D,IAAI,CAAC8D,SAAS;IACvG;IACA,OAAOF;AACT"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
accordionItemClassNames: function() {
|
|
13
|
+
return accordionItemClassNames;
|
|
14
|
+
},
|
|
15
|
+
useAccordionItemStyles_unstable: function() {
|
|
16
|
+
return useAccordionItemStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const accordionItemClassNames = {
|
|
21
|
+
root: 'fui-AccordionItem'
|
|
22
|
+
};
|
|
23
|
+
const useAccordionItemStyles_unstable = (state)=>{
|
|
24
|
+
'use no memo';
|
|
25
|
+
state.root.className = (0, _react.mergeClasses)(accordionItemClassNames.root, state.root.className);
|
|
26
|
+
return state;
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';\n\nexport const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {\n root: 'fui-AccordionItem',\n};\n\nexport const useAccordionItemStyles_unstable = (state: AccordionItemState) => {\n 'use no memo';\n\n state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["accordionItemClassNames","useAccordionItemStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAIAC,+BAAAA;eAAAA;;;uBAPgB;AAGtB,MAAMD,0BAA8D;IACzEE,MAAM;AACR;AAEO,MAAMD,kCAAkC,CAACE;IAC9C;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,wBAAwBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAEtF,OAAOD;AACT"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
accordionPanelClassNames: function() {
|
|
13
|
+
return accordionPanelClassNames;
|
|
14
|
+
},
|
|
15
|
+
useAccordionPanelStyles_unstable: function() {
|
|
16
|
+
return useAccordionPanelStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const accordionPanelClassNames = {
|
|
22
|
+
root: 'fui-AccordionPanel'
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the root slot
|
|
26
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
27
|
+
root: {
|
|
28
|
+
margin: `0 ${_reacttheme.tokens.spacingHorizontalM}`
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const useAccordionPanelStyles_unstable = (state)=>{
|
|
32
|
+
'use no memo';
|
|
33
|
+
const styles = useStyles();
|
|
34
|
+
state.root.className = (0, _react.mergeClasses)(accordionPanelClassNames.root, styles.root, state.root.className);
|
|
35
|
+
return state;
|
|
36
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanelStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';\n\nexport const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>> = {\n root: 'fui-AccordionPanel',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n margin: `0 ${tokens.spacingHorizontalM}`,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["accordionPanelClassNames","useAccordionPanelStyles_unstable","root","useStyles","makeStyles","margin","tokens","spacingHorizontalM","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,wBAAAA;eAAAA;;IAcAC,gCAAAA;eAAAA;;;uBAnB4B;4BAClB;AAIhB,MAAMD,2BAAwF;IACnGE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,QAAQ,CAAC,EAAE,EAAEC,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC;IAC1C;AACF;AAGO,MAAMN,mCAAmC,CAACO;IAC/C;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAAA,EAAaX,yBAAyBE,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEpG,OAAOF;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.8.0",
|
|
4
4
|
"description": "Fluent UI accordion component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-aria": "^9.15.
|
|
21
|
+
"@fluentui/react-aria": "^9.15.4",
|
|
22
22
|
"@fluentui/react-context-selector": "^9.2.2",
|
|
23
23
|
"@fluentui/react-icons": "^2.0.245",
|
|
24
24
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
25
25
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
26
26
|
"@fluentui/react-motion": "^9.9.0",
|
|
27
27
|
"@fluentui/react-motion-components-preview": "^0.7.0",
|
|
28
|
-
"@fluentui/react-tabster": "^9.
|
|
28
|
+
"@fluentui/react-tabster": "^9.26.0",
|
|
29
29
|
"@fluentui/react-theme": "^9.1.24",
|
|
30
30
|
"@fluentui/react-utilities": "^9.22.0",
|
|
31
31
|
"@griffel/react": "^1.5.22",
|