@fluentui/react-drawer 9.0.7 → 9.0.9
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 +25 -2
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +10 -17
- package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js +1 -7
- package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +10 -17
- package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js +6 -18
- package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 16 Jan 2024 13:07:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.9)
|
|
8
|
+
|
|
9
|
+
Tue, 16 Jan 2024 13:07:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.8..@fluentui/react-drawer_v9.0.9)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: remove useHeadingProps() and React.useMemo() ([PR #29360](https://github.com/microsoft/fluentui/pull/29360) by olfedias@microsoft.com)
|
|
15
|
+
- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-dialog to v9.9.5 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion-preview to v0.5.8 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.8)
|
|
22
|
+
|
|
23
|
+
Thu, 11 Jan 2024 09:04:29 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.7..@fluentui/react-drawer_v9.0.8)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- Bump @fluentui/react-dialog to v9.9.4 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.7)
|
|
8
31
|
|
|
9
|
-
Mon, 08 Jan 2024 16:
|
|
32
|
+
Mon, 08 Jan 2024 16:24:28 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.6..@fluentui/react-drawer_v9.0.7)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
@@ -1,21 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useDialogContext_unstable } from '@fluentui/react-dialog';
|
|
4
|
-
/**
|
|
5
|
-
* @internal
|
|
6
|
-
* Create the shorthand for the heading element.
|
|
7
|
-
* @param props - props from this instance of DrawerHeaderTitle
|
|
8
|
-
*/ const useHeadingProps = ({ children, heading })=>{
|
|
9
|
-
const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
|
|
10
|
-
return slot.optional(heading, {
|
|
11
|
-
defaultProps: {
|
|
12
|
-
id,
|
|
13
|
-
children
|
|
14
|
-
},
|
|
15
|
-
renderByDefault: true,
|
|
16
|
-
elementType: 'h2'
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
4
|
/**
|
|
20
5
|
* Create the state required to render DrawerHeaderTitle.
|
|
21
6
|
*
|
|
@@ -25,7 +10,8 @@ import { useDialogContext_unstable } from '@fluentui/react-dialog';
|
|
|
25
10
|
* @param props - props from this instance of DrawerHeaderTitle
|
|
26
11
|
* @param ref - reference to root HTMLElement of DrawerHeaderTitle
|
|
27
12
|
*/ export const useDrawerHeaderTitle_unstable = (props, ref)=>{
|
|
28
|
-
const
|
|
13
|
+
const { children, heading } = props;
|
|
14
|
+
const headingId = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
|
|
29
15
|
return {
|
|
30
16
|
components: {
|
|
31
17
|
root: 'div',
|
|
@@ -38,7 +24,14 @@ import { useDialogContext_unstable } from '@fluentui/react-dialog';
|
|
|
38
24
|
}), {
|
|
39
25
|
elementType: 'div'
|
|
40
26
|
}),
|
|
41
|
-
heading:
|
|
27
|
+
heading: slot.optional(heading, {
|
|
28
|
+
defaultProps: {
|
|
29
|
+
id: headingId,
|
|
30
|
+
children
|
|
31
|
+
},
|
|
32
|
+
renderByDefault: true,
|
|
33
|
+
elementType: 'h2'
|
|
34
|
+
}),
|
|
42
35
|
action: slot.optional(props.action, {
|
|
43
36
|
elementType: 'div'
|
|
44
37
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n props: DrawerHeaderTitleProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n const { children, heading } = props;\n const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n heading: slot.optional(heading, {\n defaultProps: {\n id: headingId,\n children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
2
|
import { tokens } from '@fluentui/react-theme';
|
|
4
3
|
import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
|
|
@@ -52,12 +51,7 @@ export const useInlineDrawerStyles_unstable = state => {
|
|
|
52
51
|
const baseClassNames = useDrawerBaseClassNames(state);
|
|
53
52
|
const rootStyles = useDrawerRootStyles();
|
|
54
53
|
const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
|
|
55
|
-
const separatorClass =
|
|
56
|
-
if (!state.separator) {
|
|
57
|
-
return undefined;
|
|
58
|
-
}
|
|
59
|
-
return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
|
|
60
|
-
}, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
|
|
54
|
+
const separatorClass = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);
|
|
61
55
|
state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
|
|
62
56
|
return state;
|
|
63
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","useInlineDrawerStyles_unstable","state","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","separatorClass","separator","position","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\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 separatorValues = [\n '1px',\n 'solid',\n tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n /* Separator */ separatorStart: {\n ...shorthands.borderRight(...separatorValues)\n },\n separatorEnd: {\n ...shorthands.borderLeft(...separatorValues)\n },\n /* Positioning */ start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n },\n end: {\n transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity, transform',\n willChange: 'opacity, transform'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)'\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 const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const separatorClass = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,iWAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPR,MAAM,CAACS,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAG1B,QAAA;EAAA;IAAA2B,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAU7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,cAAc,GAAG5B,uBAAuB,CAAC0B,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGtB,mBAAmB,CAAC,CAAC;EACxC,MAAMuB,gBAAgB,GAAG7B,mBAAmB,CAACyB,KAAK,CAACK,MAAM,EAAEX,qBAAqB,CAAC,CAAC,CAAC;EACnF,MAAMY,cAAc,GAAGN,KAAK,CAACO,SAAS,KAAKP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAACrB,cAAc,GAAGqB,UAAU,CAACjB,YAAY,CAAC;EAC5Hc,KAAK,CAACvB,IAAI,CAACgC,SAAS,GAAGxC,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEwB,WAAW,EAAEC,cAAc,EAAEI,cAAc,EAAEH,UAAU,CAACH,KAAK,CAACQ,QAAQ,CAAC,EAAEJ,gBAAgB,EAAEJ,KAAK,CAACvB,IAAI,CAACgC,SAAS,CAAC;EACjL,OAAOT,KAAK;AAChB,CAAC"}
|
|
@@ -12,23 +12,9 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reactdialog = require("@fluentui/react-dialog");
|
|
15
|
-
/**
|
|
16
|
-
* @internal
|
|
17
|
-
* Create the shorthand for the heading element.
|
|
18
|
-
* @param props - props from this instance of DrawerHeaderTitle
|
|
19
|
-
*/ const useHeadingProps = ({ children, heading })=>{
|
|
20
|
-
const id = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
|
|
21
|
-
return _reactutilities.slot.optional(heading, {
|
|
22
|
-
defaultProps: {
|
|
23
|
-
id,
|
|
24
|
-
children
|
|
25
|
-
},
|
|
26
|
-
renderByDefault: true,
|
|
27
|
-
elementType: 'h2'
|
|
28
|
-
});
|
|
29
|
-
};
|
|
30
15
|
const useDrawerHeaderTitle_unstable = (props, ref)=>{
|
|
31
|
-
const
|
|
16
|
+
const { children, heading } = props;
|
|
17
|
+
const headingId = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
|
|
32
18
|
return {
|
|
33
19
|
components: {
|
|
34
20
|
root: 'div',
|
|
@@ -41,7 +27,14 @@ const useDrawerHeaderTitle_unstable = (props, ref)=>{
|
|
|
41
27
|
}), {
|
|
42
28
|
elementType: 'div'
|
|
43
29
|
}),
|
|
44
|
-
heading:
|
|
30
|
+
heading: _reactutilities.slot.optional(heading, {
|
|
31
|
+
defaultProps: {
|
|
32
|
+
id: headingId,
|
|
33
|
+
children
|
|
34
|
+
},
|
|
35
|
+
renderByDefault: true,
|
|
36
|
+
elementType: 'h2'
|
|
37
|
+
}),
|
|
45
38
|
action: _reactutilities.slot.optional(props.action, {
|
|
46
39
|
elementType: 'div'
|
|
47
40
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n/**\n *
|
|
1
|
+
{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n const { children, heading } = props;\n const headingId = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref,\n ...props\n }), {\n elementType: 'div'\n }),\n heading: slot.optional(heading, {\n defaultProps: {\n id: headingId,\n children\n },\n renderByDefault: true,\n elementType: 'h2'\n }),\n action: slot.optional(props.action, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","useDialogContext_unstable","ctx","dialogTitleId","components","root","action","slot","always","getIntrinsicElementProps","elementType","optional","defaultProps","id","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;6BACL;AAS/B,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYC,IAAAA,sCAAyB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACpE,OAAO;QACHC,YAAY;YACRC,MAAM;YACNN,SAAS;YACTO,QAAQ;QACZ;QACAD,MAAME,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CZ;YACA,GAAGD,KAAK;QACZ,IAAI;YACAc,aAAa;QACjB;QACAX,SAASQ,oBAAI,CAACI,QAAQ,CAACZ,SAAS;YAC5Ba,cAAc;gBACVC,IAAIb;gBACJF;YACJ;YACAgB,iBAAiB;YACjBJ,aAAa;QACjB;QACAJ,QAAQC,oBAAI,CAACI,QAAQ,CAACf,MAAMU,MAAM,EAAE;YAChCI,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -16,16 +16,14 @@ _export(exports, {
|
|
|
16
16
|
return useInlineDrawerStyles_unstable;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
const
|
|
20
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
21
|
-
const _react1 = require("@griffel/react");
|
|
19
|
+
const _react = require("@griffel/react");
|
|
22
20
|
const _reacttheme = require("@fluentui/react-theme");
|
|
23
21
|
const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
|
|
24
22
|
const _reactmotionpreview = require("@fluentui/react-motion-preview");
|
|
25
23
|
const inlineDrawerClassNames = {
|
|
26
24
|
root: 'fui-InlineDrawer'
|
|
27
25
|
};
|
|
28
|
-
const useDrawerResetStyles = /*#__PURE__*/ (0,
|
|
26
|
+
const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r46ju4x", null, [
|
|
29
27
|
".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"
|
|
30
28
|
]);
|
|
31
29
|
/**
|
|
@@ -35,7 +33,7 @@ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r46ju4x",
|
|
|
35
33
|
'solid',
|
|
36
34
|
_reacttheme.tokens.colorNeutralBackground3
|
|
37
35
|
];
|
|
38
|
-
const useDrawerRootStyles = /*#__PURE__*/ (0,
|
|
36
|
+
const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
39
37
|
separatorStart: {
|
|
40
38
|
Bekrc4i: [
|
|
41
39
|
"f1hqa2wf",
|
|
@@ -82,7 +80,7 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
|
82
80
|
".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}"
|
|
83
81
|
]
|
|
84
82
|
});
|
|
85
|
-
const useDrawerMotionStyles = /*#__PURE__*/ (0,
|
|
83
|
+
const useDrawerMotionStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
86
84
|
"default": {
|
|
87
85
|
abs64n: "fk73vx1",
|
|
88
86
|
Bmy1vo4: "f15rjlgw",
|
|
@@ -106,17 +104,7 @@ const useInlineDrawerStyles_unstable = (state)=>{
|
|
|
106
104
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
107
105
|
const rootStyles = useDrawerRootStyles();
|
|
108
106
|
const motionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
|
|
109
|
-
const separatorClass =
|
|
110
|
-
|
|
111
|
-
return undefined;
|
|
112
|
-
}
|
|
113
|
-
return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
|
|
114
|
-
}, [
|
|
115
|
-
state.position,
|
|
116
|
-
state.separator,
|
|
117
|
-
rootStyles.separatorEnd,
|
|
118
|
-
rootStyles.separatorStart
|
|
119
|
-
]);
|
|
120
|
-
state.root.className = (0, _react1.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
|
|
107
|
+
const separatorClass = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);
|
|
108
|
+
state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
|
|
121
109
|
return state;
|
|
122
110
|
}; //# sourceMappingURL=useInlineDrawerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r46ju4x\", null, [\".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n separatorStart: {\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n },\n separatorEnd: {\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n }\n}, {\n d: [\".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n \"default\": {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f15rjlgw\",\n Es3by: \"f1blt7p\"\n },\n enter: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n const separatorClass = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","state","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","separatorClass","separator","position","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IA4CAC,8BAA8B;eAA9BA;;;uBAhDqD;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA8U;AACxZ;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAChDC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;KAAmE;AAC/a;AACA,MAAMC,wBAAwB,WAAW,GAAEb,IAAAA,eAAQ,EAAC;IAClD,WAAW;QACTc,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRJ,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AAIO,MAAMpB,iCAAiC0B,CAAAA;IAC5C,MAAMC,cAAczB;IACpB,MAAM0B,iBAAiBC,IAAAA,kDAAuB,EAACH;IAC/C,MAAMI,aAAavB;IACnB,MAAMwB,mBAAmBC,IAAAA,uCAAmB,EAACN,MAAMO,MAAM,EAAEZ;IAC3D,MAAMa,iBAAiBR,MAAMS,SAAS,IAAKT,CAAAA,MAAMU,QAAQ,KAAK,UAAUN,WAAWrB,cAAc,GAAGqB,WAAWjB,YAAY,AAAD;IAC1Ha,MAAMzB,IAAI,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,uBAAuBE,IAAI,EAAE0B,aAAaC,gBAAgBM,gBAAgBJ,UAAU,CAACJ,MAAMU,QAAQ,CAAC,EAAEL,kBAAkBL,MAAMzB,IAAI,CAACoC,SAAS;IAChL,OAAOX;AACT,GACA,wDAAwD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.9",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.9.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
40
|
-
"@fluentui/react-motion-preview": "^0.5.
|
|
38
|
+
"@fluentui/react-dialog": "^9.9.5",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.25",
|
|
40
|
+
"@fluentui/react-motion-preview": "^0.5.8",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
42
|
-
"@fluentui/react-tabster": "^9.17.
|
|
42
|
+
"@fluentui/react-tabster": "^9.17.1",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.16",
|
|
44
44
|
"@fluentui/react-utilities": "^9.15.6",
|
|
45
45
|
"@griffel/react": "^1.5.14",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
50
|
-
"@types/react-dom": ">=16.
|
|
50
|
+
"@types/react-dom": ">=16.9.0 <19.0.0",
|
|
51
51
|
"react": ">=16.14.0 <19.0.0",
|
|
52
52
|
"react-dom": ">=16.14.0 <19.0.0"
|
|
53
53
|
},
|