reshaped 3.3.9 → 3.3.11

package/dist/components/_private/Portal/Portal.types.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 export type Props = {
     children?: React.ReactNode;
-    targetRef?: React.RefObject<HTMLElement | ShadowRoot>;
+    targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;
 };
 export type ScopeProps<T extends HTMLElement> = {
-    children: (ref: React.RefObject<T>) => React.ReactNode;
+    children: (ref: React.RefObject<T | null>) => React.ReactNode;
 };
 export type Context = {
-    scopeRef: React.RefObject<HTMLElement>;
+    scopeRef: React.RefObject<HTMLElement | null>;
 };

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -3,6 +3,11 @@
  * Example: Use to only close the latest opened Flyout/Modal
  */
 import React from "react";
-type Ref = React.RefObject<HTMLElement>;
-declare const useIsDismissible: (active: boolean | undefined, contentRef: Ref, triggerRef?: Ref) => () => boolean;
+type Ref = React.RefObject<HTMLElement | null>;
+declare const useIsDismissible: (args: {
+    active?: boolean;
+    contentRef: Ref;
+    triggerRef?: Ref;
+    blocking?: boolean;
+}) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -21,11 +21,14 @@ const addToQueue = (id, contentRef, triggerRef) => {
     queue[id] = { parentId: latestId, triggerRef, contentRef };
     latestId = id;
 };
-const useIsDismissible = (active = false, contentRef, triggerRef) => {
+const useIsDismissible = (args) => {
+    const { active, contentRef, triggerRef, blocking } = args;
     const id = useElementId();
     const isDismissible = React.useCallback(() => {
+        if (!blocking)
+            return true;
         return active ? latestId === id : true;
-    }, [id, active]);
+    }, [id, active, blocking]);
     React.useEffect(() => {
         if (!active)
             return;

package/dist/hooks/_private/useOnClickOutside.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement>[], handler: (event: Event) => void, deps: any[]) => void;
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, deps: any[]) => void;
 export default useOnClickOutside;

package/dist/hooks/useDrag.d.ts

@@ -7,11 +7,11 @@ export type UseDragCallbackArgs = {
 };
 declare const useDrag: <TriggerElement extends HTMLElement = HTMLButtonElement, ContainerElement extends HTMLElement = HTMLDivElement>(cb: (args: UseDragCallbackArgs) => void, options?: {
     disabled?: boolean;
-    containerRef?: React.RefObject<ContainerElement>;
+    containerRef?: React.RefObject<ContainerElement | null>;
     orientation?: "horizontal" | "vertical" | "all";
 }) => {
-    ref: React.RefObject<TriggerElement>;
-    containerRef: React.RefObject<ContainerElement>;
+    ref: React.RefObject<TriggerElement | null>;
+    containerRef: React.RefObject<ContainerElement | null>;
     active: boolean;
 };
 export default useDrag;

package/dist/hooks/useHotkeys.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { type Hotkeys } from "./_private/useSingletonHotkeys";
 declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
-    ref?: React.RefObject<Element>;
+    ref?: React.RefObject<Element | null>;
     disabled?: boolean;
     preventDefault?: boolean;
 }) => {
-    ref: React.RefObject<Element>;
+    ref: React.RefObject<Element | null>;
     checkHotkeyState: (key: string) => boolean;
 };
 export default useHotkeys;

package/dist/hooks/useHotkeys.js

@@ -8,7 +8,11 @@ const useHotkeys = (hotkeys, deps = [], options) => {
     React.useEffect(() => {
         if (options?.disabled)
             return;
-        const remove = addHotkeys(hotkeys, elementRef, { preventDefault: options?.preventDefault });
+        if (!elementRef.current)
+            return;
+        const remove = addHotkeys(hotkeys, elementRef, {
+            preventDefault: options?.preventDefault,
+        });
         return () => remove?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [

package/dist/hooks/useScrollLock.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 declare const useScrollLock: (props?: {
-    containerRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
 }) => {
     scrollLocked: boolean;
     lockScroll: () => void;

package/dist/types/global.d.ts

@@ -4,7 +4,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
 export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
 type DataAttributes = {} | Record<`data-${string}`, string | boolean>;
-export type Attributes<TagName extends keyof JSX.IntrinsicElements = "div"> = JSX.IntrinsicElements[TagName] & DataAttributes & {
+export type Attributes<TagName extends keyof React.JSX.IntrinsicElements = "div"> = React.JSX.IntrinsicElements[TagName] & DataAttributes & {
     style?: StyleAttribute;
 };
 export type Viewport = "s" | "m" | "l" | "xl";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.3.9",
+	"version": "3.3.11",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -155,8 +155,8 @@
 	},
 	"peerDependencies": {
 		"postcss": "^8",
-		"react": "^18",
-		"react-dom": "^18"
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"dependencies": {
 		"@csstools/postcss-global-data": "3.0.0",