@fluentui/react-drawer 9.12.0 → 9.13.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/CHANGELOG.md +41 -9
- package/dist/index.d.ts +8 -0
- package/lib/InlineDrawer.js +1 -1
- package/lib/InlineDrawer.js.map +1 -1
- package/lib/components/Drawer/useDrawerStyles.styles.js +0 -2
- package/lib/components/Drawer/useDrawerStyles.styles.js.map +1 -1
- package/lib/components/Drawer/useDrawerStyles.styles.raw.js +0 -1
- package/lib/components/Drawer/useDrawerStyles.styles.raw.js.map +1 -1
- package/lib/components/DrawerBody/useDrawerBody.js +1 -0
- package/lib/components/DrawerBody/useDrawerBody.js.map +1 -1
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js +1 -2
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js +1 -1
- package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js +1 -2
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js +1 -1
- package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js +1 -2
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js +1 -1
- package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +1 -2
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js +1 -1
- package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js.map +1 -1
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js +3 -2
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map +1 -1
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js +3 -1
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map +1 -1
- package/lib/components/InlineDrawer/InlineDrawer.types.js +1 -3
- package/lib/components/InlineDrawer/InlineDrawer.types.js.map +1 -1
- package/lib/components/InlineDrawer/index.js +1 -1
- package/lib/components/InlineDrawer/index.js.map +1 -1
- package/lib/components/InlineDrawer/renderInlineDrawer.js +2 -2
- package/lib/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawer.js +23 -12
- package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js +1 -2
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +1 -2
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +2 -2
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +2 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/InlineDrawer.js +3 -0
- package/lib-commonjs/InlineDrawer.js.map +1 -1
- package/lib-commonjs/components/Drawer/useDrawerStyles.styles.js +0 -1
- package/lib-commonjs/components/Drawer/useDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Drawer/useDrawerStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Drawer/useDrawerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBody.js +1 -0
- package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js +3 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js +3 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/InlineDrawer.types.js +1 -3
- package/lib-commonjs/components/InlineDrawer/InlineDrawer.types.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/index.js +3 -0
- package/lib-commonjs/components/InlineDrawer/index.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js +2 -2
- package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js +34 -15
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +2 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n '::after': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n '::after': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,sBAAsB;;;kCAgCY;;;;uBAnCW,gBAAgB;AAGnE,+BAA+B;IAClCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;CAWrB,CAAC;AACF,MAAMQ,qBAAqB,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY7B,CAAC;AAGS,MAAMC,kCAAkCC,KAAK,IAAG;IACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;IAC1C,oDAAA;IACAgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGzB,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE;QAC3H,QAAQ;QACR,QAAQ;KACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IACnF,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -51,9 +51,9 @@ const useDrawerHeaderStyles = (0, _react.makeStyles)({
|
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
53
|
const useDrawerHeaderStyles_unstable = (state)=>{
|
|
54
|
-
'use no memo';
|
|
55
54
|
const styles = useStyles();
|
|
56
55
|
const rootStyles = useDrawerHeaderStyles();
|
|
56
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
57
|
state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
|
|
58
58
|
'middle',
|
|
59
59
|
'bottom'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0,\n },\n },\n\n separatorVisible: {\n '::after': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0,\n },\n },\n\n separatorVisible: {\n '::after': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n drawerHeaderClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;;;;;;;;;;;;IAUaK,sBAAAA;;;kCAsCAsB;;;;uBA9C6C,iBAAiB;4BACpD,wBAAwB;uCAGT,qCAAqC;AAIpE,+BAAkE;IACvErB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,kBAAAA,CAAOQ,kBAAkB,CAAC,CAAC,EAAER,kBAAAA,CAAOS,oBAAoB,CAAC,CAAC,EAAET,kBAAAA,CAAOU,gBAAgB,EAAE;IACjGC,KAAKX,kBAAAA,CAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,4BAAwBrB,iBAAAA,EAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,4CAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAKO,MAAMC,iCAAiC,CAACC;IAC7C,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnB,oDAAoD;IACpDM,MAAMtB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js
CHANGED
|
@@ -27,8 +27,8 @@ const drawerHeaderNavigationClassNames = {
|
|
|
27
27
|
".r1ig4pwh{margin:calc(var(--spacingVerticalS) * -1) calc(var(--spacingHorizontalL) * -1);}"
|
|
28
28
|
]);
|
|
29
29
|
const useDrawerHeaderNavigationStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const styles = useStyles();
|
|
31
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
32
|
state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles, state.root.className);
|
|
33
33
|
return state;
|
|
34
34
|
};
|
package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;oCAGiC;;;4CAUY;;;;uBAZX,gBAAgB;AAEvD,MAAMG,mCAAmC;IAC5CC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAErB,CAAC;AAGS,MAAMM,4CAA4CC,KAAK,IAAG;IACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js
CHANGED
|
@@ -28,8 +28,8 @@ const drawerHeaderNavigationClassNames = {
|
|
|
28
28
|
margin: `calc(${_reacttheme.tokens.spacingVerticalS} * -1) calc(${_reacttheme.tokens.spacingHorizontalL} * -1)`
|
|
29
29
|
});
|
|
30
30
|
const useDrawerHeaderNavigationStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
31
|
const styles = useStyles();
|
|
32
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
33
|
state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles, state.root.className);
|
|
34
34
|
return state;
|
|
35
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n root: 'fui-DrawerHeaderNavigation',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n root: 'fui-DrawerHeaderNavigation',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","margin","spacingVerticalS","spacingHorizontalL","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,gCAAAA;;;IAcAM,wCAAAA;;;;uBApBiC,iBAAiB;4BACxC,wBAAwB;AAKxC,yCAAsF;IAC3FL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,0BAAAA,EAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,kBAAAA,CAAOK,gBAAgB,CAAC,YAAY,EAAEL,kBAAAA,CAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAKO,iDAAiD,CACtDE;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -50,7 +50,6 @@ const drawerHeaderTitleClassNames = {
|
|
|
50
50
|
]
|
|
51
51
|
});
|
|
52
52
|
const useDrawerHeaderTitleStyles_unstable = (state)=>{
|
|
53
|
-
'use no memo';
|
|
54
53
|
const styles = useStyles();
|
|
55
54
|
const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot
|
|
56
55
|
// but there's no way to retrieve the element type of a slot from the slot definition
|
|
@@ -66,11 +65,14 @@ const useDrawerHeaderTitleStyles_unstable = (state)=>{
|
|
|
66
65
|
root,
|
|
67
66
|
action
|
|
68
67
|
});
|
|
68
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
69
69
|
state.root.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
|
|
70
70
|
if (state.heading) {
|
|
71
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
71
72
|
state.heading.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.heading, state.heading.className);
|
|
72
73
|
}
|
|
73
74
|
if (state.action) {
|
|
75
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
74
76
|
state.action.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
|
|
75
77
|
}
|
|
76
78
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n const styles = useStyles();\n const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n // eslint-disable-next-line react-hooks/immutability\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,2BAA2B;;;uCAoBY;eAAnCW;;;uBAvBwB,gBAAgB;6BACX,wBAAwB;AAE/D,oCAAoC;IACvCV,IAAI,EAAE,uBAAuB;IAC7BC,OAAO,EAAE,gCAAgC;IACzCC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAL,MAAA,EAAA;QAAAM,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,6CAA6CE,KAAK,IAAG;IAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC,EAAEE,MAAM,EAAE,6EAAA;IACpC,qFAAA;IACA,mDAAA;IACA,+DAAA;IACA,4DAAA;IACAW,UAAAA,EAAY,GAAGF,KAAK;QACpBd,0CAA6B,EAAC;QAC1BgB,UAAU,EAAE;YACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;YACxBC,MAAM,EAAEW,UAAU,CAACX,MAAAA;QACvB,CAAC;QACDF,IAAI;QACJE;IACJ,CAAC,CAAC;IACF,oDAAA;IACAS,KAAK,CAACX,IAAI,CAACc,SAAS,OAAGlB,mBAAY,EAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;IACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;QACf,oDAAA;QACAU,KAAK,CAACV,OAAO,CAACa,SAAS,OAAGlB,mBAAY,EAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;IACxG;IACA,IAAIH,KAAK,CAACT,MAAM,EAAE;QACd,oDAAA;QACAS,KAAK,CAACT,MAAM,CAACY,SAAS,OAAGlB,mBAAY,EAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;IACpH;IACA,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -39,7 +39,6 @@ const drawerHeaderTitleClassNames = {
|
|
|
39
39
|
}
|
|
40
40
|
});
|
|
41
41
|
const useDrawerHeaderTitleStyles_unstable = (state)=>{
|
|
42
|
-
'use no memo';
|
|
43
42
|
const styles = useStyles();
|
|
44
43
|
const { heading: root = {}, action, // but there's no way to retrieve the element type of a slot from the slot definition
|
|
45
44
|
// right now without using SLOT_ELEMENT_TYPE_SYMBOL
|
|
@@ -54,11 +53,14 @@ const useDrawerHeaderTitleStyles_unstable = (state)=>{
|
|
|
54
53
|
root,
|
|
55
54
|
action
|
|
56
55
|
});
|
|
56
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
57
|
state.root.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
|
|
58
58
|
if (state.heading) {
|
|
59
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
59
60
|
state.heading.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.heading, state.heading.className);
|
|
60
61
|
}
|
|
61
62
|
if (state.action) {
|
|
63
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
62
64
|
state.action.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
|
|
63
65
|
}
|
|
64
66
|
return state;
|
package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n },\n\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n },\n\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n const styles = useStyles();\n\n const {\n heading: root = {},\n action,\n // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components,\n } = state;\n\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action,\n },\n root,\n action,\n });\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n if (state.heading) {\n // eslint-disable-next-line react-hooks/immutability\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA;;;;;;;;;;;;IASaI,2BAAAA;;;uCAyBAW;eAAAA;;;uBAhC4B,iBAAiB;6BAEZ,yBAAyB;4BAChD,wBAAwB;AAIxC,oCAA4E;IACjFV,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYR,iBAAAA,EAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,kBAAAA,CAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,kBAAAA,CAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAKO,4CAA4C,CAACG;IAClD,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,AACA,6EAD6E,QACQ;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;QAEJd,0CAAAA,EAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEA,oDAAoD;IACpDS,MAAMX,IAAI,CAACc,SAAS,OAAGlB,mBAAAA,EAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjB,oDAAoD;QACpDU,MAAMV,OAAO,CAACa,SAAS,OAAGlB,mBAAAA,EAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChB,oDAAoD;QACpDS,MAAMT,MAAM,CAACY,SAAS,OAAGlB,mBAAAA,EAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n root: Slot<'div', 'aside'>;\n surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\n/**\n * InlineDrawer Props\n */\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n DrawerBaseProps & {\n /**\n * Whether the drawer has a separator line.\n *\n * @default false\n */\n separator?: boolean;\n };\n\n/**\n * State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n ComponentState<NonNullable<InlineDrawerSlots>> &\n DrawerBaseState &\n Pick<InlineDrawerProps, 'separator'> & {\n animationDirection: PresenceDirection;\n }\n>;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n root: Slot<'div', 'aside'>;\n surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\nexport type InlineDrawerBaseSlots = Omit<InlineDrawerSlots, 'surfaceMotion'>;\n\n/**\n * InlineDrawer Props\n */\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n DrawerBaseProps & {\n /**\n * Whether the drawer has a separator line.\n *\n * @default false\n */\n separator?: boolean;\n };\n\nexport type InlineDrawerBaseProps = ComponentProps<InlineDrawerBaseSlots> & Omit<DrawerBaseProps, 'size'>;\n\n/**\n * State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n ComponentState<NonNullable<InlineDrawerSlots>> &\n DrawerBaseState &\n Pick<InlineDrawerProps, 'separator'> & {\n animationDirection: PresenceDirection;\n }\n>;\n\nexport type InlineDrawerBaseState = Required<\n ComponentState<InlineDrawerBaseSlots> & Omit<DrawerBaseState, 'size' | 'motion'>\n>;\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderInlineDrawer_unstable: function() {
|
|
19
19
|
return _renderInlineDrawer.renderInlineDrawer_unstable;
|
|
20
20
|
},
|
|
21
|
+
useInlineDrawerBase_unstable: function() {
|
|
22
|
+
return _useInlineDrawer.useInlineDrawerBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useInlineDrawerStyles_unstable: function() {
|
|
22
25
|
return _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","useInlineDrawerBase_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAWZI,mDAAsB;;;eAFtBH,+CAA2B;;;eACDE,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAVJ,iBAAiB;oCASF,uBAAuB;iCACI,oBAAoB;6CACpB,iCAAiC"}
|
|
@@ -15,8 +15,8 @@ const renderInlineDrawer_unstable = (state, contextValue)=>{
|
|
|
15
15
|
(0, _reactutilities.assertSlots)(state);
|
|
16
16
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
|
|
17
17
|
value: contextValue,
|
|
18
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
|
|
18
|
+
children: state.surfaceMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
|
|
19
19
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
20
|
-
})
|
|
20
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
21
21
|
});
|
|
22
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.surfaceMotion>\n
|
|
1
|
+
{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n {state.surfaceMotion ? (\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n ) : (\n <state.root />\n )}\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCACrB,4BAA4B;+BAGzB,+BAA+B;AAOvD,oCAAoC,CAACC,OAA0BC;QACpEJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACpBD,MAAMG,aAAa,GAAA,WAAA,OAClB,eAAA,EAACH,MAAMG,aAAa,EAAA;sBAClB,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;+BAGb,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;AAInB,EAAE"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useInlineDrawerBase_unstable: function() {
|
|
14
|
+
return useInlineDrawerBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useInlineDrawer_unstable: function() {
|
|
9
17
|
return useInlineDrawer_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -24,29 +32,22 @@ const STATIC_MOTION = {
|
|
|
24
32
|
};
|
|
25
33
|
const useInlineDrawer_unstable = (props, ref)=>{
|
|
26
34
|
const { size, position, open, unmountOnClose } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
27
|
-
const { separator = false, surfaceMotion } = props;
|
|
35
|
+
const { separator = false, surfaceMotion, ...baseProps } = props;
|
|
28
36
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
29
37
|
const [animationDirection, setAnimationDirection] = _react.useState(open ? 'enter' : 'exit');
|
|
38
|
+
const baseState = useInlineDrawerBase_unstable(baseProps, ref);
|
|
30
39
|
return {
|
|
40
|
+
...baseState,
|
|
31
41
|
components: {
|
|
32
|
-
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
43
|
+
...baseState.components,
|
|
33
44
|
// casting from internal type that has required properties
|
|
34
45
|
// to external type that only has optional properties
|
|
35
46
|
// converting to unknown first as both Function component signatures are not compatible
|
|
36
47
|
surfaceMotion: _drawerMotions.InlineDrawerMotion
|
|
37
48
|
},
|
|
38
|
-
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
39
|
-
...props,
|
|
40
|
-
ref,
|
|
41
|
-
'aria-hidden': !unmountOnClose && !open ? true : undefined
|
|
42
|
-
}), {
|
|
43
|
-
elementType: 'div'
|
|
44
|
-
}),
|
|
45
|
-
open,
|
|
46
|
-
position,
|
|
47
49
|
size,
|
|
48
50
|
separator,
|
|
49
|
-
unmountOnClose,
|
|
50
51
|
animationDirection,
|
|
51
52
|
surfaceMotion: (0, _reactmotion.presenceMotionSlot)(surfaceMotion, {
|
|
52
53
|
elementType: _drawerMotions.InlineDrawerMotion,
|
|
@@ -69,3 +70,21 @@ const useInlineDrawer_unstable = (props, ref)=>{
|
|
|
69
70
|
motion: STATIC_MOTION
|
|
70
71
|
};
|
|
71
72
|
};
|
|
73
|
+
const useInlineDrawerBase_unstable = (props, ref)=>{
|
|
74
|
+
const { position, open, unmountOnClose } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
75
|
+
return {
|
|
76
|
+
components: {
|
|
77
|
+
root: 'div'
|
|
78
|
+
},
|
|
79
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
80
|
+
...props,
|
|
81
|
+
ref,
|
|
82
|
+
'aria-hidden': !unmountOnClose && !open ? true : undefined
|
|
83
|
+
}), {
|
|
84
|
+
elementType: 'div'
|
|
85
|
+
}),
|
|
86
|
+
open,
|
|
87
|
+
position,
|
|
88
|
+
unmountOnClose
|
|
89
|
+
};
|
|
90
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PresenceDirection } from '@fluentui/react-motion';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PresenceDirection } from '@fluentui/react-motion';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type {\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n InlineDrawerProps,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion, ...baseProps } = props;\n const { dir } = useFluent();\n const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n const baseState = useInlineDrawerBase_unstable(baseProps, ref);\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n size,\n separator,\n animationDirection,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n appear: unmountOnClose,\n unmountOnExit: unmountOnClose,\n onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n onMotionStart: (_, { direction }) => {\n if (direction === 'enter') {\n setAnimationDirection('enter');\n }\n },\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n } satisfies InlineDrawerState;\n};\n\nexport const useInlineDrawerBase_unstable = (\n props: InlineDrawerBaseProps,\n ref: React.Ref<HTMLElement>,\n): InlineDrawerBaseState => {\n const { position, open, unmountOnClose } = useDrawerDefaultProps(props);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n unmountOnClose,\n } satisfies InlineDrawerBaseState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","baseProps","dir","animationDirection","setAnimationDirection","useState","baseState","useInlineDrawerBase_unstable","components","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion","root","always","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA8Ea4B,4BAAAA;;;IA5CAd,wBAAAA;;;;;iEAhCU,QAAQ;6BAEI,yBAAyB;gCACb,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAS3E,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,iCAAiC,CAACE,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGC,WAAW,GAAGP;IAC3D,MAAM,EAAEQ,GAAG,EAAE,OAAGlB,uCAAAA;IAChB,MAAM,CAACmB,oBAAoBC,sBAAsB,GAAGzB,OAAM0B,QAAQ,CAAoBR,OAAO,UAAU;IAEvG,MAAMS,YAAYC,6BAA6BN,WAAWX;IAE1D,OAAO;QACL,GAAGgB,SAAS;QACZE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,UAAUE,UAAU;YACvB,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFR,eAAef,iCAAAA;QACjB;QACAU;QACAI;QACAI;QACAH,mBAAepB,+BAAAA,EAAuCoB,eAAe;YACnES,aAAaxB,iCAAAA;YACbyB,cAAc;gBACZd;gBACAD;gBACAO;gBACAS,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKZ,sBAAsBY;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBZ,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBc,QAAQ/B;IACV;AACF,EAAE;AAEK,qCAAqC,CAC1CO,OACAJ;IAEA,MAAM,EAAEM,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IAEjE,OAAO;QACLc,YAAY;YACVW,MAAM;QACR;QAEAA,MAAMrC,oBAAAA,CAAKsC,MAAM,CACfvC,4CAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOwB;QACnD,IACA;YAAEZ,aAAa;QAAM;QAGvBZ;QACAD;QACAE;IACF;AACF,EAAE"}
|
|
@@ -204,10 +204,10 @@ function getAnimationExitClass(state, classNames) {
|
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
const useInlineDrawerStyles_unstable = (state)=>{
|
|
207
|
-
'use no memo';
|
|
208
207
|
const resetStyles = useDrawerResetStyles();
|
|
209
208
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
210
209
|
const rootStyles = useDrawerRootStyles();
|
|
210
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
211
211
|
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
|
|
212
212
|
return state;
|
|
213
213
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n borderRight: borderValue\n },\n separatorEnd: {\n borderLeft: borderValue\n },\n separatorBottom: {\n borderTop: borderValue\n },\n /* Positioning */ start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n },\n /* Animation exit states */ animationExitStart: {\n width: '0',\n border: 'none'\n },\n animationExitEnd: {\n width: '0',\n border: 'none'\n },\n animationExitBottom: {\n height: '0',\n border: 'none'\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\nfunction getAnimationExitClass(state, classNames) {\n switch(state.position){\n case 'start':\n return classNames.animationExitStart;\n case 'end':\n return classNames.animationExitEnd;\n case 'bottom':\n return classNames.animationExitBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n borderRight: borderValue\n },\n separatorEnd: {\n borderLeft: borderValue\n },\n separatorBottom: {\n borderTop: borderValue\n },\n /* Positioning */ start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n },\n /* Animation exit states */ animationExitStart: {\n width: '0',\n border: 'none'\n },\n animationExitEnd: {\n width: '0',\n border: 'none'\n },\n animationExitBottom: {\n height: '0',\n border: 'none'\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\nfunction getAnimationExitClass(state, classNames) {\n switch(state.position){\n case 'start':\n return classNames.animationExitStart;\n case 'end':\n return classNames.animationExitEnd;\n case 'bottom':\n return classNames.animationExitBottom;\n default:\n return undefined;\n }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","end","bottom","a9b677","Bqenvij","animationExitStart","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","irswps","animationExitEnd","animationExitBottom","d","p","getSeparatorClass","state","classNames","separator","undefined","position","getAnimationExitClass","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className","animationDirection"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICO,sBAAsB;;;kCAoEY;eAA9B2C;;;uBAvEyC,gBAAgB;4BACnD,uBAAuB;2CAC8B,yCAAyC;AAC9G,+BAA+B;IAClC1C,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B,CAAC;AACF;;CAEA,GAAI,MAAMU,WAAW,GAAG,CAAA,UAAA,EAAaP,kBAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAY,cAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,eAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,kBAAA,EAAA;QAAAF,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAR,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;IAAAE,mBAAA,EAAA;QAAAR,OAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CA4B3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;IAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;QAClB,OAAOC,SAAS;IACpB;IACA,OAAOH,KAAK,CAACI,QAAQ;QACjB,KAAK,OAAO;YACR,OAAOH,UAAU,CAAChC,cAAc;QACpC,KAAK,KAAK;YACN,OAAOgC,UAAU,CAAC3B,YAAY;QAClC,KAAK,QAAQ;YACT,OAAO2B,UAAU,CAACtB,eAAe;QACrC;YACI,OAAOwB,SAAS;IACxB;AACJ;AACA,SAASE,qBAAqBA,CAACL,KAAK,EAAEC,UAAU,EAAE;IAC9C,OAAOD,KAAK,CAACI,QAAQ;QACjB,KAAK,OAAO;YACR,OAAOH,UAAU,CAACZ,kBAAkB;QACxC,KAAK,KAAK;YACN,OAAOY,UAAU,CAACN,gBAAgB;QACtC,KAAK,QAAQ;YACT,OAAOM,UAAU,CAACL,mBAAmB;QACzC;YACI,OAAOO,SAAS;IACxB;AACJ;AAGW,wCAAwCH,KAAK,IAAG;IACvD,MAAMO,WAAW,GAAG1C,oBAAoB,CAAC,CAAC;IAC1C,MAAM2C,cAAc,GAAG9C,sDAAuB,EAACsC,KAAK,CAAC;IACrD,MAAMS,UAAU,GAAGzC,mBAAmB,CAAC,CAAC;IACxC,oDAAA;IACAgC,KAAK,CAACpC,IAAI,CAAC8C,SAAS,OAAGpD,mBAAY,EAACK,sBAAsB,CAACC,IAAI,EAAE2C,WAAW,EAAEC,cAAc,EAAET,iBAAiB,CAACC,KAAK,EAAES,UAAU,CAAC,EAAEA,UAAU,CAACT,KAAK,CAACI,QAAQ,CAAC,EAAEJ,KAAK,CAACW,kBAAkB,KAAK,MAAM,IAAIN,qBAAqB,CAACL,KAAK,EAAES,UAAU,CAAC,EAAET,KAAK,CAACpC,IAAI,CAAC8C,SAAS,CAAC;IACtQ,OAAOV,KAAK;AAChB,CAAC"}
|
|
@@ -87,10 +87,10 @@ function getAnimationExitClass(state, classNames) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
const useInlineDrawerStyles_unstable = (state)=>{
|
|
90
|
-
'use no memo';
|
|
91
90
|
const resetStyles = useDrawerResetStyles();
|
|
92
91
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
93
92
|
const rootStyles = useDrawerRootStyles();
|
|
93
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
94
94
|
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
|
|
95
95
|
return state;
|
|
96
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */\n separatorStart: { borderRight: borderValue },\n separatorEnd: { borderLeft: borderValue },\n separatorBottom: { borderTop: borderValue },\n\n /* Positioning */\n start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n },\n\n /* Animation exit states */\n animationExitStart: {\n width: '0',\n border: 'none',\n },\n animationExitEnd: {\n width: '0',\n border: 'none',\n },\n animationExitBottom: {\n height: '0',\n border: 'none',\n },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n if (!state.separator) {\n return undefined;\n }\n\n switch (state.position) {\n case 'start':\n return classNames.separatorStart;\n\n case 'end':\n return classNames.separatorEnd;\n\n case 'bottom':\n return classNames.separatorBottom;\n\n default:\n return undefined;\n }\n}\n\nfunction getAnimationExitClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n switch (state.position) {\n case 'start':\n return classNames.animationExitStart;\n\n case 'end':\n return classNames.animationExitEnd;\n\n case 'bottom':\n return classNames.animationExitBottom;\n\n default:\n return undefined;\n }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n /* Separator */\n separatorStart: { borderRight: borderValue },\n separatorEnd: { borderLeft: borderValue },\n separatorBottom: { borderTop: borderValue },\n\n /* Positioning */\n start: {},\n end: {},\n bottom: {\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n },\n\n /* Animation exit states */\n animationExitStart: {\n width: '0',\n border: 'none',\n },\n animationExitEnd: {\n width: '0',\n border: 'none',\n },\n animationExitBottom: {\n height: '0',\n border: 'none',\n },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n if (!state.separator) {\n return undefined;\n }\n\n switch (state.position) {\n case 'start':\n return classNames.separatorStart;\n\n case 'end':\n return classNames.separatorEnd;\n\n case 'bottom':\n return classNames.separatorBottom;\n\n default:\n return undefined;\n }\n}\n\nfunction getAnimationExitClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n switch (state.position) {\n case 'start':\n return classNames.animationExitStart;\n\n case 'end':\n return classNames.animationExitEnd;\n\n case 'bottom':\n return classNames.animationExitBottom;\n\n default:\n return undefined;\n }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n inlineDrawerClassNames.root,\n resetStyles,\n baseClassNames,\n getSeparatorClass(state, rootStyles),\n rootStyles[state.position],\n state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles),\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","position","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerSizeVar","animationExitStart","border","animationExitEnd","animationExitBottom","getSeparatorClass","state","classNames","separator","undefined","getAnimationExitClass","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className","animationDirection"],"mappings":"AAAA;;;;;;;;;;;;IASaO,sBAAAA;;;kCAiFA6B;;;;uBAxF6C,iBAAiB;4BAEpD,wBAAwB;2CAG6B,0CAA0C;AAE/G,+BAAyF;IAC9F5B,MAAM;AACR,EAAE;AAEF,MAAMC,2BAAuBT,sBAAAA,EAAgB;IAC3C,GAAGK,8CAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;AACjE,MAAMC,0BAAsBZ,iBAAAA,EAAW;IACrC,aAAa,GACba,gBAAgB;QAAEC,aAAaJ;IAAY;IAC3CK,cAAc;QAAEC,YAAYN;IAAY;IACxCO,iBAAiB;QAAEC,WAAWR;IAAY;IAE1C,eAAe,GACfS,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEpB,wCAAAA,CAAcqB,aAAa,CAAC,CAAC,CAAC;IAC/C;IAEA,yBAAyB,GACzBC,oBAAoB;QAClBH,OAAO;QACPI,QAAQ;IACV;IACAC,kBAAkB;QAChBL,OAAO;QACPI,QAAQ;IACV;IACAE,qBAAqB;QACnBL,QAAQ;QACRG,QAAQ;IACV;AACF;AAEA,SAASG,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMrB,QAAQ;QACpB,KAAK;YACH,OAAOsB,WAAWlB,cAAc;QAElC,KAAK;YACH,OAAOkB,WAAWhB,YAAY;QAEhC,KAAK;YACH,OAAOgB,WAAWd,eAAe;QAEnC;YACE,OAAOgB;IACX;AACF;AAEA,SAASC,sBAAsBJ,KAAwB,EAAEC,UAAkD;IACzG,OAAQD,MAAMrB,QAAQ;QACpB,KAAK;YACH,OAAOsB,WAAWN,kBAAkB;QAEtC,KAAK;YACH,OAAOM,WAAWJ,gBAAgB;QAEpC,KAAK;YACH,OAAOI,WAAWH,mBAAmB;QAEvC;YACE,OAAOK;IACX;AACF;AAKO,MAAME,iCAAiC,CAACL;IAC7C,MAAMM,cAAc5B;IACpB,MAAM6B,qBAAiBhC,kDAAAA,EAAwByB;IAC/C,MAAMQ,aAAa1B;IAEnB,oDAAoD;IACpDkB,MAAMvB,IAAI,CAACgC,SAAS,OAAGtC,mBAAAA,EACrBK,uBAAuBC,IAAI,EAC3B6B,aACAC,gBACAR,kBAAkBC,OAAOQ,aACzBA,UAAU,CAACR,MAAMrB,QAAQ,CAAC,EAC1BqB,MAAMU,kBAAkB,KAAK,UAAUN,sBAAsBJ,OAAOQ,aACpER,MAAMvB,IAAI,CAACgC,SAAS;IAGtB,OAAOT;AACT,EAAE"}
|
|
@@ -29,12 +29,12 @@ const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
29
29
|
]
|
|
30
30
|
});
|
|
31
31
|
const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
|
|
32
|
-
'use no memo';
|
|
33
32
|
const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
|
|
34
33
|
const backdropResetStyles = useBackdropResetStyles();
|
|
35
34
|
const backdropStyles = useBackdropStyles();
|
|
36
35
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
37
36
|
if (backdrop) {
|
|
37
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
38
|
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
39
39
|
}
|
|
40
40
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n },\n drawerHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n },\n drawerHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n const mountedAndClosed = !unmountOnClose && !open;\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;+BAoBKW,sCAAsC;;;;;;uBAnBG,gBAAgB;AAE1E;;CAEA,GAAI,MAAMP,sBAAsB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC,CAAC;AACF,MAAMK,iBAAiB,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,gDAAgDE,KAAK,IAAG;IAC/D,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAAA,EAAgB,GAAGJ,KAAK;IACvE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;IACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;IACjD,IAAID,QAAQ,EAAE;QACV,oDAAA;QACAA,QAAQ,CAACM,SAAS,OAAGlB,mBAAY,EAACe,mBAAmB,EAAEJ,qBAAqB,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;IAC/K;IACA,OAAOR,KAAK;AAChB,CAAC"}
|
|
@@ -27,12 +27,12 @@ const useBackdropStyles = (0, _react.makeStyles)({
|
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
|
|
32
31
|
const backdropResetStyles = useBackdropResetStyles();
|
|
33
32
|
const backdropStyles = useBackdropStyles();
|
|
34
33
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
35
34
|
if (backdrop) {
|
|
35
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
36
36
|
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
37
37
|
}
|
|
38
38
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(\n backdropResetStyles,\n treatBackdropAsNested && backdropStyles.nested,\n mountedAndClosed && backdropStyles.drawerHidden,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;IACrD,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZ,oDAAoD;QACpDA,SAASM,SAAS,OAAGrB,mBAAAA,EACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -63,14 +63,15 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
63
63
|
]
|
|
64
64
|
});
|
|
65
65
|
const useOverlayDrawerStyles_unstable = (state)=>{
|
|
66
|
-
'use no memo';
|
|
67
66
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
68
67
|
const resetStyles = useDrawerResetStyles();
|
|
69
68
|
const rootStyles = useDrawerRootStyles();
|
|
70
69
|
const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
|
|
71
70
|
const backdrop = state.root.backdrop;
|
|
71
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
72
72
|
state.root.className = (0, _react.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
|
|
73
73
|
if (backdrop) {
|
|
74
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
74
75
|
backdrop.className = (0, _react.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
|
|
75
76
|
}
|
|
76
77
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className","position"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICO,uBAAuB;;;mCA2BY;;;;uBA9BU,gBAAgB;2CAEE,yCAAyC;AAC9G,gCAAgC;IACnCC,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGV,oBAAA,EAAA,WAAA,WAAA;IAAAW,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,eAAA,EAAA;IAAAa,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAW3B,CAAC;AAGS,MAAMC,mCAAmCC,KAAK,IAAG;IACxD,MAAMC,cAAc,OAAGnB,kDAAuB,EAACkB,KAAK,CAAC;IACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;IAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;IACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;IACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;IACpC,oDAAA;IACAe,KAAK,CAAChB,IAAI,CAACsB,SAAS,OAAG5B,mBAAY,EAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;IAChK,IAAIrB,QAAQ,EAAE;QACV,oDAAA;QACAA,QAAQ,CAACqB,SAAS,OAAG5B,mBAAY,EAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;IAC3G;IACA,OAAON,KAAK;AAChB,CAAC"}
|
|
@@ -46,14 +46,15 @@ const useDrawerRootStyles = (0, _react.makeStyles)({
|
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
const useOverlayDrawerStyles_unstable = (state)=>{
|
|
49
|
-
'use no memo';
|
|
50
49
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
51
50
|
const resetStyles = useDrawerResetStyles();
|
|
52
51
|
const rootStyles = useDrawerRootStyles();
|
|
53
52
|
const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
|
|
54
53
|
const backdrop = state.root.backdrop;
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
55
55
|
state.root.className = (0, _react.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
|
|
56
56
|
if (backdrop) {
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
58
|
backdrop.className = (0, _react.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
|
|
58
59
|
}
|
|
59
60
|
return state;
|