@fluentui/react-dialog 9.1.16 → 9.2.0

package/lib-commonjs/utils/useDisableBodyScroll.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA,MAAMA,wBAAwB,GAAG,8BAAuC;AAUxE;;;AAGA,SAAgBC,oBAAoB;EAClC,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAkB,EAAE;EAC/C,OAAOC,mBAAW,CAAC,MAAK;IACtB,IAAIF,cAAc,EAAE;MAClB,OAAOG,aAAa,CAACH,cAAc,CAACI,IAAI,CAAC;;EAE7C,CAAC,EAAE,CAACJ,cAAc,CAAC,CAAC;AACtB;AAPAK;AASA;;;;;AAKA,SAAgBF,aAAa,CAACG,MAAmB;;EAC/C,MAAM;IAAEC;EAAW,CAAE,GAAGD,MAAM,CAACE,aAAa,CAACC,eAAe;EAC5D,MAAMC,UAAU,GAAG,kBAAM,CAACF,aAAa,CAACG,WAAW,0CAAED,UAAU,mCAAI,CAAC;EACpEE,4BAA4B,CAACN,MAAM,CAAC;EACpC,IAAIA,MAAM,CAACR,wBAAwB,CAAC,CAACe,KAAK,KAAK,CAAC,EAAE;IAChDP,MAAM,CAACQ,KAAK,CAACC,QAAQ,GAAG,QAAQ;IAChCT,MAAM,CAACQ,KAAK,CAACE,YAAY,GAAG,GAAGN,UAAU,GAAGH,WAAW,IAAI;;EAE7DD,MAAM,CAACR,wBAAwB,CAAC,CAACe,KAAK,EAAE;EACxC,OAAO,MAAK;IACVP,MAAM,CAACR,wBAAwB,CAAC,CAACe,KAAK,EAAE;IACxC,IAAIP,MAAM,CAACR,wBAAwB,CAAC,CAACe,KAAK,KAAK,CAAC,EAAE;MAChDP,MAAM,CAACQ,KAAK,CAACC,QAAQ,GAAGT,MAAM,CAACR,wBAAwB,CAAC,CAACmB,qBAAqB;MAC9EX,MAAM,CAACQ,KAAK,CAACE,YAAY,GAAGV,MAAM,CAACR,wBAAwB,CAAC,CAACoB,yBAAyB;;EAE1F,CAAC;AACH;AAhBAb;AAkBA,SAASO,4BAA4B,CAACO,OAAoB;;;EACxD,YAACA,OAAsC,EAACrB,wBAAwB,uCAAxBA,wBAAwB,IAAM;IACpEe,KAAK,EAAE,CAAC;IACRI,qBAAqB,EAAEE,OAAO,CAACL,KAAK,CAACC,QAAQ;IAC7CG,yBAAyB,EAAEC,OAAO,CAACL,KAAK,CAACE;GAC1C;AACH","names":["disableScrollElementProp","useDisableBodyScroll","targetDocument","react_shared_contexts_1","react_1","disableScroll","body","exports","target","clientWidth","ownerDocument","documentElement","innerWidth","defaultView","assertIsDisableScrollElement","count","style","overflow","paddingRight","previousOverflowStyle","previousPaddingRightStyle","element"],"sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n  [disableScrollElementProp]: {\n    count: number;\n    previousOverflowStyle: string;\n    previousPaddingRightStyle: string;\n  };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n  const { targetDocument } = useFluent_unstable();\n  return useCallback(() => {\n    if (targetDocument) {\n      return disableScroll(targetDocument.body);\n    }\n  }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n  const { clientWidth } = target.ownerDocument.documentElement;\n  const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n  assertIsDisableScrollElement(target);\n  if (target[disableScrollElementProp].count === 0) {\n    target.style.overflow = 'hidden';\n    target.style.paddingRight = `${innerWidth - clientWidth}px`;\n  }\n  target[disableScrollElementProp].count++;\n  return () => {\n    target[disableScrollElementProp].count--;\n    if (target[disableScrollElementProp].count === 0) {\n      target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n      target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n    }\n  };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n  (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n    count: 0,\n    previousOverflowStyle: element.style.overflow,\n    previousPaddingRightStyle: element.style.paddingRight,\n  };\n}\n"]}
+{"version":3,"names":["react_shared_contexts_1","require","react_1","disableScrollElementProp","useDisableBodyScroll","targetDocument","useFluent_unstable","useCallback","disableScroll","body","exports","target","clientWidth","ownerDocument","documentElement","innerWidth","_b","_a","defaultView","assertIsDisableScrollElement","count","style","overflow","paddingRight","previousOverflowStyle","previousPaddingRightStyle","element"],"sources":["../src/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n  [disableScrollElementProp]: {\n    count: number;\n    previousOverflowStyle: string;\n    previousPaddingRightStyle: string;\n  };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n  const { targetDocument } = useFluent_unstable();\n  return useCallback(() => {\n    if (targetDocument) {\n      return disableScroll(targetDocument.body);\n    }\n  }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n  const { clientWidth } = target.ownerDocument.documentElement;\n  const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n  assertIsDisableScrollElement(target);\n  if (target[disableScrollElementProp].count === 0) {\n    target.style.overflow = 'hidden';\n    target.style.paddingRight = `${innerWidth - clientWidth}px`;\n  }\n  target[disableScrollElementProp].count++;\n  return () => {\n    target[disableScrollElementProp].count--;\n    if (target[disableScrollElementProp].count === 0) {\n      target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n      target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n    }\n  };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n  (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n    count: 0,\n    previousOverflowStyle: element.style.overflow,\n    previousPaddingRightStyle: element.style.paddingRight,\n  };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,uBAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AAEA,MAAME,wBAAwB,GAAG,8BAAuC;AAUxE;;;AAGA,SAAgBC,oBAAoBA,CAAA;EAClC,MAAM;IAAEC;EAAc,CAAE,GAAGL,uBAAA,CAAAM,kBAAkB,EAAE;EAC/C,OAAOJ,OAAA,CAAAK,WAAW,CAAC,MAAK;IACtB,IAAIF,cAAc,EAAE;MAClB,OAAOG,aAAa,CAACH,cAAc,CAACI,IAAI,CAAC;;EAE7C,CAAC,EAAE,CAACJ,cAAc,CAAC,CAAC;AACtB;AAPAK,OAAA,CAAAN,oBAAA,GAAAA,oBAAA;AASA;;;;;AAKA,SAAgBI,aAAaA,CAACG,MAAmB;;EAC/C,MAAM;IAAEC;EAAW,CAAE,GAAGD,MAAM,CAACE,aAAa,CAACC,eAAe;EAC5D,MAAMC,UAAU,GAAG,CAAAC,EAAA,IAAAC,EAAA,GAAAN,MAAM,CAACE,aAAa,CAACK,WAAW,cAAAD,EAAA,uBAAAA,EAAA,CAAEF,UAAU,cAAAC,EAAA,cAAAA,EAAA,GAAI,CAAC;EACpEG,4BAA4B,CAACR,MAAM,CAAC;EACpC,IAAIA,MAAM,CAACR,wBAAwB,CAAC,CAACiB,KAAK,KAAK,CAAC,EAAE;IAChDT,MAAM,CAACU,KAAK,CAACC,QAAQ,GAAG,QAAQ;IAChCX,MAAM,CAACU,KAAK,CAACE,YAAY,GAAG,GAAGR,UAAU,GAAGH,WAAW,IAAI;;EAE7DD,MAAM,CAACR,wBAAwB,CAAC,CAACiB,KAAK,EAAE;EACxC,OAAO,MAAK;IACVT,MAAM,CAACR,wBAAwB,CAAC,CAACiB,KAAK,EAAE;IACxC,IAAIT,MAAM,CAACR,wBAAwB,CAAC,CAACiB,KAAK,KAAK,CAAC,EAAE;MAChDT,MAAM,CAACU,KAAK,CAACC,QAAQ,GAAGX,MAAM,CAACR,wBAAwB,CAAC,CAACqB,qBAAqB;MAC9Eb,MAAM,CAACU,KAAK,CAACE,YAAY,GAAGZ,MAAM,CAACR,wBAAwB,CAAC,CAACsB,yBAAyB;;EAE1F,CAAC;AACH;AAhBAf,OAAA,CAAAF,aAAA,GAAAA,aAAA;AAkBA,SAASW,4BAA4BA,CAACO,OAAoB;;;EACxD,CAAAT,EAAA,IAAAD,EAAA,GAACU,OAAsC,EAACvB,wBAAwB,eAAAc,EAAA,cAAAA,EAAA,GAAAD,EAAA,CAAxBb,wBAAwB,IAAM;IACpEiB,KAAK,EAAE,CAAC;IACRI,qBAAqB,EAAEE,OAAO,CAACL,KAAK,CAACC,QAAQ;IAC7CG,yBAAyB,EAAEC,OAAO,CAACL,KAAK,CAACE;GAC1C;AACH"}

package/lib-commonjs/utils/useFocusFirstElement.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIA;;;AAGA,SAAgBA,oBAAoB,CAACC,IAAa,EAAEC,SAA0B;EAC5E,MAAM;IAAEC;EAAkB,CAAE,GAAGC,+BAAe,EAAE;EAChD,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAkB,EAAE;EAC/C,MAAMC,SAAS,GAAGC,KAAK,CAACC,MAAM,CAAuB,IAAI,CAAC;EAC1D,MAAMC,UAAU,GAAGF,KAAK,CAACC,MAAM,EAAe;EAE9CD,KAAK,CAACG,SAAS,CAAC,MAAK;;IACnB,IAAI,CAACV,IAAI,EAAE;MACT,OAAO,gBAAU,CAACW,OAAO,0CAAEC,KAAK,EAAE;;IAEpCH,UAAU,CAACE,OAAO,GAAGP,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAES,aAAwC;IAC7E,MAAMC,OAAO,GAAGR,SAAS,CAACK,OAAO,IAAIT,kBAAkB,CAACI,SAAS,CAACK,OAAO,CAAC;IAC1E,IAAIG,OAAO,EAAE;MACXA,OAAO,CAACF,KAAK,EAAE;KAChB,MAAM;MACL,eAAS,CAACD,OAAO,0CAAEC,KAAK,EAAE,CAAC,CAAC;MAC5B,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACC,IAAI,CACV,CACE,mGAAmG,EACnG,kGAAkG,CACnG,CAACC,IAAI,CAAC,IAAI,CAAC,CACb;;;EAGP,CAAC,EAAE,CAAClB,kBAAkB,EAAEF,IAAI,EAAEC,SAAS,EAAEG,cAAc,CAAC,CAAC;EAEzD,OAAOE,SAAS;AAClB;AA7BAe","names":["useFocusFirstElement","open","modalType","findFirstFocusable","react_tabster_1","targetDocument","react_shared_contexts_1","dialogRef","React","useRef","triggerRef","useEffect","current","focus","activeElement","element","process","env","NODE_ENV","console","warn","join","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const dialogRef = React.useRef<DialogSurfaceElement>(null);\n  const triggerRef = React.useRef<HTMLElement>();\n\n  React.useEffect(() => {\n    if (!open) {\n      return triggerRef.current?.focus();\n    }\n    triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n    const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n    if (element) {\n      element.focus();\n    } else {\n      dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',\n            'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',\n          ].join('\\n'),\n        );\n      }\n    }\n  }, [findFirstFocusable, open, modalType, targetDocument]);\n\n  return dialogRef;\n}\n"]}
+{"version":3,"names":["React","require","react_tabster_1","react_shared_contexts_1","useFocusFirstElement","open","modalType","findFirstFocusable","useFocusFinders","targetDocument","useFluent_unstable","dialogRef","useRef","triggerRef","useEffect","_a","current","focus","activeElement","element","_b","process","env","NODE_ENV","console","warn","join","exports"],"sources":["../src/packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const dialogRef = React.useRef<DialogSurfaceElement>(null);\n  const triggerRef = React.useRef<HTMLElement>();\n\n  React.useEffect(() => {\n    if (!open) {\n      return triggerRef.current?.focus();\n    }\n    triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n    const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n    if (element) {\n      element.focus();\n    } else {\n      dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',\n            'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',\n          ].join('\\n'),\n        );\n      }\n    }\n  }, [findFirstFocusable, open, modalType, targetDocument]);\n\n  return dialogRef;\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,uBAAA,gBAAAF,OAAA;AAIA;;;AAGA,SAAgBG,oBAAoBA,CAACC,IAAa,EAAEC,SAA0B;EAC5E,MAAM;IAAEC;EAAkB,CAAE,GAAGL,eAAA,CAAAM,eAAe,EAAE;EAChD,MAAM;IAAEC;EAAc,CAAE,GAAGN,uBAAA,CAAAO,kBAAkB,EAAE;EAC/C,MAAMC,SAAS,GAAGX,KAAK,CAACY,MAAM,CAAuB,IAAI,CAAC;EAC1D,MAAMC,UAAU,GAAGb,KAAK,CAACY,MAAM,EAAe;EAE9CZ,KAAK,CAACc,SAAS,CAAC,MAAK;;IACnB,IAAI,CAACT,IAAI,EAAE;MACT,OAAO,CAAAU,EAAA,GAAAF,UAAU,CAACG,OAAO,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,KAAK,EAAE;;IAEpCJ,UAAU,CAACG,OAAO,GAAGP,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAES,aAAwC;IAC7E,MAAMC,OAAO,GAAGR,SAAS,CAACK,OAAO,IAAIT,kBAAkB,CAACI,SAAS,CAACK,OAAO,CAAC;IAC1E,IAAIG,OAAO,EAAE;MACXA,OAAO,CAACF,KAAK,EAAE;KAChB,MAAM;MACL,CAAAG,EAAA,GAAAT,SAAS,CAACK,OAAO,cAAAI,EAAA,uBAAAA,EAAA,CAAEH,KAAK,EAAE,CAAC,CAAC;MAC5B,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACC,IAAI,CACV,CACE,mGAAmG,EACnG,kGAAkG,CACnG,CAACC,IAAI,CAAC,IAAI,CAAC,CACb;;;EAGP,CAAC,EAAE,CAACnB,kBAAkB,EAAEF,IAAI,EAAEC,SAAS,EAAEG,cAAc,CAAC,CAAC;EAEzD,OAAOE,SAAS;AAClB;AA7BAgB,OAAA,CAAAvB,oBAAA,GAAAA,oBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.1.16",
+  "version": "9.2.0",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@griffel/react": "^1.5.2",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.6.1",
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-context-selector": "^9.1.10",
-    "@fluentui/react-shared-contexts": "^9.2.0",
-    "@fluentui/react-aria": "^9.3.10",
+    "@fluentui/react-context-selector": "^9.1.11",
+    "@fluentui/react-shared-contexts": "^9.3.0",
+    "@fluentui/react-aria": "^9.3.11",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-tabster": "^9.5.3",
+    "@fluentui/react-tabster": "^9.5.4",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-portal": "^9.1.9",
+    "@fluentui/react-portal": "^9.1.10",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {