@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
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,56 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.13.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.13.1)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.13.0..@fluentui/react-drawer_v9.13.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.18.2 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.8.14 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.6 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.13.0)
|
|
24
|
+
|
|
25
|
+
Tue, 26 May 2026 09:39:57 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.12.0..@fluentui/react-drawer_v9.13.0)
|
|
27
|
+
|
|
28
|
+
### Minor changes
|
|
29
|
+
|
|
30
|
+
- feat: expose inline drawer types and base hooks ([PR #36042](https://github.com/microsoft/fluentui/pull/36042) by dmytrokirpa@microsoft.com)
|
|
31
|
+
- Bump @fluentui/react-dialog to v9.18.1 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
32
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
33
|
+
- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
34
|
+
- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
35
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
36
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
37
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.12.0)
|
|
8
40
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
41
|
+
Thu, 23 Apr 2026 14:21:03 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.6..@fluentui/react-drawer_v9.12.0)
|
|
11
43
|
|
|
12
44
|
### Minor changes
|
|
13
45
|
|
|
14
46
|
- fix: update type for drawerMotion slot ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-dialog to v9.18.0 ([PR #
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
17
|
-
- Bump @fluentui/react-motion to v9.15.0 ([PR #
|
|
18
|
-
- Bump @fluentui/react-portal to v9.8.12 ([PR #
|
|
19
|
-
- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #
|
|
20
|
-
- Bump @fluentui/react-tabster to v9.26.14 ([PR #
|
|
21
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
47
|
+
- Bump @fluentui/react-dialog to v9.18.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
48
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
49
|
+
- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
50
|
+
- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
51
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
52
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
53
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
22
54
|
|
|
23
55
|
## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.6)
|
|
24
56
|
|
package/dist/index.d.ts
CHANGED
|
@@ -222,6 +222,12 @@ export declare type DrawerState = ComponentState<DrawerSlots>;
|
|
|
222
222
|
*/
|
|
223
223
|
export declare const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;
|
|
224
224
|
|
|
225
|
+
export declare type InlineDrawerBaseProps = ComponentProps<InlineDrawerBaseSlots> & Omit<DrawerBaseProps, 'size'>;
|
|
226
|
+
|
|
227
|
+
declare type InlineDrawerBaseSlots = Omit<InlineDrawerSlots, 'surfaceMotion'>;
|
|
228
|
+
|
|
229
|
+
export declare type InlineDrawerBaseState = Required<ComponentState<InlineDrawerBaseSlots> & Omit<DrawerBaseState, 'size' | 'motion'>>;
|
|
230
|
+
|
|
225
231
|
export declare const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>>;
|
|
226
232
|
|
|
227
233
|
/**
|
|
@@ -500,6 +506,8 @@ export declare const useDrawerStyles_unstable: (state: DrawerState) => DrawerSta
|
|
|
500
506
|
*/
|
|
501
507
|
export declare const useInlineDrawer_unstable: (props: InlineDrawerProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerState;
|
|
502
508
|
|
|
509
|
+
export declare const useInlineDrawerBase_unstable: (props: InlineDrawerBaseProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerBaseState;
|
|
510
|
+
|
|
503
511
|
/**
|
|
504
512
|
* Apply styling to the InlineDrawer slots based on the state
|
|
505
513
|
*/
|
package/lib/InlineDrawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './components/InlineDrawer/index';
|
|
1
|
+
export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './components/InlineDrawer/index';
|
package/lib/InlineDrawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/InlineDrawer.ts"],"sourcesContent":["export type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './components/InlineDrawer/index';\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n} from './components/InlineDrawer/index';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/InlineDrawer.ts"],"sourcesContent":["export type {\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './components/InlineDrawer/index';\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n useInlineDrawerBase_unstable,\n} from './components/InlineDrawer/index';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","useInlineDrawerBase_unstable"],"mappings":"AAQA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}
|
|
@@ -6,8 +6,6 @@ export const drawerClassNames = {
|
|
|
6
6
|
* Apply styling to the Drawer slots based on the state
|
|
7
7
|
*/
|
|
8
8
|
export const useDrawerStyles_unstable = state => {
|
|
9
|
-
'use no memo';
|
|
10
|
-
|
|
11
9
|
state.root.className = mergeClasses(drawerClassNames.root, state.root.className);
|
|
12
10
|
return state;
|
|
13
11
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */ export const useDrawerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */ export const useDrawerStyles_unstable = (state)=>{\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjDA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAChF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -5,7 +5,6 @@ export const drawerClassNames = {
|
|
|
5
5
|
/**
|
|
6
6
|
* Apply styling to the Drawer slots based on the state
|
|
7
7
|
*/ export const useDrawerStyles_unstable = (state)=>{
|
|
8
|
-
'use no memo';
|
|
9
8
|
state.root.className = mergeClasses(drawerClassNames.root, state.root.className);
|
|
10
9
|
return state;
|
|
11
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Drawer/useDrawerStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerSlots, DrawerState } from './Drawer.types';\n\nexport const drawerClassNames: SlotClassNames<Omit<DrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-Drawer',\n};\n\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = (state: DrawerState): DrawerState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Drawer/useDrawerStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerSlots, DrawerState } from './Drawer.types';\n\nexport const drawerClassNames: SlotClassNames<Omit<DrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-Drawer',\n};\n\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = (state: DrawerState): DrawerState => {\n state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAK9C,OAAO,MAAMC,mBAAuE;IAClFC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,iBAAiBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE/E,OAAOD;AACT,EAAE"}
|
|
@@ -81,6 +81,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
81
81
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
82
82
|
ref: mergedRef,
|
|
83
83
|
...props,
|
|
84
|
+
// eslint-disable-next-line react-hooks/refs
|
|
84
85
|
onScroll: mergeCallbacks(props.onScroll, onScroll)
|
|
85
86
|
}), {
|
|
86
87
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n // eslint-disable-next-line react-hooks/refs\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACR,4CAA4C;YAC5CgB,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -13,9 +13,8 @@ const useStyles = /*#__PURE__*/__resetStyles("ri6rvx7", null, [".ri6rvx7{padding
|
|
|
13
13
|
* Apply styling to the DrawerBody slots based on the state
|
|
14
14
|
*/
|
|
15
15
|
export const useDrawerBodyStyles_unstable = state => {
|
|
16
|
-
'use no memo';
|
|
17
|
-
|
|
18
16
|
const styles = useStyles();
|
|
17
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
19
18
|
state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
|
|
20
19
|
return state;
|
|
21
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1B;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -23,8 +23,8 @@ export const drawerBodyClassNames = {
|
|
|
23
23
|
/**
|
|
24
24
|
* Apply styling to the DrawerBody slots based on the state
|
|
25
25
|
*/ export const useDrawerBodyStyles_unstable = (state)=>{
|
|
26
|
-
'use no memo';
|
|
27
26
|
const styles = useStyles();
|
|
27
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
28
28
|
state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
|
|
29
29
|
return state;
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.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 { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.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 { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,EAAE;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C,MAAMC,SAASZ;IAEf,oDAAoD;IACpDW,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}
|
|
@@ -34,10 +34,9 @@ const useDrawerFooterStyles = /*#__PURE__*/__styles({
|
|
|
34
34
|
* Apply styling to the DrawerFooter slots based on the state
|
|
35
35
|
*/
|
|
36
36
|
export const useDrawerFooterStyles_unstable = state => {
|
|
37
|
-
'use no memo';
|
|
38
|
-
|
|
39
37
|
const styles = useStyles();
|
|
40
38
|
const rootStyles = useDrawerFooterStyles();
|
|
39
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
40
|
state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
|
|
42
41
|
return state;
|
|
43
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.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 drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n '::before': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.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 drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n '::before': {\n opacity: 1\n }\n }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,KAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1C;EACAgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -35,9 +35,9 @@ const useDrawerFooterStyles = makeStyles({
|
|
|
35
35
|
/**
|
|
36
36
|
* Apply styling to the DrawerFooter slots based on the state
|
|
37
37
|
*/ export const useDrawerFooterStyles_unstable = (state)=>{
|
|
38
|
-
'use no memo';
|
|
39
38
|
const styles = useStyles();
|
|
40
39
|
const rootStyles = useDrawerFooterStyles();
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
41
|
state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
|
|
42
42
|
'middle',
|
|
43
43
|
'top'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.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 { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n root: 'fui-DrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0,\n },\n },\n\n separatorVisible: {\n '::before': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.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 { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n root: 'fui-DrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0,\n },\n },\n\n separatorVisible: {\n '::before': {\n opacity: 1,\n },\n },\n});\n\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n drawerFooterClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","separator","top","separatorVisible","opacity","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,gBAAgB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,kBAAkB,EAAE;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWd,OAAOe,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,YAAY;YACV,GAAGnB,qBAAqB;YACxBoB,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnB,oDAAoD;IACpDM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC5EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -34,10 +34,9 @@ const useDrawerHeaderStyles = /*#__PURE__*/__styles({
|
|
|
34
34
|
* Apply styling to the DrawerHeader slots based on the state
|
|
35
35
|
*/
|
|
36
36
|
export const useDrawerHeaderStyles_unstable = state => {
|
|
37
|
-
'use no memo';
|
|
38
|
-
|
|
39
37
|
const styles = useStyles();
|
|
40
38
|
const rootStyles = useDrawerHeaderStyles();
|
|
39
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
40
|
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
|
|
42
41
|
return state;
|
|
43
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"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,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1C;EACAgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -35,9 +35,9 @@ const useDrawerHeaderStyles = makeStyles({
|
|
|
35
35
|
/**
|
|
36
36
|
* Apply styling to the DrawerHeader slots based on the state
|
|
37
37
|
*/ export const useDrawerHeaderStyles_unstable = (state)=>{
|
|
38
|
-
'use no memo';
|
|
39
38
|
const styles = useStyles();
|
|
40
39
|
const rootStyles = useDrawerHeaderStyles();
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
41
|
state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
|
|
42
42
|
'middle',
|
|
43
43
|
'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;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,kBAAkB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,gBAAgB,EAAE;IACjGC,KAAKX,OAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,qBAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnB,oDAAoD;IACpDM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,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"}
|
|
@@ -13,9 +13,8 @@ const useStyles = /*#__PURE__*/__resetStyles("r1ig4pwh", null, [".r1ig4pwh{margi
|
|
|
13
13
|
* Apply styling to the DrawerHeaderNavigation slots based on the state
|
|
14
14
|
*/
|
|
15
15
|
export const useDrawerHeaderNavigationStyles_unstable = state => {
|
|
16
|
-
'use no memo';
|
|
17
|
-
|
|
18
16
|
const styles = useStyles();
|
|
17
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
19
18
|
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
|
|
20
19
|
return state;
|
|
21
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"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,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1B;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -12,8 +12,8 @@ export const drawerHeaderNavigationClassNames = {
|
|
|
12
12
|
/**
|
|
13
13
|
* Apply styling to the DrawerHeaderNavigation slots based on the state
|
|
14
14
|
*/ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{
|
|
15
|
-
'use no memo';
|
|
16
15
|
const styles = useStyles();
|
|
16
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
17
17
|
state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
|
|
18
18
|
return state;
|
|
19
19
|
};
|
package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js.map
CHANGED
|
@@ -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;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,OAAOK,gBAAgB,CAAC,YAAY,EAAEL,OAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -28,8 +28,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
28
28
|
* Apply styling to the DrawerHeaderTitle slots based on the state
|
|
29
29
|
*/
|
|
30
30
|
export const useDrawerHeaderTitleStyles_unstable = state => {
|
|
31
|
-
'use no memo';
|
|
32
|
-
|
|
33
31
|
const styles = useStyles();
|
|
34
32
|
const {
|
|
35
33
|
heading: root = {},
|
|
@@ -49,11 +47,14 @@ export const useDrawerHeaderTitleStyles_unstable = state => {
|
|
|
49
47
|
root,
|
|
50
48
|
action
|
|
51
49
|
});
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
52
51
|
state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
|
|
53
52
|
if (state.heading) {
|
|
53
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
54
|
state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
|
|
55
55
|
}
|
|
56
56
|
if (state.action) {
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
58
|
state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
|
|
58
59
|
}
|
|
59
60
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"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,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAE;IACpC;IACA;IACA;IACA;IACAW;EAAW,CAAC,GAAGF,KAAK;EACpBd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACF;EACAS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACf;IACAU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACd;IACAS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -23,7 +23,6 @@ export const drawerHeaderTitleClassNames = {
|
|
|
23
23
|
/**
|
|
24
24
|
* Apply styling to the DrawerHeaderTitle slots based on the state
|
|
25
25
|
*/ export const useDrawerHeaderTitleStyles_unstable = (state)=>{
|
|
26
|
-
'use no memo';
|
|
27
26
|
const styles = useStyles();
|
|
28
27
|
const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot
|
|
29
28
|
// but there's no way to retrieve the element type of a slot from the slot definition
|
|
@@ -39,11 +38,14 @@ export const drawerHeaderTitleClassNames = {
|
|
|
39
38
|
root,
|
|
40
39
|
action
|
|
41
40
|
});
|
|
41
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
42
42
|
state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
|
|
43
43
|
if (state.heading) {
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
44
45
|
state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
|
|
45
46
|
}
|
|
46
47
|
if (state.action) {
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
49
|
state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
|
|
48
50
|
}
|
|
49
51
|
return state;
|
|
@@ -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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEA,oDAAoD;IACpDS,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjB,oDAAoD;QACpDU,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChB,oDAAoD;QACpDS,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,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":"AAyCA,WAEE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { InlineDrawer } from './InlineDrawer';
|
|
2
2
|
export { renderInlineDrawer_unstable } from './renderInlineDrawer';
|
|
3
|
-
export { useInlineDrawer_unstable } from './useInlineDrawer';
|
|
3
|
+
export { useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './useInlineDrawer';
|
|
4
4
|
export { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';
|
|
@@ -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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;
|
|
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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAS9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
|
|
@@ -7,8 +7,8 @@ import { DrawerProvider } from '../../contexts/drawerContext';
|
|
|
7
7
|
assertSlots(state);
|
|
8
8
|
return /*#__PURE__*/ _jsx(DrawerProvider, {
|
|
9
9
|
value: contextValue,
|
|
10
|
-
children: /*#__PURE__*/ _jsx(state.surfaceMotion, {
|
|
10
|
+
children: state.surfaceMotion ? /*#__PURE__*/ _jsx(state.surfaceMotion, {
|
|
11
11
|
children: /*#__PURE__*/ _jsx(state.root, {})
|
|
12
|
-
})
|
|
12
|
+
}) : /*#__PURE__*/ _jsx(state.root, {})
|
|
13
13
|
});
|
|
14
14
|
};
|
|
@@ -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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAI9D;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACpBD,MAAMG,aAAa,iBAClB,KAACH,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;2BAGb,KAACJ,MAAMI,IAAI;;AAInB,EAAE"}
|