reshaped 3.1.1 → 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/_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,7 +3,7 @@ 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 = {
         ref: triggerElRef,
     };
@@ -13,6 +13,7 @@ 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") {

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