@elliemae/ds-utilities 3.33.0-next.4 → 3.33.0-next.6
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.
|
@@ -61,7 +61,10 @@ const useResizeObserver = (handler, el) => {
|
|
|
61
61
|
(0, import_react.useEffect)(() => {
|
|
62
62
|
if (htmlEl)
|
|
63
63
|
resizeObserver.observe(htmlEl);
|
|
64
|
-
return () =>
|
|
64
|
+
return () => {
|
|
65
|
+
if (htmlEl)
|
|
66
|
+
resizeObserver.unobserve(htmlEl);
|
|
67
|
+
};
|
|
65
68
|
}, [htmlEl, resizeObserver]);
|
|
66
69
|
return [setRef];
|
|
67
70
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useResizeObserver.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => htmlEl
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,iBAAgB;AAChB,sCAA2B;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => {\n if (htmlEl) resizeObserver.unobserve(htmlEl);\n };\n }, [htmlEl, resizeObserver]);\n\n return [setRef];\n};\n\nexport default useResizeObserver;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,iBAAgB;AAChB,sCAA2B;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,QAAI,uBAAS,EAAE;AAElC,QAAM,qBAAiB;AAAA,IACrB,MACE,IAAI,gCAAAA,QAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO;AAAG;AAC7B,UAAI,CAAC,QAAQ;AAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB,qBAAAC;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,8BAAU,MAAM;AACd,QAAI;AAAQ,qBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI;AAAQ,uBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["ResizeObserver", "raf"]
|
|
7
7
|
}
|
|
@@ -27,7 +27,10 @@ const useResizeObserver = (handler, el) => {
|
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
if (htmlEl)
|
|
29
29
|
resizeObserver.observe(htmlEl);
|
|
30
|
-
return () =>
|
|
30
|
+
return () => {
|
|
31
|
+
if (htmlEl)
|
|
32
|
+
resizeObserver.unobserve(htmlEl);
|
|
33
|
+
};
|
|
31
34
|
}, [htmlEl, resizeObserver]);
|
|
32
35
|
return [setRef];
|
|
33
36
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useResizeObserver.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => htmlEl
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,gBAAgB;AAC7C,OAAO,SAAS;AAChB,OAAO,oBAAoB;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n const [node, setRef] = useState(el);\n\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) return;\n if (!entries.length) return;\n const entry = entries[0];\n\n // execute on the next animation frame\n raf(() =>\n handler(\n {\n width: (entry.target as HTMLElement).offsetWidth,\n height: (entry.target as HTMLElement).offsetHeight,\n },\n entry.target,\n ),\n );\n }),\n [handler],\n );\n\n const htmlEl = el || node;\n\n useEffect(() => {\n if (htmlEl) resizeObserver.observe(htmlEl);\n return () => {\n if (htmlEl) resizeObserver.unobserve(htmlEl);\n };\n }, [htmlEl, resizeObserver]);\n\n return [setRef];\n};\n\nexport default useResizeObserver;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,gBAAgB;AAC7C,OAAO,SAAS;AAChB,OAAO,oBAAoB;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,EAAE;AAElC,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO;AAAG;AAC7B,UAAI,CAAC,QAAQ;AAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,YAAU,MAAM;AACd,QAAI;AAAQ,qBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI;AAAQ,uBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,5 +3,5 @@ type HandlerT = (measures: {
|
|
|
3
3
|
width: number;
|
|
4
4
|
height: number;
|
|
5
5
|
}, element: Element) => void;
|
|
6
|
-
export declare const useResizeObserver: (handler: HandlerT, el: HTMLElement) => import("react").Dispatch<import("react").SetStateAction<HTMLElement>>[];
|
|
6
|
+
export declare const useResizeObserver: (handler: HandlerT, el: HTMLElement | null) => import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>[];
|
|
7
7
|
export default useResizeObserver;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-utilities",
|
|
3
|
-
"version": "3.33.0-next.
|
|
3
|
+
"version": "3.33.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Utilities",
|
|
6
6
|
"files": [
|
|
@@ -160,16 +160,16 @@
|
|
|
160
160
|
"use-force-update": "~1.0.11",
|
|
161
161
|
"use-measure": "~0.3.0",
|
|
162
162
|
"use-onclickoutside": "~0.4.1",
|
|
163
|
-
"@elliemae/ds-hooks-focus-trap": "3.33.0-next.
|
|
164
|
-
"@elliemae/ds-hooks-
|
|
165
|
-
"@elliemae/ds-hooks-
|
|
166
|
-
"@elliemae/ds-
|
|
167
|
-
"@elliemae/ds-
|
|
163
|
+
"@elliemae/ds-hooks-focus-trap": "3.33.0-next.6",
|
|
164
|
+
"@elliemae/ds-hooks-on-blur-out": "3.33.0-next.6",
|
|
165
|
+
"@elliemae/ds-hooks-is-mobile": "3.33.0-next.6",
|
|
166
|
+
"@elliemae/ds-props-helpers": "3.33.0-next.6",
|
|
167
|
+
"@elliemae/ds-hooks-on-first-focus-in": "3.33.0-next.6"
|
|
168
168
|
},
|
|
169
169
|
"devDependencies": {
|
|
170
170
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
171
171
|
"react-dom": "^17.0.2",
|
|
172
|
-
"@elliemae/ds-monorepo-devops": "3.33.0-next.
|
|
172
|
+
"@elliemae/ds-monorepo-devops": "3.33.0-next.6"
|
|
173
173
|
},
|
|
174
174
|
"peerDependencies": {
|
|
175
175
|
"lodash": "^4.17.21",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
"react-dom": "^17.0.2"
|
|
178
178
|
},
|
|
179
179
|
"scripts": {
|
|
180
|
-
"test": "pui-cli test --passWithNoTests",
|
|
180
|
+
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
181
181
|
"lint": "node ../../../scripts/lint.mjs",
|
|
182
182
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
|
|
183
183
|
"dts": "node ../../../scripts/dts.mjs",
|