@fluentui/react-drawer 9.11.5 → 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 (70) hide show
  1. package/CHANGELOG.md +29 -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 +1 -2
  7. package/lib/components/DrawerBody/useDrawerBody.js.map +1 -1
  8. package/lib/components/DrawerFooter/DrawerFooter.types.js.map +1 -1
  9. package/lib/components/DrawerFooter/useDrawerFooter.js +0 -1
  10. package/lib/components/DrawerFooter/useDrawerFooter.js.map +1 -1
  11. package/lib/components/DrawerHeader/DrawerHeader.types.js.map +1 -1
  12. package/lib/components/DrawerHeader/useDrawerHeader.js +0 -1
  13. package/lib/components/DrawerHeader/useDrawerHeader.js.map +1 -1
  14. package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js +0 -1
  15. package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map +1 -1
  16. package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +0 -1
  17. package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
  18. package/lib/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
  19. package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
  20. package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js +2 -1
  21. package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map +1 -1
  22. package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
  23. package/lib/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
  24. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +0 -1
  25. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
  26. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +0 -1
  27. package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
  28. package/lib/contexts/drawerContext.js.map +1 -1
  29. package/lib/e2e/DrawerShared.js.map +1 -1
  30. package/lib/shared/DrawerBase.types.js +1 -1
  31. package/lib/shared/DrawerBase.types.js.map +1 -1
  32. package/lib/shared/drawerMotionUtils.js.map +1 -1
  33. package/lib/shared/drawerMotions.js.map +1 -1
  34. package/lib/shared/drawerSeparatorStyles.js.map +1 -1
  35. package/lib/shared/useDrawerBaseStyles.styles.raw.js.map +1 -1
  36. package/lib/shared/useDrawerDefaultProps.js.map +1 -1
  37. package/lib-commonjs/components/Drawer/renderDrawer.js.map +1 -1
  38. package/lib-commonjs/components/Drawer/useDrawer.js +0 -2
  39. package/lib-commonjs/components/Drawer/useDrawer.js.map +1 -1
  40. package/lib-commonjs/components/DrawerBody/useDrawerBody.js +1 -2
  41. package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map +1 -1
  42. package/lib-commonjs/components/DrawerFooter/DrawerFooter.types.js.map +1 -1
  43. package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js +0 -2
  44. package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js.map +1 -1
  45. package/lib-commonjs/components/DrawerHeader/DrawerHeader.types.js.map +1 -1
  46. package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js +0 -2
  47. package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js.map +1 -1
  48. package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js +0 -2
  49. package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map +1 -1
  50. package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js +0 -2
  51. package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map +1 -1
  52. package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map +1 -1
  53. package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map +1 -1
  54. package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map +1 -1
  55. package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
  56. package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
  57. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +5 -7
  58. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
  59. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js +5 -7
  60. package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map +1 -1
  61. package/lib-commonjs/contexts/drawerContext.js.map +1 -1
  62. package/lib-commonjs/e2e/DrawerShared.js.map +1 -1
  63. package/lib-commonjs/shared/DrawerBase.types.js +0 -2
  64. package/lib-commonjs/shared/DrawerBase.types.js.map +1 -1
  65. package/lib-commonjs/shared/drawerMotionUtils.js.map +1 -1
  66. package/lib-commonjs/shared/drawerMotions.js.map +1 -1
  67. package/lib-commonjs/shared/drawerSeparatorStyles.js.map +1 -1
  68. package/lib-commonjs/shared/useDrawerBaseStyles.styles.raw.js.map +1 -1
  69. package/lib-commonjs/shared/useDrawerDefaultProps.js.map +1 -1
  70. package/package.json +8 -8
@@ -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"}
@@ -15,10 +15,9 @@ const _reactutilities = require("@fluentui/react-utilities");
15
15
  const _drawerContext = require("../../contexts/drawerContext");
16
16
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
17
17
  /**
18
- * @internal
19
- *
20
18
  * Get the current scroll state of the DrawerBody.
21
19
  *
20
+ * @internal
22
21
  * @param element - HTMLElement to check scroll state of
23
22
  */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
24
23
  if (scrollHeight <= clientHeight) {
@@ -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 * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\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;;;;;;;;eAkDac;;;;iEAhDU,QAAQ;gCAQxB,4BAA4B;+BAEO,+BAA+B;qCAIzB,kCAAkC;AAElF;;;;;;CAMC,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"}
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useDrawerFooter_unstable", {
9
9
  return useDrawerFooter_unstable;
10
10
  }
11
11
  });
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
12
  const _reactutilities = require("@fluentui/react-utilities");
15
13
  const _drawerContext = require("../../contexts/drawerContext");
16
14
  const useDrawerFooter_unstable = (props, ref)=>{
@@ -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;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;+BAGjC,+BAA+B;AAWlE,MAAMI,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,OAAGJ,wCAAAA;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,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;;;;;;;;;;;gCAG+C,4BAA4B;+BAGjC,+BAA+B;AAWlE,MAAMG,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,OAAGJ,wCAAAA;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,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"}
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useDrawerHeader_unstable", {
9
9
  return useDrawerHeader_unstable;
10
10
  }
11
11
  });
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
12
  const _reactutilities = require("@fluentui/react-utilities");
15
13
  const _drawerContext = require("../../contexts/drawerContext");
16
14
  const useDrawerHeader_unstable = (props, ref)=>{
@@ -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;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;+BAEjC,+BAA+B;AAalE,MAAMI,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,OAAGJ,wCAAAA;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,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;;;;;;;;;;;gCAG+C,4BAA4B;+BAEjC,+BAA+B;AAalE,MAAMG,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,OAAGJ,wCAAAA;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}
@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useDrawerHeaderNavigation_unstable", {
8
8
  return useDrawerHeaderNavigation_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 useDrawerHeaderNavigation_unstable = (props, ref)=>{
15
13
  return {
@@ -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":";;;;+BAcaG;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;AAapE,2CAA2C,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyB,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":";;;;+BAcaE;;;;;;gCAbkC,4BAA4B;AAapE,2CAA2C,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useDrawerHeaderTitle_unstable", {
9
9
  return useDrawerHeaderTitle_unstable;
10
10
  }
11
11
  });
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
12
  const _reactutilities = require("@fluentui/react-utilities");
15
13
  const _reactdialog = require("@fluentui/react-dialog");
16
14
  const useDrawerHeaderTitle_unstable = (props, ref)=>{
@@ -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;;;;;+BAiBaI;;;;;;;iEAfU,QAAQ;gCACgB,4BAA4B;6BACjC,yBAAyB;AAa5D,sCAAsC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,gBAAYN,sCAAAA,EAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,oBAAAA,CAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,oBAAAA,CAAKe,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;;;;;+BAiBaG;;;;;;gCAdkC,4BAA4B;6BACjC,yBAAyB;AAa5D,sCAAsC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,gBAAYN,sCAAAA,EAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,oBAAAA,CAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,oBAAAA,CAAKe,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":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;+BAEL,+BAA+B;AAO3E,oCAAoC,CAACC,OAA0BC;QACpEJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,aAAa,EAAA;sBAClB,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;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":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCACrB,4BAA4B;+BAGzB,+BAA+B;AAOvD,oCAAoC,CAACC,OAA0BC;QACpEJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,aAAa,EAAA;sBAClB,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;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;;;;;+BA2Bac;;;;;;;iEAzBU,QAAQ;6BACuB,yBAAyB;gCAChC,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAG3E,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,iCAAiC,CAACE,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,OAAGjB,uCAAAA;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,OAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef,iCAAAA;QACjB;QAEAqB,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,mBAAepB,+BAAAA,EAAuCoB,eAAe;YACnES,aAAaxB,iCAAAA;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;;;;;+BA4Bac;;;;;;;iEA1BU,QAAQ;6BAEI,yBAAyB;gCACb,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAG3E,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,iCAAiC,CAACE,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,OAAGjB,uCAAAA;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,OAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef,iCAAAA;QACjB;QAEAqB,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,mBAAepB,+BAAAA,EAAuCoB,eAAe;YACnES,aAAaxB,iCAAAA;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/OverlayDrawerSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n useDialogSurface_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n const dialogSurfaceState = useDialogSurface_unstable(\n {\n ...props,\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n *\n * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n */\n as: props.as as 'div',\n },\n ref,\n );\n const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n useCustomStyleHook_unstable('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);\n\n return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","useCustomStyleHook_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","as","dialogSurfaceContextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAMxB,yBAAyB;qDAEuB,yCAAyC;qCAEpD,kCAAkC;AAMvE,MAAMM,uBAAAA,WAAAA,GAAuEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,yBAAqBT,sCAAAA,EACzB;QACE,GAAGO,KAAK;QACR;;;;;OAKC,GACDG,IAAIH,MAAMG,EAAE;IACd,GACAF;IAEF,MAAMG,iCAA6BV,mDAAAA,EAAuCQ;QAE1EN,2EAAAA,EAAuCM;QACvCL,gDAAAA,EAA4B,0CAA0CK;IAEtE,WAAOP,yCAAAA,EAA6BO,oBAAoBE;AAC1D,GAAG;AAEHN,qBAAqBO,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n useDialogSurface_unstable,\n useDialogSurfaceContextValues_unstable,\n renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n *\n * @internal\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n const dialogSurfaceState = useDialogSurface_unstable(\n {\n ...props,\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n *\n * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n */\n as: props.as as 'div',\n },\n ref,\n );\n const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n useCustomStyleHook_unstable('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);\n\n return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","useCustomStyleHook_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","as","dialogSurfaceContextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAMxB,yBAAyB;qDAEuB,yCAAyC;qCAEpD,kCAAkC;AAOvE,MAAMM,uBAAAA,WAAAA,GAAuEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,yBAAqBT,sCAAAA,EACzB;QACE,GAAGO,KAAK;QACR;;;;;OAKC,GACDG,IAAIH,MAAMG,EAAE;IACd,GACAF;IAEF,MAAMG,iCAA6BV,mDAAAA,EAAuCQ;QAE1EN,2EAAAA,EAAuCM;QACvCL,gDAAAA,EAA4B,0CAA0CK;IAEtE,WAAOP,yCAAAA,EAA6BO,oBAAoBE;AAC1D,GAAG;AAEHN,qBAAqBO,WAAW,GAAG"}
@@ -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;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;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,OAAGrB,mBAAAA,EACnBkB,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;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;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,OAAGrB,mBAAAA,EACnBkB,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":";;;;+BAYaG;;;;;;4BAXb,gDAAiD;gCACrB,4BAA4B;+BAEL,+BAA+B;6BAC3C,yBAAyB;AAOzD,qCAAqC,CAC1CC,OACAC;QAEAL,2BAAAA,EAAwCI;IAExC,OAAA,WAAA,OACE,eAAA,EAACH,6BAAAA,EAAAA;QAAeK,OAAOD;kBACrB,WAAA,GAAA,mBAAA,EAACH,mCAAAA,EAAAA;YAAuBI,OAAO;sBAC7B,WAAA,OAAA,eAAA,EAACF,MAAMG,MAAM,EAAA;0BACX,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;;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":";;;;+BAaaG;;;;;;4BAZb,gDAAiD;gCACrB,4BAA4B;+BAGzB,+BAA+B;6BACvB,yBAAyB;AAOzD,qCAAqC,CAC1CC,OACAC;QAEAL,2BAAAA,EAAwCI;IAExC,OAAA,WAAA,OACE,eAAA,EAACH,6BAAAA,EAAAA;QAAeK,OAAOD;kBACrB,WAAA,GAAA,mBAAA,EAACH,mCAAAA,EAAAA;YAAuBI,OAAO;sBAC7B,WAAA,OAAA,eAAA,EAACF,MAAMG,MAAM,EAAA;0BACX,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;;AAKrB,EAAE"}
@@ -17,9 +17,7 @@ _export(exports, {
17
17
  return useOverlayDrawerStyles_unstable;
18
18
  }
19
19
  });
20
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
21
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
22
- const _react1 = require("@griffel/react");
20
+ const _react = require("@griffel/react");
23
21
  const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
24
22
  const overlayDrawerClassNames = {
25
23
  root: 'fui-OverlayDrawer',
@@ -27,7 +25,7 @@ const overlayDrawerClassNames = {
27
25
  };
28
26
  /**
29
27
  * Styles for the root slot
30
- */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r7dfyj8", "rmx02j7", {
28
+ */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r7dfyj8", "rmx02j7", {
31
29
  r: [
32
30
  ".r7dfyj8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}",
33
31
  ".r7dfyj8:focus{outline-style:none;}",
@@ -45,7 +43,7 @@ const overlayDrawerClassNames = {
45
43
  "@media (forced-colors: active){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
46
44
  ]
47
45
  });
48
- const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
46
+ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
49
47
  start: {},
50
48
  end: {},
51
49
  bottom: {
@@ -71,9 +69,9 @@ const useOverlayDrawerStyles_unstable = (state)=>{
71
69
  const rootStyles = useDrawerRootStyles();
72
70
  const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
73
71
  const backdrop = state.root.backdrop;
74
- state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
72
+ state.root.className = (0, _react.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
75
73
  if (backdrop) {
76
- backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
74
+ backdrop.className = (0, _react.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
77
75
  }
78
76
  return state;
79
77
  };
@@ -1 +1 @@
1
- {"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCQ,uBAAuB;;;mCA2BY;eAA/BgB;;;;iEA/BM,OAAO;wBAC4B,gBAAgB;2CAEE,yCAAyC;AAC9G,gCAAgC;IACnCf,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,GAAGV,yBAAA,EAAA,WAAA,WAAA;IAAAW,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,gBAAA,EAAA;IAAAa,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAW3B,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,cAAc,OAAGnB,kDAAuB,EAACkB,KAAK,CAAC;IACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;IAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;IACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;IACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;IACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,OAAG5B,oBAAY,EAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;IAChK,IAAIrB,QAAQ,EAAE;QACVA,QAAQ,CAACqB,SAAS,OAAG5B,oBAAY,EAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;IAC3G;IACA,OAAON,KAAK;AAChB,CAAC"}
1
+ {"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICO,uBAAuB;;;mCA2BY;;;;uBA9BU,gBAAgB;2CAEE,yCAAyC;AAC9G,gCAAgC;IACnCC,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGV,oBAAA,EAAA,WAAA,WAAA;IAAAW,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,eAAA,EAAA;IAAAa,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAW3B,CAAC;AAGS,MAAMC,mCAAmCC,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,cAAc,OAAGnB,kDAAuB,EAACkB,KAAK,CAAC;IACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;IAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;IACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;IACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;IACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,OAAG5B,mBAAY,EAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;IAChK,IAAIrB,QAAQ,EAAE;QACVA,QAAQ,CAACqB,SAAS,OAAG5B,mBAAY,EAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;IAC3G;IACA,OAAON,KAAK;AAChB,CAAC"}
@@ -17,9 +17,7 @@ _export(exports, {
17
17
  return useOverlayDrawerStyles_unstable;
18
18
  }
19
19
  });
20
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
21
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
22
- const _react1 = require("@griffel/react");
20
+ const _react = require("@griffel/react");
23
21
  const _reacttabster = require("@fluentui/react-tabster");
24
22
  const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
25
23
  const overlayDrawerClassNames = {
@@ -28,14 +26,14 @@ const overlayDrawerClassNames = {
28
26
  };
29
27
  /**
30
28
  * Styles for the root slot
31
- */ const useDrawerResetStyles = (0, _react1.makeResetStyles)({
29
+ */ const useDrawerResetStyles = (0, _react.makeResetStyles)({
32
30
  ...(0, _reacttabster.createFocusOutlineStyle)(),
33
31
  ..._useDrawerBaseStylesstyles.drawerDefaultStyles,
34
32
  position: 'fixed',
35
33
  top: 0,
36
34
  bottom: 0
37
35
  });
38
- const useDrawerRootStyles = (0, _react1.makeStyles)({
36
+ const useDrawerRootStyles = (0, _react.makeStyles)({
39
37
  /* Positioning */ start: {},
40
38
  end: {},
41
39
  bottom: {
@@ -54,9 +52,9 @@ const useOverlayDrawerStyles_unstable = (state)=>{
54
52
  const rootStyles = useDrawerRootStyles();
55
53
  const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
56
54
  const backdrop = state.root.backdrop;
57
- state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
55
+ state.root.className = (0, _react.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
58
56
  if (backdrop) {
59
- backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
57
+ backdrop.className = (0, _react.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
60
58
  }
61
59
  return state;
62
60
  };
@@ -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;;;;;;;;;;;;IAWaQ,uBAAAA;;;mCAiCAc;eAAAA;;;;iEA1CU,QAAQ;wBAC2B,iBAAiB;8BAEnC,0BAA0B;2CAIU,0CAA0C;AAE/G,gCAAmG;IACxGb,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,2BAAuBV,uBAAAA,EAAgB;IAC3C,OAAGG,qCAAAA,GAAyB;IAC5B,GAAGE,8CAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBb,sBAAAA,EAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,wCAAAA,CAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAKO,wCAAwC,CAACW;IAC9C;IAEA,MAAMC,qBAAiBjB,kDAAAA,EAAwBgB;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,OAAG1B,oBAAAA,EACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,OAAG1B,oBAAAA,EAAaK,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;;;;;;;;;;;;IAWaO,uBAAAA;;;IAiCAc,+BAAAA;;;;uBAzC6C,iBAAiB;8BAEnC,0BAA0B;2CAIU,0CAA0C;AAE/G,gCAAmG;IACxGb,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,2BAAuBV,sBAAAA,EAAgB;IAC3C,GAAGG,yCAAAA,GAAyB;IAC5B,GAAGE,8CAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,0BAAsBb,iBAAAA,EAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,wCAAAA,CAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAKO,wCAAwC,CAACW;IAC9C;IAEA,MAAMC,iBAAiBjB,sDAAAA,EAAwBgB;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,OAAG1B,mBAAAA,EACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,OAAG1B,mBAAAA,EAAaK,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;;;;;;;;;;;;kBAiBaO;;;iBADAH;;;yBAKAO;;;6BAHAF;eAAAA;;;;iEAhBU,QAAQ;AAS/B,MAAMR,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,EAAC,CAAA;AAC1B;AAEO,MAAMC,8BAAgBJ,OAAMK,aAAa,CAAiCC,WAAW;AACrF,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AAC9C,kCAAkC;QACvCR;WAAAA,CAAAA,oBAAAA,OAAMU,UAAU,CAACN,cAAAA,MAAAA,QAAjBJ,sBAAAA,KAAAA,IAAAA,oBAAmCC;EAAoB;AAElD,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,OAAMY,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;;;;;;;;;;;;kBAiBaO;;;iBADAH;;;yBAKAO;;;6BAHAF;eAAAA;;;;iEAhBU,QAAQ;AAS/B,MAAMR,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,EAAC,CAAA;AAC1B;AAEO,MAAMC,8BAAgBJ,OAAMK,aAAa,CAAiCC,WAAW;AACrF,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AAC9C,kCAAkC;QACvCR;WAAAA,CAAAA,oBAAAA,OAAMU,UAAU,CAACN,cAAAA,MAAAA,QAAjBJ,sBAAAA,KAAAA,IAAAA,oBAAmCC;EAAoB;AAElD,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,OAAMY,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;;;;;+BAgBgBO;;;;;;;iEAdO,QAAQ;gCACT,4BAA4B;+BACnB,2BAA2B;4BAC5B,wBAAwB;AAOtD,MAAMH,cAAc,CAACC;QACnBJ,qBAAAA,EAAAA,WAAAA,GAAM,OAAA,aAAA,CAACC,6BAAAA,EAAAA;QAAeI,OAAOH,yBAAAA;OAAgBE;AAC/C;AAEO,iCAAiCG,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,YAAAA,WAAAA,GACE,OAAA,aAAA,CAACI,WAAAA;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,OAAMoB,QAAQ,CAAC;gBAEvC,OAAA,WAAA,GACE,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MAAA,WAAA,GACE,OAAA,aAAA,CAACZ,WAAAA;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,OAAA,aAAA,CAACM,UAAAA;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACc,eAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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;;;;;+BAgBgBO;;;;;;;iEAdO,QAAQ;gCACT,4BAA4B;+BACnB,2BAA2B;4BAC5B,wBAAwB;AAOtD,MAAMH,cAAc,CAACC;QACnBJ,qBAAAA,EAAAA,WAAAA,GAAM,OAAA,aAAA,CAACC,6BAAAA,EAAAA;QAAeI,OAAOH,yBAAAA;OAAgBE;AAC/C;AAEO,iCAAiCG,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,YAAAA,WAAAA,GACE,OAAA,aAAA,CAACI,WAAAA;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,OAAMoB,QAAQ,CAAC;gBAEvC,OAAA,WAAA,GACE,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MAAA,WAAA,GACE,OAAA,aAAA,CAACZ,WAAAA;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,OAAA,aAAA,CAACM,UAAAA;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACc,eAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;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,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACI,WAAAA;oBAAUkC,UAAUE;oBAAcjC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC7C;QACF;IACF;AACF"}
@@ -2,5 +2,3 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
6
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -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":";;;;;iEAAuB,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":""}
@@ -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":";;;;+BASgBC;;;;;;;iEARO,QAAQ;AAQxB,4BAILC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACD,WAAAA;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":";;;;+BASgBC;;;;;;;iEARO,QAAQ;AAQxB,4BAILC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACD,WAAAA;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":";;;;;;;;;;;IAkDaqB,kBAAAA;;;IAkCAa,mBAAAA;;;gCAoCAI;eAAAA;;wBAjGGxB;;;;6BAvBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;8CACpC,4CAA4C;AAOrE,MAAMT,YAAkE;IACtEC,OAAOL,yBAAAA,CAAaM,cAAc;IAClCC,QAAQP,yBAAAA,CAAaQ,YAAY;IACjCC,OAAOT,yBAAAA,CAAaU,cAAc;IAClCC,MAAMX,yBAAAA,CAAaY,iBAAiB;AACtC;AAKO,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;AAKO,+BAA2BpB,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,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,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,gCAA4BjC,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,kBAAAA,CAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,kBAAAA,CAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqCjC,oCAAAA,EAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,yBAAAA,CAAasC,WAAW;IAEvC,OAAO;QACLX,WAAOxB,sCAAAA,EAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,UAAM3B,sCAAAA,EAAS;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":";;;;;;;;;;;IAkDaqB,kBAAAA;;;IAkCAa,mBAAAA;;;gCAoCAI;eAAAA;;wBAjGGxB;;;;6BAvBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;8CACpC,4CAA4C;AAOrE,MAAMT,YAAkE;IACtEC,OAAOL,yBAAAA,CAAaM,cAAc;IAClCC,QAAQP,yBAAAA,CAAaQ,YAAY;IACjCC,OAAOT,yBAAAA,CAAaU,cAAc;IAClCC,MAAMX,yBAAAA,CAAaY,iBAAiB;AACtC;AAKO,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;AAKO,+BAA2BpB,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,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,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,gCAA4BjC,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,kBAAAA,CAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,kBAAAA,CAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqCjC,oCAAAA,EAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,yBAAAA,CAAasC,WAAW;IAEvC,OAAO;QACLX,WAAOxB,sCAAAA,EAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,UAAM3B,sCAAAA,EAAS;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":";;;;+BAGaC;;;;;;4BAHU,wBAAwB;AAGxC,8BAA4C;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,kBAAAA,CAAOQ,mBAAmB;IAC3CC,oBAAoBT,kBAAAA,CAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,kBAAAA,CAAOa,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":";;;;+BAGaC;;;;;;4BAHU,wBAAwB;AAGxC,8BAA4C;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,kBAAAA,CAAOQ,mBAAmB;IAC3CC,oBAAoBT,kBAAAA,CAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,kBAAAA,CAAOa,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;;;;;;;;;;;;IAUaG,aAAAA;;;uBAOAE;;;2BAqEA+B;;;6BAhBAD;;;;uBApEoD,iBAAiB;4BAC3D,wBAAwB;AAOxC,sBAAsB;IAC3B/B,eAAe;AACjB,EAAE;AAKK,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,kBAAAA,CAAOe,uBAAuB;IAC/CC,OAAOhB,kBAAAA,CAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBpB,iBAAAA,EAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,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;AAEO,MAAM+B,gCAA4BnC,iBAAAA,EAAW;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;AAEI,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,WAAOlC,mBAAAA,EACLsC,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;;;;;;;;;;;;IAUaG,aAAAA;;;uBAOAE;;;2BAqEA+B;;;6BAhBAD;;;;uBApEoD,iBAAiB;4BAC3D,wBAAwB;AAOxC,sBAAsB;IAC3B/B,eAAe;AACjB,EAAE;AAKK,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,kBAAAA,CAAOe,uBAAuB;IAC/CC,OAAOhB,kBAAAA,CAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBpB,iBAAAA,EAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,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;AAEO,MAAM+B,gCAA4BnC,iBAAAA,EAAW;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;AAEI,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,WAAOlC,mBAAAA,EACLsC,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":";;;;;;;;;;AAEO,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":";;;;;;;;;;AAEO,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-drawer",
3
- "version": "9.11.5",
3
+ "version": "9.12.0",
4
4
  "description": "Drawer components for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,15 +12,15 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/react-dialog": "^9.17.2",
16
- "@fluentui/react-jsx-runtime": "^9.4.1",
17
- "@fluentui/react-motion": "^9.13.0",
18
- "@fluentui/react-portal": "^9.8.11",
19
- "@fluentui/react-motion-components-preview": "^0.15.2",
15
+ "@fluentui/react-dialog": "^9.18.0",
16
+ "@fluentui/react-jsx-runtime": "^9.4.2",
17
+ "@fluentui/react-motion": "^9.15.0",
18
+ "@fluentui/react-portal": "^9.8.12",
19
+ "@fluentui/react-motion-components-preview": "^0.15.4",
20
20
  "@fluentui/react-shared-contexts": "^9.26.2",
21
- "@fluentui/react-tabster": "^9.26.13",
21
+ "@fluentui/react-tabster": "^9.26.14",
22
22
  "@fluentui/react-theme": "^9.2.1",
23
- "@fluentui/react-utilities": "^9.26.2",
23
+ "@fluentui/react-utilities": "^9.26.3",
24
24
  "@griffel/react": "^1.5.32",
25
25
  "@swc/helpers": "^0.5.1"
26
26
  },