@altano/use-element-observer 2.0.0 → 3.0.0

package/dist/index.d.ts

@@ -1,2 +1,44 @@
-export * from "./useElementObserver";
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+
+type ReactElementWithRef = React.ReactElement<{
+    ref: React.Ref<Element>;
+}>;
+
+interface Context {
+    mountedElements: Set<Element>;
+}
+declare const ElementObserverContext: React.Context<Context | null>;
+type Options = ChildOptions & {
+    selector: string;
+};
+type ChildOptions = {
+    useWrapperDiv: false;
+    tree: ReactElementWithRef;
+} | {
+    useWrapperDiv: true;
+    tree: React.ReactNode;
+} | {
+    useWrapperDiv?: undefined;
+    tree: React.ReactNode;
+};
+/**
+ * Allows observing mount/unmount of elements that match a given selector in the
+ * given React tree. Tree must be static: only the mounting of the tree itself
+ * is monitored. If the tree's DOM is dynamically changed those mounts and
+ * unmounts will not be detected.
+ *
+ * @param tree The React tree to observe.
+ * @param onMount The callback that will be passed any elements in the tree that
+ * match the given selector, as they mount.
+ * @param onUnmount The callback that will be passed any elements in the tree
+ * that match the given selector, as they unmount.
+ * @param selector The css selector used to select which elements are observed.
+ * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
+ * `false`, `children` must be a single child element that can take a ref (which
+ * will be overwritten).
+ * @returns A tuple of: (1) set of elements and (2) the observed tree to be
+ * rendered.
+ */
+declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
+
+export { type ChildOptions, ElementObserverContext, type Options, type ReactElementWithRef, useElementObserver };

package/dist/index.js

@@ -40,8 +40,7 @@ function ObserveChild({
   onUnmount
 }) {
   const newRef = useMountRef({ onMount, onUnmount });
-  const child = React2.Children.only(children);
-  return React2.cloneElement(child, { ref: newRef });
+  return React2.cloneElement(children, { ref: newRef });
 }
 function Observer({
   children,
@@ -65,8 +64,7 @@ function Observer({
     () => mountedElements.clear(),
     [mountedElements]
   );
-  const Component = useWrapperDiv ? ObserveChildWithWrapperDiv : ObserveChild;
-  return /* @__PURE__ */ jsx(Component, { onMount, onUnmount, children });
+  return useWrapperDiv ? /* @__PURE__ */ jsx(ObserveChildWithWrapperDiv, { onMount, onUnmount, children }) : /* @__PURE__ */ jsx(ObserveChild, { onMount, onUnmount, children });
 }
 
 // src/useElementObserver.tsx
@@ -75,10 +73,10 @@ var ElementObserverContext = React3.createContext(null);
 function useElementObserver({
   tree,
   selector,
-  useWrapperDiv = true
+  useWrapperDiv
 }) {
   const mountedElements = useSet();
-  const observedTree = /* @__PURE__ */ jsx2(ElementObserverContext.Provider, { value: { mountedElements }, children: /* @__PURE__ */ jsx2(Observer, { selector, useWrapperDiv, children: tree }) });
+  const observedTree = /* @__PURE__ */ jsx2(ElementObserverContext.Provider, { value: { mountedElements }, children: useWrapperDiv == null || useWrapperDiv === true ? /* @__PURE__ */ jsx2(Observer, { selector, useWrapperDiv: true, children: tree }) : /* @__PURE__ */ jsx2(Observer, { selector, useWrapperDiv: false, children: tree }) });
   return [mountedElements, observedTree];
 }
 export {

package/package.json

@@ -1,65 +1,68 @@
 {
   "name": "@altano/use-element-observer",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Intersection-Observer-based Scroll Spy React Hook",
-  "type": "module",
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/altano/npm-packages",
+    "directory": "packages/use-element-observer"
+  },
+  "license": "ISC",
+  "author": {
+    "name": "Alan Norbauer",
+    "email": "altano@gmail.com",
+    "url": "https://alan.norbauer.com"
+  },
   "sideEffects": false,
+  "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**/*.js",
     "dist/**/*.d.ts"
   ],
-  "author": {
-    "name": "Alan Norbauer",
-    "email": "altano@gmail.com",
-    "url": "https://alan.norbauer.com"
-  },
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/altano/npm-packages",
-    "directory": "packages/use-element-observer"
-  },
-  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
   "dependencies": {
     "@uidotdev/usehooks": "^2.4.1"
   },
-  "peerDependencies": {
-    "react": "^18"
-  },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.4.0",
-    "eslint": "^8.57.0",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "typescript": "^5.4.2",
-    "vitest": "^1.4.0",
+    "@arethetypeswrong/cli": "^0.17.4",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@vitest/coverage-v8": "^3.1.1",
+    "depcheck": "^1.4.7",
+    "eslint": "^9.23.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.4",
+    "vitest": "^3.1.1",
+    "@altano/build-config": "0.0.0",
     "@altano/tsconfig": "0.0.0",
-    "eslint-config-altano": "0.0.0"
+    "@altano/testing": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "19.x.x"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "tsup --config build-config/tsup.config.browser.ts",
-    "build:types": "tsc --project tsconfig.declarations.json",
+    "check:exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+    "check:types:src": "tsc --noEmit",
+    "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
+    "check:unused-dependencies": "depcheck",
     "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
     "dev": "pnpm run build --watch",
     "format": "prettier --check src",
     "format:fix": "prettier --write src",
-    "lint": "eslint package.json src/**/*.ts*",
+    "lint": "eslint",
     "lint:fix": "TIMING=1 pnpm lint --fix",
     "lint:timing": "TIMING=1 pnpm lint",
     "test:unit": "vitest --run",
-    "test:unit:watch": "vitest",
-    "typecheck:src": "tsc --noEmit",
-    "typecheck:test": "tsc --noEmit --project ./tests/tsconfig.json"
+    "test:unit:watch": "vitest"
   }
 }

package/dist/Observer.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export declare function Observer({ children, selector, useWrapperDiv, }: {
-    children: React.ReactNode;
-    selector: string;
-    useWrapperDiv: boolean;
-}): React.ReactElement;
-//# sourceMappingURL=Observer.d.ts.map

package/dist/useElementObserver.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-interface Context {
-    mountedElements: Set<Element>;
-}
-export declare const ElementObserverContext: React.Context<Context | null>;
-export interface Options {
-    selector: string;
-    tree: React.ReactNode;
-    useWrapperDiv?: boolean;
-}
-/**
- * Allows observing mount/unmount of elements that match a given selector in the
- * given React tree. Tree must be static: only the mounting of the tree itself
- * is monitored. If the tree's DOM is dynamically changed those mounts and
- * unmounts will not be detected.
- *
- * @param tree The React tree to observe.
- * @param onMount The callback that will be passed any elements in the tree that
- * match the given selector, as they mount.
- * @param onUnmount The callback that will be passed any elements in the tree
- * that match the given selector, as they unmount.
- * @param selector The css selector used to select which elements are observed.
- * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
- * `false`, `children` must be a single child element that can take a ref (which
- * will be overwritten).
- * @returns A tuple of: (1) set of elements and (2) the observed tree to be
- * rendered.
- */
-export declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
-export {};
-//# sourceMappingURL=useElementObserver.d.ts.map

package/dist/useMountRef.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface Callbacks<T> {
-    onMount: (e: T) => void;
-    onUnmount: (e: T) => void;
-}
-export declare function useMountRef<T>({ onMount, onUnmount, }: Callbacks<T>): React.Ref<T>;
-//# sourceMappingURL=useMountRef.d.ts.map