@elliemae/ds-hooks-fontsize-detector 3.50.1-next.9 → 3.51.0-beta.2
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.
- package/dist/cjs/DSHooksFontsizeDetector.js +4 -4
- package/dist/cjs/DSHooksFontsizeDetector.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-fontsize-detector-valid.js +1 -1
- package/dist/cjs/typescript-testing/typescript-fontsize-detector-valid.js.map +2 -2
- package/dist/cjs/utils.js.map +2 -2
- package/dist/esm/DSHooksFontsizeDetector.js +5 -5
- package/dist/esm/DSHooksFontsizeDetector.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-fontsize-detector-valid.js +1 -1
- package/dist/esm/typescript-testing/typescript-fontsize-detector-valid.js.map +2 -2
- package/dist/esm/utils.js.map +2 -2
- package/dist/types/utils.d.ts +1 -1
- package/package.json +9 -7
|
@@ -33,11 +33,11 @@ __export(DSHooksFontsizeDetector_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(DSHooksFontsizeDetector_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = __toESM(require("react"));
|
|
37
|
-
var import_utils = require("./utils.js");
|
|
38
36
|
var import_lodash = require("lodash");
|
|
37
|
+
var import_react = __toESM(require("react"));
|
|
39
38
|
var import_constants = require("./constants/index.js");
|
|
40
|
-
|
|
39
|
+
var import_utils = require("./utils.js");
|
|
40
|
+
const FontDetectorElement = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
41
41
|
"p",
|
|
42
42
|
{
|
|
43
43
|
"aria-hidden": "true",
|
|
@@ -50,7 +50,7 @@ const FontDetectorElement = import_react.default.memo(() => /* @__PURE__ */ (0,
|
|
|
50
50
|
},
|
|
51
51
|
children: "\xA0"
|
|
52
52
|
}
|
|
53
|
-
)
|
|
53
|
+
);
|
|
54
54
|
const useResizeObserver = (ref) => {
|
|
55
55
|
const [dimensions, setDimensions] = import_react.default.useState(0);
|
|
56
56
|
(0, import_react.useEffect)(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSHooksFontsizeDetector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUrB;AATF,mBAAiE;AACjE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react-hooks/exhaustive-deps */\nimport { debounce } from 'lodash';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { BREAKPOINTS, FONT_DETECTOR_UID } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\nimport { appendComponentIfNotExist } from './utils.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = (): JSX.Element => (\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 \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;ADUrB;AATF,oBAAyB;AACzB,mBAAiE;AACjE,uBAA+C;AAE/C,mBAA0C;AAI1C,MAAM,sBAAsB,MAC1B;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;AAGF,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,wCAA0B;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,wBAAS,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
|
}
|
|
@@ -50,6 +50,6 @@ const testDefinitionAsConst = {
|
|
|
50
50
|
};
|
|
51
51
|
const ExampleUsageComponent = () => {
|
|
52
52
|
const metaInfo = (0, import__.useFontSizeDetector)();
|
|
53
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "hey" });
|
|
54
54
|
};
|
|
55
55
|
//# sourceMappingURL=typescript-fontsize-detector-valid.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-fontsize-detector-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { useFontSizeDetector } from '../index.js';\nimport type { DSHooksFontsizeDetectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHooksFontsizeDetectorT.UseFontSizeDetectorT;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const metaInfo = useFontSizeDetector();\n return
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACsCd;AArCT,eAAoC;AAOpC,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,eAAW,8BAAoB;AACrC,SAAO,2EAAE;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { useFontSizeDetector } from '../index.js';\nimport type { DSHooksFontsizeDetectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHooksFontsizeDetectorT.UseFontSizeDetectorT;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const metaInfo = useFontSizeDetector();\n return <>hey</>;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACsCd;AArCT,eAAoC;AAOpC,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,eAAW,8BAAoB;AACrC,SAAO,2EAAE,iBAAG;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/no-deprecated */\nimport { render } from 'react-dom';\n\ninterface AppendComponentIfNotExistConfigT {\n Component: () => JSX.Element;\n parentVisibility?: string;\n uidSelector: string;\n tagName: string;\n}\n\n// appendComponentIfNotExist is a function that appends a component to the DOM if it does not exist\n// it returns the element appended\n//\nexport const appendComponentIfNotExist = async (props: AppendComponentIfNotExistConfigT) => {\n const { Component, parentVisibility = 'hidden', uidSelector, tagName = 'span' } = props;\n\n // if elementAttached exists we return it\n const elementAttached = document.getElementById(uidSelector);\n if (elementAttached) return elementAttached;\n const rootElement = document.createElement(tagName);\n rootElement.style.visibility = parentVisibility;\n // we set the rootElement to be absolute and on top to avoid adding scrollbars\n rootElement.style.position = 'absolute';\n rootElement.style.top = '0';\n // we wait for the component to be rendered and then we return the element appended\n const element = await new Promise<HTMLElement>((resolve) => {\n render(<Component />, document.body.appendChild(rootElement));\n requestAnimationFrame(() => {\n resolve(document.getElementById(uidSelector) as HTMLElement);\n });\n });\n return element;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BZ;AAzBX,uBAAuB;AAYhB,MAAM,4BAA4B,OAAO,UAA4C;AAC1F,QAAM,EAAE,WAAW,mBAAmB,UAAU,aAAa,UAAU,OAAO,IAAI;AAGlF,QAAM,kBAAkB,SAAS,eAAe,WAAW;AAC3D,MAAI,gBAAiB,QAAO;AAC5B,QAAM,cAAc,SAAS,cAAc,OAAO;AAClD,cAAY,MAAM,aAAa;AAE/B,cAAY,MAAM,WAAW;AAC7B,cAAY,MAAM,MAAM;AAExB,QAAM,UAAU,MAAM,IAAI,QAAqB,CAAC,YAAY;AAC1D,iCAAO,4CAAC,aAAU,GAAI,SAAS,KAAK,YAAY,WAAW,CAAC;AAC5D,0BAAsB,MAAM;AAC1B,cAAQ,SAAS,eAAe,WAAW,CAAgB;AAAA,IAC7D,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useState, useEffect, useMemo, useCallback } from "react";
|
|
4
|
-
import { appendComponentIfNotExist } from "./utils.js";
|
|
5
3
|
import { debounce } from "lodash";
|
|
6
|
-
import {
|
|
7
|
-
|
|
4
|
+
import React2, { useCallback, useEffect, useMemo, useState } from "react";
|
|
5
|
+
import { BREAKPOINTS, FONT_DETECTOR_UID } from "./constants/index.js";
|
|
6
|
+
import { appendComponentIfNotExist } from "./utils.js";
|
|
7
|
+
const FontDetectorElement = () => /* @__PURE__ */ jsx(
|
|
8
8
|
"p",
|
|
9
9
|
{
|
|
10
10
|
"aria-hidden": "true",
|
|
@@ -17,7 +17,7 @@ const FontDetectorElement = React2.memo(() => /* @__PURE__ */ jsx(
|
|
|
17
17
|
},
|
|
18
18
|
children: "\xA0"
|
|
19
19
|
}
|
|
20
|
-
)
|
|
20
|
+
);
|
|
21
21
|
const useResizeObserver = (ref) => {
|
|
22
22
|
const [dimensions, setDimensions] = React2.useState(0);
|
|
23
23
|
useEffect(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksFontsizeDetector.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUrB;AATF,OAAOA,UAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport { debounce } from 'lodash';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { BREAKPOINTS, FONT_DETECTOR_UID } from './constants/index.js';\nimport { type DSHooksFontsizeDetectorT } from './react-desc-prop-types.js';\nimport { appendComponentIfNotExist } from './utils.js';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst FontDetectorElement = (): JSX.Element => (\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 \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;ACUrB;AATF,SAAS,gBAAgB;AACzB,OAAOA,UAAS,aAAa,WAAW,SAAS,gBAAgB;AACjE,SAAS,aAAa,yBAAyB;AAE/C,SAAS,iCAAiC;AAI1C,MAAM,sBAAsB,MAC1B;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;AAGF,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
|
}
|
|
@@ -27,6 +27,6 @@ const testDefinitionAsConst = {
|
|
|
27
27
|
};
|
|
28
28
|
const ExampleUsageComponent = () => {
|
|
29
29
|
const metaInfo = useFontSizeDetector();
|
|
30
|
-
return /* @__PURE__ */ jsx(Fragment, {});
|
|
30
|
+
return /* @__PURE__ */ jsx(Fragment, { children: "hey" });
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=typescript-fontsize-detector-valid.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-fontsize-detector-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { useFontSizeDetector } from '../index.js';\nimport type { DSHooksFontsizeDetectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHooksFontsizeDetectorT.UseFontSizeDetectorT;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const metaInfo = useFontSizeDetector();\n return
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsCd;AArCT,SAAS,2BAA2B;AAOpC,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,WAAW,oBAAoB;AACrC,SAAO,gCAAE;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { useFontSizeDetector } from '../index.js';\nimport type { DSHooksFontsizeDetectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHooksFontsizeDetectorT.UseFontSizeDetectorT;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n ratio: 0,\n fontHeight: 0,\n documentWidthRatio: 0,\n isSmall: false,\n isMedium: false,\n isLarge: false,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const metaInfo = useFontSizeDetector();\n return <>hey</>;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCd;AArCT,SAAS,2BAA2B;AAOpC,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,WAAW,oBAAoB;AACrC,SAAO,gCAAE,iBAAG;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-deprecated */\nimport { render } from 'react-dom';\n\ninterface AppendComponentIfNotExistConfigT {\n Component: () => JSX.Element;\n parentVisibility?: string;\n uidSelector: string;\n tagName: string;\n}\n\n// appendComponentIfNotExist is a function that appends a component to the DOM if it does not exist\n// it returns the element appended\n//\nexport const appendComponentIfNotExist = async (props: AppendComponentIfNotExistConfigT) => {\n const { Component, parentVisibility = 'hidden', uidSelector, tagName = 'span' } = props;\n\n // if elementAttached exists we return it\n const elementAttached = document.getElementById(uidSelector);\n if (elementAttached) return elementAttached;\n const rootElement = document.createElement(tagName);\n rootElement.style.visibility = parentVisibility;\n // we set the rootElement to be absolute and on top to avoid adding scrollbars\n rootElement.style.position = 'absolute';\n rootElement.style.top = '0';\n // we wait for the component to be rendered and then we return the element appended\n const element = await new Promise<HTMLElement>((resolve) => {\n render(<Component />, document.body.appendChild(rootElement));\n requestAnimationFrame(() => {\n resolve(document.getElementById(uidSelector) as HTMLElement);\n });\n });\n return element;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0BZ;AAzBX,SAAS,cAAc;AAYhB,MAAM,4BAA4B,OAAO,UAA4C;AAC1F,QAAM,EAAE,WAAW,mBAAmB,UAAU,aAAa,UAAU,OAAO,IAAI;AAGlF,QAAM,kBAAkB,SAAS,eAAe,WAAW;AAC3D,MAAI,gBAAiB,QAAO;AAC5B,QAAM,cAAc,SAAS,cAAc,OAAO;AAClD,cAAY,MAAM,aAAa;AAE/B,cAAY,MAAM,WAAW;AAC7B,cAAY,MAAM,MAAM;AAExB,QAAM,UAAU,MAAM,IAAI,QAAqB,CAAC,YAAY;AAC1D,WAAO,oBAAC,aAAU,GAAI,SAAS,KAAK,YAAY,WAAW,CAAC;AAC5D,0BAAsB,MAAM;AAC1B,cAAQ,SAAS,eAAe,WAAW,CAAgB;AAAA,IAC7D,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/utils.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-hooks-fontsize-detector",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Hooks Fontsize Detector",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -39,16 +39,18 @@
|
|
|
39
39
|
"@xstyled/system": "~3.7.3"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
42
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
43
|
+
"@types/react": "^18.0.0",
|
|
43
44
|
"jest": "~29.7.0",
|
|
45
|
+
"jest-cli": "~29.7.0",
|
|
44
46
|
"styled-components": "~5.3.9",
|
|
45
47
|
"styled-system": "^5.1.5",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.2"
|
|
47
49
|
},
|
|
48
50
|
"peerDependencies": {
|
|
49
51
|
"lodash": "^4.17.21",
|
|
50
|
-
"react": "^
|
|
51
|
-
"react-dom": "^
|
|
52
|
+
"react": "^18.3.1",
|
|
53
|
+
"react-dom": "^18.3.1",
|
|
52
54
|
"styled-components": "~5.3.9",
|
|
53
55
|
"styled-system": "^5.1.5"
|
|
54
56
|
},
|