first commit

node_modules/@fluentui/react/lib-amd/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-amd/utilities/hooks/useResponsiveMode.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "react", "@fluentui/utilities", "@fluentui/react-hooks", "../decorators/withResponsiveMode", "../../WindowProvider"], function (require, exports, React, utilities_1, react_hooks_1, withResponsiveMode_1, WindowProvider_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useResponsiveMode = void 0;
+    /**
+     * 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.
+     */
+    var useResponsiveMode = function (elementRef, overrideResponsiveMode) {
+        var _a = React.useState((0, withResponsiveMode_1.getInitialResponsiveMode)()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];
+        var onResize = React.useCallback(function () {
+            var newResponsiveMode = (0, withResponsiveMode_1.getResponsiveMode)((0, utilities_1.getWindow)(elementRef.current));
+            // Setting the same value should not cause a re-render.
+            if (lastResponsiveMode !== newResponsiveMode) {
+                setLastResponsiveMode(newResponsiveMode);
+            }
+        }, [elementRef, lastResponsiveMode]);
+        var win = (0, WindowProvider_1.useWindow)();
+        (0, react_hooks_1.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;
+    };
+    exports.useResponsiveMode = useResponsiveMode;
+});
+//# sourceMappingURL=useResponsiveMode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveMode.js","sourceRoot":"../src/","sources":["utilities/hooks/useResponsiveMode.tsx"],"names":[],"mappings":";;;;IAMA;;;;OAIG;IACI,IAAM,iBAAiB,GAAG,UAC/B,UAA+C,EAC/C,sBAAuC;QAEjC,IAAA,KAA8C,KAAK,CAAC,QAAQ,CAAiB,IAAA,6CAAwB,GAAE,CAAC,EAAvG,kBAAkB,QAAA,EAAE,qBAAqB,QAA8D,CAAC;QAE/G,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;YACjC,IAAM,iBAAiB,GAAG,IAAA,sCAAiB,EAAC,IAAA,qBAAS,EAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;YAE3E,uDAAuD;YACvD,IAAI,kBAAkB,KAAK,iBAAiB,EAAE,CAAC;gBAC7C,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;QAErC,IAAM,GAAG,GAAG,IAAA,0BAAS,GAAE,CAAC;QACxB,IAAA,wBAAU,EAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAEpC,gGAAgG;QAChG,6GAA6G;QAC7G,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,sBAAsB,KAAK,SAAS,EAAE,CAAC;gBACzC,QAAQ,EAAE,CAAC;YACb,CAAC;YACD,8GAA8G;QAChH,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;QAE7B,OAAO,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,kBAAkB,CAAC;IACtD,CAAC,CAAC;IA5BW,QAAA,iBAAiB,qBA4B5B","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"]}