@fluentui/react-dialog 9.14.4 → 9.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -2
- package/dist/index.d.ts +15 -13
- package/lib/components/Dialog/renderDialog.js.map +1 -1
- package/lib/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js +4 -4
- package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js +3 -3
- package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js +2 -2
- package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +7 -7
- package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/DialogSurfaceMotion.js +8 -24
- package/lib/components/DialogSurfaceMotion.js.map +1 -1
- package/lib/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib/components/DialogTrigger/renderDialogTrigger.js.map +1 -1
- package/lib/components/DialogTrigger/useDialogTrigger.js +2 -2
- package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib/components/MotionRefForwarder.js.map +1 -1
- package/lib/contexts/constants.js +3 -3
- package/lib/contexts/constants.js.map +1 -1
- package/lib/contexts/dialogContext.js.map +1 -1
- package/lib/contexts/dialogSurfaceContext.js.map +1 -1
- package/lib/contexts/index.js +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/useFocusFirstElement.js.map +1 -1
- package/lib-commonjs/components/Dialog/renderDialog.js.map +1 -1
- package/lib-commonjs/components/DialogActions/renderDialogActions.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js +3 -3
- package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DialogBody/renderDialogBody.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js +2 -2
- package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DialogContent/renderDialogContent.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +6 -6
- package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DialogSurfaceMotion.js +7 -23
- package/lib-commonjs/components/DialogSurfaceMotion.js.map +1 -1
- package/lib-commonjs/components/DialogTitle/renderDialogTitle.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js.map +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +1 -1
- package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
- package/lib-commonjs/components/MotionRefForwarder.js.map +1 -1
- package/lib-commonjs/contexts/constants.js +10 -10
- package/lib-commonjs/contexts/constants.js.map +1 -1
- package/lib-commonjs/contexts/dialogContext.js.map +1 -1
- package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +9 -9
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js +10 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -1
- package/package.json +14 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 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: getReactElementRef<HTMLAnchorElement>(child),\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"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,kBAAkB,EAClBC,gBAAgB,QACX,4BAA4B;AAEnC,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ,iBAAiB;AAC7F,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,wBAAwBL;IAE9B,MAAM,EAAEM,QAAQ,EAAEC,2BAA2B,KAAK,EAAEC,SAASH,wBAAwB,UAAU,MAAM,EAAE,GAAGD;IAE1G,MAAMK,QAAQb,gBAAgBU;IAE9B,MAAMI,oBAAoBX,0BAA0BY,CAAAA,MAAOA,IAAID,iBAAiB;IAChF,MAAM,EAAEE,iBAAiB,EAAE,GAAGV;IAE9B,MAAMW,cAAcf,iBAClB,CAACgB;YACCL,sBAAAA;QAAAA,kBAAAA,6BAAAA,uBAAAA,CAAAA,eAAAA,MAAOL,KAAK,EAACW,OAAO,cAApBN,2CAAAA,0BAAAA,cAAuBK;QACvB,IAAI,CAACA,MAAME,kBAAkB,IAAI;YAC/BN,kBAAkB;gBAChBI;gBACAG,MAAM;gBACNC,MAAMV,WAAW;YACnB;QACF;IACF;IAGF,MAAMW,oBAAoB;WACrBV,kBAAAA,4BAAAA,MAAOL,KAAK,AAAf;QACAgB,KAAKvB,mBAAsCY;QAC3CM,SAASF;QACT,GAAGD,iBAAiB;IACtB;IAEA,MAAMS,8BAA8BpB,mBAClCQ,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,YAAYR,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,MAAMR,MAAMQ,IAAI,GAAG,OAC/D;QACE,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IAGF,OAAO;QACLX,UAAUX,4BACRW,UACAC,2BAA2BY,oBAAoBE;IAEnD;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["import * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef() {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;CAEC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;CAIC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["import * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;CAEC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;CAIC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const
|
|
2
|
-
export const
|
|
1
|
+
export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
|
|
2
|
+
export const DIALOG_MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';
|
|
3
3
|
export const SURFACE_PADDING = '24px';
|
|
4
4
|
export const DIALOG_GAP = '8px';
|
|
5
5
|
export const SURFACE_BORDER_WIDTH = '1px';
|
|
6
|
-
export const
|
|
6
|
+
export const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/constants.ts"],"sourcesContent":["export const
|
|
1
|
+
{"version":3,"sources":["../src/contexts/constants.ts"],"sourcesContent":["export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const DIALOG_MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\nexport const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';\n"],"names":["DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,OAAO,MAAMA,yCAAyC,uCAAuC;AAC7F,OAAO,MAAMC,kCAAkC,wCAAwC;AACvF,OAAO,MAAMC,kBAAkB,OAAO;AACtC,OAAO,MAAMC,aAAa,MAAM;AAChC,OAAO,MAAMC,uBAAuB,MAAM;AAC1C,OAAO,MAAMC,4CAA4C,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/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;IACNC,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,WAAW;QAAEC,SAAS;IAAK;IAC3BC;IACE,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
|
+
{"version":3,"sources":["../src/contexts/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 | null>;\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;IACNC,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,WAAW;QAAEC,SAAS;IAAK;IAC3BC;IACE,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/dialogSurfaceContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = React.createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = ()
|
|
1
|
+
{"version":3,"sources":["../src/contexts/dialogSurfaceContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = React.createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = (): DialogSurfaceContextValue =>\n React.useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"names":["React","defaultContextValue","DialogSurfaceContext","createContext","undefined","DialogSurfaceProvider","Provider","useDialogSurfaceContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,MAAMC,sBAAiD;AAEvD,OAAO,MAAMC,uBAAuBF,MAAMG,aAAa,CAAwCC,WAAW;AAE1G,OAAO,MAAMC,wBAAwBH,qBAAqBI,QAAQ,CAAC;AAEnE,OAAO,MAAMC,mCAAmC;QAC9CP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACN,mCAAjBF,+BAAAA,oBAA0CC;EAAoB"}
|
package/lib/contexts/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { DIALOG_GAP,
|
|
1
|
+
export { DIALOG_GAP, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from './constants';
|
|
2
2
|
export { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';
|
|
3
3
|
export { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n DIALOG_GAP,\n
|
|
1
|
+
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n DIALOG_GAP,\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,cAAc;AAErB,SAASC,aAAa,EAAEC,cAAc,EAAEC,yBAAyB,QAAQ,kBAAkB;AAE3F,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,gCAAgC,QAAQ,yBAAyB"}
|
package/lib/index.js
CHANGED
|
@@ -6,3 +6,4 @@ export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogT
|
|
|
6
6
|
export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from './DialogSurface';
|
|
7
7
|
export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
|
|
8
8
|
export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider } from './contexts/index';
|
|
9
|
+
export { DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET } from './contexts/constants';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n DialogContextValues,\n DialogSlots,\n DialogProps,\n DialogState,\n DialogModalType,\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 useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n DialogSurfaceElement,\n DialogSurfaceContextValues,\n} 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\nexport {\n useDialogContext_unstable,\n useDialogSurfaceContext_unstable,\n DialogProvider,\n DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_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","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,WAAW;AAY9G,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,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n DialogContextValues,\n DialogSlots,\n DialogProps,\n DialogState,\n DialogModalType,\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 useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n DialogSurfaceProps,\n DialogSurfaceSlots,\n DialogSurfaceState,\n DialogSurfaceElement,\n DialogSurfaceContextValues,\n} 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\nexport {\n useDialogContext_unstable,\n useDialogSurfaceContext_unstable,\n DialogProvider,\n DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n\nexport {\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_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","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,WAAW;AAY9G,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,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB;AAI1B,SACEC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yCAAyC,QACpC,uBAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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
|
|
1
|
+
{"version":3,"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(\n open: boolean,\n modalType: DialogModalType,\n): React.RefObject<DialogSurfaceElement | null> {\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent_unstable();\n const dialogRef = React.useRef<DialogSurfaceElement | null>(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 === 'development') {\n // eslint-disable-next-line no-console\n console.warn(/** #__DE-INDENT__ */ `\n @fluentui/react-dialog [useFocusFirstElement]:\n 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 `);\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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,kBAAkB,QAAQ,kCAAkC;AAIrE;;CAEC,GACD,OAAO,SAASC,qBACdC,IAAa,EACbC,SAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAE,GAAGL;IAC/B,MAAM,EAAEM,cAAc,EAAE,GAAGL;IAC3B,MAAMM,YAAYR,MAAMS,MAAM,CAA8B;IAE5DT,MAAMU,SAAS,CAAC;QACd,IAAI,CAACN,MAAM;YACT;QACF;QACA,MAAMO,UAAUH,UAAUI,OAAO,IAAIN,mBAAmBE,UAAUI,OAAO;QACzE,IAAID,SAAS;YACXA,QAAQE,KAAK;QACf,OAAO;gBACLL;aAAAA,qBAAAA,UAAUI,OAAO,cAAjBJ,yCAAAA,mBAAmBK,KAAK,IAAI,qDAAqD;YACjF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,IAAI,CAAuB,CAAC;;oGAIpC,CAAC;YACH;QACF;IACF,GAAG;QAACZ;QAAoBF;QAAMC;QAAWE;KAAe;IAExD,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '../MotionRefForwarder';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n assertSlots<InternalDialogSlots>(state);\n\n return (\n <DialogProvider value={contextValues.dialog}>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n {state.trigger}\n {state.content && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <DialogSurface/> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.content as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '../MotionRefForwarder';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n assertSlots<InternalDialogSlots>(state);\n\n return (\n <DialogProvider value={contextValues.dialog}>\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n {state.trigger}\n {state.content && (\n <state.surfaceMotion>\n <MotionRefForwarder>\n {/* Casting here as content should be equivalent to <DialogSurface/> */}\n {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n {state.content as React.ReactElement}\n </MotionRefForwarder>\n </state.surfaceMotion>\n )}\n </DialogSurfaceProvider>\n </DialogProvider>\n );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":";;;;+BAcaK;;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;iEAEjC,QAAQ;oCAEI,wBAAwB;0BACL,iBAAiB;AAMhE,8BAA8B,CAACC,OAAoBC;QACxDP,2BAAAA,EAAiCM;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,wBAAAA,EAAAA;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,WAAA,OAAA,gBAAA,EAACL,+BAAAA,EAAAA;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,IAAA,WAAA,OACZ,eAAA,EAACN,MAAMO,aAAa,EAAA;8BAClB,WAAA,OAAA,eAAA,EAACX,sCAAAA,EAAAA;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogActions/renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n assertSlots<DialogActionsSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogActions_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogActions/renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState): JSXElement => {\n assertSlots<DialogActionsSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogActions_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,+BAA+B,CAACC;QAC3CF,2BAAAA,EAAgCE;IAEhC,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP,
|
|
1
|
+
{"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/**\n * Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":";;;;;;;;;;;IAEaK,uBAAuB;;;mCA+CY;;;;uBAjDU,gBAAgB;AAEnE,gCAAgC;IACnCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,eAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAK,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAG,UAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAR,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAS,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BjB,CAAC;AAGS,MAAMC,mCAAmCC,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;IAC5U,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -30,7 +30,7 @@ const dialogActionsClassNames = {
|
|
|
30
30
|
display: 'flex',
|
|
31
31
|
gridRowStart: 3,
|
|
32
32
|
gridRowEnd: 3,
|
|
33
|
-
[_constants.
|
|
33
|
+
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
34
34
|
flexDirection: 'column',
|
|
35
35
|
justifySelf: 'stretch'
|
|
36
36
|
}
|
|
@@ -40,7 +40,7 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
40
40
|
justifySelf: 'end',
|
|
41
41
|
gridColumnStart: 2,
|
|
42
42
|
gridColumnEnd: 4,
|
|
43
|
-
[_constants.
|
|
43
|
+
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
44
44
|
gridColumnStart: 1,
|
|
45
45
|
gridRowStart: 4,
|
|
46
46
|
gridRowEnd: 'auto'
|
|
@@ -50,7 +50,7 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
50
50
|
justifySelf: 'start',
|
|
51
51
|
gridColumnStart: 1,
|
|
52
52
|
gridColumnEnd: 2,
|
|
53
|
-
[_constants.
|
|
53
|
+
[_constants.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
54
54
|
gridColumnEnd: 4,
|
|
55
55
|
gridRowStart: 3,
|
|
56
56
|
gridRowEnd: 'auto'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP,
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":";;;;;;;;;;;IAKaK,uBAAAA;;;IAoDAkB,+BAAAA;;;;uBAzD6C,iBAAiB;2BAGR,2BAA2B;AAEvF,gCAAoE;IACzEjB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBP,sBAAAA,EAAgB;IACrCQ,KAAKL,qBAAAA;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,iDAAAA,CAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAKO,wCAAwC,CAACM;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;IACfQ,MAAMlB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogBody/renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n assertSlots<DialogBodySlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogBody_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogBody/renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState): JSXElement => {\n assertSlots<DialogBodySlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogBody_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP,
|
|
1
|
+
{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 * ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":";;;;;;;;;;;IAEaM,oBAAoB;;;gCA0BY;eAA5BK;;;uBA5B6B,gBAAgB;AAEvD,6BAA6B;IAChCJ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAAS,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAkB1B,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGb,mBAAY,EAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACjG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -34,11 +34,11 @@ const dialogBodyClassNames = {
|
|
|
34
34
|
boxSizing: 'border-box',
|
|
35
35
|
gridTemplateRows: 'auto 1fr',
|
|
36
36
|
gridTemplateColumns: '1fr 1fr auto',
|
|
37
|
-
[_contexts.
|
|
37
|
+
[_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
38
38
|
maxWidth: '100vw',
|
|
39
39
|
gridTemplateRows: 'auto 1fr auto'
|
|
40
40
|
},
|
|
41
|
-
[_contexts.
|
|
41
|
+
[_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
|
|
42
42
|
maxHeight: 'unset'
|
|
43
43
|
}
|
|
44
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":";;;;;;;;;;;IAUaM,oBAAAA;;;gCA6BAW;;;;uBAvCiC,iBAAiB;0BAQxD,iBAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,oBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,yBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,yBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,gDAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpBU,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n assertSlots<DialogContentSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogContent_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState): JSXElement => {\n assertSlots<DialogContentSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderDialogContent_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,+BAA+B,CAACC;QAC3CF,2BAAAA,EAAgCE;IAEhC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/**\n * Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAGaK,uBAAuB;;;mCAsBY;eAA/BK;;;uBAzB6B,gBAAgB;AAGvD,gCAAgC;IACnCJ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} * -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/**\n * Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAMaK,uBAAAA;;;mCA2BAc;;;;uBAjCiC,iBAAiB;4BAGtB,wBAAwB;0BACjB,iBAAiB;AAE1D,gCAAoE;IACzEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,SAASN,kBAAAA,CAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,4BAAAA,CAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n state: DialogSurfaceState,\n contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n assertSlots<DialogSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n {state.backdrop &&\n // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n // FIXME: this should be resolved by properly splitting props and state slots declaration\n state.backdropMotion && (\n <state.backdropMotion>\n <state.backdrop />\n </state.backdropMotion>\n )}\n <DialogSurfaceProvider value={contextValues.dialogSurface}>\n <state.root />\n </DialogSurfaceProvider>\n </Portal>\n );\n};\n"],"names":["Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;6BAE1B,yBAAyB;gCACpB,4BAA4B;0BAGlB,iBAAiB;AAMhD,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,gBAAA,EAACJ,mBAAAA,EAAAA;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,IAAA,WAAA,OAClB,eAAA,EAACJ,MAAMI,cAAc,EAAA;0BACnB,WAAA,OAAA,eAAA,EAACJ,MAAMG,QAAQ,EAAA,CAAA;;8BAGrB,eAAA,EAACL,+BAAAA,EAAAA;gBAAsBO,OAAOJ,cAAcK,aAAa;0BACvD,WAAA,OAAA,eAAA,EAACN,MAAMO,IAAI,EAAA,CAAA;;;;AAInB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { isNestedDialog, root, backdrop } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","d","useDialogSurfaceStyles_unstable","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","styles","className"],"mappings":";;;;;;;;;;;IAIaU,uBAAuB;;;mCAwDY;eAA/BW;;;uBA5DyC,gBAAgB;AAInE,gCAAgC;IACnCV,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEC,cAAc,EAAEZ,IAAI,EAAEC,QAAAA,EAAU,GAAGU,KAAK;IAChD,MAAME,aAAa,GAAGX,gBAAgB,CAAC,CAAC;IACxC,MAAMY,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;IAChD,MAAMU,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BN,IAAI,CAACgB,SAAS,GAAGzB,uBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEa,aAAa,EAAEb,IAAI,CAACgB,SAAS,CAAC;IAC1F,IAAIf,QAAQ,EAAE;QACVA,QAAQ,CAACe,SAAS,GAAGzB,uBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEa,iBAAiB,EAAEF,cAAc,IAAIG,MAAM,CAACR,oBAAoB,EAAEN,QAAQ,CAACe,SAAS,CAAC;IAC7J;IACA,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -51,17 +51,17 @@ const dialogSurfaceClassNames = {
|
|
|
51
51
|
// Same styles as DialogSurfaceMotion last keyframe,
|
|
52
52
|
// to ensure dialog will be properly styled when surfaceMotion is opted-out
|
|
53
53
|
boxShadow: _reacttheme.tokens.shadow64,
|
|
54
|
-
[_contexts.
|
|
54
|
+
[_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
|
|
55
55
|
maxWidth: '100vw'
|
|
56
56
|
},
|
|
57
|
-
[_contexts.
|
|
57
|
+
[_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
|
|
58
58
|
overflowY: 'auto',
|
|
59
59
|
// We need to offset the scrollbar by adding transparent borders otherwise
|
|
60
60
|
// it conflicts with the border radius.
|
|
61
|
-
paddingRight: `calc(${_contexts.SURFACE_PADDING} - ${_contexts.
|
|
62
|
-
borderRightWidth: _contexts.
|
|
63
|
-
borderTopWidth: _contexts.
|
|
64
|
-
borderBottomWidth: _contexts.
|
|
61
|
+
paddingRight: `calc(${_contexts.SURFACE_PADDING} - ${_contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
|
|
62
|
+
borderRightWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
|
|
63
|
+
borderTopWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
|
|
64
|
+
borderBottomWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
67
|
const useBackdropBaseStyle = (0, _react.makeResetStyles)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { isNestedDialog, root, backdrop } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n isNestedDialog && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","useDialogSurfaceStyles_unstable","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","styles","className"],"mappings":";;;;;;;;;;;IAaaU,uBAAAA;;;mCA8DAqC;eAAAA;;;uBA3E6C,iBAAiB;4BAEpD,wBAAwB;8BACP,0BAA0B;0BAO3D,iBAAiB;AAGjB,gCAA4F;IACjGpC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,yBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,8BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,gDAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,yCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,yBAAAA,CAAgB,GAAG,EAAEJ,mDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,mDAAAA;QAClBmC,gBAAgBnC,mDAAAA;QAChBoC,mBAAmBpC,mDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAEtC,IAAI,EAAEC,QAAQ,EAAE,GAAGoC;IAE3C,MAAME,gBAAgBrC;IAEtB,MAAMsC,oBAAoBT;IAC1B,MAAMU,SAASR;IAEfjC,KAAK0C,SAAS,OAAGnD,mBAAAA,EAAaQ,wBAAwBC,IAAI,EAAEuC,eAAevC,KAAK0C,SAAS;IAEzF,IAAIzC,UAAU;QACZA,SAASyC,SAAS,OAAGnD,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChCuC,mBACAF,kBAAkBG,OAAOP,oBAAoB,EAC7CjC,SAASyC,SAAS;IAEtB;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -9,27 +9,11 @@ Object.defineProperty(exports, "DialogSurfaceMotion", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _reactmotion = require("@fluentui/react-motion");
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
opacity: 1
|
|
20
|
-
}
|
|
21
|
-
];
|
|
22
|
-
const DialogSurfaceMotion = (0, _reactmotion.createPresenceComponent)({
|
|
23
|
-
enter: {
|
|
24
|
-
keyframes,
|
|
25
|
-
easing: _reactmotion.motionTokens.curveDecelerateMid,
|
|
26
|
-
duration: _reactmotion.motionTokens.durationGentle
|
|
27
|
-
},
|
|
28
|
-
exit: {
|
|
29
|
-
keyframes: [
|
|
30
|
-
...keyframes
|
|
31
|
-
].reverse(),
|
|
32
|
-
easing: _reactmotion.motionTokens.curveAccelerateMin,
|
|
33
|
-
duration: _reactmotion.motionTokens.durationGentle
|
|
34
|
-
}
|
|
12
|
+
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
|
|
13
|
+
const DialogSurfaceMotion = (0, _reactmotion.createPresenceComponentVariant)(_reactmotioncomponentspreview.Scale, {
|
|
14
|
+
fromScale: 0.85,
|
|
15
|
+
easing: _reactmotion.motionTokens.curveDecelerateMid,
|
|
16
|
+
duration: _reactmotion.motionTokens.durationGentle,
|
|
17
|
+
exitEasing: _reactmotion.motionTokens.curveAccelerateMin,
|
|
18
|
+
exitDuration: _reactmotion.motionTokens.durationGentle
|
|
35
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n fromScale: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","fromScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":";;;;+BAGaG;;;;;;6BAHgD,yBAAyB;8CAChE,4CAA4C;AAE3D,gCAA4BH,2CAAAA,EAA+BE,mCAAAA,EAAO;IACvEE,WAAW;IACXC,QAAQJ,yBAAAA,CAAaK,kBAAkB;IACvCC,UAAUN,yBAAAA,CAAaO,cAAc;IACrCC,YAAYR,yBAAAA,CAAaS,kBAAkB;IAC3CC,cAAcV,yBAAAA,CAAaO,cAAc;AAC3C,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n assertSlots<DialogTitleSlots>(state);\n\n return (\n <>\n <state.root>{state.root.children}</state.root>\n {state.action && <state.action />}\n </>\n );\n};\n"],"names":["assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState): JSXElement => {\n assertSlots<DialogTitleSlots>(state);\n\n return (\n <>\n <state.root>{state.root.children}</state.root>\n {state.action && <state.action />}\n </>\n );\n};\n"],"names":["assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,UAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;8BACE,eAAA,EAACA,MAAMC,IAAI,EAAA;0BAAED,MAAMC,IAAI,CAACC,QAAQ;;YAC/BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/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":"
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/renderDialogTrigger.tsx"],"sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState): JSXElement | null => state.children;\n"],"names":["renderDialogTrigger_unstable","state","children"],"mappings":"AAGA;;;;CAIC,GACD;;;;;;;;;;AAAO,MAAMA,+BAA+B,CAACC,QAAiDA,MAAMC,QAAQ,CAAC"}
|
|
@@ -33,7 +33,7 @@ const useDialogTrigger_unstable = (props)=>{
|
|
|
33
33
|
});
|
|
34
34
|
const triggerChildProps = {
|
|
35
35
|
...child === null || child === void 0 ? void 0 : child.props,
|
|
36
|
-
ref:
|
|
36
|
+
ref: (0, _reactutilities.getReactElementRef)(child),
|
|
37
37
|
onClick: handleClick,
|
|
38
38
|
...triggerAttributes
|
|
39
39
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 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: getReactElementRef<HTMLAnchorElement>(child),\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"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useModalAttributes","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","onClick","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"mappings":";;;;+BAkBaS;;;;;;;iEAlBU,QAAQ;gCAMxB,4BAA4B;0BAEyC,iBAAiB;2BAC1D,uBAAuB;8BACvB,0BAA0B;AAQtD,kCAAkC,CAACC;IACxC,MAAMC,4BAAwBL,0CAAAA;IAE9B,MAAM,EAAEM,QAAQ,EAAEC,2BAA2B,KAAK,EAAEC,SAASH,wBAAwB,UAAU,MAAM,EAAE,GAAGD;IAE1G,MAAMK,QAAQb,mCAAAA,EAAgBU;IAE9B,MAAMI,wBAAoBX,mCAAAA,EAA0BY,CAAAA,MAAOA,IAAID,iBAAiB;IAChF,MAAM,EAAEE,iBAAiB,EAAE,OAAGV,gCAAAA;IAE9B,MAAMW,cAAcf,oCAAAA,EAClB,CAACgB;YACCL,sBAAAA;QAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,uBAAAA,CAAAA,eAAAA,MAAOL,KAAK,AAALA,EAAMW,OAAAA,AAAO,MAAA,QAApBN,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,cAAuBK;QACvB,IAAI,CAACA,MAAME,kBAAkB,IAAI;YAC/BN,kBAAkB;gBAChBI;gBACAG,MAAM;gBACNC,MAAMV,WAAW;YACnB;QACF;IACF;IAGF,MAAMW,oBAAoB;WACrBV,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOL,KAAV;QACAgB,SAAKvB,kCAAAA,EAAsCY;QAC3CM,SAASF;QACT,GAAGD,iBAAiB;IACtB;IAEA,MAAMS,kCAA8BpB,6BAAAA,EAClCQ,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOQ,IAAAA,AAAI,MAAK,YAAYR,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOQ,IAAAA,AAAI,MAAK,MAAMR,MAAMQ,IAAI,GAAG,OAC/D;QACE,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IAGF,OAAO;QACLX,cAAUX,2CAAAA,EACRW,UACAC,2BAA2BY,oBAAoBE;IAEnD;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["import * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef() {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":";;;;;;;;;;;sBAgBaM;;;yBATGF;;;;;iEAPO,QAAQ;AAE/B,MAAMH,4BAAAA,WAAAA,GAA4BD,OAAME,aAAa,CAAqCC;AAKnF,SAASC;IACd,OAAOJ,OAAMK,UAAU,CAACJ;AAC1B;AAOO,MAAMK,qBAAAA,WAAAA,GAAqBN,OAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,OAAA,WAAA,GAAO,OAAA,aAAA,CAACR,0BAA0BS,QAAQ,EAAA;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["import * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":";;;;;;;;;;;sBAgBaM;;;yBATGF;;;;;iEAPO,QAAQ;AAE/B,MAAMH,4BAAAA,WAAAA,GAA4BD,OAAME,aAAa,CAAqCC;AAKnF,SAASC;IACd,OAAOJ,OAAMK,UAAU,CAACJ;AAC1B;AAOO,MAAMK,qBAAAA,WAAAA,GAAqBN,OAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,OAAA,WAAA,GAAO,OAAA,aAAA,CAACR,0BAA0BS,QAAQ,EAAA;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}
|