@elliemae/ds-hooks-fontsize-detector 3.22.0-next.8 → 3.22.0-rc.1

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 (15) hide show
  1. package/dist/cjs/DSHooksFontsizeDetector.js +18 -6
  2. package/dist/cjs/DSHooksFontsizeDetector.js.map +3 -3
  3. package/dist/cjs/constants/index.js +2 -2
  4. package/dist/cjs/constants/index.js.map +2 -2
  5. package/dist/cjs/index.js.map +1 -1
  6. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  7. package/dist/esm/DSHooksFontsizeDetector.js +20 -8
  8. package/dist/esm/DSHooksFontsizeDetector.js.map +3 -3
  9. package/dist/esm/constants/index.js +2 -2
  10. package/dist/esm/constants/index.js.map +2 -2
  11. package/dist/esm/index.js.map +1 -1
  12. package/dist/esm/react-desc-prop-types.js.map +1 -1
  13. package/dist/types/constants/index.d.ts +2 -2
  14. package/dist/types/react-desc-prop-types.d.ts +1 -1
  15. package/package.json +11 -10
package/dist/cjs/DSHooksFontsizeDetector.js CHANGED
@@ -71,6 +71,7 @@ const useResizeObserver = (ref) => {
71
71
  };
72
72
  const useFontSizeDetector = () => {
73
73
  const [ref, setRef] = (0, import_react.useState)(null);
74
+ const [parentWidth, setParentWidth] = (0, import_react.useState)(document.documentElement.clientWidth);
74
75
  const fontHeight = useResizeObserver(ref);
75
76
  (0, import_react.useEffect)(() => {
76
77
  const retrieveElement = async () => {
@@ -84,15 +85,26 @@ const useFontSizeDetector = () => {
84
85
  retrieveElement().catch(() => {
85
86
  });
86
87
  }, []);
87
- const parentWidth = document.documentElement.clientWidth;
88
- const ratio = Math.floor(parentWidth / (fontHeight || 1));
88
+ const ratio = (0, import_react.useMemo)(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);
89
+ const viewPortChange = (0, import_react.useCallback)(
90
+ (0, import_ds_utilities.debounce)(() => {
91
+ setParentWidth(document.documentElement.clientWidth);
92
+ }, 200),
93
+ []
94
+ );
95
+ (0, import_react.useEffect)(() => {
96
+ window.addEventListener("resize", viewPortChange);
97
+ return () => {
98
+ window.removeEventListener("resize", viewPortChange);
99
+ };
100
+ }, [viewPortChange]);
89
101
  return {
90
102
  ratio,
91
- fontRatio: fontHeight,
103
+ fontHeight,
92
104
  documentWidthRatio: parentWidth,
93
- isSmall: ratio <= import_constants.BREAKPOINTS.small,
94
- isMedium: ratio > import_constants.BREAKPOINTS.small && ratio <= import_constants.BREAKPOINTS.medimum,
95
- isLarge: ratio > import_constants.BREAKPOINTS.medimum
105
+ isLarge: ratio <= import_constants.BREAKPOINTS.large,
106
+ isMedium: ratio > import_constants.BREAKPOINTS.large && ratio <= import_constants.BREAKPOINTS.medimum,
107
+ isSmall: ratio > import_constants.BREAKPOINTS.small
96
108
  };
97
109
  };
98
110
  //# sourceMappingURL=DSHooksFontsizeDetector.js.map
package/dist/cjs/DSHooksFontsizeDetector.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSHooksFontsizeDetector.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport { appendComponentIfNotExist } from '@elliemae/ds-utilities';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n &nbsp;\n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const parentWidth = document.documentElement.clientWidth;\n\n const ratio = Math.floor(parentWidth / (fontHeight || 1));\n\n return {\n ratio,\n fontRatio: fontHeight,\n documentWidthRatio: parentWidth,\n isSmall: ratio <= BREAKPOINTS.small,\n isMedium: ratio > BREAKPOINTS.small && ratio <= BREAKPOINTS.medimum,\n isLarge: ratio > BREAKPOINTS.medimum,\n };\n};\n\nexport { useFontSizeDetector };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQrB;AARF,mBAA2C;AAC3C,0BAA0C;AAC1C,uBAA+C;AAK/C,MAAM,sBAAsB,aAAAA,QAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,8BAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,QAAM,aAAa,kBAAkB,GAAG;AAExC,8BAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,UAAM,+CAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,SAAS,gBAAgB;AAE7C,QAAM,QAAQ,KAAK,MAAM,eAAe,cAAc,EAAE;AAExD,SAAO;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,SAAS,SAAS,6BAAY;AAAA,IAC9B,UAAU,QAAQ,6BAAY,SAAS,SAAS,6BAAY;AAAA,IAC5D,SAAS,QAAQ,6BAAY;AAAA,EAC/B;AACF;",
3
+ "sources": ["../../src/DSHooksFontsizeDetector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { appendComponentIfNotExist, debounce } from '@elliemae/ds-utilities';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n &nbsp;\n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const [parentWidth, setParentWidth] = useState<number>(document.documentElement.clientWidth);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);\n\n const viewPortChange = useCallback(\n debounce(() => {\n setParentWidth(document.documentElement.clientWidth);\n }, 200),\n [],\n );\n\n useEffect(() => {\n window.addEventListener('resize', viewPortChange);\n return () => {\n window.removeEventListener('resize', viewPortChange);\n };\n }, [viewPortChange]);\n return {\n ratio,\n fontHeight,\n documentWidthRatio: parentWidth,\n isLarge: ratio <= BREAKPOINTS.large,\n isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,\n isSmall: ratio > BREAKPOINTS.small,\n };\n};\n\nexport { useFontSizeDetector };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQrB;AARF,mBAAiE;AACjE,0BAAoD;AACpD,uBAA+C;AAK/C,MAAM,sBAAsB,aAAAA,QAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAiB,CAAC;AAE5D,8BAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAiB,SAAS,gBAAgB,WAAW;AAC3F,QAAM,aAAa,kBAAkB,GAAG;AAExC,8BAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,UAAM,+CAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ,sBAAQ,MAAM,KAAK,MAAM,eAAe,cAAc,EAAE,GAAG,CAAC,YAAY,WAAW,CAAC;AAElG,QAAM,qBAAiB;AAAA,QACrB,8BAAS,MAAM;AACb,qBAAe,SAAS,gBAAgB,WAAW;AAAA,IACrD,GAAG,GAAG;AAAA,IACN,CAAC;AAAA,EACH;AAEA,8BAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,cAAc;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,cAAc;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AACnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,SAAS,SAAS,6BAAY;AAAA,IAC9B,UAAU,QAAQ,6BAAY,SAAS,SAAS,6BAAY;AAAA,IAC5D,SAAS,QAAQ,6BAAY;AAAA,EAC/B;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/constants/index.js CHANGED
@@ -35,8 +35,8 @@ module.exports = __toCommonJS(constants_exports);
35
35
  var React = __toESM(require("react"));
36
36
  const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
37
37
  const BREAKPOINTS = {
38
- small: 25,
38
+ large: 30,
39
39
  medimum: 40,
40
- large: 60
40
+ small: 60
41
41
  };
42
42
  //# sourceMappingURL=index.js.map
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/constants/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const FONT_DETECTOR_UID = 'DS_FONT_DETECTOR';\n\nexport const BREAKPOINTS = {\n small: 25,\n medimum: 40,\n large: 60,\n};\n", "import * as React from 'react';\nexport { React };\n"],
3
+ "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["export const FONT_DETECTOR_UID = 'DS_FONT_DETECTOR';\n\nexport const BREAKPOINTS = {\n large: 30,\n medimum: 40,\n small: 60,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/cjs/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { useFontSizeDetector } from './DSHooksFontsizeDetector.js';\nexport { FONT_DETECTOR_UID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,qCAAoC;AACpC,uBAAkC;",
6
6
  "names": []
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n\nexport declare namespace DSHooksFontsizeDetectorT {\n export interface UseFontSizeDetectorT {\n ratio: number;\n fontRatio: number;\n documentWidthRatio: number;\n isSmall: boolean;\n isMedium: boolean;\n isLarge: boolean;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
3
+ "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n\nexport declare namespace DSHooksFontsizeDetectorT {\n export interface UseFontSizeDetectorT {\n ratio: number;\n fontHeight: number;\n documentWidthRatio: number;\n isSmall: boolean;\n isMedium: boolean;\n isLarge: boolean;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
6
6
  "names": []
7
7
  }
package/dist/esm/DSHooksFontsizeDetector.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import React2, { useState, useEffect } from "react";
4
- import { appendComponentIfNotExist } from "@elliemae/ds-utilities";
3
+ import React2, { useState, useEffect, useMemo, useCallback } from "react";
4
+ import { appendComponentIfNotExist, debounce } from "@elliemae/ds-utilities";
5
5
  import { FONT_DETECTOR_UID, BREAKPOINTS } from "./constants/index.js";
6
6
  const FontDetectorElement = React2.memo(() => /* @__PURE__ */ jsx(
7
7
  "p",
@@ -38,6 +38,7 @@ const useResizeObserver = (ref) => {
38
38
  };
39
39
  const useFontSizeDetector = () => {
40
40
  const [ref, setRef] = useState(null);
41
+ const [parentWidth, setParentWidth] = useState(document.documentElement.clientWidth);
41
42
  const fontHeight = useResizeObserver(ref);
42
43
  useEffect(() => {
43
44
  const retrieveElement = async () => {
@@ -51,15 +52,26 @@ const useFontSizeDetector = () => {
51
52
  retrieveElement().catch(() => {
52
53
  });
53
54
  }, []);
54
- const parentWidth = document.documentElement.clientWidth;
55
- const ratio = Math.floor(parentWidth / (fontHeight || 1));
55
+ const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);
56
+ const viewPortChange = useCallback(
57
+ debounce(() => {
58
+ setParentWidth(document.documentElement.clientWidth);
59
+ }, 200),
60
+ []
61
+ );
62
+ useEffect(() => {
63
+ window.addEventListener("resize", viewPortChange);
64
+ return () => {
65
+ window.removeEventListener("resize", viewPortChange);
66
+ };
67
+ }, [viewPortChange]);
56
68
  return {
57
69
  ratio,
58
- fontRatio: fontHeight,
70
+ fontHeight,
59
71
  documentWidthRatio: parentWidth,
60
- isSmall: ratio <= BREAKPOINTS.small,
61
- isMedium: ratio > BREAKPOINTS.small && ratio <= BREAKPOINTS.medimum,
62
- isLarge: ratio > BREAKPOINTS.medimum
72
+ isLarge: ratio <= BREAKPOINTS.large,
73
+ isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,
74
+ isSmall: ratio > BREAKPOINTS.small
63
75
  };
64
76
  };
65
77
  export {
package/dist/esm/DSHooksFontsizeDetector.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksFontsizeDetector.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport { appendComponentIfNotExist } from '@elliemae/ds-utilities';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n &nbsp;\n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const parentWidth = document.documentElement.clientWidth;\n\n const ratio = Math.floor(parentWidth / (fontHeight || 1));\n\n return {\n ratio,\n fontRatio: fontHeight,\n documentWidthRatio: parentWidth,\n isSmall: ratio <= BREAKPOINTS.small,\n isMedium: ratio > BREAKPOINTS.small && ratio <= BREAKPOINTS.medimum,\n isLarge: ratio > BREAKPOINTS.medimum,\n };\n};\n\nexport { useFontSizeDetector };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACQrB;AARF,OAAOA,UAAS,UAAU,iBAAiB;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,mBAAmB,mBAAmB;AAK/C,MAAM,sBAAsBA,OAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAiB,CAAC;AAE5D,YAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,IAAI,SAA6B,IAAI;AACvD,QAAM,aAAa,kBAAkB,GAAG;AAExC,YAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,MAAM,0BAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,SAAS,gBAAgB;AAE7C,QAAM,QAAQ,KAAK,MAAM,eAAe,cAAc,EAAE;AAExD,SAAO;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,SAAS,SAAS,YAAY;AAAA,IAC9B,UAAU,QAAQ,YAAY,SAAS,SAAS,YAAY;AAAA,IAC5D,SAAS,QAAQ,YAAY;AAAA,EAC/B;AACF;",
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksFontsizeDetector.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { appendComponentIfNotExist, debounce } from '@elliemae/ds-utilities';\nimport { FONT_DETECTOR_UID, BREAKPOINTS } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = React.memo(() => (\n <p\n aria-hidden=\"true\"\n id={FONT_DETECTOR_UID}\n data-testid={FONT_DETECTOR_UID}\n style={{\n margin: 0,\n color: 'transparent',\n position: 'absolute',\n }}\n >\n &nbsp;\n </p>\n));\n\nconst useResizeObserver = (ref: HTMLElement | null): number => {\n const [dimensions, setDimensions] = React.useState<number>(0);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n entries.forEach((entry) => {\n setDimensions(Math.ceil(entry.contentRect.height));\n });\n });\n if (ref) {\n resizeObserver.observe(ref);\n }\n\n return () => {\n if (ref) {\n resizeObserver.unobserve(ref);\n }\n };\n }, [ref]);\n return dimensions;\n};\n\nconst useFontSizeDetector = (): DSHooksFontsizeDetectorT.UseFontSizeDetectorT => {\n const [ref, setRef] = useState<HTMLElement | null>(null);\n const [parentWidth, setParentWidth] = useState<number>(document.documentElement.clientWidth);\n const fontHeight = useResizeObserver(ref);\n\n useEffect(() => {\n const retrieveElement = async () => {\n const elementAppended = await appendComponentIfNotExist({\n Component: FontDetectorElement,\n uidSelector: FONT_DETECTOR_UID,\n tagName: 'font-size',\n });\n setRef(elementAppended);\n };\n retrieveElement().catch(() => {});\n }, []);\n\n const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);\n\n const viewPortChange = useCallback(\n debounce(() => {\n setParentWidth(document.documentElement.clientWidth);\n }, 200),\n [],\n );\n\n useEffect(() => {\n window.addEventListener('resize', viewPortChange);\n return () => {\n window.removeEventListener('resize', viewPortChange);\n };\n }, [viewPortChange]);\n return {\n ratio,\n fontHeight,\n documentWidthRatio: parentWidth,\n isLarge: ratio <= BREAKPOINTS.large,\n isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,\n isSmall: ratio > BREAKPOINTS.small,\n };\n};\n\nexport { useFontSizeDetector };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACQrB;AARF,OAAOA,UAAS,UAAU,WAAW,SAAS,mBAAmB;AACjE,SAAS,2BAA2B,gBAAgB;AACpD,SAAS,mBAAmB,mBAAmB;AAK/C,MAAM,sBAAsBA,OAAM,KAAK,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACD;AAAA;AAED,CACD;AAED,MAAM,oBAAoB,CAAC,QAAoC;AAC7D,QAAM,CAAC,YAAY,aAAa,IAAIA,OAAM,SAAiB,CAAC;AAE5D,YAAU,MAAM;AACd,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,cAAQ,QAAQ,CAAC,UAAU;AACzB,sBAAc,KAAK,KAAK,MAAM,YAAY,MAAM,CAAC;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,QAAI,KAAK;AACP,qBAAe,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,UAAI,KAAK;AACP,uBAAe,UAAU,GAAG;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEA,MAAM,sBAAsB,MAAqD;AAC/E,QAAM,CAAC,KAAK,MAAM,IAAI,SAA6B,IAAI;AACvD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,SAAS,gBAAgB,WAAW;AAC3F,QAAM,aAAa,kBAAkB,GAAG;AAExC,YAAU,MAAM;AACd,UAAM,kBAAkB,YAAY;AAClC,YAAM,kBAAkB,MAAM,0BAA0B;AAAA,QACtD,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AACD,aAAO,eAAe;AAAA,IACxB;AACA,oBAAgB,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,QAAQ,MAAM,KAAK,MAAM,eAAe,cAAc,EAAE,GAAG,CAAC,YAAY,WAAW,CAAC;AAElG,QAAM,iBAAiB;AAAA,IACrB,SAAS,MAAM;AACb,qBAAe,SAAS,gBAAgB,WAAW;AAAA,IACrD,GAAG,GAAG;AAAA,IACN,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,cAAc;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,cAAc;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AACnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,SAAS,SAAS,YAAY;AAAA,IAC9B,UAAU,QAAQ,YAAY,SAAS,SAAS,YAAY;AAAA,IAC5D,SAAS,QAAQ,YAAY;AAAA,EAC/B;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/constants/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as React from "react";
2
2
  const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
3
3
  const BREAKPOINTS = {
4
- small: 25,
4
+ large: 30,
5
5
  medimum: 40,
6
- large: 60
6
+ small: 60
7
7
  };
8
8
  export {
9
9
  BREAKPOINTS,
package/dist/esm/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FONT_DETECTOR_UID = 'DS_FONT_DETECTOR';\n\nexport const BREAKPOINTS = {\n small: 25,\n medimum: 40,\n large: 60,\n};\n"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FONT_DETECTOR_UID = 'DS_FONT_DETECTOR';\n\nexport const BREAKPOINTS = {\n large: 30,\n medimum: 40,\n small: 60,\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { useFontSizeDetector } from './DSHooksFontsizeDetector.js';\nexport { FONT_DETECTOR_UID } from './constants/index.js';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;",
6
6
  "names": []
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;",
6
6
  "names": []
package/dist/types/constants/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
2
2
  export declare const BREAKPOINTS: {
3
- small: number;
4
- medimum: number;
5
3
  large: number;
4
+ medimum: number;
5
+ small: number;
6
6
  };
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export declare namespace DSHooksFontsizeDetectorT {
2
2
  interface UseFontSizeDetectorT {
3
3
  ratio: number;
4
- fontRatio: number;
4
+ fontHeight: number;
5
5
  documentWidthRatio: number;
6
6
  isSmall: boolean;
7
7
  isMedium: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-hooks-fontsize-detector",
3
- "version": "3.22.0-next.8",
3
+ "version": "3.22.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Hooks Fontsize Detector",
6
6
  "files": [
@@ -35,15 +35,16 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-utilities": "3.22.0-next.8"
38
+ "@xstyled/system": "3.7.0",
39
+ "@elliemae/ds-utilities": "3.22.0-rc.1"
39
40
  },
40
41
  "devDependencies": {
41
- "@elliemae/pui-cli": "~9.0.0-next.17",
42
+ "@elliemae/pui-cli": "~9.0.0-next.22",
42
43
  "@testing-library/react": "~12.1.3",
43
44
  "@testing-library/user-event": "~13.5.0",
44
45
  "styled-components": "~5.3.9",
45
46
  "styled-system": "~5.1.5",
46
- "@elliemae/ds-monorepo-devops": "3.22.0-next.8"
47
+ "@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "lodash": "^4.17.21",
@@ -57,15 +58,15 @@
57
58
  "typeSafety": false
58
59
  },
59
60
  "scripts": {
60
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
61
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
61
62
  "test": "pui-cli test --passWithNoTests",
62
- "lint": "node ../../scripts/lint.mjs --fix",
63
- "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
64
- "dts": "node ../../scripts/dts.mjs",
63
+ "lint": "node ../../../scripts/lint.mjs --fix",
64
+ "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
65
+ "dts": "node ../../../scripts/dts.mjs",
65
66
  "dts:withdeps": "pnpm --filter {.}... dts",
66
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
67
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
67
68
  "dev:build": "pnpm --filter {.}... build",
68
69
  "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
69
- "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
70
+ "checkDeps": "npm exec ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
70
71
  }
71
72
  }