@altano/use-element-observer 4.0.3 → 4.0.4

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 (4) hide show
  1. package/dist/index.d.ts +5 -9
  2. package/dist/index.js +8 -10
  3. package/dist/index.js.map +1 -1
  4. package/package.json +12 -12
package/dist/index.d.ts CHANGED
@@ -1,18 +1,15 @@
1
1
  import React from "react";
2
- //#region src/types.d.ts
3
2
  type ReactElementWithRef = React.ReactElement<{
4
3
  ref: React.Ref<Element>;
5
4
  }>;
6
- //#endregion
7
- //#region src/useElementObserver.d.ts
8
5
  interface Context {
9
6
  mountedElements: Set<Element>;
10
7
  }
11
- declare const ElementObserverContext: React.Context<Context | null>;
12
- type Options = ChildOptions & {
8
+ export declare const ElementObserverContext: React.Context<Context | null>;
9
+ export type Options = ChildOptions & {
13
10
  selector: string;
14
11
  };
15
- type ChildOptions = {
12
+ export type ChildOptions = {
16
13
  useWrapperDiv: false;
17
14
  tree: ReactElementWithRef;
18
15
  } | {
@@ -40,7 +37,6 @@ type ChildOptions = {
40
37
  * @returns A tuple of: (1) set of elements and (2) the observed tree to be
41
38
  * rendered.
42
39
  */
43
- declare function useElementObserver({ tree, selector, useWrapperDiv }: Options): [Set<Element>, React.ReactElement];
44
- //#endregion
45
- export { ChildOptions, ElementObserverContext, Options, type ReactElementWithRef, useElementObserver };
40
+ export declare function useElementObserver({ tree, selector, useWrapperDiv }: Options): [Set<Element>, React.ReactElement];
41
+ export type { ReactElementWithRef };
46
42
  //# sourceMappingURL=index.d.ts.map
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react";
2
2
  import { useSet } from "@uidotdev/usehooks";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
5
- //#region src/useMountRef.tsx
5
+ // src/useMountRef.tsx
6
6
  function useMountRef({ onMount, onUnmount }) {
7
7
  const newRef = useRef(null);
8
8
  useEffect(() => {
@@ -18,15 +18,15 @@ function useMountRef({ onMount, onUnmount }) {
18
18
  return newRef;
19
19
  }
20
20
 
21
- //#endregion
22
- //#region src/Observer.tsx
21
+ // src/Observer.tsx
23
22
  function ObserveChildWithWrapperDiv({ children, onMount, onUnmount }) {
23
+ const ref = useMountRef({
24
+ onMount,
25
+ onUnmount
26
+ });
24
27
  return /* @__PURE__ */ jsx("div", {
25
28
  style: { display: "inherit" },
26
- ref: useMountRef({
27
- onMount,
28
- onUnmount
29
- }),
29
+ ref,
30
30
  children
31
31
  });
32
32
  }
@@ -56,8 +56,7 @@ function Observer({ children, selector, useWrapperDiv }) {
56
56
  });
57
57
  }
58
58
 
59
- //#endregion
60
- //#region src/useElementObserver.tsx
59
+ // src/useElementObserver.tsx
61
60
  const ElementObserverContext = React.createContext(null);
62
61
  /**
63
62
  * Allows observing mount/unmount of elements that match a given selector in the
@@ -93,6 +92,5 @@ function useElementObserver({ tree, selector, useWrapperDiv }) {
93
92
  })];
94
93
  }
95
94
 
96
- //#endregion
97
95
  export { ElementObserverContext, useElementObserver };
98
96
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/useMountRef.tsx","../src/Observer.tsx","../src/useElementObserver.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport interface Callbacks<T> {\n onMount: (e: T) => void;\n onUnmount: (e: T) => void;\n}\n\nexport function useMountRef<T>({\n onMount,\n onUnmount,\n}: Callbacks<T>): React.Ref<T> {\n const newRef = useRef<T>(null);\n useEffect(() => {\n const ref = newRef.current;\n if (ref == null) {\n return (): void => {};\n }\n onMount(ref);\n return (): void => onUnmount(ref);\n }, [newRef, onMount, onUnmount]);\n return newRef;\n}\n","import React, { useCallback, useContext } from \"react\";\nimport { useMountRef, type Callbacks } from \"./useMountRef\";\nimport { ElementObserverContext } from \"./useElementObserver\";\nimport type { ReactElementWithRef } from \"./types\";\n\ninterface ChildrenAndCallbacks<T, ChildType> extends Callbacks<T> {\n children: ChildType;\n}\n\nfunction ObserveChildWithWrapperDiv({\n children,\n onMount,\n onUnmount,\n}: ChildrenAndCallbacks<Element, React.ReactNode>): React.ReactElement {\n const ref = useMountRef<HTMLDivElement>({ onMount, onUnmount });\n return (\n <div style={{ display: \"inherit\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nfunction ObserveChild({\n children,\n onMount,\n onUnmount,\n}: ChildrenAndCallbacks<Element, ReactElementWithRef>): React.ReactElement {\n const newRef = useMountRef({ onMount, onUnmount });\n return React.cloneElement(children, { ref: newRef });\n}\n\ntype Options =\n | {\n // If we're using a wrapper div...\n useWrapperDiv: true;\n // ... the children can be any ReactNode\n children: React.ReactNode;\n selector: string;\n }\n | {\n // But if we're not using a wrapper div...\n useWrapperDiv: false;\n // The child must be a single ReactElement that takes a ref\n children: ReactElementWithRef;\n selector: string;\n };\n\nexport function Observer({\n children,\n selector,\n useWrapperDiv,\n}: Options): React.ReactElement {\n const context = useContext(ElementObserverContext);\n if (context == null) {\n throw new Error(\"Observer context was null\");\n }\n const { mountedElements } = context;\n const onMount = useCallback(\n (ref: Element) => {\n Array.from(ref.querySelectorAll(selector)).forEach((e) =>\n mountedElements.add(e),\n );\n },\n [selector, mountedElements],\n );\n const onUnmount = useCallback(\n () => mountedElements.clear(),\n [mountedElements],\n );\n return useWrapperDiv ? (\n <ObserveChildWithWrapperDiv onMount={onMount} onUnmount={onUnmount}>\n {children}\n </ObserveChildWithWrapperDiv>\n ) : (\n <ObserveChild onMount={onMount} onUnmount={onUnmount}>\n {children}\n </ObserveChild>\n );\n}\n","import React from \"react\";\nimport { useSet } from \"@uidotdev/usehooks\";\nimport { Observer } from \"./Observer\";\nimport type { ReactElementWithRef } from \"./types\";\n\nexport type { ReactElementWithRef };\n\ninterface Context {\n mountedElements: Set<Element>;\n}\n\nexport const ElementObserverContext: React.Context<Context | null> =\n React.createContext<Context | null>(null);\n\nexport type Options = ChildOptions & {\n selector: string;\n};\n\nexport type ChildOptions =\n | {\n useWrapperDiv: false;\n tree: ReactElementWithRef;\n }\n | {\n useWrapperDiv: true;\n tree: React.ReactNode;\n }\n | {\n useWrapperDiv?: undefined;\n tree: React.ReactNode;\n };\n\n/**\n * Allows observing mount/unmount of elements that match a given selector in the\n * given React tree. Tree must be static: only the mounting of the tree itself\n * is monitored. If the tree's DOM is dynamically changed those mounts and\n * unmounts will not be detected.\n *\n * @param tree The React tree to observe.\n * @param onMount The callback that will be passed any elements in the tree that\n * match the given selector, as they mount.\n * @param onUnmount The callback that will be passed any elements in the tree\n * that match the given selector, as they unmount.\n * @param selector The css selector used to select which elements are observed.\n * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If\n * `false`, `children` must be a single child element that can take a ref (which\n * will be overwritten).\n * @returns A tuple of: (1) set of elements and (2) the observed tree to be\n * rendered.\n */\nexport function useElementObserver({\n tree,\n selector,\n useWrapperDiv,\n}: Options): [Set<Element>, React.ReactElement] {\n // TODO: Re-compute on every render to catch mutations? Add mutation observer\n // to catch changes to grandchildren?\n const mountedElements = useSet<Element>();\n const observedTree = (\n <ElementObserverContext.Provider value={{ mountedElements }}>\n {useWrapperDiv == null || useWrapperDiv === true ? (\n <Observer selector={selector} useWrapperDiv={true}>\n {tree}\n </Observer>\n ) : (\n <Observer selector={selector} useWrapperDiv={false}>\n {tree}\n </Observer>\n )}\n </ElementObserverContext.Provider>\n );\n return [mountedElements, observedTree];\n}\n"],"mappings":";;;;;AAOA,SAAgB,YAAe,EAC7B,SACA,aAC6B;CAC7B,MAAM,SAAS,OAAU,IAAI;CAC7B,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,OAAO,MACT,aAAmB,CAAC;EAEtB,QAAQ,GAAG;EACX,aAAmB,UAAU,GAAG;CAClC,GAAG;EAAC;EAAQ;EAAS;CAAS,CAAC;CAC/B,OAAO;AACT;;;;ACZA,SAAS,2BAA2B,EAClC,UACA,SACA,aACqE;CAErE,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,UAAU;EAAG,KAF1B,YAA4B;GAAE;GAAS;EAAU,CAEhB;EACxC;CACE;AAET;AAEA,SAAS,aAAa,EACpB,UACA,SACA,aACyE;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;CAAU,CAAC;CACjD,OAAO,MAAM,aAAa,UAAU,EAAE,KAAK,OAAO,CAAC;AACrD;AAkBA,SAAgB,SAAS,EACvB,UACA,UACA,iBAC8B;CAC9B,MAAM,UAAU,WAAW,sBAAsB;CACjD,IAAI,WAAW,MACb,MAAM,IAAI,MAAM,2BAA2B;CAE7C,MAAM,EAAE,oBAAoB;CAC5B,MAAM,UAAU,aACb,QAAiB;EAChB,MAAM,KAAK,IAAI,iBAAiB,QAAQ,CAAC,CAAC,CAAC,SAAS,MAClD,gBAAgB,IAAI,CAAC,CACvB;CACF,GACA,CAAC,UAAU,eAAe,CAC5B;CACA,MAAM,YAAY,kBACV,gBAAgB,MAAM,GAC5B,CAAC,eAAe,CAClB;CACA,OAAO,gBACL,oBAAC,4BAAD;EAAqC;EAAoB;EACtD;CACyB,KAE5B,oBAAC,cAAD;EAAuB;EAAoB;EACxC;CACW;AAElB;;;;ACnEA,MAAa,yBACX,MAAM,cAA8B,IAAI;;;;;;;;;;;;;;;;;;;AAsC1C,SAAgB,mBAAmB,EACjC,MACA,UACA,iBAC8C;CAG9C,MAAM,kBAAkB,OAAgB;CAcxC,OAAO,CAAC,iBAAiB,oBAZtB,uBAAuB,UAAxB;EAAiC,OAAO,EAAE,gBAAgB;YACvD,iBAAiB,QAAQ,kBAAkB,OAC1C,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO,KAEV,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO;CAEmB,CAEC,CAAC;AACvC"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../src/useMountRef.tsx","../src/Observer.tsx","../src/useElementObserver.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport interface Callbacks<T> {\n onMount: (e: T) => void;\n onUnmount: (e: T) => void;\n}\n\nexport function useMountRef<T>({\n onMount,\n onUnmount,\n}: Callbacks<T>): React.Ref<T> {\n const newRef = useRef<T>(null);\n useEffect(() => {\n const ref = newRef.current;\n if (ref == null) {\n return (): void => {};\n }\n onMount(ref);\n return (): void => onUnmount(ref);\n }, [newRef, onMount, onUnmount]);\n return newRef;\n}\n","import React, { useCallback, useContext } from \"react\";\nimport { useMountRef, type Callbacks } from \"./useMountRef\";\nimport { ElementObserverContext } from \"./useElementObserver\";\nimport type { ReactElementWithRef } from \"./types\";\n\ninterface ChildrenAndCallbacks<T, ChildType> extends Callbacks<T> {\n children: ChildType;\n}\n\nfunction ObserveChildWithWrapperDiv({\n children,\n onMount,\n onUnmount,\n}: ChildrenAndCallbacks<Element, React.ReactNode>): React.ReactElement {\n const ref = useMountRef<HTMLDivElement>({ onMount, onUnmount });\n return (\n <div style={{ display: \"inherit\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nfunction ObserveChild({\n children,\n onMount,\n onUnmount,\n}: ChildrenAndCallbacks<Element, ReactElementWithRef>): React.ReactElement {\n const newRef = useMountRef({ onMount, onUnmount });\n return React.cloneElement(children, { ref: newRef });\n}\n\ntype Options =\n | {\n // If we're using a wrapper div...\n useWrapperDiv: true;\n // ... the children can be any ReactNode\n children: React.ReactNode;\n selector: string;\n }\n | {\n // But if we're not using a wrapper div...\n useWrapperDiv: false;\n // The child must be a single ReactElement that takes a ref\n children: ReactElementWithRef;\n selector: string;\n };\n\nexport function Observer({\n children,\n selector,\n useWrapperDiv,\n}: Options): React.ReactElement {\n const context = useContext(ElementObserverContext);\n if (context == null) {\n throw new Error(\"Observer context was null\");\n }\n const { mountedElements } = context;\n const onMount = useCallback(\n (ref: Element) => {\n Array.from(ref.querySelectorAll(selector)).forEach((e) =>\n mountedElements.add(e),\n );\n },\n [selector, mountedElements],\n );\n const onUnmount = useCallback(\n () => mountedElements.clear(),\n [mountedElements],\n );\n return useWrapperDiv ? (\n <ObserveChildWithWrapperDiv onMount={onMount} onUnmount={onUnmount}>\n {children}\n </ObserveChildWithWrapperDiv>\n ) : (\n <ObserveChild onMount={onMount} onUnmount={onUnmount}>\n {children}\n </ObserveChild>\n );\n}\n","import React from \"react\";\nimport { useSet } from \"@uidotdev/usehooks\";\nimport { Observer } from \"./Observer\";\nimport type { ReactElementWithRef } from \"./types\";\n\nexport type { ReactElementWithRef };\n\ninterface Context {\n mountedElements: Set<Element>;\n}\n\nexport const ElementObserverContext: React.Context<Context | null> =\n React.createContext<Context | null>(null);\n\nexport type Options = ChildOptions & {\n selector: string;\n};\n\nexport type ChildOptions =\n | {\n useWrapperDiv: false;\n tree: ReactElementWithRef;\n }\n | {\n useWrapperDiv: true;\n tree: React.ReactNode;\n }\n | {\n useWrapperDiv?: undefined;\n tree: React.ReactNode;\n };\n\n/**\n * Allows observing mount/unmount of elements that match a given selector in the\n * given React tree. Tree must be static: only the mounting of the tree itself\n * is monitored. If the tree's DOM is dynamically changed those mounts and\n * unmounts will not be detected.\n *\n * @param tree The React tree to observe.\n * @param onMount The callback that will be passed any elements in the tree that\n * match the given selector, as they mount.\n * @param onUnmount The callback that will be passed any elements in the tree\n * that match the given selector, as they unmount.\n * @param selector The css selector used to select which elements are observed.\n * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If\n * `false`, `children` must be a single child element that can take a ref (which\n * will be overwritten).\n * @returns A tuple of: (1) set of elements and (2) the observed tree to be\n * rendered.\n */\nexport function useElementObserver({\n tree,\n selector,\n useWrapperDiv,\n}: Options): [Set<Element>, React.ReactElement] {\n // TODO: Re-compute on every render to catch mutations? Add mutation observer\n // to catch changes to grandchildren?\n const mountedElements = useSet<Element>();\n const observedTree = (\n <ElementObserverContext.Provider value={{ mountedElements }}>\n {useWrapperDiv == null || useWrapperDiv === true ? (\n <Observer selector={selector} useWrapperDiv={true}>\n {tree}\n </Observer>\n ) : (\n <Observer selector={selector} useWrapperDiv={false}>\n {tree}\n </Observer>\n )}\n </ElementObserverContext.Provider>\n );\n return [mountedElements, observedTree];\n}\n"],"mappings":";;;;;AAOA,SAAgB,YAAe,EAC7B,SACA,aAC6B;CAC7B,MAAM,SAAS,OAAU,IAAI;CAC7B,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,OAAO,MACT,aAAmB,CAAC;EAEtB,QAAQ,GAAG;EACX,aAAmB,UAAU,GAAG;CAClC,GAAG;EAAC;EAAQ;EAAS;CAAS,CAAC;CAC/B,OAAO;AACT;;;ACZA,SAAS,2BAA2B,EAClC,UACA,SACA,aACqE;CACrE,MAAM,MAAM,YAA4B;EAAE;EAAS;CAAU,CAAC;CAC9D,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,UAAU;EAAQ;EACtC;CACE;AAET;AAEA,SAAS,aAAa,EACpB,UACA,SACA,aACyE;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;CAAU,CAAC;CACjD,OAAO,MAAM,aAAa,UAAU,EAAE,KAAK,OAAO,CAAC;AACrD;AAkBA,SAAgB,SAAS,EACvB,UACA,UACA,iBAC8B;CAC9B,MAAM,UAAU,WAAW,sBAAsB;CACjD,IAAI,WAAW,MACb,MAAM,IAAI,MAAM,2BAA2B;CAE7C,MAAM,EAAE,oBAAoB;CAC5B,MAAM,UAAU,aACb,QAAiB;EAChB,MAAM,KAAK,IAAI,iBAAiB,QAAQ,CAAC,CAAC,CAAC,SAAS,MAClD,gBAAgB,IAAI,CAAC,CACvB;CACF,GACA,CAAC,UAAU,eAAe,CAC5B;CACA,MAAM,YAAY,kBACV,gBAAgB,MAAM,GAC5B,CAAC,eAAe,CAClB;CACA,OAAO,gBACL,oBAAC,4BAAD;EAAqC;EAAoB;EACtD;CACyB,KAE5B,oBAAC,cAAD;EAAuB;EAAoB;EACxC;CACW;AAElB;;;ACnEA,MAAa,yBACX,MAAM,cAA8B,IAAI;;;;;;;;;;;;;;;;;;;AAsC1C,SAAgB,mBAAmB,EACjC,MACA,UACA,iBAC8C;CAG9C,MAAM,kBAAkB,OAAgB;CAcxC,OAAO,CAAC,iBAAiB,oBAZtB,uBAAuB,UAAxB;EAAiC,OAAO,EAAE,gBAAgB;YACvD,iBAAiB,QAAQ,kBAAkB,OAC1C,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO,KAEV,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO;CAEmB,CAEC,CAAC;AACvC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altano/use-element-observer",
3
- "version": "4.0.3",
3
+ "version": "4.0.4",
4
4
  "description": "Intersection-Observer-based Scroll Spy React Hook",
5
5
  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
6
6
  "repository": {
@@ -28,19 +28,19 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@arethetypeswrong/cli": "^0.18.5",
31
- "@testing-library/react": "^16.3.2",
32
- "@types/react": "^19.2.17",
33
- "@types/react-dom": "^19.2.3",
34
- "@vitest/coverage-v8": "^4.1.10",
31
+ "@testing-library/react": "^16.3.3",
32
+ "@types/react": "^19.3.0",
33
+ "@types/react-dom": "^19.3.0",
34
+ "@vitest/coverage-v8": "^5.1.0",
35
35
  "depcheck": "^1.4.7",
36
- "eslint": "^9.39.5",
37
- "jsdom": "^29.1.1",
38
- "prettier": "3.9.6",
39
- "react": "^19.2.8",
40
- "tsdown": "^0.22.13",
36
+ "eslint": "^10.14.0",
37
+ "jsdom": "^30.1.3",
38
+ "prettier": "3.9.10",
39
+ "react": "^19.3.1",
40
+ "tsdown": "^0.23.5",
41
41
  "typescript": "^6.0.3",
42
- "vite": "^8.1.5",
43
- "vitest": "^4.1.10",
42
+ "vite": "^8.3.5",
43
+ "vitest": "^5.1.0",
44
44
  "@altano/build-config": "0.0.1",
45
45
  "@altano/testing": "0.0.1",
46
46
  "@altano/tsconfig": "0.0.1"