first commit

node_modules/@fluentui/react/lib/utilities/hooks/useResponsiveMode.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ResponsiveMode } from '../decorators/withResponsiveMode';
+/**
+ * Hook to get the current responsive mode (window size category).
+ * @param elementRef - Use this element's parent window when determining the responsive mode.
+ * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.
+ */
+export declare const useResponsiveMode: (elementRef: React.RefObject<HTMLElement | null>, overrideResponsiveMode?: ResponsiveMode) => ResponsiveMode;

node_modules/@fluentui/react/lib/utilities/hooks/useResponsiveMode.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { getWindow } from '@fluentui/utilities';
+import { useOnEvent } from '@fluentui/react-hooks';
+import { getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';
+import { useWindow } from '../../WindowProvider';
+/**
+ * Hook to get the current responsive mode (window size category).
+ * @param elementRef - Use this element's parent window when determining the responsive mode.
+ * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.
+ */
+export var useResponsiveMode = function (elementRef, overrideResponsiveMode) {
+    var _a = React.useState(getInitialResponsiveMode()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];
+    var onResize = React.useCallback(function () {
+        var newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));
+        // Setting the same value should not cause a re-render.
+        if (lastResponsiveMode !== newResponsiveMode) {
+            setLastResponsiveMode(newResponsiveMode);
+        }
+    }, [elementRef, lastResponsiveMode]);
+    var win = useWindow();
+    useOnEvent(win, 'resize', onResize);
+    // Call resize function initially on mount, or if the override changes from defined to undefined
+    // (the effect will run on all override changes, but onResize will only be called if it changed to undefined)
+    React.useEffect(function () {
+        if (overrideResponsiveMode === undefined) {
+            onResize();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only meant to run on mount or when override changes
+    }, [overrideResponsiveMode]);
+    return overrideResponsiveMode !== null && overrideResponsiveMode !== void 0 ? overrideResponsiveMode : lastResponsiveMode;
+};
+//# sourceMappingURL=useResponsiveMode.js.map

node_modules/@fluentui/react/lib/utilities/hooks/useResponsiveMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveMode.js","sourceRoot":"../src/","sources":["utilities/hooks/useResponsiveMode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAkB,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,UAA+C,EAC/C,sBAAuC;IAEjC,IAAA,KAA8C,KAAK,CAAC,QAAQ,CAAiB,wBAAwB,EAAE,CAAC,EAAvG,kBAAkB,QAAA,EAAE,qBAAqB,QAA8D,CAAC;IAE/G,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;QACjC,IAAM,iBAAiB,GAAG,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3E,uDAAuD;QACvD,IAAI,kBAAkB,KAAK,iBAAiB,EAAE,CAAC;YAC7C,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAErC,IAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,UAAU,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAEpC,gGAAgG;IAChG,6GAA6G;IAC7G,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,sBAAsB,KAAK,SAAS,EAAE,CAAC;YACzC,QAAQ,EAAE,CAAC;QACb,CAAC;QACD,8GAA8G;IAChH,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,OAAO,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,kBAAkB,CAAC;AACtD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getWindow } from '@fluentui/utilities';\nimport { useOnEvent } from '@fluentui/react-hooks';\nimport { ResponsiveMode, getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';\nimport { useWindow } from '../../WindowProvider';\n\n/**\n * Hook to get the current responsive mode (window size category).\n * @param elementRef - Use this element's parent window when determining the responsive mode.\n * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.\n */\nexport const useResponsiveMode = (\n  elementRef: React.RefObject<HTMLElement | null>,\n  overrideResponsiveMode?: ResponsiveMode,\n): ResponsiveMode => {\n  const [lastResponsiveMode, setLastResponsiveMode] = React.useState<ResponsiveMode>(getInitialResponsiveMode());\n\n  const onResize = React.useCallback(() => {\n    const newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));\n\n    // Setting the same value should not cause a re-render.\n    if (lastResponsiveMode !== newResponsiveMode) {\n      setLastResponsiveMode(newResponsiveMode);\n    }\n  }, [elementRef, lastResponsiveMode]);\n\n  const win = useWindow();\n  useOnEvent(win, 'resize', onResize);\n\n  // Call resize function initially on mount, or if the override changes from defined to undefined\n  // (the effect will run on all override changes, but onResize will only be called if it changed to undefined)\n  React.useEffect(() => {\n    if (overrideResponsiveMode === undefined) {\n      onResize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only meant to run on mount or when override changes\n  }, [overrideResponsiveMode]);\n\n  return overrideResponsiveMode ?? lastResponsiveMode;\n};\n"]}