@fluentui/react-dialog 9.5.8 → 9.5.10
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 +139 -1
- package/CHANGELOG.md +38 -2
- package/lib/Dialog.js +0 -1
- package/lib/Dialog.js.map +1 -1
- package/lib/DialogActions.js +0 -1
- package/lib/DialogActions.js.map +1 -1
- package/lib/DialogBody.js +0 -1
- package/lib/DialogBody.js.map +1 -1
- package/lib/DialogContent.js +0 -1
- package/lib/DialogContent.js.map +1 -1
- package/lib/DialogSurface.js +0 -1
- package/lib/DialogSurface.js.map +1 -1
- package/lib/DialogTitle.js +0 -1
- package/lib/DialogTitle.js.map +1 -1
- package/lib/DialogTrigger.js +0 -1
- package/lib/DialogTrigger.js.map +1 -1
- package/lib/components/Dialog/Dialog.js +4 -6
- package/lib/components/Dialog/Dialog.js.map +1 -1
- package/lib/components/Dialog/Dialog.types.js +1 -2
- package/lib/components/Dialog/Dialog.types.js.map +1 -1
- package/lib/components/Dialog/index.js +0 -1
- package/lib/components/Dialog/index.js.map +1 -1
- package/lib/components/Dialog/renderDialog.js +8 -13
- package/lib/components/Dialog/renderDialog.js.map +1 -1
- package/lib/components/Dialog/useDialog.js +71 -73
- package/lib/components/Dialog/useDialog.js.map +1 -1
- package/lib/components/Dialog/useDialogContextValues.js +20 -32
- package/lib/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib/components/DialogActions/DialogActions.js +5 -7
- package/lib/components/DialogActions/DialogActions.js.map +1 -1
- package/lib/components/DialogActions/DialogActions.types.js +1 -2
- package/lib/components/DialogActions/DialogActions.types.js.map +1 -1
- package/lib/components/DialogActions/index.js +0 -1
- package/lib/components/DialogActions/index.js.map +1 -1
- package/lib/components/DialogActions/renderDialogActions.js +5 -10
- package/lib/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib/components/DialogActions/useDialogActions.js +13 -18
- package/lib/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js +8 -2
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/DialogBody.js +5 -7
- package/lib/components/DialogBody/DialogBody.js.map +1 -1
- package/lib/components/DialogBody/DialogBody.types.js +1 -2
- package/lib/components/DialogBody/DialogBody.types.js.map +1 -1
- package/lib/components/DialogBody/index.js +0 -1
- package/lib/components/DialogBody/index.js.map +1 -1
- package/lib/components/DialogBody/renderDialogBody.js +5 -10
- package/lib/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib/components/DialogBody/useDialogBody.js +11 -13
- package/lib/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/DialogContent.js +5 -7
- package/lib/components/DialogContent/DialogContent.js.map +1 -1
- package/lib/components/DialogContent/DialogContent.types.js +1 -2
- package/lib/components/DialogContent/DialogContent.types.js.map +1 -1
- package/lib/components/DialogContent/index.js +0 -1
- package/lib/components/DialogContent/index.js.map +1 -1
- package/lib/components/DialogContent/renderDialogContent.js +4 -9
- package/lib/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib/components/DialogContent/useDialogContent.js +11 -13
- package/lib/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.js +6 -8
- package/lib/components/DialogSurface/DialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/DialogSurface.types.js +1 -2
- package/lib/components/DialogSurface/DialogSurface.types.js.map +1 -1
- package/lib/components/DialogSurface/index.js +0 -1
- package/lib/components/DialogSurface/index.js.map +1 -1
- package/lib/components/DialogSurface/renderDialogSurface.js +6 -11
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurface.js +58 -63
- package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceContextValues.js +4 -5
- package/lib/components/DialogSurface/useDialogSurfaceContextValues.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +5 -5
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogTitle/DialogTitle.js +5 -7
- package/lib/components/DialogTitle/DialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/DialogTitle.types.js +1 -2
- package/lib/components/DialogTitle/DialogTitle.types.js.map +1 -1
- package/lib/components/DialogTitle/index.js +0 -1
- package/lib/components/DialogTitle/index.js.map +1 -1
- package/lib/components/DialogTitle/renderDialogTitle.js +4 -9
- package/lib/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitle.js +29 -34
- package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +9 -7
- package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib/components/DialogTrigger/DialogTrigger.js +3 -5
- package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/DialogTrigger.types.js +0 -1
- package/lib/components/DialogTrigger/DialogTrigger.types.js.map +1 -1
- package/lib/components/DialogTrigger/index.js +0 -1
- package/lib/components/DialogTrigger/index.js.map +1 -1
- package/lib/components/DialogTrigger/renderDialogTrigger.js +1 -2
- package/lib/components/DialogTrigger/renderDialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.styles.js.map +1 -1
- package/lib/contexts/constants.js +0 -1
- package/lib/contexts/constants.js.map +1 -1
- package/lib/contexts/dialogContext.js +11 -12
- package/lib/contexts/dialogContext.js.map +1 -1
- package/lib/contexts/dialogSurfaceContext.js +2 -3
- package/lib/contexts/dialogSurfaceContext.js.map +1 -1
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +0 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/isEscapeKeyDown.js +2 -4
- package/lib/utils/isEscapeKeyDown.js.map +1 -1
- package/lib/utils/useDisableBodyScroll.js +31 -36
- package/lib/utils/useDisableBodyScroll.js.map +1 -1
- package/lib/utils/useFocusFirstElement.js +29 -27
- package/lib/utils/useFocusFirstElement.js.map +1 -1
- package/lib-commonjs/Dialog.js +0 -3
- package/lib-commonjs/Dialog.js.map +1 -1
- package/lib-commonjs/DialogActions.js +0 -3
- package/lib-commonjs/DialogActions.js.map +1 -1
- package/lib-commonjs/DialogBody.js +0 -3
- package/lib-commonjs/DialogBody.js.map +1 -1
- package/lib-commonjs/DialogContent.js +0 -3
- package/lib-commonjs/DialogContent.js.map +1 -1
- package/lib-commonjs/DialogSurface.js +0 -3
- package/lib-commonjs/DialogSurface.js.map +1 -1
- package/lib-commonjs/DialogTitle.js +0 -3
- package/lib-commonjs/DialogTitle.js.map +1 -1
- package/lib-commonjs/DialogTrigger.js +0 -3
- package/lib-commonjs/DialogTrigger.js.map +1 -1
- package/lib-commonjs/components/Dialog/Dialog.js +1 -3
- package/lib-commonjs/components/Dialog/Dialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/Dialog.types.js +0 -3
- package/lib-commonjs/components/Dialog/Dialog.types.js.map +1 -1
- package/lib-commonjs/components/Dialog/index.js +0 -3
- package/lib-commonjs/components/Dialog/index.js.map +1 -1
- package/lib-commonjs/components/Dialog/renderDialog.js +1 -3
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialog.js +1 -3
- package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
- package/lib-commonjs/components/Dialog/useDialogContextValues.js +4 -6
- package/lib-commonjs/components/Dialog/useDialogContextValues.js.map +1 -1
- package/lib-commonjs/components/DialogActions/DialogActions.js +1 -3
- package/lib-commonjs/components/DialogActions/DialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogActions/DialogActions.types.js +0 -3
- package/lib-commonjs/components/DialogActions/DialogActions.types.js.map +1 -1
- package/lib-commonjs/components/DialogActions/index.js +0 -3
- package/lib-commonjs/components/DialogActions/index.js.map +1 -1
- package/lib-commonjs/components/DialogActions/renderDialogActions.js +1 -3
- package/lib-commonjs/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActions.js +1 -3
- package/lib-commonjs/components/DialogActions/useDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js +16 -4
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogBody/DialogBody.js +1 -3
- package/lib-commonjs/components/DialogBody/DialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/DialogBody.types.js +0 -3
- package/lib-commonjs/components/DialogBody/DialogBody.types.js.map +1 -1
- package/lib-commonjs/components/DialogBody/index.js +0 -3
- package/lib-commonjs/components/DialogBody/index.js.map +1 -1
- package/lib-commonjs/components/DialogBody/renderDialogBody.js +1 -3
- package/lib-commonjs/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBody.js +1 -3
- package/lib-commonjs/components/DialogBody/useDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +0 -2
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogContent/DialogContent.js +1 -3
- package/lib-commonjs/components/DialogContent/DialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/DialogContent.types.js +0 -3
- package/lib-commonjs/components/DialogContent/DialogContent.types.js.map +1 -1
- package/lib-commonjs/components/DialogContent/index.js +0 -3
- package/lib-commonjs/components/DialogContent/index.js.map +1 -1
- package/lib-commonjs/components/DialogContent/renderDialogContent.js +1 -3
- package/lib-commonjs/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContent.js +1 -3
- package/lib-commonjs/components/DialogContent/useDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js +0 -2
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/DialogSurface.js +1 -3
- package/lib-commonjs/components/DialogSurface/DialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/DialogSurface.types.js +0 -3
- package/lib-commonjs/components/DialogSurface/DialogSurface.types.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/index.js +0 -3
- package/lib-commonjs/components/DialogSurface/index.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js +1 -3
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js +1 -3
- package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js +1 -3
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +12 -14
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/DialogTitle.js +1 -3
- package/lib-commonjs/components/DialogTitle/DialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/DialogTitle.types.js +0 -3
- package/lib-commonjs/components/DialogTitle/DialogTitle.types.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/index.js +0 -3
- package/lib-commonjs/components/DialogTitle/index.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js +1 -3
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -3
- package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js +16 -15
- package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js +1 -3
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.types.js +0 -3
- package/lib-commonjs/components/DialogTrigger/DialogTrigger.types.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/index.js +0 -3
- package/lib-commonjs/components/DialogTrigger/index.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js +1 -3
- package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.styles.js +0 -2
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.styles.js.map +1 -1
- package/lib-commonjs/contexts/constants.js +1 -3
- package/lib-commonjs/contexts/constants.js.map +1 -1
- package/lib-commonjs/contexts/dialogContext.js +2 -4
- package/lib-commonjs/contexts/dialogContext.js.map +1 -1
- package/lib-commonjs/contexts/dialogSurfaceContext.js +1 -3
- package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -3
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/isEscapeKeyDown.js +1 -3
- package/lib-commonjs/utils/isEscapeKeyDown.js.map +1 -1
- package/lib-commonjs/utils/useDisableBodyScroll.js +1 -3
- package/lib-commonjs/utils/useDisableBodyScroll.js.map +1 -1
- package/lib-commonjs/utils/useFocusFirstElement.js +1 -3
- package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -1
- package/package.json +12 -12
|
@@ -9,12 +9,10 @@ import { renderDialogTrigger_unstable } from './renderDialogTrigger';
|
|
|
9
9
|
* This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`
|
|
10
10
|
* Besides being a trigger that opens/close a dialog through context this component doesn't do much,
|
|
11
11
|
* making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return renderDialogTrigger_unstable(state);
|
|
12
|
+
*/ export const DialogTrigger = (props)=>{
|
|
13
|
+
const state = useDialogTrigger_unstable(props);
|
|
14
|
+
return renderDialogTrigger_unstable(state);
|
|
16
15
|
};
|
|
17
16
|
DialogTrigger.displayName = 'DialogTrigger';
|
|
18
17
|
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
19
18
|
DialogTrigger.isFluentTriggerComponent = true;
|
|
20
|
-
//# sourceMappingURL=DialogTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger.styles';\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"],"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,4BAA4B,QAAQ,wBAAwB;AAIrE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gBAA8CC,CAAAA,QAAS;IAClE,MAAMC,QAAQJ,0BAA0BG;IAExC,OAAOF,6BAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG,IAAI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["DialogTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {\n /**\n * Explicitly declare if the trigger is responsible for opening or\n * closing a Dialog visibility state.\n *\n * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n *\n * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default\n */\n action?: DialogTriggerAction;\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'dialog';\n }\n>;\n\nexport type DialogTriggerState = {\n children: React.ReactElement | null;\n};\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["renderDialogTrigger.tsx"],"sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState) => state.children;\n"],"names":["renderDialogTrigger_unstable","state","children"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,MAAMA,+BAA+B,CAACC,QAA8BA,MAAMC,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","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":["
|
|
1
|
+
{"version":3,"names":["React","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":["useDialogTrigger.styles.js"],"sourcesContent":["import * as React from 'react';\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 */ export const useDialogTrigger_unstable = (props)=>{\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open' } = props;\n const child = getTriggerChild(children);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const triggerAttributes = useDialogContext_unstable((ctx)=>ctx.triggerAttributes);\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,2BAA2B;AAC1G,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,gBAAgB;AAC5F,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD;AACA;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,qBAAqB,GAAGJ,gCAAgC,CAAC,CAAC;EAChE,MAAM;IAAEK,QAAQ;IAAGC,wBAAwB,GAAE,KAAK;IAAGC,MAAM,GAAEH,qBAAqB,GAAG,OAAO,GAAG;EAAQ,CAAC,GAAGD,KAAK;EAChH,MAAMK,KAAK,GAAGX,eAAe,CAACQ,QAAQ,CAAC;EACvC,MAAMI,iBAAiB,GAAGV,yBAAyB,CAAEW,GAAG,IAAGA,GAAG,CAACD,iBAAiB,CAAC;EACjF,MAAME,iBAAiB,GAAGZ,yBAAyB,CAAEW,GAAG,IAAGA,GAAG,CAACC,iBAAiB,CAAC;EACjF,MAAMC,WAAW,GAAGd,gBAAgB,CAAEe,KAAK,IAAG;IAC1C,IAAIC,YAAY,EAAEC,oBAAoB;IACtC,CAACA,oBAAoB,GAAG,CAACD,YAAY,GAAGN,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACL,KAAK,EAAEa,OAAO,MAAM,IAAI,IAAID,oBAAoB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,oBAAoB,CAACE,IAAI,CAACH,YAAY,EAAED,KAAK,CAAC;IACjN,IAAI,CAACA,KAAK,CAACK,kBAAkB,CAAC,CAAC,EAAE;MAC7BT,iBAAiB,CAAC;QACdI,KAAK;QACLM,IAAI,EAAE,cAAc;QACpBC,IAAI,EAAEb,MAAM,KAAK;MACrB,CAAC,CAAC;IACN;EACJ,CAAC,CAAC;EACF,MAAMc,iBAAiB,GAAG;IACtB,IAAGb,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACL,KAAK;IAC5DmB,GAAG,EAAEd,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACc,GAAG;IAC5DN,OAAO,EAAEJ,WAAW;IACpB,GAAGD;EACP,CAAC;EACD,MAAMY,2BAA2B,GAAGtB,kBAAkB,CAAC,CAACO,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACW,IAAI,MAAM,QAAQ,IAAI,CAACX,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACW,IAAI,MAAM,GAAG,GAAGX,KAAK,CAACW,IAAI,GAAG,KAAK,EAAE;IACvN,GAAGE,iBAAiB;IACpBF,IAAI,EAAE;EACV,CAAC,CAAC;EACF,OAAO;IACHd,QAAQ,EAAET,2BAA2B,CAACS,QAAQ,EAAEC,wBAAwB,GAAGe,iBAAiB,GAAGE,2BAA2B;EAC9H,CAAC;AACL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["constants.ts"],"sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n"],"names":["MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH"],"mappings":"AAAA,OAAO,MAAMA,kCAAkC,uCAAuC;AACtF,OAAO,MAAMC,kBAAkB,OAAO;AACtC,OAAO,MAAMC,aAAa,MAAM;AAChC,OAAO,MAAMC,uBAAuB,MAAM"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
3
3
|
const defaultContextValue = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/* noop */}
|
|
4
|
+
open: false,
|
|
5
|
+
inertTrapFocus: false,
|
|
6
|
+
modalType: 'modal',
|
|
7
|
+
isNestedDialog: false,
|
|
8
|
+
dialogRef: {
|
|
9
|
+
current: null
|
|
10
|
+
},
|
|
11
|
+
requestOpenChange () {
|
|
12
|
+
/* noop */ }
|
|
13
13
|
};
|
|
14
14
|
// Contexts should default to undefined
|
|
15
|
-
export const DialogContext =
|
|
15
|
+
export const DialogContext = createContext(undefined);
|
|
16
16
|
export const DialogProvider = DialogContext.Provider;
|
|
17
|
-
export const useDialogContext_unstable = selector
|
|
18
|
-
//# sourceMappingURL=dialogContext.js.map
|
|
17
|
+
export const useDialogContext_unstable = (selector)=>useContextSelector(DialogContext, (ctx = defaultContextValue)=>selector(ctx));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["dialogContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\nexport type DialogContextValue = {\n open: boolean;\n inertTrapFocus: boolean;\n dialogTitleId?: string;\n isNestedDialog: boolean;\n dialogRef: React.Ref<DialogSurfaceElement>;\n modalType: DialogModalType;\n /**\n * Requests dialog main component to update it's internal open state\n */\n requestOpenChange: (data: DialogOpenChangeData) => void;\n} & Partial<ReturnType<typeof useModalAttributes>>;\n\nconst defaultContextValue: DialogContextValue = {\n open: false,\n inertTrapFocus: false,\n modalType: 'modal',\n isNestedDialog: false,\n dialogRef: { current: null },\n requestOpenChange() {\n /* noop */\n },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","open","inertTrapFocus","modalType","isNestedDialog","dialogRef","current","requestOpenChange","DialogContext","undefined","DialogProvider","Provider","useDialogContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAmBC,kBAAkB,QAAQ,mCAAmC;AAmBtG,MAAMC,sBAA0C;IAC9CC,MAAM,KAAK;IACXC,gBAAgB,KAAK;IACrBC,WAAW;IACXC,gBAAgB,KAAK;IACrBC,WAAW;QAAEC,SAAS,IAAI;IAAC;IAC3BC,qBAAoB;IAClB,QAAQ,GACV;AACF;AAEA,uCAAuC;AACvC,OAAO,MAAMC,gBAAyDV,cACpEW,WACA;AAEF,OAAO,MAAMC,iBAAiBF,cAAcG,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B,CAAIC,WAC3Cd,mBAAmBS,eAAe,CAACM,MAAMd,mBAAmB,GAAKa,SAASC,MAAM"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
const defaultContextValue = false;
|
|
3
|
-
export const DialogSurfaceContext =
|
|
3
|
+
export const DialogSurfaceContext = createContext(undefined);
|
|
4
4
|
export const DialogSurfaceProvider = DialogSurfaceContext.Provider;
|
|
5
5
|
var _useContext;
|
|
6
|
-
export const useDialogSurfaceContext_unstable = ()
|
|
7
|
-
//# sourceMappingURL=dialogSurfaceContext.js.map
|
|
6
|
+
export const useDialogSurfaceContext_unstable = ()=>(_useContext = useContext(DialogSurfaceContext)) !== null && _useContext !== void 0 ? _useContext : defaultContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["dialogSurfaceContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"names":["createContext","useContext","defaultContextValue","DialogSurfaceContext","undefined","DialogSurfaceProvider","Provider","useDialogSurfaceContext_unstable"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAIlD,MAAMC,sBAAiD,KAAK;AAE5D,OAAO,MAAMC,uBAAuBH,cAAqDI,WAAW;AAEpG,OAAO,MAAMC,wBAAwBF,qBAAqBG,QAAQ,CAAC;IAEbL;AAAtD,OAAO,MAAMM,mCAAmC,IAAMN,CAAAA,cAAAA,WAAWE,mCAAXF,yBAAAA,cAAoCC,mBAAmB,CAAC"}
|
package/lib/contexts/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './constants';\nexport * from './dialogContext';\nexport * from './dialogSurfaceContext';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,yBAAyB"}
|
package/lib/index.js
CHANGED
|
@@ -5,4 +5,3 @@ export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBody
|
|
|
5
5
|
export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';
|
|
6
6
|
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable } from './DialogSurface';
|
|
7
7
|
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n DialogSlots,\n DialogProps,\n DialogState,\n DialogOpenChangeData,\n DialogOpenChangeEvent,\n DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n DialogTriggerProps,\n DialogTriggerChildProps,\n DialogTriggerState,\n DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n DialogActions,\n dialogActionsClassNames,\n useDialogActions_unstable,\n useDialogActionsStyles_unstable,\n renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n DialogActionsProps,\n DialogActionsSlots,\n DialogActionsState,\n DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n DialogBody,\n dialogBodyClassNames,\n useDialogBody_unstable,\n useDialogBodyStyles_unstable,\n renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n DialogTitle,\n dialogTitleClassNames,\n useDialogTitle_unstable,\n useDialogTitleStyles_unstable,\n renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n DialogSurface,\n dialogSurfaceClassNames,\n useDialogSurface_unstable,\n useDialogSurfaceStyles_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } from './DialogSurface';\n\nexport {\n DialogContent,\n dialogContentClassNames,\n useDialogContent_unstable,\n useDialogContentStyles_unstable,\n renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAU7E,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB"}
|
package/lib/utils/index.js
CHANGED
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB"}
|
|
@@ -2,8 +2,6 @@ import * as React from 'react';
|
|
|
2
2
|
import { Escape } from '@fluentui/keyboard-keys';
|
|
3
3
|
/**
|
|
4
4
|
* Checks if keydown event is a proper Escape key dismiss
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();
|
|
5
|
+
*/ export function isEscapeKeyDismiss(event, modalType) {
|
|
6
|
+
return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();
|
|
8
7
|
}
|
|
9
|
-
//# sourceMappingURL=isEscapeKeyDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["isEscapeKeyDown.ts"],"sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n event: React.KeyboardEvent<DialogSurfaceElement>,\n modalType: DialogModalType,\n): boolean {\n return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();\n}\n"],"names":["React","Escape","isEscapeKeyDismiss","event","modalType","key","isDefaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,0BAA0B;AAIjD;;CAEC,GACD,OAAO,SAASC,mBACdC,KAAgD,EAChDC,SAA0B,EACjB;IACT,OAAOD,MAAME,GAAG,KAAKJ,UAAUG,cAAc,WAAW,CAACD,MAAMG,kBAAkB;AACnF,CAAC"}
|
|
@@ -4,49 +4,44 @@ import { useCallback } from 'react';
|
|
|
4
4
|
const disableScrollElementProp = '__fluentDisableScrollElement';
|
|
5
5
|
/**
|
|
6
6
|
* hook that disables body scrolling through `overflow: hidden` CSS property
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [targetDocument]);
|
|
7
|
+
*/ export function useDisableBodyScroll() {
|
|
8
|
+
const { targetDocument } = useFluent_unstable();
|
|
9
|
+
return useCallback(()=>{
|
|
10
|
+
if (targetDocument) {
|
|
11
|
+
return disableScroll(targetDocument.body);
|
|
12
|
+
}
|
|
13
|
+
}, [
|
|
14
|
+
targetDocument
|
|
15
|
+
]);
|
|
17
16
|
}
|
|
18
17
|
/**
|
|
19
18
|
* disables scrolling from a given element through `overflow: hidden` CSS property
|
|
20
19
|
* @param target - element to disable scrolling from
|
|
21
20
|
* @returns a method for enabling scrolling again
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var _target_ownerDocument_defaultView_innerWidth;
|
|
29
|
-
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;
|
|
30
|
-
assertIsDisableScrollElement(target);
|
|
31
|
-
if (target[disableScrollElementProp].count === 0) {
|
|
32
|
-
target.style.overflow = 'hidden';
|
|
33
|
-
target.style.paddingRight = `${innerWidth - clientWidth}px`;
|
|
34
|
-
}
|
|
35
|
-
target[disableScrollElementProp].count++;
|
|
36
|
-
return () => {
|
|
37
|
-
target[disableScrollElementProp].count--;
|
|
21
|
+
*/ export function disableScroll(target) {
|
|
22
|
+
var _target_ownerDocument_defaultView;
|
|
23
|
+
const { clientWidth } = target.ownerDocument.documentElement;
|
|
24
|
+
var _target_ownerDocument_defaultView_innerWidth;
|
|
25
|
+
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;
|
|
26
|
+
assertIsDisableScrollElement(target);
|
|
38
27
|
if (target[disableScrollElementProp].count === 0) {
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
target.style.overflow = 'hidden';
|
|
29
|
+
target.style.paddingRight = `${innerWidth - clientWidth}px`;
|
|
41
30
|
}
|
|
42
|
-
|
|
31
|
+
target[disableScrollElementProp].count++;
|
|
32
|
+
return ()=>{
|
|
33
|
+
target[disableScrollElementProp].count--;
|
|
34
|
+
if (target[disableScrollElementProp].count === 0) {
|
|
35
|
+
target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;
|
|
36
|
+
target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
43
39
|
}
|
|
44
40
|
function assertIsDisableScrollElement(element) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
var _;
|
|
42
|
+
(_ = (_element = element)[_disableScrollElementProp = disableScrollElementProp]) !== null && _ !== void 0 ? _ : _element[_disableScrollElementProp] = {
|
|
43
|
+
count: 0,
|
|
44
|
+
previousOverflowStyle: element.style.overflow,
|
|
45
|
+
previousPaddingRightStyle: element.style.paddingRight
|
|
46
|
+
};
|
|
51
47
|
}
|
|
52
|
-
//# sourceMappingURL=useDisableBodyScroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n [disableScrollElementProp]: {\n count: number;\n previousOverflowStyle: string;\n previousPaddingRightStyle: string;\n };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n const { targetDocument } = useFluent_unstable();\n return useCallback(() => {\n if (targetDocument) {\n return disableScroll(targetDocument.body);\n }\n }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n const { clientWidth } = target.ownerDocument.documentElement;\n const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n assertIsDisableScrollElement(target);\n if (target[disableScrollElementProp].count === 0) {\n target.style.overflow = 'hidden';\n target.style.paddingRight = `${innerWidth - clientWidth}px`;\n }\n target[disableScrollElementProp].count++;\n return () => {\n target[disableScrollElementProp].count--;\n if (target[disableScrollElementProp].count === 0) {\n target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n }\n };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n count: 0,\n previousOverflowStyle: element.style.overflow,\n previousPaddingRightStyle: element.style.paddingRight,\n };\n}\n"],"names":["element","disableScrollElementProp","useFluent_unstable","useCallback","useDisableBodyScroll","targetDocument","disableScroll","body","target","clientWidth","ownerDocument","documentElement","innerWidth","defaultView","assertIsDisableScrollElement","count","style","overflow","paddingRight","previousOverflowStyle","previousPaddingRightStyle"],"mappings":"IAiDGA,UAAuCC;AAjD1C,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,WAAW,QAAQ,QAAQ;AAEpC,MAAMF,2BAA2B;AAUjC;;CAEC,GACD,OAAO,SAASG,uBAAuB;IACrC,MAAM,EAAEC,eAAc,EAAE,GAAGH;IAC3B,OAAOC,YAAY,IAAM;QACvB,IAAIE,gBAAgB;YAClB,OAAOC,cAAcD,eAAeE,IAAI;QAC1C,CAAC;IACH,GAAG;QAACF;KAAe;AACrB,CAAC;AAED;;;;CAIC,GACD,OAAO,SAASC,cAAcE,MAAmB,EAAE;QAE9BA;IADnB,MAAM,EAAEC,YAAW,EAAE,GAAGD,OAAOE,aAAa,CAACC,eAAe;QACzCH;IAAnB,MAAMI,aAAaJ,CAAAA,+CAAAA,CAAAA,oCAAAA,OAAOE,aAAa,CAACG,WAAW,cAAhCL,+CAAAA,KAAAA,IAAAA,kCAAkCI,UAAU,cAA5CJ,0DAAAA,+CAAgD,CAAC;IACpEM,6BAA6BN;IAC7B,IAAIA,MAAM,CAACP,yBAAyB,CAACc,KAAK,KAAK,GAAG;QAChDP,OAAOQ,KAAK,CAACC,QAAQ,GAAG;QACxBT,OAAOQ,KAAK,CAACE,YAAY,GAAG,CAAC,EAAEN,aAAaH,YAAY,EAAE,CAAC;IAC7D,CAAC;IACDD,MAAM,CAACP,yBAAyB,CAACc,KAAK;IACtC,OAAO,IAAM;QACXP,MAAM,CAACP,yBAAyB,CAACc,KAAK;QACtC,IAAIP,MAAM,CAACP,yBAAyB,CAACc,KAAK,KAAK,GAAG;YAChDP,OAAOQ,KAAK,CAACC,QAAQ,GAAGT,MAAM,CAACP,yBAAyB,CAACkB,qBAAqB;YAC9EX,OAAOQ,KAAK,CAACE,YAAY,GAAGV,MAAM,CAACP,yBAAyB,CAACmB,yBAAyB;QACxF,CAAC;IACH;AACF,CAAC;AAED,SAASN,6BAA6Bd,OAAoB,EAAiD;;IACzG,MAACA,WAAAA,QAAsC,CAACC,4BAAAA,yBAAyB,iCAAhED,QAAsC,CAACC,0BAAyB,GAAK;QACpEc,OAAO;QACPI,uBAAuBnB,QAAQgB,KAAK,CAACC,QAAQ;QAC7CG,2BAA2BpB,QAAQgB,KAAK,CAACE,YAAY;IACvD,CAAC;AACH"}
|
|
@@ -3,31 +3,33 @@ import { useFocusFinders } from '@fluentui/react-tabster';
|
|
|
3
3
|
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
4
4
|
/**
|
|
5
5
|
* Focus first element on content when dialog is opened,
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
6
|
+
*/ export function useFocusFirstElement(open, modalType) {
|
|
7
|
+
const { findFirstFocusable } = useFocusFinders();
|
|
8
|
+
const { targetDocument } = useFluent_unstable();
|
|
9
|
+
const dialogRef = React.useRef(null);
|
|
10
|
+
React.useEffect(()=>{
|
|
11
|
+
if (!open) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
const element = dialogRef.current && findFirstFocusable(dialogRef.current);
|
|
15
|
+
if (element) {
|
|
16
|
+
element.focus();
|
|
17
|
+
} else {
|
|
18
|
+
var _dialogRef_current;
|
|
19
|
+
(_dialogRef_current = dialogRef.current) === null || _dialogRef_current === void 0 ? void 0 : _dialogRef_current.focus(); // https://github.com/microsoft/fluentui/issues/25150
|
|
20
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
21
|
+
// eslint-disable-next-line no-console
|
|
22
|
+
console.warn([
|
|
23
|
+
'@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',
|
|
24
|
+
'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`'
|
|
25
|
+
].join('\n'));
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}, [
|
|
29
|
+
findFirstFocusable,
|
|
30
|
+
open,
|
|
31
|
+
modalType,
|
|
32
|
+
targetDocument
|
|
33
|
+
]);
|
|
34
|
+
return dialogRef;
|
|
32
35
|
}
|
|
33
|
-
//# sourceMappingURL=useFocusFirstElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["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"],"names":["React","useFocusFinders","useFluent_unstable","useFocusFirstElement","open","modalType","findFirstFocusable","targetDocument","dialogRef","useRef","useEffect","element","current","focus","process","env","NODE_ENV","console","warn","join"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,kBAAkB,QAAQ,kCAAkC;AAIrE;;CAEC,GACD,OAAO,SAASC,qBAAqBC,IAAa,EAAEC,SAA0B,EAAE;IAC9E,MAAM,EAAEC,mBAAkB,EAAE,GAAGL;IAC/B,MAAM,EAAEM,eAAc,EAAE,GAAGL;IAC3B,MAAMM,YAAYR,MAAMS,MAAM,CAAuB,IAAI;IAEzDT,MAAMU,SAAS,CAAC,IAAM;QACpB,IAAI,CAACN,MAAM;YACT;QACF,CAAC;QACD,MAAMO,UAAUH,UAAUI,OAAO,IAAIN,mBAAmBE,UAAUI,OAAO;QACzE,IAAID,SAAS;YACXA,QAAQE,KAAK;QACf,OAAO;gBACLL;YAAAA,CAAAA,qBAAAA,UAAUI,OAAO,cAAjBJ,gCAAAA,KAAAA,IAAAA,mBAAmBK,SAAS,qDAAqD;YACjF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX,CAAC;QACH,CAAC;IACH,GAAG;QAACb;QAAoBF;QAAMC;QAAWE;KAAe;IAExD,OAAOC;AACT,CAAC"}
|
package/lib-commonjs/Dialog.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Dialog.js"],"sourcesContent":["export * from './components/Dialog/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogActions/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogActions.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogActions.js"],"sourcesContent":["export * from './components/DialogActions/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogBody/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogBody.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogBody.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogBody.js"],"sourcesContent":["export * from './components/DialogBody/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogContent/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogContent.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogContent.js"],"sourcesContent":["export * from './components/DialogContent/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogSurface/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogSurface.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogSurface.js"],"sourcesContent":["export * from './components/DialogSurface/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogTitle/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogTitle.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogTitle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogTitle.js"],"sourcesContent":["export * from './components/DialogTitle/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/DialogTrigger/index"), exports);
|
|
7
|
-
//# sourceMappingURL=DialogTrigger.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=DialogTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["DialogTrigger.js"],"sourcesContent":["export * from './components/DialogTrigger/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -16,6 +16,4 @@ const Dialog = /*#__PURE__*/ _react.memo((props)=>{
|
|
|
16
16
|
const contextValues = (0, _useDialogContextValues.useDialogContextValues_unstable)(state);
|
|
17
17
|
return (0, _renderDialog.renderDialog_unstable)(state, contextValues);
|
|
18
18
|
});
|
|
19
|
-
Dialog.displayName = 'Dialog';
|
|
20
|
-
|
|
21
|
-
//# sourceMappingURL=Dialog.js.map
|
|
19
|
+
Dialog.displayName = 'Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Dialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */ export const Dialog = /*#__PURE__*/ React.memo((props)=>{\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n return renderDialog_unstable(state, contextValues);\n});\nDialog.displayName = 'Dialog';\n"],"names":["Dialog","React","memo","props","state","useDialog_unstable","contextValues","useDialogContextValues_unstable","renderDialog_unstable","displayName"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;2BACY;8BACG;wCACU;AAOrC,MAAMA,SAAS,WAAW,GAAGC,OAAMC,IAAI,CAAC,CAACC,QAAQ;IACxD,MAAMC,QAAQC,IAAAA,6BAAkB,EAACF;IACjC,MAAMG,gBAAgBC,IAAAA,uDAA+B,EAACH;IACtD,OAAOI,IAAAA,mCAAqB,EAACJ,OAAOE;AACxC;AACAN,OAAOS,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|