@elliemae/ds-hooks-fontsize-detector 3.22.0-next.2 → 3.22.0-next.21

package/dist/cjs/DSHooksFontsizeDetector.js

@@ -71,6 +71,7 @@ const useResizeObserver = (ref) => {
 };
 const useFontSizeDetector = () => {
   const [ref, setRef] = (0, import_react.useState)(null);
+  const [parentWidth, setParentWidth] = (0, import_react.useState)(document.documentElement.clientWidth);
   const fontHeight = useResizeObserver(ref);
   (0, import_react.useEffect)(() => {
     const retrieveElement = async () => {
@@ -84,15 +85,26 @@ const useFontSizeDetector = () => {
     retrieveElement().catch(() => {
     });
   }, []);
-  const parentWidth = document.documentElement.clientWidth;
-  const ratio = Math.floor(parentWidth / (fontHeight || 1));
+  const ratio = (0, import_react.useMemo)(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);
+  const viewPortChange = (0, import_react.useCallback)(
+    (0, import_ds_utilities.debounce)(() => {
+      setParentWidth(document.documentElement.clientWidth);
+    }, 200),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", viewPortChange);
+    return () => {
+      window.removeEventListener("resize", viewPortChange);
+    };
+  }, [viewPortChange]);
   return {
     ratio,
-    fontRatio: fontHeight,
+    fontHeight,
     documentWidthRatio: parentWidth,
-    isSmall: ratio <= import_constants.BREAKPOINTS.small,
-    isMedium: ratio > import_constants.BREAKPOINTS.small && ratio <= import_constants.BREAKPOINTS.medimum,
-    isLarge: ratio > import_constants.BREAKPOINTS.medimum
+    isLarge: ratio <= import_constants.BREAKPOINTS.large,
+    isMedium: ratio > import_constants.BREAKPOINTS.large && ratio <= import_constants.BREAKPOINTS.medimum,
+    isSmall: ratio > import_constants.BREAKPOINTS.small
   };
 };
 //# sourceMappingURL=DSHooksFontsizeDetector.js.map

package/dist/cjs/DSHooksFontsizeDetector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSHooksFontsizeDetector.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
-  "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;",
+  "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"],
+  "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;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -35,8 +35,8 @@ module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
 const BREAKPOINTS = {
-  small: 25,
+  large: 30,
   medimum: 40,
-  large: 60
+  small: 60
 };
 //# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
+  "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"],
   "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;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
+  "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"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DSHooksFontsizeDetector.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2, { useState, useEffect } from "react";
-import { appendComponentIfNotExist } from "@elliemae/ds-utilities";
+import React2, { useState, useEffect, useMemo, useCallback } from "react";
+import { appendComponentIfNotExist, debounce } from "@elliemae/ds-utilities";
 import { FONT_DETECTOR_UID, BREAKPOINTS } from "./constants/index.js";
 const FontDetectorElement = React2.memo(() => /* @__PURE__ */ jsx(
   "p",
@@ -38,6 +38,7 @@ const useResizeObserver = (ref) => {
 };
 const useFontSizeDetector = () => {
   const [ref, setRef] = useState(null);
+  const [parentWidth, setParentWidth] = useState(document.documentElement.clientWidth);
   const fontHeight = useResizeObserver(ref);
   useEffect(() => {
     const retrieveElement = async () => {
@@ -51,15 +52,26 @@ const useFontSizeDetector = () => {
     retrieveElement().catch(() => {
     });
   }, []);
-  const parentWidth = document.documentElement.clientWidth;
-  const ratio = Math.floor(parentWidth / (fontHeight || 1));
+  const ratio = useMemo(() => Math.floor(parentWidth / (fontHeight || 1)), [fontHeight, parentWidth]);
+  const viewPortChange = useCallback(
+    debounce(() => {
+      setParentWidth(document.documentElement.clientWidth);
+    }, 200),
+    []
+  );
+  useEffect(() => {
+    window.addEventListener("resize", viewPortChange);
+    return () => {
+      window.removeEventListener("resize", viewPortChange);
+    };
+  }, [viewPortChange]);
   return {
     ratio,
-    fontRatio: fontHeight,
+    fontHeight,
     documentWidthRatio: parentWidth,
-    isSmall: ratio <= BREAKPOINTS.small,
-    isMedium: ratio > BREAKPOINTS.small && ratio <= BREAKPOINTS.medimum,
-    isLarge: ratio > BREAKPOINTS.medimum
+    isLarge: ratio <= BREAKPOINTS.large,
+    isMedium: ratio > BREAKPOINTS.large && ratio <= BREAKPOINTS.medimum,
+    isSmall: ratio > BREAKPOINTS.small
   };
 };
 export {

package/dist/esm/DSHooksFontsizeDetector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksFontsizeDetector.tsx"],
-  "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"],
-  "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;",
+  "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"],
+  "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;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
 const BREAKPOINTS = {
-  small: 25,
+  large: 30,
   medimum: 40,
-  large: 60
+  small: 60
 };
 export {
   BREAKPOINTS,

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "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"],
+  "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -1,6 +1,6 @@
 export declare const FONT_DETECTOR_UID = "DS_FONT_DETECTOR";
 export declare const BREAKPOINTS: {
-    small: number;
-    medimum: number;
     large: number;
+    medimum: number;
+    small: number;
 };

package/dist/types/react-desc-prop-types.d.ts

@@ -1,7 +1,7 @@
 export declare namespace DSHooksFontsizeDetectorT {
     interface UseFontSizeDetectorT {
         ratio: number;
-        fontRatio: number;
+        fontHeight: number;
         documentWidthRatio: number;
         isSmall: boolean;
         isMedium: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-hooks-fontsize-detector",
-  "version": "3.22.0-next.2",
+  "version": "3.22.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Hooks Fontsize Detector",
   "files": [
@@ -35,13 +35,16 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-utilities": "3.22.0-next.2"
+    "@xstyled/system": "3.7.0",
+    "@elliemae/ds-utilities": "3.22.0-next.21"
   },
   "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.9",
-    "styled-system": "~5.1.5"
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.21"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -56,7 +59,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
+    "test": "pui-cli test --passWithNoTests",
     "lint": "node ../../scripts/lint.mjs --fix",
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",