reshaped 3.1.0 → 3.1.2

package/dist/components/Modal/Modal.js

@@ -40,7 +40,7 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, overlayClassName, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
@@ -165,7 +165,7 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
             const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));

package/dist/components/Modal/Modal.types.d.ts

@@ -20,7 +20,9 @@ export type Props = {
     size?: G.Responsive<string>;
     padding?: G.Responsive<number>;
     transparentOverlay?: boolean;
+    blurredOverlay?: boolean;
     disableSwipeGesture?: boolean;
+    disableCloseOnOutsideClick?: boolean;
     autoFocus?: boolean;
     ariaLabel?: string;
     className?: G.ClassName;

package/dist/components/Modal/tests/Modal.stories.d.ts

@@ -19,5 +19,6 @@ export declare const size: () => React.JSX.Element;
 export declare const padding: () => React.JSX.Element;
 export declare const composition: () => React.JSX.Element;
 export declare const overlay: () => React.JSX.Element;
+export declare const flags: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;
 export declare const trapFocusEdgeCases: () => React.JSX.Element;

package/dist/components/Modal/tests/Modal.stories.js

@@ -97,9 +97,19 @@ export const composition = () => (<Example>
 export const overlay = () => (<Example>
 		<Example.Item title="transparentOverlay, doesn't lock scroll">
 			<Demo transparentOverlay/>
-			<View height="1000px"/>
 		</Example.Item>
+		<Example.Item title="blurredOverlay">
+			<Demo blurredOverlay/>
+		</Example.Item>
+		<View height="1000px"/>
 	</Example>);
+export const flags = () => {
+    return (<Example>
+			<Example.Item title="disableCloseOnOutsideClick">
+				<Demo disableCloseOnOutsideClick/>
+			</Example.Item>
+		</Example>);
+};
 export const edgeCases = () => {
     const menuModalToggle = useToggle();
     const scrollModalToggle = useToggle();

package/dist/components/Overlay/Overlay.js

@@ -13,7 +13,7 @@ import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
-    const { active, children, transparent, onClose, onOpen, className, attributes } = props;
+    const { active, children, transparent, blurred, onClose, onOpen, disableCloseOnClick, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
     const clickThrough = transparent === true;
@@ -26,7 +26,7 @@ const Overlay = (props) => {
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     const isDismissible = useIsDismissible(active, contentRef);
-    const rootClassNames = classNames(s.root, visible && s["--visible"], clickThrough && s["--click-through"], animated && s["--animated"], className);
+    const rootClassNames = classNames(s.root, visible && s["--visible"], clickThrough && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], className);
     const isInsideChild = (el) => {
         if (!contentRef.current)
             return;
@@ -46,7 +46,7 @@ const Overlay = (props) => {
     const handleMouseUp = (event) => {
         const isMouseUpValid = !isInsideChild(event.target);
         const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !clickThrough;
-        if (!shouldClose)
+        if (!shouldClose || disableCloseOnClick)
             return;
         close();
     };

package/dist/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;inset:0;opacity:0;position:fixed;z-index:var(--rs-z-index-overlay)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,transform,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}
+.root{overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;inset:-1px;opacity:0;outline:none;position:fixed;z-index:var(--rs-z-index-overlay)}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,transform,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}

package/dist/components/Overlay/Overlay.types.d.ts

@@ -2,12 +2,14 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     transparent?: boolean | number;
+    blurred?: boolean;
     children?: React.ReactNode | ((props: {
         active: boolean;
     }) => React.ReactNode);
     active?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
+    disableCloseOnClick?: boolean;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Overlay/tests/Overlay.stories.js

@@ -14,15 +14,15 @@ export default {
     },
 };
 export const base = () => {
-    const baseToggle = useToggle(true);
+    const baseToggle = useToggle(false);
     const transparentToggle = useToggle(false);
+    const blurredToggle = useToggle(false);
     return (<Example>
 			<Example.Item title="locks scroll">
 				<Button onClick={() => baseToggle.activate()}>Open overlay</Button>
 				<Overlay active={baseToggle.active} onClose={() => baseToggle.deactivate()}>
 					Overlay content
 				</Overlay>
-				<div style={{ height: 1000 }}/>
 			</Example.Item>
 
 			<Example.Item title="transparent, doesn't lock scroll">
@@ -30,8 +30,16 @@ export const base = () => {
 				<Overlay active={transparentToggle.active} onClose={() => transparentToggle.deactivate()} transparent>
 					Overlay content
 				</Overlay>
-				<div style={{ height: 1000 }}/>
 			</Example.Item>
+
+			<Example.Item title="blurred">
+				<Button onClick={() => blurredToggle.activate()}>Open overlay</Button>
+				<Overlay active={blurredToggle.active} onClose={() => blurredToggle.deactivate()} blurred>
+					Overlay content
+				</Overlay>
+			</Example.Item>
+
+			<div style={{ height: 1000 }}/>
 		</Example>);
 };
 class CustomElement extends window.HTMLElement {

package/dist/components/Resizable/tests/Resizable.stories.js

@@ -54,5 +54,6 @@ export const base = () => (<Example>
 					</Resizable>
 				</Resizable.Item>
 			</Resizable>
+			<div style={{ height: 2000 }}/>
 		</Example.Item>
 	</Example>);

package/dist/components/Tooltip/tests/Tooltip.stories.js

@@ -123,33 +123,34 @@ export const edgeCases = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title="nested popovers inside a tooltip">
-			<Tooltip position="top" text="Hello">
-				{(tooltipAttributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(attributes) => (<Button color="primary" attributes={{
-                ...tooltipAttributes,
-                ...attributes,
-            }}>
-									Open
-								</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>
-							<View gap={2} align="start">
-								Popover content
-								<Popover position="bottom">
-									<Popover.Trigger>
-										{(attributes) => <Button attributes={attributes}>Open</Button>}
-									</Popover.Trigger>
-									<Popover.Content>
-										<View gap={2} align="start">
-											Popover content
-											<Button onClick={() => { }}>Button</Button>
-										</View>
-									</Popover.Content>
-								</Popover>
-							</View>
-						</Popover.Content>
-					</Popover>)}
-			</Tooltip>
+			<View direction="row" gap={2}>
+				<Tooltip position="top" text="Hello">
+					{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+							<Popover.Trigger>
+								{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
+										Tooltip with popover
+									</Button>)}
+							</Popover.Trigger>
+							<Popover.Content>
+								<View gap={2} align="center" direction="row" justify="space-between">
+									Popover content
+									<Popover position="bottom" width="300px">
+										<Popover.Trigger>
+											{(attributes) => <Button attributes={attributes}>Open</Button>}
+										</Popover.Trigger>
+										<Popover.Content>
+											<Popover.Dismissible align="center" closeAriaLabel="Close">
+												Another popover content
+											</Popover.Dismissible>
+										</Popover.Content>
+									</Popover>
+								</View>
+							</Popover.Content>
+						</Popover>)}
+				</Tooltip>
+				<Tooltip position="top" text="Hello">
+					{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
+				</Tooltip>
+			</View>
 		</Example.Item>
 	</Example>);

package/dist/components/_private/Flyout/Flyout.constants.d.ts

@@ -1,3 +1,3 @@
 export declare const mouseEnter = 800;
-export declare const mouseEnterShort = 50;
+export declare const mouseEnterShort = 100;
 export declare const mouseLeave = 150;

package/dist/components/_private/Flyout/Flyout.constants.js

@@ -1,3 +1,3 @@
 export const mouseEnter = 800;
-export const mouseEnterShort = 50;
+export const mouseEnterShort = 100;
 export const mouseLeave = 150;

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

@@ -52,6 +52,7 @@ export type TriggerAttributes = {
     onFocus?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
+    onTouchStart?: () => void;
     onClick?: () => void;
     "aria-describedby"?: string;
     "aria-haspopup"?: "dialog" | "menu" | "listbox";
@@ -111,6 +112,7 @@ export type ContextProps = {
     handleClick: () => void;
     handleBlur: (e: React.FocusEvent) => void;
     handleFocus: () => void;
+    handleTouchStart: () => void;
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -38,9 +38,16 @@ const FlyoutRoot = (props) => {
     const timerRef = React.useRef();
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
+    // Check if transition had enough time to start when opening a flyout
+    // In some cases there is not enough time to start, like when you're holding tab key
     const transitionStartedRef = React.useRef(false);
+    // Lock blur event while pressing anywhere inside the flyout content
     const lockedBlurEffects = React.useRef(false);
+    // Focus shouldn't retrun back to the trigger when user intentionally clicks outside the flyout
     const shouldReturnFocusRef = React.useRef(true);
+    // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
+    // So we're saving a flag on touch start and then change the mouse enter behavior
+    const hoverTriggeredWithTouchEventRef = React.useRef(false);
     const flyout = useFlyout(triggerElRef, flyoutElRef, {
         width,
         position: passedPosition,
@@ -92,6 +99,11 @@ const FlyoutRoot = (props) => {
         }
         handleClose();
     }, [handleClose, triggerType, trapFocusMode]);
+    const handleTouchStart = React.useCallback(() => {
+        if (triggerType !== "hover")
+            return;
+        hoverTriggeredWithTouchEventRef.current = true;
+    }, [triggerType]);
     const handleFocus = React.useCallback(() => {
         if (triggerType === "hover" && !checkKeyboardMode())
             return;
@@ -99,9 +111,15 @@ const FlyoutRoot = (props) => {
     }, [handleOpen, triggerType]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
-        timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
-        if (!isSubmenu && triggerType === "hover")
-            cooldown.warm();
+        if (hoverTriggeredWithTouchEventRef.current) {
+            handleOpen();
+            hoverTriggeredWithTouchEventRef.current = false;
+        }
+        else {
+            timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
+            if (!isSubmenu && triggerType === "hover")
+                cooldown.warm();
+        }
     }, [clearTimer, timerRef, handleOpen, isSubmenu, triggerType]);
     const handleMouseLeave = React.useCallback(() => {
         cooldown.cool();
@@ -116,8 +134,13 @@ const FlyoutRoot = (props) => {
             handleClose();
         }
     }, [status, handleOpen, handleClose]);
-    const handleContentMouseDown = () => (lockedBlurEffects.current = true);
-    const handleContentMouseUp = () => (lockedBlurEffects.current = false);
+    const handleContentMouseDown = () => {
+        lockedBlurEffects.current = true;
+        hoverTriggeredWithTouchEventRef.current = true;
+    };
+    const handleContentMouseUp = () => {
+        lockedBlurEffects.current = false;
+    };
     const handleTransitionStart = React.useCallback((e) => {
         if (!resolvedActive)
             return;
@@ -251,6 +274,7 @@ const FlyoutRoot = (props) => {
             handleBlur,
             handleMouseEnter,
             handleMouseLeave,
+            handleTouchStart,
             handleTransitionStart,
             handleTransitionEnd,
             handleClick: handleTriggerClick,

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -3,9 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
     let childrenAttributes = {
-        onBlur: handleBlur,
         ref: triggerElRef,
     };
     if (triggerType === "click" || trapFocusMode === "action-menu") {
@@ -14,10 +13,12 @@ const FlyoutTrigger = (props) => {
     if (triggerType === "hover") {
         childrenAttributes.onMouseEnter = handleMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
+        childrenAttributes.onTouchStart = handleTouchStart;
     }
     // Submenus open on keypress instead of hover
     if ((triggerType === "hover" && !isSubmenu) || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
+        childrenAttributes.onBlur = handleBlur;
         childrenAttributes["aria-describedby"] = id;
     }
     if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -86,6 +86,7 @@ export class HotkeyStore {
                     const resolvedEvent = pressedMap[pressedId];
                     if (data.options.preventDefault) {
                         resolvedEvent?.preventDefault();
+                        e.preventDefault();
                     }
                     data.callback(resolvedEvent);
                 });

package/dist/hooks/useDrag.js

@@ -42,6 +42,7 @@ const useDrag = (cb, options) => {
         [keys.DOWN]: () => isVertical && handleKeyboard(0, 20),
     }, [], {
         ref: triggerRef,
+        preventDefault: true,
         disabled,
     });
     React.useEffect(() => {

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.1.0",
+	"version": "3.1.2",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",