@altano/use-element-observer 4.0.0 → 4.0.1

package/dist/index.d.ts

@@ -4,7 +4,6 @@ import React from "react";
 type ReactElementWithRef = React.ReactElement<{
   ref: React.Ref<Element>;
 }>;
-
 //#endregion
 //#region src/useElementObserver.d.ts
 interface Context {
@@ -47,7 +46,6 @@ declare function useElementObserver({
   selector,
   useWrapperDiv
 }: Options): [Set<Element>, React.ReactElement];
-
 //#endregion
 export { ChildOptions, ElementObserverContext, Options, ReactElementWithRef, useElementObserver };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ref: Element","ElementObserverContext: React.Context<Context | null>"],"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,WACa,EAAgB;CAC7B,MAAM,SAAS,OAAU,KAAK;AAC9B,WAAU,MAAM;EACd,MAAM,MAAM,OAAO;AACnB,MAAI,OAAO,KACT,QAAO,MAAY,CAAE;AAEvB,UAAQ,IAAI;AACZ,SAAO,MAAY,UAAU,IAAI;CAClC,GAAE;EAAC;EAAQ;EAAS;CAAU,EAAC;AAChC,QAAO;AACR;;;;ACZD,SAAS,2BAA2B,EAClC,UACA,SACA,WAC+C,EAAsB;CACrE,MAAM,MAAM,YAA4B;EAAE;EAAS;CAAW,EAAC;AAC/D,wBACE,IAAC;EAAI,OAAO,EAAE,SAAS,UAAW;EAAO;EACtC;GACG;AAET;AAED,SAAS,aAAa,EACpB,UACA,SACA,WACmD,EAAsB;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;CAAW,EAAC;AAClD,QAAO,MAAM,aAAa,UAAU,EAAE,KAAK,OAAQ,EAAC;AACrD;AAkBD,SAAgB,SAAS,EACvB,UACA,UACA,eACQ,EAAsB;CAC9B,MAAM,UAAU,WAAW,uBAAuB;AAClD,KAAI,WAAW,KACb,OAAM,IAAI,MAAM;CAElB,MAAM,EAAE,iBAAiB,GAAG;CAC5B,MAAM,UAAU,YACd,CAACA,QAAiB;AAChB,QAAM,KAAK,IAAI,iBAAiB,SAAS,CAAC,CAAC,QAAQ,CAAC,MAClD,gBAAgB,IAAI,EAAE,CACvB;CACF,GACD,CAAC,UAAU,eAAgB,EAC5B;CACD,MAAM,YAAY,YAChB,MAAM,gBAAgB,OAAO,EAC7B,CAAC,eAAgB,EAClB;AACD,QAAO,gCACL,IAAC;EAAoC;EAAoB;EACtD;GAC0B,mBAE7B,IAAC;EAAsB;EAAoB;EACxC;GACY;AAElB;;;;ACnED,MAAaC,yBACX,MAAM,cAA8B,KAAK;;;;;;;;;;;;;;;;;;;AAsC3C,SAAgB,mBAAmB,EACjC,MACA,UACA,eACQ,EAAsC;CAG9C,MAAM,kBAAkB,QAAiB;CACzC,MAAM,+BACJ,IAAC,uBAAuB;EAAS,OAAO,EAAE,gBAAiB;YACxD,iBAAiB,QAAQ,kBAAkB,uBAC1C,IAAC;GAAmB;GAAU,eAAe;aAC1C;IACQ,mBAEX,IAAC;GAAmB;GAAU,eAAe;aAC1C;IACQ;GAEmB;AAEpC,QAAO,CAAC,iBAAiB,YAAa;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/use-element-observer",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Intersection-Observer-based Scroll Spy React Hook",
   "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
   "repository": {
@@ -20,6 +20,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**/*.js",
+    "dist/**/*.js.map",
     "dist/**/*.d.ts"
   ],
   "dependencies": {
@@ -36,7 +37,7 @@
     "jsdom": "^26.0.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
-    "tsdown": "^0.12.3",
+    "tsdown": "^0.12.9",
     "typescript": "^5.8.2",
     "vite": "^6.2.6",
     "vitest": "^3.1.4",