@fluentui/react-dialog 9.15.1 → 9.15.3

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.
Files changed (106) hide show
  1. package/CHANGELOG.md +29 -2
  2. package/lib/components/Dialog/Dialog.js +1 -0
  3. package/lib/components/Dialog/Dialog.js.map +1 -1
  4. package/lib/components/Dialog/useDialog.js +1 -0
  5. package/lib/components/Dialog/useDialog.js.map +1 -1
  6. package/lib/components/DialogActions/DialogActions.js +1 -0
  7. package/lib/components/DialogActions/DialogActions.js.map +1 -1
  8. package/lib/components/DialogActions/useDialogActionsStyles.styles.js +2 -0
  9. package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  10. package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js +1 -0
  11. package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +1 -1
  12. package/lib/components/DialogBody/DialogBody.js +1 -0
  13. package/lib/components/DialogBody/DialogBody.js.map +1 -1
  14. package/lib/components/DialogBody/useDialogBodyStyles.styles.js +2 -0
  15. package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  16. package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js +1 -0
  17. package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js.map +1 -1
  18. package/lib/components/DialogContent/DialogContent.js +1 -0
  19. package/lib/components/DialogContent/DialogContent.js.map +1 -1
  20. package/lib/components/DialogContent/useDialogContentStyles.styles.js +2 -0
  21. package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  22. package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js +1 -0
  23. package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js.map +1 -1
  24. package/lib/components/DialogSurface/DialogSurface.js +1 -0
  25. package/lib/components/DialogSurface/DialogSurface.js.map +1 -1
  26. package/lib/components/DialogSurface/useDialogSurface.js +1 -0
  27. package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
  28. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +2 -0
  29. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  30. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +1 -0
  31. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +1 -1
  32. package/lib/components/DialogTitle/DialogTitle.js +1 -0
  33. package/lib/components/DialogTitle/DialogTitle.js.map +1 -1
  34. package/lib/components/DialogTitle/useDialogTitle.js +1 -0
  35. package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
  36. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +2 -0
  37. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  38. package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js +1 -0
  39. package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map +1 -1
  40. package/lib/components/DialogTrigger/DialogTrigger.js +1 -0
  41. package/lib/components/DialogTrigger/DialogTrigger.js.map +1 -1
  42. package/lib/components/DialogTrigger/useDialogTrigger.js +1 -0
  43. package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  44. package/lib/components/MotionRefForwarder.js +1 -0
  45. package/lib/components/MotionRefForwarder.js.map +1 -1
  46. package/lib/contexts/dialogContext.js +1 -0
  47. package/lib/contexts/dialogContext.js.map +1 -1
  48. package/lib/contexts/dialogSurfaceContext.js +1 -0
  49. package/lib/contexts/dialogSurfaceContext.js.map +1 -1
  50. package/lib/utils/useDisableBodyScroll.js +1 -0
  51. package/lib/utils/useDisableBodyScroll.js.map +1 -1
  52. package/lib/utils/useFocusFirstElement.js +1 -0
  53. package/lib/utils/useFocusFirstElement.js.map +1 -1
  54. package/lib-commonjs/components/Dialog/Dialog.js +1 -0
  55. package/lib-commonjs/components/Dialog/Dialog.js.map +1 -1
  56. package/lib-commonjs/components/Dialog/useDialog.js +1 -0
  57. package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
  58. package/lib-commonjs/components/DialogActions/DialogActions.js +1 -0
  59. package/lib-commonjs/components/DialogActions/DialogActions.js.map +1 -1
  60. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js +1 -0
  61. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  62. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js +1 -0
  63. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js.map +1 -1
  64. package/lib-commonjs/components/DialogBody/DialogBody.js +1 -0
  65. package/lib-commonjs/components/DialogBody/DialogBody.js.map +1 -1
  66. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +1 -0
  67. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  68. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js +1 -0
  69. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js.map +1 -1
  70. package/lib-commonjs/components/DialogContent/DialogContent.js +1 -0
  71. package/lib-commonjs/components/DialogContent/DialogContent.js.map +1 -1
  72. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js +1 -0
  73. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  74. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js +1 -0
  75. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js.map +1 -1
  76. package/lib-commonjs/components/DialogSurface/DialogSurface.js +1 -0
  77. package/lib-commonjs/components/DialogSurface/DialogSurface.js.map +1 -1
  78. package/lib-commonjs/components/DialogSurface/useDialogSurface.js +1 -0
  79. package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
  80. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +1 -0
  81. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  82. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js +1 -0
  83. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map +1 -1
  84. package/lib-commonjs/components/DialogTitle/DialogTitle.js +1 -0
  85. package/lib-commonjs/components/DialogTitle/DialogTitle.js.map +1 -1
  86. package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -0
  87. package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
  88. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js +1 -0
  89. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  90. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.js +1 -0
  91. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map +1 -1
  92. package/lib-commonjs/components/DialogTrigger/DialogTrigger.js +1 -0
  93. package/lib-commonjs/components/DialogTrigger/DialogTrigger.js.map +1 -1
  94. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +1 -0
  95. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  96. package/lib-commonjs/components/MotionRefForwarder.js +1 -0
  97. package/lib-commonjs/components/MotionRefForwarder.js.map +1 -1
  98. package/lib-commonjs/contexts/dialogContext.js +1 -0
  99. package/lib-commonjs/contexts/dialogContext.js.map +1 -1
  100. package/lib-commonjs/contexts/dialogSurfaceContext.js +1 -0
  101. package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
  102. package/lib-commonjs/utils/useDisableBodyScroll.js +1 -0
  103. package/lib-commonjs/utils/useDisableBodyScroll.js.map +1 -1
  104. package/lib-commonjs/utils/useFocusFirstElement.js +1 -0
  105. package/lib-commonjs/utils/useFocusFirstElement.js.map +1 -1
  106. package/package.json +10 -10
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, useEventCallback } from '@fluentui/react-utilities';
3
4
  import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
@@ -1 +1 @@
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
+ {"version":3,"sources":["../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
3
4
  /**
@@ -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(): 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
+ {"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { createContext, useContextSelector } from '@fluentui/react-context-selector';
3
4
  const defaultContextValue = {
@@ -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 | 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
+ {"version":3,"sources":["../src/contexts/dialogContext.ts"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  const defaultContextValue = false;
3
4
  export const DialogSurfaceContext = React.createContext(undefined);
@@ -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 = (): 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"}
1
+ {"version":3,"sources":["../src/contexts/dialogSurfaceContext.ts"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { useFluent_unstable } from '@fluentui/react-shared-contexts';
3
4
  import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useDisableBodyScroll.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * @internal\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isHorizontalScrollbarVisible =\n // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.\n // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.\n Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n const enableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["React","useFluent_unstable","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","useCallback","isHorizontalScrollbarVisible","Math","floor","body","getBoundingClientRect","height","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,gCAAgC;AAE7F;;;CAGC,GACD,OAAO,SAASC;IAId,MAAMC,qBAAqBF;IAC3B,MAAMG,qBAAqBJ;IAC3B,MAAM,EAAEK,cAAc,EAAE,GAAGN;IAE3B,MAAMO,oBAAoBR,MAAMS,WAAW,CAAC;YAO0BF;QANpE,IAAI,CAACA,gBAAgB;YACnB;QACF;YAIoEA;QAHpE,MAAMG,+BACJ,+IAA+I;QAC/I,oJAAoJ;QACpJC,KAAKC,KAAK,CAACL,eAAeM,IAAI,CAACC,qBAAqB,GAAGC,MAAM,IAAKR,CAAAA,CAAAA,2CAAAA,8BAAAA,eAAeS,WAAW,cAA1BT,kDAAAA,4BAA4BU,WAAW,cAAvCV,qDAAAA,0CAA2C,CAAA;QAC/G,IAAI,CAACG,8BAA8B;YACjC;QACF;QACAH,eAAeW,eAAe,CAACC,SAAS,CAACC,GAAG,CAACf;QAC7CE,eAAeM,IAAI,CAACM,SAAS,CAACC,GAAG,CAACd;QAClC;IACF,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,MAAMe,mBAAmBrB,MAAMS,WAAW,CAAC;QACzC,IAAI,CAACF,gBAAgB;YACnB;QACF;QACAA,eAAeW,eAAe,CAACC,SAAS,CAACG,MAAM,CAACjB;QAChDE,eAAeM,IAAI,CAACM,SAAS,CAACG,MAAM,CAAChB;IACvC,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,OAAO;QACLE;QACAa;IACF;AACF"}
1
+ {"version":3,"sources":["../src/utils/useDisableBodyScroll.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * @internal\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n */\nexport function useDisableBodyScroll(): {\n disableBodyScroll: () => void;\n enableBodyScroll: () => void;\n} {\n const htmlNoScrollStyles = useHTMLNoScrollStyles();\n const bodyNoScrollStyles = useBodyNoScrollStyles();\n const { targetDocument } = useFluent_unstable();\n\n const disableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n const isHorizontalScrollbarVisible =\n // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.\n // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.\n Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);\n if (!isHorizontalScrollbarVisible) {\n return;\n }\n targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n targetDocument.body.classList.add(bodyNoScrollStyles);\n return;\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n const enableBodyScroll = React.useCallback(() => {\n if (!targetDocument) {\n return;\n }\n targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n targetDocument.body.classList.remove(bodyNoScrollStyles);\n }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n return {\n disableBodyScroll,\n enableBodyScroll,\n };\n}\n"],"names":["React","useFluent_unstable","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","useCallback","isHorizontalScrollbarVisible","Math","floor","body","getBoundingClientRect","height","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,gCAAgC;AAE7F;;;CAGC,GACD,OAAO,SAASC;IAId,MAAMC,qBAAqBF;IAC3B,MAAMG,qBAAqBJ;IAC3B,MAAM,EAAEK,cAAc,EAAE,GAAGN;IAE3B,MAAMO,oBAAoBR,MAAMS,WAAW,CAAC;YAO0BF;QANpE,IAAI,CAACA,gBAAgB;YACnB;QACF;YAIoEA;QAHpE,MAAMG,+BACJ,+IAA+I;QAC/I,oJAAoJ;QACpJC,KAAKC,KAAK,CAACL,eAAeM,IAAI,CAACC,qBAAqB,GAAGC,MAAM,IAAKR,CAAAA,CAAAA,2CAAAA,8BAAAA,eAAeS,WAAW,cAA1BT,kDAAAA,4BAA4BU,WAAW,cAAvCV,qDAAAA,0CAA2C,CAAA;QAC/G,IAAI,CAACG,8BAA8B;YACjC;QACF;QACAH,eAAeW,eAAe,CAACC,SAAS,CAACC,GAAG,CAACf;QAC7CE,eAAeM,IAAI,CAACM,SAAS,CAACC,GAAG,CAACd;QAClC;IACF,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,MAAMe,mBAAmBrB,MAAMS,WAAW,CAAC;QACzC,IAAI,CAACF,gBAAgB;YACnB;QACF;QACAA,eAAeW,eAAe,CAACC,SAAS,CAACG,MAAM,CAACjB;QAChDE,eAAeM,IAAI,CAACM,SAAS,CAACG,MAAM,CAAChB;IACvC,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,OAAO;QACLE;QACAa;IACF;AACF"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
3
  import { useFocusFinders } from '@fluentui/react-tabster';
3
4
  import { useFluent_unstable } from '@fluentui/react-shared-contexts';
@@ -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(\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
+ {"version":3,"sources":["../src/utils/useFocusFirstElement.ts"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\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 */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n\n return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"names":["React","useDialog_unstable","renderDialog_unstable","useDialogContextValues_unstable","Dialog","memo","props","state","contextValues","displayName"],"mappings":";;;;+BAaaI;;;;;;;iEAbU,QAAQ;2BACI,cAAc;8BACX,iBAAiB;wCAEP,2BAA2B;AASpE,eAAMA,WAAAA,GAAgCJ,OAAMK,IAAI,CAACC,CAAAA;IACtD,MAAMC,YAAQN,6BAAAA,EAAmBK;IACjC,MAAME,oBAAgBL,uDAAAA,EAAgCI;IAEtD,WAAOL,mCAAAA,EAAsBK,OAAOC;AACtC,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\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 */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n const state = useDialog_unstable(props);\n const contextValues = useDialogContextValues_unstable(state);\n\n return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"names":["React","useDialog_unstable","renderDialog_unstable","useDialogContextValues_unstable","Dialog","memo","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;wCAEP,2BAA2B;AASpE,MAAMI,SAAAA,WAAAA,GAAgCJ,OAAMK,IAAI,CAACC,CAAAA;IACtD,MAAMC,YAAQN,6BAAAA,EAAmBK;IACjC,MAAME,oBAAgBL,uDAAAA,EAAgCI;IAEtD,WAAOL,mCAAAA,EAAsBK,OAAOC;AACtC,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["import { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus,\n });\n const isNestedDialog = useHasParentContext(DialogContext);\n\n return {\n components: {\n surfaceMotion: DialogSurfaceMotion,\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: DialogSurfaceMotion,\n defaultProps: {\n appear: true,\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\n and at most two children <DialogTrigger/> <DialogSurface/> (in this order).\n `);\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"names":["useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","React","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","dialogTitleId","dialogRef","elementType","defaultProps","appear","visible","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":";;;;+BAmBaU;;;;;;;sCAnBuB,mCAAmC;8BACpC,0BAA0B;6BAC1B,yBAAyB;gCACE,4BAA4B;iEACnE,QAAQ;uBAEM,cAAc;0BACrB,iBAAiB;qCACX,yBAAyB;AAWtD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,OAAGjB,oCAAAA,EAAqB;QAC3CkB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAoBrB,gCAAAA,EAAiB,CAACsB;QAC1CZ,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,eAAWtB,2BAAAA,EAAqBY,MAAMN;IAE5C,MAAM,EAAEiB,eAAe,EAAEC,iBAAiB,EAAE,OAAG9B,gCAAAA,EAAmB;QAChE+B,WAAWnB,cAAc;QACzBoB,iBAAiB,CAAClB;IACpB;IACA,MAAMmB,qBAAiBlC,yCAAAA,EAAoBQ,uBAAAA;IAE3C,OAAO;QACL2B,YAAY;YACVC,eAAe3B,wCAAAA;QACjB;QACAM;QACAI;QACAN;QACAI;QACAD;QACAS;QACAY,mBAAehC,qBAAAA,EAAM;QACrB6B;QACAI,WAAWT;QACXC;QACAC;QACAK,mBAAelC,+BAAAA,EAAmBS,MAAMyB,aAAa,EAAE;YACrDG,aAAa9B,wCAAAA;YACb+B,cAAc;gBACZC,QAAQ;gBACRC,SAASvB;gBACTwB,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASzB,4BACPN,QAAyB;IAEzB,MAAMgC,gBAAgBtC,OAAMuC,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
1
+ {"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["'use client';\n\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n const [trigger, content] = childrenToTriggerAndContent(children);\n\n const [open, setOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n onOpenChange?.(data.event, data);\n\n // if user prevents default then do not change state value\n // otherwise updates state value and trigger reference to the element that caused the opening\n if (!data.event.isDefaultPrevented()) {\n setOpen(data.open);\n }\n });\n\n const focusRef = useFocusFirstElement(open, modalType);\n\n const { modalAttributes, triggerAttributes } = useModalAttributes({\n trapFocus: modalType !== 'non-modal',\n legacyTrapFocus: !inertTrapFocus,\n });\n const isNestedDialog = useHasParentContext(DialogContext);\n\n return {\n components: {\n surfaceMotion: DialogSurfaceMotion,\n },\n inertTrapFocus,\n open,\n modalType,\n content,\n trigger,\n requestOpenChange,\n dialogTitleId: useId('dialog-title-'),\n isNestedDialog,\n dialogRef: focusRef,\n modalAttributes,\n triggerAttributes,\n surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n elementType: DialogSurfaceMotion,\n defaultProps: {\n appear: true,\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n if (process.env.NODE_ENV !== 'production') {\n if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\n and at most two children <DialogTrigger/> <DialogSurface/> (in this order).\n `);\n }\n }\n switch (childrenArray.length) {\n // case where there's a trigger followed by content\n case 2:\n return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n // case where there's only content\n case 1:\n return [undefined, childrenArray[0]];\n // unknown case\n default:\n return [undefined, undefined];\n }\n}\n"],"names":["useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","React","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","dialogTitleId","dialogRef","elementType","defaultProps","appear","visible","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA;;;;;+BAqBaU;;;;;;;sCAnBuB,mCAAmC;8BACpC,0BAA0B;6BAC1B,yBAAyB;gCACE,4BAA4B;iEACnE,QAAQ;uBAEM,cAAc;0BACrB,iBAAiB;qCACX,yBAAyB;AAWtD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGjB,wCAAAA,EAAqB;QAC3CkB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAoBrB,gCAAAA,EAAiB,CAACsB;QAC1CZ,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,eAAWtB,2BAAAA,EAAqBY,MAAMN;IAE5C,MAAM,EAAEiB,eAAe,EAAEC,iBAAiB,EAAE,OAAG9B,gCAAAA,EAAmB;QAChE+B,WAAWnB,cAAc;QACzBoB,iBAAiB,CAAClB;IACpB;IACA,MAAMmB,qBAAiBlC,yCAAAA,EAAoBQ,uBAAAA;IAE3C,OAAO;QACL2B,YAAY;YACVC,eAAe3B,wCAAAA;QACjB;QACAM;QACAI;QACAN;QACAI;QACAD;QACAS;QACAY,mBAAehC,qBAAAA,EAAM;QACrB6B;QACAI,WAAWT;QACXC;QACAC;QACAK,mBAAelC,+BAAAA,EAAmBS,MAAMyB,aAAa,EAAE;YACrDG,aAAa9B,wCAAAA;YACb+B,cAAc;gBACZC,QAAQ;gBACRC,SAASvB;gBACTwB,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASzB,4BACPN,QAAyB;IAEzB,MAAMgC,gBAAgBtC,OAAMuC,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogActions/DialogActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n const state = useDialogActions_unstable(props, ref);\n\n useDialogActionsStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);\n\n return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"names":["React","useDialogActions_unstable","renderDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHook_unstable","DialogActions","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,sBAAMA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,+CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/DialogActions/DialogActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n const state = useDialogActions_unstable(props, ref);\n\n useDialogActionsStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);\n\n return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"names":["React","useDialogActions_unstable","renderDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHook_unstable","DialogActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
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"}
1
+ {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;IA+CnBmB,+BAA+B;;;;uBAjDU,gBAAgB;AAEnE,gCAAgC;IACnClB,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,wCAAyCE,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"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -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, 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
+ {"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;;;;;;;;;;;;IAOaK,uBAAAA;;;mCAoDAkB;eAAAA;;;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,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n const state = useDialogBody_unstable(props, ref);\n\n useDialogBodyStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n\n return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","DialogBody","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAMvE,mBAAMA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,yCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n const state = useDialogBody_unstable(props, ref);\n\n useDialogBodyStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n\n return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","DialogBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAMvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
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"}
1
+ {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;gCA0BY;;;;uBA5BC,gBAAgB;AAEvD,6BAA6B;IAChCC,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,MAAMC,gCAAgCC,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"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -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 {\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
+ {"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;;;;;;;;;;;;IAYaM,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,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n const state = useDialogContent_unstable(props, ref);\n\n useDialogContentStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,sBAAMA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,+CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n const state = useDialogContent_unstable(props, ref);\n\n useDialogContentStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;qCAGtC,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CL,6DAAAA,EAAgCM;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOP,iDAAAA,EAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
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
+ {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;2BAIwB;;;mCAsBY;;;;uBAzBF,gBAAgB;AAGvD,MAAMK,0BAA0B;IACnCC,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,MAAMC,mCAAmCC,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,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -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 { 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
+ {"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;;;;;;;;;;;;IAQaK,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,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAaaM;;;;;;;iEAbU,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;+CAG3B,kCAAkC;qCAC7C,kCAAkC;AAMvE,sBAAMA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DP,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n const state = useDialogSurface_unstable(props, ref);\n const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n useDialogSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;+CAG3B,kCAAkC;qCAC7C,kCAAkC;AAMvE,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DP,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["import { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '../MotionRefForwarder';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const contextRef = useMotionForwardedRef();\n\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n const open = useDialogContext_unstable(ctx => ctx.open);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n useIsomorphicLayoutEffect(() => {\n if (isNestedDialog || modalType === 'non-modal') {\n return;\n }\n\n disableBodyScroll();\n\n return () => {\n enableBodyScroll();\n };\n }, [enableBodyScroll, isNestedDialog, disableBodyScroll, modalType]);\n\n return {\n components: {\n backdrop: 'div',\n root: 'div',\n backdropMotion: DialogBackdropMotion,\n },\n open,\n backdrop,\n isNestedDialog,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n backdropMotion: presenceMotionSlot(props.backdropMotion, {\n elementType: DialogBackdropMotion,\n defaultProps: {\n appear: true,\n visible: open,\n },\n }),\n\n // Deprecated properties\n transitionStatus: undefined,\n };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":";;;;+BA2Baa;;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;iEACZ,QAAQ;0BAEW,iBAAiB;sCACtB,mCAAmC;sCACnC,0BAA0B;oCACzB,wBAAwB;AAYvD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaJ,yCAAAA;IAEnB,MAAMK,gBAAYR,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,qBAAiBV,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIC,cAAc;IAE1E,MAAMC,sBAAkBX,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIE,eAAe;IAC5E,MAAMC,gBAAYZ,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIG,SAAS;IAChE,MAAMC,wBAAoBb,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,oBAAgBd,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIM,aAAa;IACxE,MAAMC,WAAOhB,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIO,IAAI;IAEtD,MAAMC,2BAAuBxB,gCAAAA,EAAiB,CAACyB;QAC7C,QAAIvB,mCAAAA,EAAoBU,MAAMc,QAAQ,GAAG;gBACvCd,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMc,QAAQ,AAARA,EAASC,OAAO,AAAPA,MAAO,QAAtBf,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAAA,IAAAA,CAAAA,iBAAyBa;QAC3B;QACA,IAAIV,cAAc,WAAW,CAACU,MAAMG,kBAAkB,IAAI;YACxDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;QACF;IACF;IAEA,MAAMC,oBAAgB9B,gCAAAA,EAAiB,CAACyB;YACtCb;SAAAA,mBAAAA,MAAMmB,SAAS,AAATA,MAAS,QAAfnB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,OAAkBa;QAElB,IAAIA,MAAMO,GAAG,KAAKlC,oBAAAA,IAAU,CAAC2B,MAAMG,kBAAkB,IAAI;YACvDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAWvB,oBAAAA,CAAK+B,QAAQ,CAACtB,MAAMc,QAAQ,EAAE;QAC7CS,iBAAiBpB,cAAc;QAC/BqB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IAEA,MAAM,EAAEc,iBAAiB,EAAEC,gBAAgB,EAAE,OAAG/B,0CAAAA;QAEhDH,yCAAAA,EAA0B;QACxB,IAAIY,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEAuB;QAEA,OAAO;YACLC;QACF;IACF,GAAG;QAACA;QAAkBtB;QAAgBqB;QAAmBvB;KAAU;IAEnE,OAAO;QACLyB,YAAY;YACVd,UAAU;YACVe,MAAM;YACNC,gBAAgBjC,0CAAAA;QAClB;QACAc;QACAG;QACAT;QACA0B,WAAW/B,MAAM+B,SAAS;QAC1BF,MAAMtC,oBAAAA,CAAKyC,MAAM,CACfxC,4CAAAA,EAAyB,OAAO;YAC9ByC,UAAU,CAAC;YACX,cAAc9B,cAAc;YAC5B+B,MAAM/B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBH,KAAK,CAAC,aAAa,GAAGmC,YAAY1B;YACrD,GAAGT,KAAK;YACR,GAAGM,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FjB,SAAKZ,6BAAAA,EAAcY,KAAKC,YAAYK;QACtC,IACA;YAAEkB,aAAa;QAAM;QAEvBK,oBAAgB3C,+BAAAA,EAAmBa,MAAM8B,cAAc,EAAE;YACvDL,aAAa5B,0CAAAA;YACb2B,cAAc;gBACZY,QAAQ;gBACRC,SAAS1B;YACX;QACF;QAEA,wBAAwB;QACxB2B,kBAAkBH;IACpB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n getIntrinsicElementProps,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '../MotionRefForwarder';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const contextRef = useMotionForwardedRef();\n\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n const open = useDialogContext_unstable(ctx => ctx.open);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n\n const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n useIsomorphicLayoutEffect(() => {\n if (isNestedDialog || modalType === 'non-modal') {\n return;\n }\n\n disableBodyScroll();\n\n return () => {\n enableBodyScroll();\n };\n }, [enableBodyScroll, isNestedDialog, disableBodyScroll, modalType]);\n\n return {\n components: {\n backdrop: 'div',\n root: 'div',\n backdropMotion: DialogBackdropMotion,\n },\n open,\n backdrop,\n isNestedDialog,\n mountNode: props.mountNode,\n root: slot.always(\n getIntrinsicElementProps('div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n // FIXME:\n // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n backdropMotion: presenceMotionSlot(props.backdropMotion, {\n elementType: DialogBackdropMotion,\n defaultProps: {\n appear: true,\n visible: open,\n },\n }),\n\n // Deprecated properties\n transitionStatus: undefined,\n };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"AAAA;;;;;+BA6Baa;;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;iEACZ,QAAQ;0BAEW,iBAAiB;sCACtB,mCAAmC;sCACnC,0BAA0B;oCACzB,wBAAwB;AAYvD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaJ,yCAAAA;IAEnB,MAAMK,gBAAYR,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,qBAAiBV,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIC,cAAc;IAE1E,MAAMC,sBAAkBX,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIE,eAAe;IAC5E,MAAMC,gBAAYZ,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIG,SAAS;IAChE,MAAMC,wBAAoBb,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,oBAAgBd,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIM,aAAa;IACxE,MAAMC,WAAOhB,mCAAAA,EAA0BS,CAAAA,MAAOA,IAAIO,IAAI;IAEtD,MAAMC,2BAAuBxB,gCAAAA,EAAiB,CAACyB;QAC7C,QAAIvB,mCAAAA,EAAoBU,MAAMc,QAAQ,GAAG;gBACvCd,yBAAAA;aAAAA,0BAAAA,mBAAAA,MAAMc,QAAAA,AAAQ,EAACC,OAAO,AAAPA,MAAO,QAAtBf,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAAA,IAAAA,CAAAA,iBAAyBa;QAC3B;QACA,IAAIV,cAAc,WAAW,CAACU,MAAMG,kBAAkB,IAAI;YACxDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;QACF;IACF;IAEA,MAAMC,oBAAgB9B,gCAAAA,EAAiB,CAACyB;YACtCb;QAAAA,oBAAAA,MAAMmB,SAAS,AAATA,MAAS,QAAfnB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,OAAkBa;QAElB,IAAIA,MAAMO,GAAG,KAAKlC,oBAAAA,IAAU,CAAC2B,MAAMG,kBAAkB,IAAI;YACvDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAWvB,oBAAAA,CAAK+B,QAAQ,CAACtB,MAAMc,QAAQ,EAAE;QAC7CS,iBAAiBpB,cAAc;QAC/BqB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IAEA,MAAM,EAAEc,iBAAiB,EAAEC,gBAAgB,EAAE,OAAG/B,0CAAAA;QAEhDH,yCAAAA,EAA0B;QACxB,IAAIY,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEAuB;QAEA,OAAO;YACLC;QACF;IACF,GAAG;QAACA;QAAkBtB;QAAgBqB;QAAmBvB;KAAU;IAEnE,OAAO;QACLyB,YAAY;YACVd,UAAU;YACVe,MAAM;YACNC,gBAAgBjC,0CAAAA;QAClB;QACAc;QACAG;QACAT;QACA0B,WAAW/B,MAAM+B,SAAS;QAC1BF,MAAMtC,oBAAAA,CAAKyC,MAAM,CACfxC,4CAAAA,EAAyB,OAAO;YAC9ByC,UAAU,CAAC;YACX,cAAc9B,cAAc;YAC5B+B,MAAM/B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBH,KAAK,CAAC,aAAa,GAAGmC,YAAY1B;YACrD,GAAGT,KAAK;YACR,GAAGM,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FjB,KAAKZ,iCAAAA,EAAcY,KAAKC,YAAYK;QACtC,IACA;YAAEkB,aAAa;QAAM;QAEvBK,oBAAgB3C,+BAAAA,EAAmBa,MAAM8B,cAAc,EAAE;YACvDL,aAAa5B,0CAAAA;YACb2B,cAAc;gBACZY,QAAQ;gBACRC,SAAS1B;YACX;QACF;QAEA,wBAAwB;QACxB2B,kBAAkBH;IACpB;AACF,EAAE"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -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 { 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"}
1
+ {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;IAKCU,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,OAAGzB,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEa,aAAa,EAAEb,IAAI,CAACgB,SAAS,CAAC;IAC1F,IAAIf,QAAQ,EAAE;QACVA,QAAQ,CAACe,SAAS,OAAGzB,mBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEa,iBAAiB,EAAEF,cAAc,IAAIG,MAAM,CAACR,oBAAoB,EAAEN,QAAQ,CAACe,SAAS,CAAC;IAC7J;IACA,OAAOL,KAAK;AAChB,CAAC"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -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 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"}
1
+ {"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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":"AAAA;;;;;;;;;;;;IAeaU,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"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAMvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n const state = useDialogTitle_unstable(props, ref);\n\n useDialogTitleStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAMvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  Object.defineProperty(exports, "__esModule", {
3
4
  value: true