@fluentui/react-dialog 9.10.0 → 9.10.2
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 +31 -2
- package/lib/components/Dialog/useDialog.js +19 -10
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.js +35 -36
- package/lib/utils/useDisableBodyScroll.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +19 -10
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/utils/useDisableBodyScroll.js +38 -43
- package/lib-commonjs/utils/useDisableBodyScroll.js.map +1 -1
- package/package.json +13 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 02 May 2024 11:31:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.2)
|
|
8
|
+
|
|
9
|
+
Thu, 02 May 2024 11:31:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.1..@fluentui/react-dialog_v9.10.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- bugfix: ensures non-modal Dialog returns focus to trigger when closed ([PR #30628](https://github.com/microsoft/fluentui/pull/30628) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- bugfix: open/close animation jumps when body is scrollable ([PR #31199](https://github.com/microsoft/fluentui/pull/31199) by bernardo.sunderhus@gmail.com)
|
|
16
|
+
- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.4.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.1)
|
|
22
|
+
|
|
23
|
+
Tue, 23 Apr 2024 08:17:49 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.0..@fluentui/react-dialog_v9.10.1)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
29
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
31
|
+
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
32
|
+
- Bump @fluentui/react-aria to v9.10.5 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
34
|
+
- Bump @fluentui/react-portal to v9.4.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
35
|
+
|
|
7
36
|
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.0)
|
|
8
37
|
|
|
9
|
-
Wed, 17 Apr 2024 21:
|
|
38
|
+
Wed, 17 Apr 2024 21:53:51 GMT
|
|
10
39
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.16..@fluentui/react-dialog_v9.10.0)
|
|
11
40
|
|
|
12
41
|
### Minor changes
|
|
@@ -28,20 +28,29 @@ import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
const focusRef = useFocusFirstElement(open, modalType);
|
|
31
|
-
const
|
|
31
|
+
const { modalAttributes, triggerAttributes } = useModalAttributes({
|
|
32
|
+
trapFocus: modalType !== 'non-modal',
|
|
33
|
+
legacyTrapFocus: !inertTrapFocus
|
|
34
|
+
});
|
|
35
|
+
const isNestedDialog = useHasParentContext(DialogContext);
|
|
36
|
+
const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
|
|
32
37
|
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
33
38
|
useIsomorphicLayoutEffect(()=>{
|
|
34
|
-
if (
|
|
35
|
-
return
|
|
39
|
+
if (isNestedDialog) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (open && isBodyScrollLocked) {
|
|
43
|
+
disableBodyScroll();
|
|
44
|
+
} else {
|
|
45
|
+
enableBodyScroll();
|
|
36
46
|
}
|
|
37
47
|
}, [
|
|
38
48
|
disableBodyScroll,
|
|
39
|
-
|
|
49
|
+
enableBodyScroll,
|
|
50
|
+
isBodyScrollLocked,
|
|
51
|
+
isNestedDialog,
|
|
52
|
+
open
|
|
40
53
|
]);
|
|
41
|
-
const { modalAttributes, triggerAttributes } = useModalAttributes({
|
|
42
|
-
trapFocus: modalType !== 'non-modal',
|
|
43
|
-
legacyTrapFocus: !inertTrapFocus
|
|
44
|
-
});
|
|
45
54
|
return {
|
|
46
55
|
components: {
|
|
47
56
|
backdrop: 'div'
|
|
@@ -53,9 +62,9 @@ import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
53
62
|
trigger,
|
|
54
63
|
requestOpenChange,
|
|
55
64
|
dialogTitleId: useId('dialog-title-'),
|
|
56
|
-
isNestedDialog
|
|
65
|
+
isNestedDialog,
|
|
57
66
|
dialogRef: focusRef,
|
|
58
|
-
modalAttributes
|
|
67
|
+
modalAttributes,
|
|
59
68
|
triggerAttributes
|
|
60
69
|
};
|
|
61
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n const disableBodyScroll = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n
|
|
1
|
+
{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus,\n });\n\n const isNestedDialog = useHasParentContext(DialogContext);\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(() => {\n if (isNestedDialog) {\n return;\n }\n if (open && isBodyScrollLocked) {\n disableBodyScroll();\n } else {\n enableBodyScroll();\n }\n }, [disableBodyScroll, enableBodyScroll, isBodyScrollLocked, isNestedDialog, open]);\n\n return {\n components: {\n backdrop: 'div',\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes,\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\n and at most two children <DialogTrigger/> <DialogSurface/> (in this order).\n `);\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"names":["React","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","disableBodyScroll","enableBodyScroll","isBodyScrollLocked","Boolean","components","backdrop","dialogTitleId","dialogRef","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AACrH,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,cAAc;AACzE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,qBAAqB;QAC3CoB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBvB,iBAAiB,CAACwB;QAC1CZ,yBAAAA,mCAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAE5C,MAAM,EAAEiB,eAAe,EAAEC,iBAAiB,EAAE,GAAGtB,mBAAmB;QAChEuB,WAAWnB,cAAc;QACzBoB,iBAAiB,CAAClB;IACpB;IAEA,MAAMmB,iBAAiB7B,oBAAoBG;IAE3C,MAAM,EAAE2B,iBAAiB,EAAEC,gBAAgB,EAAE,GAAG9B;IAChD,MAAM+B,qBAAqBC,QAAQnB,QAAQN,cAAc;IACzDT,0BAA0B;QACxB,IAAI8B,gBAAgB;YAClB;QACF;QACA,IAAIf,QAAQkB,oBAAoB;YAC9BF;QACF,OAAO;YACLC;QACF;IACF,GAAG;QAACD;QAAmBC;QAAkBC;QAAoBH;QAAgBf;KAAK;IAElF,OAAO;QACLoB,YAAY;YACVC,UAAU;QACZ;QACAzB;QACAI;QACAN;QACAI;QACAD;QACAS;QACAgB,eAAetC,MAAM;QACrB+B;QACAQ,WAAWb;QACXC;QACAC;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASb,4BACPN,QAAyB;IAEzB,MAAM+B,gBAAgB3C,MAAM4C,QAAQ,CAACC,OAAO,CAACjC;IAC7C,IAAIkC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
|
|
@@ -1,47 +1,46 @@
|
|
|
1
1
|
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
2
|
+
import { makeResetStyles } from '@griffel/react';
|
|
2
3
|
import { useCallback } from 'react';
|
|
3
|
-
|
|
4
|
+
// this style must be applied to the html element to disable scrolling
|
|
5
|
+
const useHTMLNoScrollStyles = makeResetStyles({
|
|
6
|
+
overflowY: [
|
|
7
|
+
'hidden',
|
|
8
|
+
'clip'
|
|
9
|
+
],
|
|
10
|
+
scrollbarGutter: 'stable'
|
|
11
|
+
});
|
|
4
12
|
/**
|
|
5
|
-
* hook that disables body scrolling through `
|
|
13
|
+
* hook that disables body scrolling through `overflowY: hidden` CSS property
|
|
6
14
|
*/ export function useDisableBodyScroll() {
|
|
15
|
+
const htmlNoScrollStyle = useHTMLNoScrollStyles();
|
|
7
16
|
const { targetDocument } = useFluent_unstable();
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
17
|
+
const disableBodyScroll = useCallback(()=>{
|
|
18
|
+
var _targetDocument_defaultView;
|
|
19
|
+
if (!targetDocument) {
|
|
20
|
+
return;
|
|
11
21
|
}
|
|
22
|
+
var _targetDocument_defaultView_innerWidth;
|
|
23
|
+
const isScrollbarVisible = ((_targetDocument_defaultView_innerWidth = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerWidth) !== null && _targetDocument_defaultView_innerWidth !== void 0 ? _targetDocument_defaultView_innerWidth : 0) > targetDocument.documentElement.clientWidth;
|
|
24
|
+
if (!isScrollbarVisible) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
targetDocument.documentElement.classList.add(htmlNoScrollStyle);
|
|
28
|
+
return;
|
|
12
29
|
}, [
|
|
13
|
-
targetDocument
|
|
30
|
+
targetDocument,
|
|
31
|
+
htmlNoScrollStyle
|
|
14
32
|
]);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
* @param target - element to disable scrolling from
|
|
19
|
-
* @returns a method for enabling scrolling again
|
|
20
|
-
*/ export function disableScroll(target) {
|
|
21
|
-
var _target_ownerDocument_defaultView;
|
|
22
|
-
const { clientWidth } = target.ownerDocument.documentElement;
|
|
23
|
-
var _target_ownerDocument_defaultView_innerWidth;
|
|
24
|
-
const innerWidth = (_target_ownerDocument_defaultView_innerWidth = (_target_ownerDocument_defaultView = target.ownerDocument.defaultView) === null || _target_ownerDocument_defaultView === void 0 ? void 0 : _target_ownerDocument_defaultView.innerWidth) !== null && _target_ownerDocument_defaultView_innerWidth !== void 0 ? _target_ownerDocument_defaultView_innerWidth : 0;
|
|
25
|
-
assertIsDisableScrollElement(target);
|
|
26
|
-
if (target[disableScrollElementProp].count === 0) {
|
|
27
|
-
target.style.overflow = 'hidden';
|
|
28
|
-
target.style.paddingRight = `${innerWidth - clientWidth}px`;
|
|
29
|
-
}
|
|
30
|
-
target[disableScrollElementProp].count++;
|
|
31
|
-
return ()=>{
|
|
32
|
-
target[disableScrollElementProp].count--;
|
|
33
|
-
if (target[disableScrollElementProp].count === 0) {
|
|
34
|
-
target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;
|
|
35
|
-
target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;
|
|
33
|
+
const enableBodyScroll = useCallback(()=>{
|
|
34
|
+
if (!targetDocument) {
|
|
35
|
+
return;
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
previousPaddingRightStyle: element.style.paddingRight
|
|
37
|
+
targetDocument.documentElement.classList.remove(htmlNoScrollStyle);
|
|
38
|
+
}, [
|
|
39
|
+
targetDocument,
|
|
40
|
+
htmlNoScrollStyle
|
|
41
|
+
]);
|
|
42
|
+
return {
|
|
43
|
+
disableBodyScroll,
|
|
44
|
+
enableBodyScroll
|
|
46
45
|
};
|
|
47
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { makeResetStyles } from '@griffel/react';\nimport { useCallback } from 'react';\n\n// this style must be applied to the html element to disable scrolling\nconst useHTMLNoScrollStyles = makeResetStyles({\n overflowY: ['hidden', 'clip'],\n scrollbarGutter: 'stable',\n});\n\n/**\n * hook that disables body scrolling through `overflowY: hidden` CSS property\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyle = useHTMLNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isScrollbarVisible =\n (targetDocument.defaultView?.innerWidth ?? 0) > targetDocument.documentElement.clientWidth;\n if (!isScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyle);\n return;\n }, [targetDocument, htmlNoScrollStyle]);\n\n const enableBodyScroll = useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyle);\n }, [targetDocument, htmlNoScrollStyle]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["useFluent_unstable","makeResetStyles","useCallback","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useDisableBodyScroll","htmlNoScrollStyle","targetDocument","disableBodyScroll","isScrollbarVisible","defaultView","innerWidth","documentElement","clientWidth","classList","add","enableBodyScroll","remove"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,eAAe,QAAQ,iBAAiB;AACjD,SAASC,WAAW,QAAQ,QAAQ;AAEpC,sEAAsE;AACtE,MAAMC,wBAAwBF,gBAAgB;IAC5CG,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB;AAEA;;CAEC,GACD,OAAO,SAASC;IAId,MAAMC,oBAAoBJ;IAC1B,MAAM,EAAEK,cAAc,EAAE,GAAGR;IAE3B,MAAMS,oBAAoBP,YAAY;YAKjCM;QAJH,IAAI,CAACA,gBAAgB;YACnB;QACF;YAEGA;QADH,MAAME,qBACJ,AAACF,CAAAA,CAAAA,0CAAAA,8BAAAA,eAAeG,WAAW,cAA1BH,kDAAAA,4BAA4BI,UAAU,cAAtCJ,oDAAAA,yCAA0C,CAAA,IAAKA,eAAeK,eAAe,CAACC,WAAW;QAC5F,IAAI,CAACJ,oBAAoB;YACvB;QACF;QACAF,eAAeK,eAAe,CAACE,SAAS,CAACC,GAAG,CAACT;QAC7C;IACF,GAAG;QAACC;QAAgBD;KAAkB;IAEtC,MAAMU,mBAAmBf,YAAY;QACnC,IAAI,CAACM,gBAAgB;YACnB;QACF;QACAA,eAAeK,eAAe,CAACE,SAAS,CAACG,MAAM,CAACX;IAClD,GAAG;QAACC;QAAgBD;KAAkB;IAEtC,OAAO;QACLE;QACAQ;IACF;AACF"}
|
|
@@ -32,20 +32,29 @@ const useDialog_unstable = (props)=>{
|
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
const focusRef = (0, _utils.useFocusFirstElement)(open, modalType);
|
|
35
|
-
const
|
|
35
|
+
const { modalAttributes, triggerAttributes } = (0, _reacttabster.useModalAttributes)({
|
|
36
|
+
trapFocus: modalType !== 'non-modal',
|
|
37
|
+
legacyTrapFocus: !inertTrapFocus
|
|
38
|
+
});
|
|
39
|
+
const isNestedDialog = (0, _reactcontextselector.useHasParentContext)(_contexts.DialogContext);
|
|
40
|
+
const { disableBodyScroll, enableBodyScroll } = (0, _utils.useDisableBodyScroll)();
|
|
36
41
|
const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
|
|
37
42
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
38
|
-
if (
|
|
39
|
-
return
|
|
43
|
+
if (isNestedDialog) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (open && isBodyScrollLocked) {
|
|
47
|
+
disableBodyScroll();
|
|
48
|
+
} else {
|
|
49
|
+
enableBodyScroll();
|
|
40
50
|
}
|
|
41
51
|
}, [
|
|
42
52
|
disableBodyScroll,
|
|
43
|
-
|
|
53
|
+
enableBodyScroll,
|
|
54
|
+
isBodyScrollLocked,
|
|
55
|
+
isNestedDialog,
|
|
56
|
+
open
|
|
44
57
|
]);
|
|
45
|
-
const { modalAttributes, triggerAttributes } = (0, _reacttabster.useModalAttributes)({
|
|
46
|
-
trapFocus: modalType !== 'non-modal',
|
|
47
|
-
legacyTrapFocus: !inertTrapFocus
|
|
48
|
-
});
|
|
49
58
|
return {
|
|
50
59
|
components: {
|
|
51
60
|
backdrop: 'div'
|
|
@@ -57,9 +66,9 @@ const useDialog_unstable = (props)=>{
|
|
|
57
66
|
trigger,
|
|
58
67
|
requestOpenChange,
|
|
59
68
|
dialogTitleId: (0, _reactutilities.useId)('dialog-title-'),
|
|
60
|
-
isNestedDialog
|
|
69
|
+
isNestedDialog,
|
|
61
70
|
dialogRef: focusRef,
|
|
62
|
-
modalAttributes
|
|
71
|
+
modalAttributes,
|
|
63
72
|
triggerAttributes
|
|
64
73
|
};
|
|
65
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */ export const useDialog_unstable = (props)=>{\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n const [trigger, content] = childrenToTriggerAndContent(children);\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const requestOpenChange = useEventCallback((data)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n const focusRef = useFocusFirstElement(open, modalType);\n const disableBodyScroll = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(()=>{\n if (
|
|
1
|
+
{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */ export const useDialog_unstable = (props)=>{\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n const [trigger, content] = childrenToTriggerAndContent(children);\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false\n });\n const requestOpenChange = useEventCallback((data)=>{\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n const focusRef = useFocusFirstElement(open, modalType);\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus\n });\n const isNestedDialog = useHasParentContext(DialogContext);\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n useIsomorphicLayoutEffect(()=>{\n if (isNestedDialog) {\n return;\n }\n if (open && isBodyScrollLocked) {\n disableBodyScroll();\n } else {\n enableBodyScroll();\n }\n }, [\n disableBodyScroll,\n enableBodyScroll,\n isBodyScrollLocked,\n isNestedDialog,\n open\n ]);\n return {\n components: {\n backdrop: 'div'\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes\n };\n};\n/**\n * Extracts trigger and content from children\n */ function childrenToTriggerAndContent(children) {\n const childrenArray = React.Children.toArray(children);\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(`@fluentui/react-dialog [useDialog]:\nDialog must contain at least one child <DialogSurface/>,\nand at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);\n }\n }\n switch(childrenArray.length){\n // case where there's a trigger followed by content\n case 2:\n return childrenArray;\n // case where there's only content\n case 1:\n return [\n undefined,\n childrenArray[0]\n ];\n // unknown case\n default:\n return [\n undefined,\n undefined\n ];\n }\n}\n"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","isNestedDialog","useHasParentContext","DialogContext","disableBodyScroll","enableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","components","backdrop","dialogTitleId","useId","dialogRef","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAQxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAChF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QACzCC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc;IAClB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;QACxCd,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED;QACrF,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YAClCV,QAAQQ,KAAKT,IAAI;QACrB;IACJ;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAM,EAAEoB,eAAe,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC9DC,WAAWvB,cAAc;QACzBwB,iBAAiB,CAACtB;IACtB;IACA,MAAMuB,iBAAiBC,IAAAA,yCAAmB,EAACC,uBAAa;IACxD,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,2BAAoB;IACpE,MAAMC,qBAAqBC,QAAQ1B,QAAQN,cAAc;IACzDiC,IAAAA,yCAAyB,EAAC;QACtB,IAAIR,gBAAgB;YAChB;QACJ;QACA,IAAInB,QAAQyB,oBAAoB;YAC5BH;QACJ,OAAO;YACHC;QACJ;IACJ,GAAG;QACCD;QACAC;QACAE;QACAN;QACAnB;KACH;IACD,OAAO;QACH4B,YAAY;YACRC,UAAU;QACd;QACAjC;QACAI;QACAN;QACAI;QACAD;QACAU;QACAuB,eAAeC,IAAAA,qBAAK,EAAC;QACrBZ;QACAa,WAAWpB;QACXE;QACAC;IACJ;AACJ;AACA;;CAEC,GAAG,SAAShB,4BAA4BN,QAAQ;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC1D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;2EAEiD,CAAC;QACpE;IACJ;IACA,OAAOT,cAAcO,MAAM;QACvB,mDAAmD;QACnD,KAAK;YACD,OAAOP;QACX,kCAAkC;QAClC,KAAK;YACD,OAAO;gBACHU;gBACAV,aAAa,CAAC,EAAE;aACnB;QACL,eAAe;QACf;YACI,OAAO;gBACHU;gBACAA;aACH;IACT;AACJ"}
|
|
@@ -2,58 +2,53 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
useDisableBodyScroll: function() {
|
|
5
|
+
Object.defineProperty(exports, "useDisableBodyScroll", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
13
8
|
return useDisableBodyScroll;
|
|
14
|
-
},
|
|
15
|
-
disableScroll: function() {
|
|
16
|
-
return disableScroll;
|
|
17
9
|
}
|
|
18
10
|
});
|
|
19
11
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
20
|
-
const _react = require("react");
|
|
21
|
-
const
|
|
12
|
+
const _react = require("@griffel/react");
|
|
13
|
+
const _react1 = require("react");
|
|
14
|
+
// this style must be applied to the html element to disable scrolling
|
|
15
|
+
const useHTMLNoScrollStyles = (0, _react.makeResetStyles)({
|
|
16
|
+
overflowY: [
|
|
17
|
+
'hidden',
|
|
18
|
+
'clip'
|
|
19
|
+
],
|
|
20
|
+
scrollbarGutter: 'stable'
|
|
21
|
+
});
|
|
22
22
|
function useDisableBodyScroll() {
|
|
23
|
+
const htmlNoScrollStyle = useHTMLNoScrollStyles();
|
|
23
24
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
const disableBodyScroll = (0, _react1.useCallback)(()=>{
|
|
26
|
+
var _targetDocument_defaultView;
|
|
27
|
+
if (!targetDocument) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
var _targetDocument_defaultView_innerWidth;
|
|
31
|
+
const isScrollbarVisible = ((_targetDocument_defaultView_innerWidth = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerWidth) !== null && _targetDocument_defaultView_innerWidth !== void 0 ? _targetDocument_defaultView_innerWidth : 0) > targetDocument.documentElement.clientWidth;
|
|
32
|
+
if (!isScrollbarVisible) {
|
|
33
|
+
return;
|
|
27
34
|
}
|
|
35
|
+
targetDocument.documentElement.classList.add(htmlNoScrollStyle);
|
|
36
|
+
return;
|
|
28
37
|
}, [
|
|
29
|
-
targetDocument
|
|
38
|
+
targetDocument,
|
|
39
|
+
htmlNoScrollStyle
|
|
30
40
|
]);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const { clientWidth } = target.ownerDocument.documentElement;
|
|
35
|
-
var _target_ownerDocument_defaultView_innerWidth;
|
|
36
|
-
const innerWidth = (_target_ownerDocument_defaultView_innerWidth = (_target_ownerDocument_defaultView = target.ownerDocument.defaultView) === null || _target_ownerDocument_defaultView === void 0 ? void 0 : _target_ownerDocument_defaultView.innerWidth) !== null && _target_ownerDocument_defaultView_innerWidth !== void 0 ? _target_ownerDocument_defaultView_innerWidth : 0;
|
|
37
|
-
assertIsDisableScrollElement(target);
|
|
38
|
-
if (target[disableScrollElementProp].count === 0) {
|
|
39
|
-
target.style.overflow = 'hidden';
|
|
40
|
-
target.style.paddingRight = `${innerWidth - clientWidth}px`;
|
|
41
|
-
}
|
|
42
|
-
target[disableScrollElementProp].count++;
|
|
43
|
-
return ()=>{
|
|
44
|
-
target[disableScrollElementProp].count--;
|
|
45
|
-
if (target[disableScrollElementProp].count === 0) {
|
|
46
|
-
target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;
|
|
47
|
-
target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;
|
|
41
|
+
const enableBodyScroll = (0, _react1.useCallback)(()=>{
|
|
42
|
+
if (!targetDocument) {
|
|
43
|
+
return;
|
|
48
44
|
}
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
previousPaddingRightStyle: element.style.paddingRight
|
|
45
|
+
targetDocument.documentElement.classList.remove(htmlNoScrollStyle);
|
|
46
|
+
}, [
|
|
47
|
+
targetDocument,
|
|
48
|
+
htmlNoScrollStyle
|
|
49
|
+
]);
|
|
50
|
+
return {
|
|
51
|
+
disableBodyScroll,
|
|
52
|
+
enableBodyScroll
|
|
58
53
|
};
|
|
59
54
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDisableBodyScroll.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\nconst
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { makeResetStyles } from '@griffel/react';\nimport { useCallback } from 'react';\n// this style must be applied to the html element to disable scrolling\nconst useHTMLNoScrollStyles = makeResetStyles({\n overflowY: [\n 'hidden',\n 'clip'\n ],\n scrollbarGutter: 'stable'\n});\n/**\n * hook that disables body scrolling through `overflowY: hidden` CSS property\n */ export function useDisableBodyScroll() {\n const htmlNoScrollStyle = useHTMLNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n const disableBodyScroll = useCallback(()=>{\n var _targetDocument_defaultView;\n if (!targetDocument) {\n return;\n }\n var _targetDocument_defaultView_innerWidth;\n const isScrollbarVisible = ((_targetDocument_defaultView_innerWidth = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerWidth) !== null && _targetDocument_defaultView_innerWidth !== void 0 ? _targetDocument_defaultView_innerWidth : 0) > targetDocument.documentElement.clientWidth;\n if (!isScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyle);\n return;\n }, [\n targetDocument,\n htmlNoScrollStyle\n ]);\n const enableBodyScroll = useCallback(()=>{\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyle);\n }, [\n targetDocument,\n htmlNoScrollStyle\n ]);\n return {\n disableBodyScroll,\n enableBodyScroll\n };\n}\n"],"names":["useDisableBodyScroll","useHTMLNoScrollStyles","makeResetStyles","overflowY","scrollbarGutter","htmlNoScrollStyle","targetDocument","useFluent_unstable","disableBodyScroll","useCallback","_targetDocument_defaultView","_targetDocument_defaultView_innerWidth","isScrollbarVisible","defaultView","innerWidth","documentElement","clientWidth","classList","add","enableBodyScroll","remove"],"mappings":";;;;+BAaoBA;;;eAAAA;;;qCAbe;uBACH;wBACJ;AAC5B,sEAAsE;AACtE,MAAMC,wBAAwBC,IAAAA,sBAAe,EAAC;IAC1CC,WAAW;QACP;QACA;KACH;IACDC,iBAAiB;AACrB;AAGW,SAASJ;IAChB,MAAMK,oBAAoBJ;IAC1B,MAAM,EAAEK,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,oBAAoBC,IAAAA,mBAAW,EAAC;QAClC,IAAIC;QACJ,IAAI,CAACJ,gBAAgB;YACjB;QACJ;QACA,IAAIK;QACJ,MAAMC,qBAAqB,AAAC,CAAA,AAACD,CAAAA,yCAAyC,AAACD,CAAAA,8BAA8BJ,eAAeO,WAAW,AAAD,MAAO,QAAQH,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BI,UAAU,AAAD,MAAO,QAAQH,2CAA2C,KAAK,IAAIA,yCAAyC,CAAA,IAAKL,eAAeS,eAAe,CAACC,WAAW;QAC/X,IAAI,CAACJ,oBAAoB;YACrB;QACJ;QACAN,eAAeS,eAAe,CAACE,SAAS,CAACC,GAAG,CAACb;QAC7C;IACJ,GAAG;QACCC;QACAD;KACH;IACD,MAAMc,mBAAmBV,IAAAA,mBAAW,EAAC;QACjC,IAAI,CAACH,gBAAgB;YACjB;QACJ;QACAA,eAAeS,eAAe,CAACE,SAAS,CAACG,MAAM,CAACf;IACpD,GAAG;QACCC;QACAD;KACH;IACD,OAAO;QACHG;QACAW;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.2",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,6 +28,10 @@
|
|
|
28
28
|
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
+
"@fluentui/react-popover": "*",
|
|
32
|
+
"@fluentui/react-tooltip": "*",
|
|
33
|
+
"@fluentui/react-menu": "*",
|
|
34
|
+
"@fluentui/react-button": "*",
|
|
31
35
|
"@fluentui/eslint-plugin": "*",
|
|
32
36
|
"@fluentui/react-conformance": "*",
|
|
33
37
|
"@fluentui/react-conformance-griffel": "*",
|
|
@@ -36,17 +40,17 @@
|
|
|
36
40
|
"@fluentui/scripts-tasks": "*"
|
|
37
41
|
},
|
|
38
42
|
"dependencies": {
|
|
39
|
-
"@fluentui/react-utilities": "^9.18.
|
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
43
|
+
"@fluentui/react-utilities": "^9.18.7",
|
|
44
|
+
"@fluentui/react-jsx-runtime": "^9.0.36",
|
|
41
45
|
"react-transition-group": "^4.4.1",
|
|
42
46
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
43
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
44
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
45
|
-
"@fluentui/react-aria": "^9.
|
|
46
|
-
"@fluentui/react-icons": "^2.0.
|
|
47
|
-
"@fluentui/react-tabster": "^9.
|
|
47
|
+
"@fluentui/react-context-selector": "^9.1.58",
|
|
48
|
+
"@fluentui/react-shared-contexts": "^9.17.0",
|
|
49
|
+
"@fluentui/react-aria": "^9.11.0",
|
|
50
|
+
"@fluentui/react-icons": "^2.0.237",
|
|
51
|
+
"@fluentui/react-tabster": "^9.21.0",
|
|
48
52
|
"@fluentui/react-theme": "^9.1.19",
|
|
49
|
-
"@fluentui/react-portal": "^9.4.
|
|
53
|
+
"@fluentui/react-portal": "^9.4.22",
|
|
50
54
|
"@griffel/react": "^1.5.14",
|
|
51
55
|
"@swc/helpers": "^0.5.1"
|
|
52
56
|
},
|