reshaped 2.11.0 → 2.11.1

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