@fluentui/react-drawer 9.11.6 → 9.12.0

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 (65) hide show
  1. package/CHANGELOG.md +18 -2
  2. package/dist/index.d.ts +1 -1
  3. package/lib/components/Drawer/renderDrawer.js.map +1 -1
  4. package/lib/components/Drawer/useDrawer.js +0 -1
  5. package/lib/components/Drawer/useDrawer.js.map +1 -1
  6. package/lib/components/DrawerBody/useDrawerBody.js.map +1 -1
  7. package/lib/components/DrawerFooter/DrawerFooter.types.js.map +1 -1
  8. package/lib/components/DrawerFooter/useDrawerFooter.js +0 -1
  9. package/lib/components/DrawerFooter/useDrawerFooter.js.map +1 -1
  10. package/lib/components/DrawerHeader/DrawerHeader.types.js.map +1 -1
  11. package/lib/components/DrawerHeader/useDrawerHeader.js +0 -1
  12. package/lib/components/DrawerHeader/useDrawerHeader.js.map +1 -1
  13. package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js +0 -1
  14. package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map +1 -1
  15. package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +0 -1
  16. package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
  17. package/lib/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
  18. package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
  19. package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
  20. package/lib/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
  21. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +0 -1
  22. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
  23. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +0 -1
  24. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
  25. package/lib/contexts/drawerContext.js.map +1 -1
  26. package/lib/e2e/DrawerShared.js.map +1 -1
  27. package/lib/shared/DrawerBase.types.js +1 -1
  28. package/lib/shared/DrawerBase.types.js.map +1 -1
  29. package/lib/shared/drawerMotionUtils.js.map +1 -1
  30. package/lib/shared/drawerMotions.js.map +1 -1
  31. package/lib/shared/drawerSeparatorStyles.js.map +1 -1
  32. package/lib/shared/useDrawerBaseStyles.styles.raw.js.map +1 -1
  33. package/lib/shared/useDrawerDefaultProps.js.map +1 -1
  34. package/lib-commonjs/components/Drawer/renderDrawer.js.map +1 -1
  35. package/lib-commonjs/components/Drawer/useDrawer.js +0 -2
  36. package/lib-commonjs/components/Drawer/useDrawer.js.map +1 -1
  37. package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map +1 -1
  38. package/lib-commonjs/components/DrawerFooter/DrawerFooter.types.js.map +1 -1
  39. package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js +0 -2
  40. package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js.map +1 -1
  41. package/lib-commonjs/components/DrawerHeader/DrawerHeader.types.js.map +1 -1
  42. package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js +0 -2
  43. package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js.map +1 -1
  44. package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js +0 -2
  45. package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map +1 -1
  46. package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +0 -2
  47. package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
  48. package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
  49. package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map +1 -1
  50. package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
  51. package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
  52. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +5 -7
  53. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
  54. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +5 -7
  55. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
  56. package/lib-commonjs/contexts/drawerContext.js.map +1 -1
  57. package/lib-commonjs/e2e/DrawerShared.js.map +1 -1
  58. package/lib-commonjs/shared/DrawerBase.types.js +0 -2
  59. package/lib-commonjs/shared/DrawerBase.types.js.map +1 -1
  60. package/lib-commonjs/shared/drawerMotionUtils.js.map +1 -1
  61. package/lib-commonjs/shared/drawerMotions.js.map +1 -1
  62. package/lib-commonjs/shared/drawerSeparatorStyles.js.map +1 -1
  63. package/lib-commonjs/shared/useDrawerBaseStyles.styles.raw.js.map +1 -1
  64. package/lib-commonjs/shared/useDrawerDefaultProps.js.map +1 -1
  65. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-drawer
2
2
 
3
- This log was last generated on Mon, 30 Mar 2026 14:35:50 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 23 Apr 2026 11:59:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.12.0)
8
+
9
+ Thu, 23 Apr 2026 11:59:21 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.6..@fluentui/react-drawer_v9.12.0)
11
+
12
+ ### Minor changes
13
+
14
+ - fix: update type for drawerMotion slot ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
15
+ - Bump @fluentui/react-dialog to v9.18.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
17
+ - Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
18
+ - Bump @fluentui/react-portal to v9.8.12 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
19
+ - Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
20
+ - Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
22
+
7
23
  ## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.6)
8
24
 
9
- Mon, 30 Mar 2026 14:35:50 GMT
25
+ Mon, 30 Mar 2026 14:37:41 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.5..@fluentui/react-drawer_v9.11.6)
11
27
 
12
28
  ### Patches
package/dist/index.d.ts CHANGED
@@ -7,7 +7,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
7
7
  import type { JSXElement } from '@fluentui/react-utilities';
8
8
  import type { PresenceDirection } from '@fluentui/react-motion';
9
9
  import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
10
- import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
10
+ import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
11
11
  import * as React_2 from 'react';
12
12
  import type { Slot } from '@fluentui/react-utilities';
13
13
  import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}
1
+ {"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAI9D;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}
@@ -1,4 +1,3 @@
1
- import * as React from 'react';
2
1
  import { slot } from '@fluentui/react-utilities';
3
2
  import { OverlayDrawer } from '../OverlayDrawer';
4
3
  import { InlineDrawer } from '../InlineDrawer';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n // casting here to convert a union of functions to a single function with the union of parameters\n const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n InlineDrawerProps | OverlayDrawerProps\n >;\n const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n return {\n components: { root: elementType },\n root,\n };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAiC,mBAAmB;AAC1E,SAASC,YAAY,QAAgC,kBAAkB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAG9D,MAAMO,OAA+CR,KAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n // casting here to convert a union of functions to a single function with the union of parameters\n const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n InlineDrawerProps | OverlayDrawerProps\n >;\n const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n return {\n components: { root: elementType },\n root,\n };\n};\n"],"names":["slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"mappings":"AACA,SAASA,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAiC,mBAAmB;AAC1E,SAASC,YAAY,QAAgC,kBAAkB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAG9D,MAAMO,OAA+CR,KAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAEE"}
1
+ {"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAEE"}
@@ -1,5 +1,4 @@
1
1
  'use client';
2
- import * as React from 'react';
3
2
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
3
  import { useDrawerContext_unstable } from '../../contexts/drawerContext';
5
4
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'footer',\n },\n\n root: slot.always(\n getIntrinsicElementProps('footer', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'footer' },\n ),\n\n scrollState,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerFooter_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'footer',\n },\n\n root: slot.always(\n getIntrinsicElementProps('footer', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'footer' },\n ),\n\n scrollState,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerFooter_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerHeaderSlots = {\n /**\n * The root of the DrawerHeader.\n */\n root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAEE"}
1
+ {"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerHeaderSlots = {\n /**\n * The root of the DrawerHeader.\n */\n root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAEE"}
@@ -1,5 +1,4 @@
1
1
  'use client';
2
- import * as React from 'react';
3
2
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
3
  import { useDrawerContext_unstable } from '../../contexts/drawerContext';
5
4
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'header',\n },\n\n root: slot.always(\n getIntrinsicElementProps('header', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'header' },\n ),\n\n scrollState,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerHeader_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeader.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n const { scrollState } = useDrawerContext_unstable();\n\n return {\n components: {\n root: 'header',\n },\n\n root: slot.always(\n getIntrinsicElementProps('header', {\n ref,\n role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n ...props,\n }),\n { elementType: 'header' },\n ),\n\n scrollState,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerHeader_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}
@@ -1,4 +1,3 @@
1
- import * as React from 'react';
2
1
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
3
2
  /**
4
3
  * Create the state required to render DrawerHeaderNavigation.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n props: DrawerHeaderNavigationProps,\n ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n return {\n components: {\n root: 'nav',\n },\n\n root: slot.always(\n getIntrinsicElementProps('nav', {\n ref,\n ...props,\n }),\n { elementType: 'nav' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n props: DrawerHeaderNavigationProps,\n ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n return {\n components: {\n root: 'nav',\n },\n\n root: slot.always(\n getIntrinsicElementProps('nav', {\n ref,\n ...props,\n }),\n { elementType: 'nav' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -1,5 +1,4 @@
1
1
  'use client';
2
- import * as React from 'react';
3
2
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
3
  import { useDialogContext_unstable } from '@fluentui/react-dialog';
5
4
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n props: DrawerHeaderTitleProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n const { children, heading } = props;\n const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n heading: slot.optional(heading, {\n defaultProps: {\n id: headingId,\n children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n props: DrawerHeaderTitleProps,\n ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n const { children, heading } = props;\n const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n heading: slot.optional(heading, {\n defaultProps: {\n id: headingId,\n children,\n },\n renderByDefault: true,\n elementType: 'h2',\n }),\n action: slot.optional(props.action, {\n elementType: 'div',\n }),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}
1
+ {"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAI9D;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { PresenceDirection, presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n return {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n unmountOnClose,\n animationDirection,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n appear: unmountOnClose,\n unmountOnExit: unmountOnClose,\n onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n onMotionStart: (_, { direction }) => {\n if (direction === 'enter') {\n setAnimationDirection('enter');\n }\n },\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n } satisfies InlineDrawerState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","dir","animationDirection","setAnimationDirection","useState","components","root","always","undefined","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA4BC,kBAAkB,QAAQ,yBAAyB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGjB;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,MAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef;QACjB;QAEAqB,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;YACbyB,cAAc;gBACZd;gBACAD;gBACAM;gBACAU,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKb,sBAAsBa;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBb,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBe,QAAQ/B;IACV;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PresenceDirection } from '@fluentui/react-motion';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n return {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n unmountOnClose,\n animationDirection,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n appear: unmountOnClose,\n unmountOnExit: unmountOnClose,\n onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n onMotionStart: (_, { direction }) => {\n if (direction === 'enter') {\n setAnimationDirection('enter');\n }\n },\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n } satisfies InlineDrawerState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","dir","animationDirection","setAnimationDirection","useState","components","root","always","undefined","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGjB;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,MAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef;QACjB;QAEAqB,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;YACbyB,cAAc;gBACZd;gBACAD;gBACAM;gBACAU,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKb,sBAAsBa;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBb,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBe,QAAQ/B;IACV;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n backdropResetStyles,\n treatBackdropAsNested && backdropStyles.nested,\n mountedAndClosed && backdropStyles.drawerHidden,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,GAAGrB,aACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n backdropResetStyles,\n treatBackdropAsNested && backdropStyles.nested,\n mountedAndClosed && backdropStyles.drawerHidden,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,GAAGrB,aACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\nimport { DialogBackdropProvider } from '@fluentui/react-dialog';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <DialogBackdropProvider value={false}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DialogBackdropProvider>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","DialogBackdropProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAClF,SAASC,sBAAsB,QAAQ,yBAAyB;AAIhE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,KAACH;QAAeK,OAAOD;kBACrB,cAAA,KAACH;YAAuBI,OAAO;sBAC7B,cAAA,KAACF,MAAMG,MAAM;0BACX,cAAA,KAACH,MAAMI,IAAI;;;;AAKrB,EAAE"}
1
+ {"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\nimport { DialogBackdropProvider } from '@fluentui/react-dialog';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <DialogBackdropProvider value={false}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DialogBackdropProvider>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","DialogBackdropProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,sBAAsB,QAAQ,yBAAyB;AAIhE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,KAACH;QAAeK,OAAOD;kBACrB,cAAA,KAACH;YAAuBI,OAAO;sBAC7B,cAAA,KAACF,MAAMG,MAAM;0BACX,cAAA,KAACH,MAAMI,IAAI;;;;AAKrB,EAAE"}
@@ -1,6 +1,5 @@
1
1
  'use client';
2
2
 
3
- import * as React from 'react';
4
3
  import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
5
4
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
6
5
  import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"names":["React","__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className","position"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,cAAc,GAAGnB,uBAAuB,CAACkB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;EAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;EACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;EACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;EACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAChK,IAAIrB,QAAQ,EAAE;IACVA,QAAQ,CAACqB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;EAC3G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className","position"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,cAAc,GAAGnB,uBAAuB,CAACkB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;EAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;EACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;EACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;EACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAChK,IAAIrB,QAAQ,EAAE;IACVA,QAAQ,CAACqB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;EAC3G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1,5 +1,4 @@
1
1
  'use client';
2
- import * as React from 'react';
3
2
  import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
4
3
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
5
4
  import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport type { OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0,\n});\n\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */\n start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw',\n },\n absolute: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): OverlayDrawerState => {\n 'use no memo';\n\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n\n const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;\n\n state.root.className = mergeClasses(\n overlayDrawerClassNames.root,\n baseClassNames,\n resetStyles,\n rootStyles[state.position],\n absoluteStyles,\n state.root.className,\n );\n\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n\n return state;\n};\n"],"names":["React","makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","position","top","bottom","useDrawerRootStyles","start","end","height","drawerSizeVar","width","absolute","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,0BAA6F;IACxGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBV,gBAAgB;IAC3C,GAAGG,yBAAyB;IAC5B,GAAGE,mBAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBb,WAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,cAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,iBAAiBjB,wBAAwBgB;IAC/C,MAAME,cAAcd;IACpB,MAAMe,aAAaX;IAEnB,MAAMY,iBAAiBJ,MAAMK,mBAAmB,IAAIF,WAAWL,QAAQ;IACvE,MAAMX,WAAWa,MAAMd,IAAI,CAACC,QAAQ;IAEpCa,MAAMd,IAAI,CAACoB,SAAS,GAAG1B,aACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,GAAG1B,aAAaK,wBAAwBE,QAAQ,EAAEiB,gBAAgBjB,SAASmB,SAAS;IACxG;IAEA,OAAON;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport type { OverlayDrawerState } from './OverlayDrawer.types';\nimport type { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0,\n});\n\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */\n start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw',\n },\n absolute: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): OverlayDrawerState => {\n 'use no memo';\n\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n\n const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;\n\n state.root.className = mergeClasses(\n overlayDrawerClassNames.root,\n baseClassNames,\n resetStyles,\n rootStyles[state.position],\n absoluteStyles,\n state.root.className,\n );\n\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","position","top","bottom","useDrawerRootStyles","start","end","height","drawerSizeVar","width","absolute","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,0BAA6F;IACxGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBV,gBAAgB;IAC3C,GAAGG,yBAAyB;IAC5B,GAAGE,mBAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBb,WAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,cAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,iBAAiBjB,wBAAwBgB;IAC/C,MAAME,cAAcd;IACpB,MAAMe,aAAaX;IAEnB,MAAMY,iBAAiBJ,MAAMK,mBAAmB,IAAIF,WAAWL,QAAQ;IACvE,MAAMX,WAAWa,MAAMd,IAAI,CAACC,QAAQ;IAEpCa,MAAMd,IAAI,CAACoB,SAAS,GAAG1B,aACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,GAAG1B,aAAaK,wBAAwBE,QAAQ,EAAEiB,gBAAgBjB,SAASmB,SAAS;IACxG;IAEA,OAAON;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n scrollState: DrawerScrollState;\n setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n scrollState: 'none',\n setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = (): DrawerContextValue =>\n React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n return {\n setScrollState,\n scrollState,\n };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QACvCT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;EAAoB;AAEzD,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n scrollState: DrawerScrollState;\n setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n scrollState: 'none',\n setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = (): DrawerContextValue =>\n React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n return {\n setScrollState,\n scrollState,\n };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QACvCT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;EAAoB;AAEzD,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mount } from '@fluentui/scripts-cypress';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer): void {\n describe('basic functionality', () => {\n it('should not render any element when closed', () => {\n mountFluent(<Component id=\"drawer\" />);\n\n cy.get('#drawer').should('not.exist');\n });\n\n it('should render an element when opened', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.get('#drawer').should('exist');\n });\n\n it('should render children content', () => {\n const content = 'Test the renderization';\n mountFluent(\n <Component id=\"drawer\" open>\n {content}\n </Component>,\n );\n\n cy.get('#drawer').contains(content);\n });\n\n it('should toggle visibility on open prop change', () => {\n const ExampleDrawer = () => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Component id=\"drawer\" open={open} />\n <button id=\"button\" onClick={() => setOpen(true)}>\n Open\n </button>\n </>\n );\n };\n\n mountFluent(<ExampleDrawer />);\n\n cy.get('#drawer').should('not.exist');\n cy.get('#button').click();\n cy.get('#drawer').should('exist');\n });\n });\n\n describe('size prop', () => {\n const sizes = {\n small: 320,\n medium: 592,\n large: 940,\n full: 1000,\n };\n\n Object.entries(sizes).forEach(([size, width]) => {\n const sizeProp = size as DrawerProps['size'];\n\n it(`should have correct size when size is ${size}`, () => {\n mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n cy.viewport(1000, 1000);\n cy.get('#drawer').should('have.css', 'width', width + 'px');\n cy.get('#drawer').invoke('outerWidth').should('equal', width);\n });\n });\n\n it('width should not be bigger than viewport', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.viewport(319, 319);\n cy.get('#drawer').should('have.css', 'width', '319px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n });\n\n it('should have custom size', () => {\n mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n cy.get('#drawer').should('have.css', 'width', '200px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n });\n });\n\n describe('position prop', () => {\n const positions = {\n start: 'left',\n end: 'right',\n bottom: 'bottom',\n };\n\n Object.entries(positions).forEach(([position, side]) => {\n const positionProp = position as DrawerProps['position'];\n\n it(`should have correct position when position is ${position}`, () => {\n mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n cy.get('#drawer').should('have.css', side, '0px');\n });\n });\n });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAOtD,MAAMC,cAAc,CAACC;IACnBJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,0BAAY,oBAACI;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,0BACE,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;eACpBC;YAILJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC7B;QAEAN,GAAG,gDAAgD;YACjD,MAAMQ,gBAAgB;gBACpB,MAAM,CAACH,MAAMI,QAAQ,GAAGnB,MAAMoB,QAAQ,CAAC;gBAEvC,qBACE,wDACE,oBAACZ;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,oBAACM;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,0BAAY,oBAACc;YAEbN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;IACF;IAEAL,SAAS,aAAa;QACpB,MAAMe,QAAQ;YACZC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;QAEAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC1C,MAAMC,WAAWF;YAEjBtB,GAAG,CAAC,sCAAsC,EAAEsB,MAAM,EAAE;gBAClD5B,0BAAY,oBAACI;oBAAUwB,MAAME;oBAAUvB,IAAG;oBAASI,MAAAA;;gBAEnDH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YACzD;QACF;QAEAvB,GAAG,4CAA4C;YAC7CN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;QAEAJ,GAAG,2BAA2B;YAC5BN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;gBAAKsB,OAAO;oBAAEJ,OAAO;gBAAQ;;YAEhErB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;IACF;IAEAL,SAAS,iBAAiB;QACxB,MAAM6B,YAAY;YAChBC,OAAO;YACPC,KAAK;YACLC,QAAQ;QACV;QAEAZ,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACW,UAAUC,KAAK;YACjD,MAAMC,eAAeF;YAErBhC,GAAG,CAAC,8CAA8C,EAAEgC,UAAU,EAAE;gBAC9DtC,0BAAY,oBAACI;oBAAUkC,UAAUE;oBAAcjC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC7C;QACF;IACF;AACF"}
1
+ {"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mount } from '@fluentui/scripts-cypress';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { InlineDrawer } from '../components/InlineDrawer';\nimport type { OverlayDrawer } from '../components/OverlayDrawer';\nimport type { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer): void {\n describe('basic functionality', () => {\n it('should not render any element when closed', () => {\n mountFluent(<Component id=\"drawer\" />);\n\n cy.get('#drawer').should('not.exist');\n });\n\n it('should render an element when opened', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.get('#drawer').should('exist');\n });\n\n it('should render children content', () => {\n const content = 'Test the renderization';\n mountFluent(\n <Component id=\"drawer\" open>\n {content}\n </Component>,\n );\n\n cy.get('#drawer').contains(content);\n });\n\n it('should toggle visibility on open prop change', () => {\n const ExampleDrawer = () => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <>\n <Component id=\"drawer\" open={open} />\n <button id=\"button\" onClick={() => setOpen(true)}>\n Open\n </button>\n </>\n );\n };\n\n mountFluent(<ExampleDrawer />);\n\n cy.get('#drawer').should('not.exist');\n cy.get('#button').click();\n cy.get('#drawer').should('exist');\n });\n });\n\n describe('size prop', () => {\n const sizes = {\n small: 320,\n medium: 592,\n large: 940,\n full: 1000,\n };\n\n Object.entries(sizes).forEach(([size, width]) => {\n const sizeProp = size as DrawerProps['size'];\n\n it(`should have correct size when size is ${size}`, () => {\n mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n cy.viewport(1000, 1000);\n cy.get('#drawer').should('have.css', 'width', width + 'px');\n cy.get('#drawer').invoke('outerWidth').should('equal', width);\n });\n });\n\n it('width should not be bigger than viewport', () => {\n mountFluent(<Component id=\"drawer\" open />);\n\n cy.viewport(319, 319);\n cy.get('#drawer').should('have.css', 'width', '319px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n });\n\n it('should have custom size', () => {\n mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n cy.get('#drawer').should('have.css', 'width', '200px');\n cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n });\n });\n\n describe('position prop', () => {\n const positions = {\n start: 'left',\n end: 'right',\n bottom: 'bottom',\n };\n\n Object.entries(positions).forEach(([position, side]) => {\n const positionProp = position as DrawerProps['position'];\n\n it(`should have correct position when position is ${position}`, () => {\n mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n cy.get('#drawer').should('have.css', side, '0px');\n });\n });\n });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAOtD,MAAMC,cAAc,CAACC;IACnBJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,0BAAY,oBAACI;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,0BACE,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;eACpBC;YAILJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC7B;QAEAN,GAAG,gDAAgD;YACjD,MAAMQ,gBAAgB;gBACpB,MAAM,CAACH,MAAMI,QAAQ,GAAGnB,MAAMoB,QAAQ,CAAC;gBAEvC,qBACE,wDACE,oBAACZ;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,oBAACM;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,0BAAY,oBAACc;YAEbN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;IACF;IAEAL,SAAS,aAAa;QACpB,MAAMe,QAAQ;YACZC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;QAEAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC1C,MAAMC,WAAWF;YAEjBtB,GAAG,CAAC,sCAAsC,EAAEsB,MAAM,EAAE;gBAClD5B,0BAAY,oBAACI;oBAAUwB,MAAME;oBAAUvB,IAAG;oBAASI,MAAAA;;gBAEnDH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YACzD;QACF;QAEAvB,GAAG,4CAA4C;YAC7CN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;QAEAJ,GAAG,2BAA2B;YAC5BN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;gBAAKsB,OAAO;oBAAEJ,OAAO;gBAAQ;;YAEhErB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;IACF;IAEAL,SAAS,iBAAiB;QACxB,MAAM6B,YAAY;YAChBC,OAAO;YACPC,KAAK;YACLC,QAAQ;QACV;QAEAZ,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACW,UAAUC,KAAK;YACjD,MAAMC,eAAeF;YAErBhC,GAAG,CAAC,8CAA8C,EAAEgC,UAAU,EAAE;gBAC9DtC,0BAAY,oBAACI;oBAAUkC,UAAUE;oBAAcjC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC7C;QACF;IACF;AACF"}
@@ -1 +1 @@
1
- import * as React from 'react';
1
+ export { };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n /**\n * Ref to the element.\n */\n ref: React.Ref<Element>;\n\n /**\n * Current state of the element.\n *\n * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n * - `entering` - The element is performing enter animation.\n * - `entered` - The element has finished enter animation.\n * - `idle` - The element is currently not animating, but rendered on screen.\n * - `exiting` - The element is performing exit animation.\n * - `exited` - The element has finished exit animation.\n */\n type: MotionType;\n\n /**\n * Indicates whether the component can be rendered.\n * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n */\n canRender: boolean;\n\n /**\n * Indicates whether the component is ready to receive a CSS transition className.\n * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n */\n active: boolean;\n};\n\nexport type DrawerBaseProps = {\n /**\n * Position of the drawer.\n *\n * Note: 'bottom' does not supports size, but it supports customized height.\n *\n * @default 'start'\n */\n position?: 'start' | 'end' | 'bottom';\n\n /**\n * Size of the drawer.\n *\n * - 'small' - Drawer is 320px wide.\n * - 'medium' - Drawer is 592px wide.\n * - 'large' - Drawer is 940px wide.\n * - 'full' - Drawer is 100vw wide.\n *\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n\n /**\n * Controls the open state of the Drawer\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Decides whether the drawer should be removed from the DOM tree when it is closed.\n * This can be useful when dealing with components that may contain state that should not\n * be reset when the drawer is closed.\n *\n * @default true\n */\n unmountOnClose?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n /**\n * @deprecated Passed values will be static.\n */\n motion: MotionState<HTMLElement>;\n\n open?: boolean;\n\n unmountOnClose?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/shared/DrawerBase.types.ts"],"sourcesContent":["import type * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n /**\n * Ref to the element.\n */\n ref: React.Ref<Element>;\n\n /**\n * Current state of the element.\n *\n * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n * - `entering` - The element is performing enter animation.\n * - `entered` - The element has finished enter animation.\n * - `idle` - The element is currently not animating, but rendered on screen.\n * - `exiting` - The element is performing exit animation.\n * - `exited` - The element has finished exit animation.\n */\n type: MotionType;\n\n /**\n * Indicates whether the component can be rendered.\n * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n */\n canRender: boolean;\n\n /**\n * Indicates whether the component is ready to receive a CSS transition className.\n * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n */\n active: boolean;\n};\n\nexport type DrawerBaseProps = {\n /**\n * Position of the drawer.\n *\n * Note: 'bottom' does not supports size, but it supports customized height.\n *\n * @default 'start'\n */\n position?: 'start' | 'end' | 'bottom';\n\n /**\n * Size of the drawer.\n *\n * - 'small' - Drawer is 320px wide.\n * - 'medium' - Drawer is 592px wide.\n * - 'large' - Drawer is 940px wide.\n * - 'full' - Drawer is 100vw wide.\n *\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n\n /**\n * Controls the open state of the Drawer\n *\n * @default false\n */\n open?: boolean;\n\n /**\n * Decides whether the drawer should be removed from the DOM tree when it is closed.\n * This can be useful when dealing with components that may contain state that should not\n * be reset when the drawer is closed.\n *\n * @default true\n */\n unmountOnClose?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n /**\n * @deprecated Passed values will be static.\n */\n motion: MotionState<HTMLElement>;\n\n open?: boolean;\n\n unmountOnClose?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":[],"mappings":"AAqFA,WAAqE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n BaseMotionParams extends SerializableObject = {},\n EnhancedMotionParams extends SerializableObject = {},\n>(\n inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n Component: PresenceComponent<EnhancedMotionParams>,\n params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n if (inputSlot === null) {\n return null;\n }\n\n return {\n ...inputSlot,\n children: (_, props) => {\n if (inputSlot?.children) {\n return inputSlot.children(Component, { ...props, ...params });\n }\n\n return (\n <Component {...props} {...params}>\n {props.children}\n </Component>\n );\n },\n };\n}\n"],"names":["React","mergePresenceSlots","inputSlot","Component","params","children","_","props"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,sBAAAA,gCAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,qBACE,oBAACD;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}
1
+ {"version":3,"sources":["../src/shared/drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n BaseMotionParams extends SerializableObject = {},\n EnhancedMotionParams extends SerializableObject = {},\n>(\n inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n Component: PresenceComponent<EnhancedMotionParams>,\n params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n if (inputSlot === null) {\n return null;\n }\n\n return {\n ...inputSlot,\n children: (_, props) => {\n if (inputSlot?.children) {\n return inputSlot.children(Component, { ...props, ...params });\n }\n\n return (\n <Component {...props} {...params}>\n {props.children}\n </Component>\n );\n },\n } as PresenceMotionSlotProps<BaseMotionParams>;\n}\n"],"names":["React","mergePresenceSlots","inputSlot","Component","params","children","_","props"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,sBAAAA,gCAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,qBACE,oBAACD;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const duration = durations[size];\n const easing = motionTokens.curveLinear;\n\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration, easing }),\n };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,4CAA4C;AAOrE,MAAMC,YAAkE;IACtEC,OAAOL,aAAaM,cAAc;IAClCC,QAAQP,aAAaQ,YAAY;IACjCC,OAAOT,aAAaU,cAAc;IAClCC,MAAMX,aAAaY,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBrB,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YACEF,WAAW;YACXE,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBlC,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,OAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,OAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BtC,wBAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,aAAasC,WAAW;IAEvC,OAAO;QACLX,OAAOxB,SAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,MAAM3B,SAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
1
+ {"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const duration = durations[size];\n const easing = motionTokens.curveLinear;\n\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration, easing }),\n };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,4CAA4C;AAOrE,MAAMC,YAAkE;IACtEC,OAAOL,aAAaM,cAAc;IAClCC,QAAQP,aAAaQ,YAAY;IACjCC,OAAOT,aAAaU,cAAc;IAClCC,MAAMX,aAAaY,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBrB,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YACEF,WAAW;YACXE,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBlC,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,OAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,OAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BtC,wBAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,aAAasC,WAAW;IAEvC,OAAO;QACLX,OAAOxB,SAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,MAAM3B,SAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/drawerSeparatorStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { GriffelStyle } from '@griffel/react';\n\nexport const drawerSeparatorStyles: GriffelStyle = {\n height: '1px',\n position: 'absolute',\n right: 0,\n left: 0,\n opacity: 0,\n backgroundColor: tokens.colorNeutralStroke1,\n transitionDuration: tokens.durationNormal,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n content: '\"\"',\n};\n"],"names":["tokens","drawerSeparatorStyles","height","position","right","left","opacity","backgroundColor","colorNeutralStroke1","transitionDuration","durationNormal","transitionProperty","transitionTimingFunction","curveEasyEase","content"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,wBAAsC;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,OAAOQ,mBAAmB;IAC3CC,oBAAoBT,OAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,OAAOa,aAAa;IAC9CC,SAAS;AACX,EAAE"}
1
+ {"version":3,"sources":["../src/shared/drawerSeparatorStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport const drawerSeparatorStyles: GriffelStyle = {\n height: '1px',\n position: 'absolute',\n right: 0,\n left: 0,\n opacity: 0,\n backgroundColor: tokens.colorNeutralStroke1,\n transitionDuration: tokens.durationNormal,\n transitionProperty: 'opacity',\n transitionTimingFunction: tokens.curveEasyEase,\n content: '\"\"',\n};\n"],"names":["tokens","drawerSeparatorStyles","height","position","right","left","opacity","backgroundColor","colorNeutralStroke1","transitionDuration","durationNormal","transitionProperty","transitionTimingFunction","curveEasyEase","content"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,wBAAsC;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,OAAOQ,mBAAmB;IAC3CC,oBAAoBT,OAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,OAAOa,aAAa;IAC9CC,SAAS;AACX,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n overflow: 'hidden',\n\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n};\n\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n /* Positioning */\n start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n left: 0,\n right: 'auto',\n },\n end: {\n borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n right: 0,\n left: 'auto',\n },\n bottom: {\n bottom: 0,\n top: 'auto',\n },\n\n /* Sizes */\n small: {\n [drawerCSSVars.drawerSizeVar]: '320px',\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px',\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px',\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vw',\n },\n});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n /* Sizes for position bottom */\n small: {\n [drawerCSSVars.drawerSizeVar]: '320px',\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px',\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px',\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100%',\n },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState): string => {\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n return mergeClasses(\n baseStyles[position],\n position === 'bottom' && bottomBaseStyles[size],\n position !== 'bottom' && baseStyles[size],\n );\n};\n"],"names":["makeStyles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"mappings":"AAAA;AAEA,SAAiCA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAClF,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,gBAAgB;IAC3BC,eAAe;AACjB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAyC;IACpDC,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEJ,cAAcC,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBd,OAAOe,uBAAuB;IAC/CC,OAAOhB,OAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,kBAAkBpB,WAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,EAAE;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF;AAEA,OAAO,MAAM+B,4BAA4BnC,WAAW;IAClD,6BAA6B,GAC7B+B,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF,GAAG;AAEH,OAAO,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,OAAOlC,aACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}
1
+ {"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n overflow: 'hidden',\n\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n};\n\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n /* Positioning */\n start: {\n borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n left: 0,\n right: 'auto',\n },\n end: {\n borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n right: 0,\n left: 'auto',\n },\n bottom: {\n bottom: 0,\n top: 'auto',\n },\n\n /* Sizes */\n small: {\n [drawerCSSVars.drawerSizeVar]: '320px',\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px',\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px',\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100vw',\n },\n});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n /* Sizes for position bottom */\n small: {\n [drawerCSSVars.drawerSizeVar]: '320px',\n },\n medium: {\n [drawerCSSVars.drawerSizeVar]: '592px',\n },\n large: {\n [drawerCSSVars.drawerSizeVar]: '940px',\n },\n full: {\n [drawerCSSVars.drawerSizeVar]: '100%',\n },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState): string => {\n const baseStyles = useDrawerStyles();\n const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n return mergeClasses(\n baseStyles[position],\n position === 'bottom' && bottomBaseStyles[size],\n position !== 'bottom' && baseStyles[size],\n );\n};\n"],"names":["makeStyles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"mappings":"AAAA;AAEA,SAAiCA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAClF,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,gBAAgB;IAC3BC,eAAe;AACjB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAyC;IACpDC,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEJ,cAAcC,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBd,OAAOe,uBAAuB;IAC/CC,OAAOhB,OAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,kBAAkBpB,WAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,EAAE;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF;AAEA,OAAO,MAAM+B,4BAA4BnC,WAAW;IAClD,6BAA6B,GAC7B+B,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF,GAAG;AAEH,OAAO,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,OAAOlC,aACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps): {\n size: NonNullable<DrawerBaseProps['size']>;\n position: NonNullable<DrawerBaseProps['position']>;\n open: boolean;\n unmountOnClose: boolean;\n} {\n const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;\n\n return {\n size,\n position,\n open,\n unmountOnClose,\n };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position","unmountOnClose"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAM1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAEC,iBAAiB,IAAI,EAAE,GAAGJ;IAEpF,OAAO;QACLE;QACAC;QACAF;QACAG;IACF;AACF"}
1
+ {"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import type { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps): {\n size: NonNullable<DrawerBaseProps['size']>;\n position: NonNullable<DrawerBaseProps['position']>;\n open: boolean;\n unmountOnClose: boolean;\n} {\n const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;\n\n return {\n size,\n position,\n open,\n unmountOnClose,\n };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position","unmountOnClose"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAM1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAEC,iBAAiB,IAAI,EAAE,GAAGJ;IAEpF,OAAO;QACLE;QACAC;QACAF;QACAG;IACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;+BAEL,+BAA+B;AAO3E,8BAA8B,CAACC,OAAoBC;QACxDJ,2BAAAA,EAAyBG;IAEzB,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
1
+ {"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<DrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.root />\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":";;;;+BAaaE;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;+BAGzB,+BAA+B;AAOvD,8BAA8B,CAACC,OAAoBC;QACxDJ,2BAAAA,EAAyBG;IAEzB,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useDrawer_unstable", {
8
8
  return useDrawer_unstable;
9
9
  }
10
10
  });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
11
  const _reactutilities = require("@fluentui/react-utilities");
14
12
  const _OverlayDrawer = require("../OverlayDrawer");
15
13
  const _InlineDrawer = require("../InlineDrawer");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n // casting here to convert a union of functions to a single function with the union of parameters\n const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n InlineDrawerProps | OverlayDrawerProps\n >;\n const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n return {\n components: { root: elementType },\n root,\n };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"mappings":";;;;+BAgBaI;;;;;;;iEAhBU,QAAQ;gCACV,4BAA4B;+BAGM,mBAAmB;8BACrB,kBAAkB;AAWhE,2BAA2B,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,0BAAAA,GAAeD,4BAAAA;IAG9D,MAAMO,OAA+CR,oBAAAA,CAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n // casting here to convert a union of functions to a single function with the union of parameters\n const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n InlineDrawerProps | OverlayDrawerProps\n >;\n const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n return {\n components: { root: elementType },\n root,\n };\n};\n"],"names":["slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"mappings":";;;;+BAgBaG;;;;;;gCAfQ,4BAA4B;+BAGM,mBAAmB;8BACrB,kBAAkB;AAWhE,2BAA2B,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,0BAAAA,GAAeD,4BAAAA;IAG9D,MAAMO,OAA+CR,oBAAAA,CAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;eAiDac;;;;iEA/CU,QAAQ;gCAQxB,4BAA4B;+BAEO,+BAA+B;qCAIzB,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMJ,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,OAAGR,uCAAAA;IAC3B,MAAMS,MAAMD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,OAAGb,wCAAAA;IAE3B,MAAMc,YAAYrB,OAAMsB,MAAM,CAAwB;IACtD,MAAMC,gBAAYnB,6BAAAA,EAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,OAAGtB,iCAAAA;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,OAAGxB,iCAAAA;IAE9D,MAAMyB,oBAAoB5B,OAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,OAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;QACzCvB,yCAAAA,EAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;QACtDvB,yCAAAA,EAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,QAAAA,QAAAA,QAAAA,KAAAA,IAAAA,KAAAA,IAAAA,IAAKe,cAAAA,AAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,oBAAAA,CAAKqC,MAAM,KACfjC,wCAAAA,EAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,cAAU9B,8BAAAA,EAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Get the current scroll state of the DrawerBody.\n *\n * @internal\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current || !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;eAiDac;;;;iEA/CU,QAAQ;gCAQxB,4BAA4B;+BAEO,+BAA+B;qCAIzB,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMJ,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,OAAGR,uCAAAA;IAC3B,MAAMS,MAAMD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,OAAGb,wCAAAA;IAE3B,MAAMc,YAAYrB,OAAMsB,MAAM,CAAwB;IACtD,MAAMC,gBAAYnB,6BAAAA,EAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,OAAGtB,iCAAAA;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,OAAGxB,iCAAAA;IAE9D,MAAMyB,oBAAoB5B,OAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,OAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;QACzCvB,yCAAAA,EAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;QACtDvB,yCAAAA,EAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,QAAAA,QAAAA,QAAAA,KAAAA,IAAAA,KAAAA,IAAAA,IAAKe,cAAAA,AAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,oBAAAA,CAAKqC,MAAM,KACfjC,wCAAAA,EAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,cAAU9B,8BAAAA,EAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAEE"}
1
+ {"version":3,"sources":["../src/components/DrawerFooter/DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAEE"}