@docusaurus/theme-common 0.0.0-5764 → 0.0.0-5768

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 (6) hide show
  1. package/lib/hooks/useWindowSize.d.ts +3 -1
  2. package/lib/hooks/useWindowSize.d.ts.map +1 -1
  3. package/lib/hooks/useWindowSize.js +10 -6
  4. package/lib/hooks/useWindowSize.js.map +1 -1
  5. package/package.json +11 -11
  6. package/src/hooks/useWindowSize.ts +15 -6
package/lib/hooks/useWindowSize.d.ts CHANGED
@@ -20,6 +20,8 @@ type WindowSize = keyof typeof windowSizes;
20
20
  * with mediaquery). We don't return `undefined` on purpose, to make it more
21
21
  * explicit.
22
22
  */
23
- export declare function useWindowSize(): WindowSize;
23
+ export declare function useWindowSize({ desktopBreakpoint, }?: {
24
+ desktopBreakpoint?: number;
25
+ }): WindowSize;
24
26
  export {};
25
27
  //# sourceMappingURL=useWindowSize.d.ts.map
package/lib/hooks/useWindowSize.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAe3C;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAuB1C"}
1
+ {"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAoB3C;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,iBAAqC,GACtC,GAAE;IACD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,UAAU,CAuBlB"}
package/lib/hooks/useWindowSize.js CHANGED
@@ -11,12 +11,16 @@ const windowSizes = {
11
11
  mobile: 'mobile',
12
12
  ssr: 'ssr',
13
13
  };
14
- const DesktopThresholdWidth = 996;
15
- function getWindowSize() {
14
+ // Note: this value is also hardcoded in Infima
15
+ // Both JS and CSS must have the same value
16
+ // Updating this JS value alone is not enough
17
+ // See https://github.com/facebook/docusaurus/issues/9603
18
+ const DesktopBreakpoint = 996;
19
+ function getWindowSize(desktopBreakpoint) {
16
20
  if (!ExecutionEnvironment.canUseDOM) {
17
21
  throw new Error('getWindowSize() should only be called after React hydration');
18
22
  }
19
- return window.innerWidth > DesktopThresholdWidth
23
+ return window.innerWidth > desktopBreakpoint
20
24
  ? windowSizes.desktop
21
25
  : windowSizes.mobile;
22
26
  }
@@ -30,21 +34,21 @@ function getWindowSize() {
30
34
  * with mediaquery). We don't return `undefined` on purpose, to make it more
31
35
  * explicit.
32
36
  */
33
- export function useWindowSize() {
37
+ export function useWindowSize({ desktopBreakpoint = DesktopBreakpoint, } = {}) {
34
38
  const [windowSize, setWindowSize] = useState(() =>
35
39
  // super important to return a constant value to avoid hydration mismatch
36
40
  // see https://github.com/facebook/docusaurus/issues/9379
37
41
  'ssr');
38
42
  useEffect(() => {
39
43
  function updateWindowSize() {
40
- setWindowSize(getWindowSize());
44
+ setWindowSize(getWindowSize(desktopBreakpoint));
41
45
  }
42
46
  updateWindowSize();
43
47
  window.addEventListener('resize', updateWindowSize);
44
48
  return () => {
45
49
  window.removeEventListener('resize', updateWindowSize);
46
50
  };
47
- }, []);
51
+ }, [desktopBreakpoint]);
48
52
  return windowSize;
49
53
  }
50
54
  //# sourceMappingURL=useWindowSize.js.map
package/lib/hooks/useWindowSize.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAEpE,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;CACF,CAAC;AAIX,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,SAAS,aAAa;IACpB,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE;QACnC,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;KACH;IACD,OAAO,MAAM,CAAC,UAAU,GAAG,qBAAqB;QAC9C,CAAC,CAAC,WAAW,CAAC,OAAO;QACrB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;AACzB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,GAAG,EAAE;IACH,yEAAyE;IACzE,yDAAyD;IACzD,KAAK,CACR,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;QACjC,CAAC;QAED,gBAAgB,EAAE,CAAC;QAEnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,UAAU,CAAC;AACpB,CAAC"}
1
+ {"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAEpE,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;CACF,CAAC;AAIX,+CAA+C;AAC/C,2CAA2C;AAC3C,6CAA6C;AAC7C,yDAAyD;AACzD,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAE9B,SAAS,aAAa,CAAC,iBAAyB;IAC9C,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE;QACnC,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;KACH;IAED,OAAO,MAAM,CAAC,UAAU,GAAG,iBAAiB;QAC1C,CAAC,CAAC,WAAW,CAAC,OAAO;QACrB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;AACzB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,iBAAiB,GAAG,iBAAiB,MAGnC,EAAE;IACJ,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,GAAG,EAAE;IACH,yEAAyE;IACzE,yDAAyD;IACzD,KAAK,CACR,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAClD,CAAC;QAED,gBAAgB,EAAE,CAAC;QAEnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,UAAU,CAAC;AACpB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-common",
3
- "version": "0.0.0-5764",
3
+ "version": "0.0.0-5768",
4
4
  "description": "Common code for Docusaurus themes.",
5
5
  "main": "./lib/index.js",
6
6
  "types": "./lib/index.d.ts",
@@ -30,13 +30,13 @@
30
30
  },
31
31
  "license": "MIT",
32
32
  "dependencies": {
33
- "@docusaurus/mdx-loader": "0.0.0-5764",
34
- "@docusaurus/module-type-aliases": "0.0.0-5764",
35
- "@docusaurus/plugin-content-blog": "0.0.0-5764",
36
- "@docusaurus/plugin-content-docs": "0.0.0-5764",
37
- "@docusaurus/plugin-content-pages": "0.0.0-5764",
38
- "@docusaurus/utils": "0.0.0-5764",
39
- "@docusaurus/utils-common": "0.0.0-5764",
33
+ "@docusaurus/mdx-loader": "0.0.0-5768",
34
+ "@docusaurus/module-type-aliases": "0.0.0-5768",
35
+ "@docusaurus/plugin-content-blog": "0.0.0-5768",
36
+ "@docusaurus/plugin-content-docs": "0.0.0-5768",
37
+ "@docusaurus/plugin-content-pages": "0.0.0-5768",
38
+ "@docusaurus/utils": "0.0.0-5768",
39
+ "@docusaurus/utils-common": "0.0.0-5768",
40
40
  "@types/history": "^4.7.11",
41
41
  "@types/react": "*",
42
42
  "@types/react-router-config": "*",
@@ -47,8 +47,8 @@
47
47
  "utility-types": "^3.10.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@docusaurus/core": "0.0.0-5764",
51
- "@docusaurus/types": "0.0.0-5764",
50
+ "@docusaurus/core": "0.0.0-5768",
51
+ "@docusaurus/types": "0.0.0-5768",
52
52
  "fs-extra": "^11.1.1",
53
53
  "lodash": "^4.17.21"
54
54
  },
@@ -59,5 +59,5 @@
59
59
  "engines": {
60
60
  "node": ">=18.0"
61
61
  },
62
- "gitHead": "6771672655e1392b183c72dd4967ac459f2838c9"
62
+ "gitHead": "a336c44bdf99851e384733a568ab07495c266d0b"
63
63
  }
package/src/hooks/useWindowSize.ts CHANGED
@@ -17,15 +17,20 @@ const windowSizes = {
17
17
 
18
18
  type WindowSize = keyof typeof windowSizes;
19
19
 
20
- const DesktopThresholdWidth = 996;
20
+ // Note: this value is also hardcoded in Infima
21
+ // Both JS and CSS must have the same value
22
+ // Updating this JS value alone is not enough
23
+ // See https://github.com/facebook/docusaurus/issues/9603
24
+ const DesktopBreakpoint = 996;
21
25
 
22
- function getWindowSize() {
26
+ function getWindowSize(desktopBreakpoint: number): WindowSize {
23
27
  if (!ExecutionEnvironment.canUseDOM) {
24
28
  throw new Error(
25
29
  'getWindowSize() should only be called after React hydration',
26
30
  );
27
31
  }
28
- return window.innerWidth > DesktopThresholdWidth
32
+
33
+ return window.innerWidth > desktopBreakpoint
29
34
  ? windowSizes.desktop
30
35
  : windowSizes.mobile;
31
36
  }
@@ -40,7 +45,11 @@ function getWindowSize() {
40
45
  * with mediaquery). We don't return `undefined` on purpose, to make it more
41
46
  * explicit.
42
47
  */
43
- export function useWindowSize(): WindowSize {
48
+ export function useWindowSize({
49
+ desktopBreakpoint = DesktopBreakpoint,
50
+ }: {
51
+ desktopBreakpoint?: number;
52
+ } = {}): WindowSize {
44
53
  const [windowSize, setWindowSize] = useState<WindowSize>(
45
54
  () =>
46
55
  // super important to return a constant value to avoid hydration mismatch
@@ -50,7 +59,7 @@ export function useWindowSize(): WindowSize {
50
59
 
51
60
  useEffect(() => {
52
61
  function updateWindowSize() {
53
- setWindowSize(getWindowSize());
62
+ setWindowSize(getWindowSize(desktopBreakpoint));
54
63
  }
55
64
 
56
65
  updateWindowSize();
@@ -60,7 +69,7 @@ export function useWindowSize(): WindowSize {
60
69
  return () => {
61
70
  window.removeEventListener('resize', updateWindowSize);
62
71
  };
63
- }, []);
72
+ }, [desktopBreakpoint]);
64
73
 
65
74
  return windowSize;
66
75
  }