reshaped 2.11.0 → 2.11.2

package/components/Actionable/Actionable.js

@@ -45,10 +45,10 @@ const Actionable = forwardRef((props, ref) => {
         const isEnter = event.key === keys.ENTER;
         if (!isSpace && !isEnter)
             return;
-        if (!renderedAsButton && hasClickHandler) {
-            event.preventDefault();
-            handlePress(event);
-        }
+        if (rootAttributes.role !== "button")
+            return;
+        event.preventDefault();
+        handlePress(event);
     };
     return (_jsx(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children })));
 });

package/components/Actionable/tests/Actionable.stories.js

@@ -62,7 +62,7 @@ export const focusRing = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const edgeCases = () => (<Example>
-		<Example.Item title="insetFocus">
+		<Example.Item title="form submit">
 			<form onSubmit={(e) => {
         e.preventDefault();
         alert("Submitted");

package/components/MenuItem/tests/MenuItem.stories.js

@@ -14,7 +14,7 @@ export default {
 };
 export const size = () => (<Example>
 		<Example.Item title="size: small">
-			<MenuItem size="small" icon={IconZap} href="#">
+			<MenuItem size="small" icon={IconZap} onClick={() => { }}>
 				Menu item
 			</MenuItem>
 		</Example.Item>

package/components/PinField/PinFieldControlled.js

@@ -57,8 +57,8 @@ const PinFieldControlled = (props) => {
             el.selectionStart = nextSelectionStart;
             el.selectionEnd = nextSelectionStart + 1;
         }
-        setFocusedIndex(el.selectionStart);
-    }, []);
+        setFocusedIndex(Math.min(el.selectionStart, valueLength - 1));
+    }, [valueLength]);
     /**
      * Using onNextFrame here to wait for the native behavior first
      */

package/components/PinField/tests/PinField.stories.js

@@ -15,8 +15,8 @@ export const base = () => (<Example>
 			<PinField name="pin"/>
 		</Example.Item>
 
-		<Example.Item title="defaultValue: 12">
-			<PinField name="pin2" defaultValue="12"/>
+		<Example.Item title="defaultValue: 1234">
+			<PinField name="pin2" defaultValue="1234"/>
 		</Example.Item>
 
 		<Example.Item title="value: 12">

package/components/_private/Expandable/Expandable.js

@@ -7,17 +7,21 @@ import { onNextFrame } from "../../../utilities/animation.js";
 const Expandable = (props) => {
     const { children, active, attributes } = props;
     const [animated, setAnimated] = React.useState(false);
-    const rootClassNames = classNames(s.root, active && s["--active"]);
+    const rootClassNames = classNames(s.root, active && animated && s["--active"], !active && !animated && s["--hidden"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;
+        if (active)
+            return;
         onNextFrame(() => {
             setAnimated(false);
         });
     };
     React.useEffect(() => {
-        setAnimated(active || false);
+        if (!active)
+            return;
+        setAnimated(active);
     }, [active]);
-    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && !animated, children: _jsx("div", { className: s.inner, children: children }) })));
+    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active, children: _jsx("div", { className: s.inner, children: children }) })));
 };
 export default Expandable;

package/components/_private/Expandable/Expandable.module.css

@@ -1 +1 @@
-.root{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rs-duration-slow) var(--rs-easing-standard)}.--active{grid-template-rows:1fr}.inner{overflow:hidden}
+.root{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rs-duration-slow) var(--rs-easing-standard)}.--active{grid-template-rows:1fr}.--hidden{display:none}.inner{overflow:hidden}

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

@@ -71,6 +71,7 @@ export type ContextProps = {
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
     handleTransitionEnd: (e: React.TransitionEvent) => void;
+    handleTransitionStart: (e: TransitionEvent) => void;
     handleClick: () => void;
     handleBlur: (e: React.FocusEvent) => void;
     handleFocus: () => void;

package/components/_private/Flyout/FlyoutContent.js

@@ -9,12 +9,22 @@ import { useFlyoutContext } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
+    /**
+     * transitionStart doesn't exist as a jsx event handler and needs to be handled with vanilla js
+     */
+    React.useEffect(() => {
+        const el = flyoutElRef.current;
+        if (!el)
+            return;
+        el.addEventListener("transitionstart", handleTransitionStart);
+        return () => el.removeEventListener("transitionstart", handleTransitionStart);
+    }, [handleTransitionStart, flyoutElRef, status]);
     if (status === "idle" || !mounted)
         return null;
     const contentClassNames = classNames(s.content, status === "visible" && s["--visible"], 

package/components/_private/Flyout/FlyoutControlled.js

@@ -22,6 +22,7 @@ const FlyoutRoot = (props) => {
     const timerRef = React.useRef();
     const trapFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
+    const transitionStartedRef = React.useRef(false);
     const lockedBlurEffects = React.useRef(false);
     const shouldReturnFocusRef = React.useRef(true);
     const flyout = useFlyout(triggerElRef, flyoutElRef, {
@@ -108,19 +109,33 @@ const FlyoutRoot = (props) => {
             render();
             return;
         }
-        if (checkTransitions() && !disableHideAnimation) {
+        /**
+         * Check that transitions are enabled and it has been triggered on tooltip open
+         * (keyboard focus navigation could move too fast and ignore the transitions completely)
+         */
+        if (checkTransitions() && !disableHideAnimation && transitionStartedRef.current) {
             hide();
-            // In case transitions are disabled globally - remove from the DOM immediately
         }
         else {
+            // In case transitions are disabled globally - remove from the DOM immediately
             remove();
         }
     }, [passedActive, render, hide, disableHideAnimation]);
+    const handleTransitionStart = React.useCallback((e) => {
+        if (!passedActive)
+            return;
+        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
+            return;
+        console.log("fofoo");
+        transitionStartedRef.current = true;
+    }, [passedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
             return;
-        if (status === "hidden")
+        if (status === "hidden") {
+            transitionStartedRef.current = false;
             remove();
+        }
     }, [remove, status]);
     /**
      * Handle focus trap
@@ -203,6 +218,7 @@ const FlyoutRoot = (props) => {
             handleBlur,
             handleMouseEnter,
             handleMouseLeave,
+            handleTransitionStart,
             handleTransitionEnd,
             handleClick: handleTriggerClick,
             handleContentMouseDown,

package/hooks/_private/useFlyout.js

@@ -212,9 +212,10 @@ const flyoutReducer = (state, action) => {
         case "position":
             return Object.assign(Object.assign({}, state), { status: state.status === "visible" ? "visible" : "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
         case "show":
-            return Object.assign(Object.assign({}, state), { status: "visible" });
+            return state.status === "positioned"
+                ? Object.assign(Object.assign({}, state), { status: "visible" }) : Object.assign(Object.assign({}, state), { status: "idle" });
         case "hide":
-            return Object.assign(Object.assign({}, state), { status: state.status === "idle" ? "idle" : "hidden" });
+            return Object.assign(Object.assign({}, state), { status: state.status === "idle" || state.status === "hidden" ? "idle" : "hidden" });
         case "remove":
             return Object.assign(Object.assign({}, state), { status: "idle", styles: resetStyles });
         default:

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