h2o-library 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -20,6 +20,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
+## [2.1.1] — 2026-06-23
+
+### Changed
+
+- **React 19 compatibility** — Hooks that accept an element ref now type the argument as `RefObject<T | null>` to match React 19, where `useRef<T>(null)` returns `RefObject<T | null>`. Updated `useClickOutside` and `useDropdownPosition`; `useFocusTrap` and `useEventListener` already used the nullable form. Type-only change — no runtime behavior difference, and existing React 18 callers remain compatible.
+
+---
+
 ## [2.1.0] — 2026-06-22
 
 ### Added

package/dist/charts/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/charts/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/esm/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/esm/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/hooks/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/hooks/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/types/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/types/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/utils/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/utils/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "h2o-library",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A set of components for H2O Apps development",
   "main": "dist/index.cjs.js",
   "module": "dist/esm/index.js",
@@ -59,8 +59,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",