@elliemae/ds-utilities 3.33.0-next.3 → 3.33.0-next.5
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.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Utilities",
|
|
6
6
|
"files": [
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
"typeSafety": false
|
|
152
152
|
},
|
|
153
153
|
"dependencies": {
|
|
154
|
-
"@elliemae/pui-theme": "~2.
|
|
154
|
+
"@elliemae/pui-theme": "~2.9.3",
|
|
155
155
|
"hotkeys-js": "~3.10.2",
|
|
156
156
|
"raf": "~3.4.1",
|
|
157
157
|
"react-dom": "^17.0.2",
|
|
@@ -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-
|
|
164
|
-
"@elliemae/ds-hooks-
|
|
165
|
-
"@elliemae/ds-hooks-on-
|
|
166
|
-
"@elliemae/ds-props-helpers": "3.33.0-next.
|
|
167
|
-
"@elliemae/ds-hooks-
|
|
163
|
+
"@elliemae/ds-hooks-is-mobile": "3.33.0-next.5",
|
|
164
|
+
"@elliemae/ds-hooks-on-blur-out": "3.33.0-next.5",
|
|
165
|
+
"@elliemae/ds-hooks-on-first-focus-in": "3.33.0-next.5",
|
|
166
|
+
"@elliemae/ds-props-helpers": "3.33.0-next.5",
|
|
167
|
+
"@elliemae/ds-hooks-focus-trap": "3.33.0-next.5"
|
|
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.5"
|
|
173
173
|
},
|
|
174
174
|
"peerDependencies": {
|
|
175
175
|
"lodash": "^4.17.21",
|