@fluentui/react-dialog 9.4.3 → 9.5.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.json +66 -6
- package/CHANGELOG.md +30 -7
- package/dist/index.d.ts +3 -4
- package/lib/components/DialogTrigger/DialogTrigger.js +3 -4
- package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +0 -2
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/utils/useFocusFirstElement.js +1 -4
- package/lib/utils/useFocusFirstElement.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +0 -2
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib-commonjs/utils/useFocusFirstElement.js +1 -4
- package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,67 @@
|
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 12 Apr 2023 09:28:15 GMT",
|
|
6
|
+
"tag": "@fluentui/react-dialog_v9.5.1",
|
|
7
|
+
"version": "9.5.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-dialog",
|
|
13
|
+
"commit": "841ea75d516d85b88eb826030718c19c3239ee4d",
|
|
14
|
+
"comment": "fix: use tabster to focus on trigger, instead of manually invoking .focus"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-dialog",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.4",
|
|
20
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-dialog",
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.17",
|
|
26
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-dialog",
|
|
31
|
+
"comment": "Bump @fluentui/react-aria to v9.3.17",
|
|
32
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-dialog",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.4",
|
|
38
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-dialog",
|
|
43
|
+
"comment": "Bump @fluentui/react-portal to v9.2.5",
|
|
44
|
+
"commit": "b48890859f5ce28fe12fd40f6bda26ed486c5e47"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Fri, 07 Apr 2023 00:01:38 GMT",
|
|
51
|
+
"tag": "@fluentui/react-dialog_v9.5.0",
|
|
52
|
+
"version": "9.5.0",
|
|
53
|
+
"comments": {
|
|
54
|
+
"minor": [
|
|
55
|
+
{
|
|
56
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
57
|
+
"package": "@fluentui/react-dialog",
|
|
58
|
+
"commit": "ba56da096fffa6b2f114a910afbf12482313ba28",
|
|
59
|
+
"comment": "feat: removes aria-expanded from DialogTrigger"
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"date": "Tue, 04 Apr 2023 18:44:48 GMT",
|
|
6
66
|
"tag": "@fluentui/react-dialog_v9.4.3",
|
|
7
67
|
"version": "9.4.3",
|
|
8
68
|
"comments": {
|
|
@@ -17,31 +77,31 @@
|
|
|
17
77
|
"author": "beachball",
|
|
18
78
|
"package": "@fluentui/react-dialog",
|
|
19
79
|
"comment": "Bump @fluentui/react-utilities to v9.7.3",
|
|
20
|
-
"commit": "
|
|
80
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
21
81
|
},
|
|
22
82
|
{
|
|
23
83
|
"author": "beachball",
|
|
24
84
|
"package": "@fluentui/react-dialog",
|
|
25
85
|
"comment": "Bump @fluentui/react-context-selector to v9.1.16",
|
|
26
|
-
"commit": "
|
|
86
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
27
87
|
},
|
|
28
88
|
{
|
|
29
89
|
"author": "beachball",
|
|
30
90
|
"package": "@fluentui/react-dialog",
|
|
31
91
|
"comment": "Bump @fluentui/react-aria to v9.3.16",
|
|
32
|
-
"commit": "
|
|
92
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
33
93
|
},
|
|
34
94
|
{
|
|
35
95
|
"author": "beachball",
|
|
36
96
|
"package": "@fluentui/react-dialog",
|
|
37
97
|
"comment": "Bump @fluentui/react-tabster to v9.6.3",
|
|
38
|
-
"commit": "
|
|
98
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
39
99
|
},
|
|
40
100
|
{
|
|
41
101
|
"author": "beachball",
|
|
42
102
|
"package": "@fluentui/react-dialog",
|
|
43
103
|
"comment": "Bump @fluentui/react-portal to v9.2.4",
|
|
44
|
-
"commit": "
|
|
104
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
45
105
|
}
|
|
46
106
|
]
|
|
47
107
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,45 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-dialog
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 12 Apr 2023 09:28:15 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.1)
|
|
8
|
+
|
|
9
|
+
Wed, 12 Apr 2023 09:28:15 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.0..@fluentui/react-dialog_v9.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: use tabster to focus on trigger, instead of manually invoking .focus ([PR #27512](https://github.com/microsoft/fluentui/pull/27512) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.7.4 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.17 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.3.17 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.2.5 ([commit](https://github.com/microsoft/fluentui/commit/b48890859f5ce28fe12fd40f6bda26ed486c5e47) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.0)
|
|
22
|
+
|
|
23
|
+
Fri, 07 Apr 2023 00:01:38 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.4.3..@fluentui/react-dialog_v9.5.0)
|
|
25
|
+
|
|
26
|
+
### Minor changes
|
|
27
|
+
|
|
28
|
+
- feat: removes aria-expanded from DialogTrigger ([PR #27372](https://github.com/microsoft/fluentui/pull/27372) by bernardo.sunderhus@gmail.com)
|
|
29
|
+
|
|
7
30
|
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.4.3)
|
|
8
31
|
|
|
9
|
-
Tue, 04 Apr 2023 18:
|
|
32
|
+
Tue, 04 Apr 2023 18:44:48 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.4.1..@fluentui/react-dialog_v9.4.3)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
13
36
|
|
|
14
37
|
- fix: DialogContent scrollbar always visible ([PR #27367](https://github.com/microsoft/fluentui/pull/27367) by bernardo.sunderhus@gmail.com)
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.7.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-context-selector to v9.1.16 ([PR #
|
|
17
|
-
- Bump @fluentui/react-aria to v9.3.16 ([PR #
|
|
18
|
-
- Bump @fluentui/react-tabster to v9.6.3 ([PR #
|
|
19
|
-
- Bump @fluentui/react-portal to v9.2.4 ([PR #
|
|
38
|
+
- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
39
|
+
- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
40
|
+
- Bump @fluentui/react-aria to v9.3.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.6.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
42
|
+
- Bump @fluentui/react-portal to v9.2.4 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
20
43
|
|
|
21
44
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.4.1)
|
|
22
45
|
|
package/dist/index.d.ts
CHANGED
|
@@ -283,10 +283,9 @@ export declare type DialogTitleState = ComponentState<DialogTitleSlots>;
|
|
|
283
283
|
* and configures them to be the trigger that will open or close a `Dialog`.
|
|
284
284
|
* This component should only accept one child.
|
|
285
285
|
*
|
|
286
|
-
*
|
|
287
|
-
*
|
|
288
|
-
*
|
|
289
|
-
* in that case the user must provide a `controlled state`
|
|
286
|
+
* This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`
|
|
287
|
+
* Besides being a trigger that opens/close a dialog through context this component doesn't do much,
|
|
288
|
+
* making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.
|
|
290
289
|
*/
|
|
291
290
|
export declare const DialogTrigger: React_2.FC<DialogTriggerProps>;
|
|
292
291
|
|
|
@@ -6,10 +6,9 @@ import { renderDialogTrigger_unstable } from './renderDialogTrigger';
|
|
|
6
6
|
* and configures them to be the trigger that will open or close a `Dialog`.
|
|
7
7
|
* This component should only accept one child.
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* in that case the user must provide a `controlled state`
|
|
9
|
+
* This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`
|
|
10
|
+
* Besides being a trigger that opens/close a dialog through context this component doesn't do much,
|
|
11
|
+
* making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.
|
|
13
12
|
*/
|
|
14
13
|
export const DialogTrigger = props => {
|
|
15
14
|
const state = useDialogTrigger_unstable(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"sources":["../../../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n *
|
|
1
|
+
{"version":3,"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"sources":["../../../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> = props => {\n const state = useDialogTrigger_unstable(props);\n\n return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(DialogTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;;;;;;;AASA,OAAO,MAAMC,aAAA,GAA8CC,KAAA,IAAS;EAClE,MAAMC,KAAA,GAAQJ,yBAAA,CAA0BG,KAAA;EAExC,OAAOF,4BAAA,CAA6BG,KAAA;AACtC;AAEAF,aAAA,CAAcG,WAAW,GAAG;AAC5B;AACCH,aAAA,CAAyCI,wBAAwB,GAAG,IAAI"}
|
|
@@ -18,7 +18,6 @@ export const useDialogTrigger_unstable = props => {
|
|
|
18
18
|
} = props;
|
|
19
19
|
const child = getTriggerChild(children);
|
|
20
20
|
const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
|
|
21
|
-
const open = useDialogContext_unstable(ctx => ctx.open);
|
|
22
21
|
const {
|
|
23
22
|
triggerAttributes
|
|
24
23
|
} = useModalAttributes();
|
|
@@ -35,7 +34,6 @@ export const useDialogTrigger_unstable = props => {
|
|
|
35
34
|
});
|
|
36
35
|
const triggerChildProps = {
|
|
37
36
|
...(child === null || child === void 0 ? void 0 : child.props),
|
|
38
|
-
'aria-expanded': open,
|
|
39
37
|
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
40
38
|
onClick: handleClick,
|
|
41
39
|
...triggerAttributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useModalAttributes","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","
|
|
1
|
+
{"version":3,"names":["React","useModalAttributes","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"sources":["../../../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n const triggerChildProps = {\n ...child?.props,\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerChildProps,\n type: 'button',\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ;AAE/E,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ;AAC5E,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;AAMA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAkD;EAC1F,MAAMC,qBAAA,GAAwBJ,gCAAA;EAE9B,MAAM;IAAEK,QAAA;IAAUC,wBAAA,GAA2B,KAAK;IAAEC,MAAA,GAASH,qBAAA,GAAwB,UAAU;EAAM,CAAE,GAAGD,KAAA;EAE1G,MAAMK,KAAA,GAAQX,eAAA,CAAgBQ,QAAA;EAE9B,MAAMI,iBAAA,GAAoBV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAEhF,MAAM;IAAEE;EAAiB,CAAE,GAAGhB,kBAAA;EAE9B,MAAMiB,WAAA,GAAcd,gBAAA,CACjBe,KAAA,IAAoF;QACnFC,YAAA,EAAAC,oBAAA;IAAA,CAAAA,oBAAA,IAAAD,YAAA,GAAAN,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK,EAACa,OAAO,cAApBD,oBAAA,uBAAAA,oBAAA,CAAAE,IAAA,CAAAH,YAAA,EAAuBD,KAAA;IACvB,IAAI,CAACA,KAAA,CAAMK,kBAAkB,IAAI;MAC/BT,iBAAA,CAAkB;QAChBI,KAAA;QACAM,IAAA,EAAM;QACNC,IAAA,EAAMb,MAAA,KAAW;MACnB;IACF;EACF;EAGF,MAAMc,iBAAA,GAAoB;IACxB,IAAGb,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK;IACfmB,GAAA,EAAKd,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOc,GAAG;IACfN,OAAA,EAASJ,WAAA;IACT,GAAGD;EACL;EAEA,MAAMY,2BAAA,GAA8BtB,kBAAA,CAClC,CAAAO,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,YAAY,CAAAX,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,MAAMX,KAAA,CAAMW,IAAI,GAAG,KAAK,EACpE;IACE,GAAGE,iBAAiB;IACpBF,IAAA,EAAM;EACR;EAGF,OAAO;IACLd,QAAA,EAAUT,2BAAA,CACRS,QAAA,EACAC,wBAAA,GAA2Be,iBAAA,GAAoBE,2BAA2B;EAE9E;AACF"}
|
|
@@ -12,13 +12,10 @@ export function useFocusFirstElement(open, modalType) {
|
|
|
12
12
|
targetDocument
|
|
13
13
|
} = useFluent_unstable();
|
|
14
14
|
const dialogRef = React.useRef(null);
|
|
15
|
-
const triggerRef = React.useRef();
|
|
16
15
|
React.useEffect(() => {
|
|
17
16
|
if (!open) {
|
|
18
|
-
|
|
19
|
-
return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
17
|
+
return;
|
|
20
18
|
}
|
|
21
|
-
triggerRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
|
|
22
19
|
const element = dialogRef.current && findFirstFocusable(dialogRef.current);
|
|
23
20
|
if (element) {
|
|
24
21
|
element.focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useFocusFinders","useFluent_unstable","useFocusFirstElement","open","modalType","findFirstFocusable","targetDocument","dialogRef","useRef","
|
|
1
|
+
{"version":3,"names":["React","useFocusFinders","useFluent_unstable","useFocusFirstElement","open","modalType","findFirstFocusable","targetDocument","dialogRef","useRef","useEffect","element","current","focus","_dialogRef_current","process","env","NODE_ENV","console","warn","join"],"sources":["../../src/utils/useFocusFirstElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent_unstable();\n const dialogRef = React.useRef<DialogSurfaceElement>(null);\n\n React.useEffect(() => {\n if (!open) {\n return;\n }\n const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n if (element) {\n element.focus();\n } else {\n dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',\n 'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',\n ].join('\\n'),\n );\n }\n }\n }, [findFirstFocusable, open, modalType, targetDocument]);\n\n return dialogRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAkB,QAAQ;AAInC;;;AAGA,OAAO,SAASC,qBAAqBC,IAAa,EAAEC,SAA0B,EAAE;EAC9E,MAAM;IAAEC;EAAkB,CAAE,GAAGL,eAAA;EAC/B,MAAM;IAAEM;EAAc,CAAE,GAAGL,kBAAA;EAC3B,MAAMM,SAAA,GAAYR,KAAA,CAAMS,MAAM,CAAuB,IAAI;EAEzDT,KAAA,CAAMU,SAAS,CAAC,MAAM;IACpB,IAAI,CAACN,IAAA,EAAM;MACT;IACF;IACA,MAAMO,OAAA,GAAUH,SAAA,CAAUI,OAAO,IAAIN,kBAAA,CAAmBE,SAAA,CAAUI,OAAO;IACzE,IAAID,OAAA,EAAS;MACXA,OAAA,CAAQE,KAAK;IACf,OAAO;UACLC,kBAAA;MAAA,CAAAA,kBAAA,GAAAN,SAAA,CAAUI,OAAO,cAAjBE,kBAAA,uBAAAA,kBAAA,CAAmBD,KAAA,IAAS;MAC5B,IAAIE,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC;QACAC,OAAA,CAAQC,IAAI,CACV,CACE,qGACA,mGACD,CAACC,IAAI,CAAC;MAEX;IACF;EACF,GAAG,CAACd,kBAAA,EAAoBF,IAAA,EAAMC,SAAA,EAAWE,cAAA,CAAe;EAExD,OAAOC,SAAA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/DialogTrigger/DialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n *
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/DialogTrigger/DialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */\nexport const DialogTrigger = props => {\n const state = useDialogTrigger_unstable(props);\n return renderDialogTrigger_unstable(state);\n};\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\nDialogTrigger.isFluentTriggerComponent = true;\n//# sourceMappingURL=DialogTrigger.js.map"],"names":["DialogTrigger","props","state","useDialogTrigger_unstable","renderDialogTrigger_unstable","displayName","isFluentTriggerComponent"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;kCACmB;qCACG;AAUtC,MAAMA,gBAAgBC,CAAAA,QAAS;IACpC,MAAMC,QAAQC,IAAAA,2CAAyB,EAACF;IACxC,OAAOG,IAAAA,iDAA4B,EAACF;AACtC;AACAF,cAAcK,WAAW,GAAG;AAC5B,6FAA6F;AAC7FL,cAAcM,wBAAwB,GAAG,IAAI,EAC7C,yCAAyC"}
|
|
@@ -17,7 +17,6 @@ const useDialogTrigger_unstable = (props)=>{
|
|
|
17
17
|
const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open' } = props;
|
|
18
18
|
const child = (0, _reactUtilities.getTriggerChild)(children);
|
|
19
19
|
const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
|
|
20
|
-
const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
|
|
21
20
|
const { triggerAttributes } = (0, _reactTabster.useModalAttributes)();
|
|
22
21
|
const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
|
|
23
22
|
var _child_props, _child_props_onClick;
|
|
@@ -32,7 +31,6 @@ const useDialogTrigger_unstable = (props)=>{
|
|
|
32
31
|
});
|
|
33
32
|
const triggerChildProps = {
|
|
34
33
|
...child === null || child === void 0 ? void 0 : child.props,
|
|
35
|
-
'aria-expanded': open,
|
|
36
34
|
ref: child === null || child === void 0 ? void 0 : child.ref,
|
|
37
35
|
onClick: handleClick,
|
|
38
36
|
...triggerAttributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/DialogTrigger/useDialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = props => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const {\n children,\n disableButtonEnhancement = false,\n action = isInsideSurfaceDialog ? 'close' : 'open'\n } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/DialogTrigger/useDialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = props => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const {\n children,\n disableButtonEnhancement = false,\n action = isInsideSurfaceDialog ? 'close' : 'open'\n } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const {\n triggerAttributes\n } = useModalAttributes();\n const handleClick = useEventCallback(event => {\n var _child_props, _child_props_onClick;\n (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open'\n });\n }\n });\n const triggerChildProps = {\n ...(child === null || child === void 0 ? void 0 : child.props),\n ref: child === null || child === void 0 ? void 0 : child.ref,\n onClick: handleClick,\n ...triggerAttributes\n };\n const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n ...triggerChildProps,\n type: 'button'\n });\n return {\n children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n };\n};\n//# sourceMappingURL=useDialogTrigger.js.map"],"names":["useDialogTrigger_unstable","props","isInsideSurfaceDialog","useDialogSurfaceContext_unstable","children","disableButtonEnhancement","action","child","getTriggerChild","requestOpenChange","useDialogContext_unstable","ctx","triggerAttributes","useModalAttributes","handleClick","useEventCallback","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren"],"mappings":";;;;+BAWaA;;aAAAA;;;6DAXU;8BACY;gCAC4C;0BACH;2BACzC;AAO5B,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAMC,wBAAwBC,IAAAA,0CAAgC;IAC9D,MAAM,EACJC,SAAQ,EACRC,0BAA2B,KAAK,CAAA,EAChCC,QAASJ,wBAAwB,UAAU,MAAM,CAAA,EAClD,GAAGD;IACJ,MAAMM,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,MAAMK,oBAAoBC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,iBAAiB;IAChF,MAAM,EACJG,kBAAiB,EAClB,GAAGC,IAAAA,gCAAkB;IACtB,MAAMC,cAAcC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC5C,IAAIC,cAAcC;QACjBA,CAAAA,uBAAuB,AAACD,CAAAA,eAAeV,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK,AAAD,EAAGkB,OAAO,AAAD,MAAO,IAAI,IAAID,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBE,IAAI,CAACH,cAAcD,MAAM;QACjN,IAAI,CAACA,MAAMK,kBAAkB,IAAI;YAC/BZ,kBAAkB;gBAChBO;gBACAM,MAAM;gBACNC,MAAMjB,WAAW;YACnB;QACF,CAAC;IACH;IACA,MAAMkB,oBAAoB;QACxB,GAAIjB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK;QAC7DwB,KAAKlB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMkB,GAAG;QAC5DN,SAASL;QACT,GAAGF,iBAAiB;IACtB;IACA,MAAMc,8BAA8BC,IAAAA,6BAAkB,EAAC,AAACpB,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMe,IAAI,AAAD,MAAO,YAAY,AAACf,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMe,IAAI,AAAD,MAAO,MAAMf,MAAMe,IAAI,GAAG,KAAK,EAAE;QACzN,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IACA,OAAO;QACLlB,UAAUwB,IAAAA,2CAA2B,EAACxB,UAAUC,2BAA2BmB,oBAAoBE,2BAA2B;IAC5H;AACF,GACA,4CAA4C"}
|
|
@@ -14,13 +14,10 @@ function useFocusFirstElement(open, modalType) {
|
|
|
14
14
|
const { findFirstFocusable } = (0, _reactTabster.useFocusFinders)();
|
|
15
15
|
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
|
16
16
|
const dialogRef = _react.useRef(null);
|
|
17
|
-
const triggerRef = _react.useRef();
|
|
18
17
|
_react.useEffect(()=>{
|
|
19
18
|
if (!open) {
|
|
20
|
-
|
|
21
|
-
return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
19
|
+
return;
|
|
22
20
|
}
|
|
23
|
-
triggerRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
|
|
24
21
|
const element = dialogRef.current && findFirstFocusable(dialogRef.current);
|
|
25
22
|
if (element) {
|
|
26
23
|
element.focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/utils/useFocusFirstElement.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open, modalType) {\n const {\n findFirstFocusable\n } = useFocusFinders();\n const {\n targetDocument\n } = useFluent_unstable();\n const dialogRef = React.useRef(null);\n
|
|
1
|
+
{"version":3,"sources":["../../lib/utils/useFocusFirstElement.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open, modalType) {\n const {\n findFirstFocusable\n } = useFocusFinders();\n const {\n targetDocument\n } = useFluent_unstable();\n const dialogRef = React.useRef(null);\n React.useEffect(() => {\n if (!open) {\n return;\n }\n const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n if (element) {\n element.focus();\n } else {\n var _dialogRef_current;\n (_dialogRef_current = dialogRef.current) === null || _dialogRef_current === void 0 ? void 0 : _dialogRef_current.focus(); // https://github.com/microsoft/fluentui/issues/25150\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(['@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.', 'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`'].join('\\n'));\n }\n }\n }, [findFirstFocusable, open, modalType, targetDocument]);\n return dialogRef;\n}\n//# sourceMappingURL=useFocusFirstElement.js.map"],"names":["useFocusFirstElement","open","modalType","findFirstFocusable","useFocusFinders","targetDocument","useFluent_unstable","dialogRef","React","useRef","useEffect","element","current","focus","_dialogRef_current","process","env","NODE_ENV","console","warn","join"],"mappings":";;;;+BAMgBA;;aAAAA;;;6DANO;8BACS;qCACG;AAI5B,SAASA,qBAAqBC,IAAI,EAAEC,SAAS,EAAE;IACpD,MAAM,EACJC,mBAAkB,EACnB,GAAGC,IAAAA,6BAAe;IACnB,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAkB;IACtB,MAAMC,YAAYC,OAAMC,MAAM,CAAC,IAAI;IACnCD,OAAME,SAAS,CAAC,IAAM;QACpB,IAAI,CAACT,MAAM;YACT;QACF,CAAC;QACD,MAAMU,UAAUJ,UAAUK,OAAO,IAAIT,mBAAmBI,UAAUK,OAAO;QACzE,IAAID,SAAS;YACXA,QAAQE,KAAK;QACf,OAAO;YACL,IAAIC;YACHA,CAAAA,qBAAqBP,UAAUK,OAAO,AAAD,MAAO,IAAI,IAAIE,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBD,KAAK,EAAE,EAAE,qDAAqD;YAC/K,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,IAAI,CAAC;oBAAC;oBAAqG;iBAAmG,CAACC,IAAI,CAAC;YAC9N,CAAC;QACH,CAAC;IACH,GAAG;QAACjB;QAAoBF;QAAMC;QAAWG;KAAe;IACxD,OAAOE;AACT,EACA,gDAAgD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-dialog",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Dialog component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@griffel/react": "^1.5.2",
|
|
39
|
-
"@fluentui/react-utilities": "^9.7.
|
|
39
|
+
"@fluentui/react-utilities": "^9.7.4",
|
|
40
40
|
"@fluentui/keyboard-keys": "^9.0.2",
|
|
41
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
41
|
+
"@fluentui/react-context-selector": "^9.1.17",
|
|
42
42
|
"@fluentui/react-shared-contexts": "^9.3.3",
|
|
43
|
-
"@fluentui/react-aria": "^9.3.
|
|
43
|
+
"@fluentui/react-aria": "^9.3.17",
|
|
44
44
|
"@fluentui/react-icons": "^2.0.196",
|
|
45
|
-
"@fluentui/react-tabster": "^9.6.
|
|
45
|
+
"@fluentui/react-tabster": "^9.6.4",
|
|
46
46
|
"@fluentui/react-theme": "^9.1.7",
|
|
47
|
-
"@fluentui/react-portal": "^9.2.
|
|
47
|
+
"@fluentui/react-portal": "^9.2.5",
|
|
48
48
|
"@swc/helpers": "^0.4.14"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|