reshaped 2.10.19 → 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/PinField.types.d.ts

@@ -3,7 +3,7 @@ export type Size = "medium" | "large" | "xlarge";
 type BaseProps = {
     name: string;
     valueLength?: number;
-    charPattern?: "alphabetic" | "numeric" | "alphanumeric";
+    pattern?: "alphabetic" | "numeric" | "alphanumeric";
     size?: G.Responsive<Size>;
     variant?: "outline" | "faded";
     onChange?: G.ChangeHandler<string>;

package/components/PinField/PinFieldControlled.js

@@ -21,8 +21,8 @@ const patternMap = {
     alphanumeric: regExpAlphaNumericChar,
 };
 const PinFieldControlled = (props) => {
-    const { valueLength = 4, value, onChange, name, charPattern = "numeric", size = "medium", variant = "outline", className, attributes, inputAttributes, } = props;
-    const pattern = patternMap[charPattern];
+    const { valueLength = 4, value, onChange, name, pattern = "numeric", size = "medium", variant = "outline", className, attributes, inputAttributes, } = props;
+    const patternRegexp = patternMap[pattern];
     const responsiveInputSize = responsivePropDependency(size, (value) => sizeMap[value]);
     const responsiveTextVariant = responsivePropDependency(size, (value) => value === "medium" ? "body-3" : "body-2");
     const responsiveRadius = responsivePropDependency(size, (value) => value === "xlarge" ? "medium" : "small");
@@ -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
      */
@@ -117,7 +117,7 @@ const PinFieldControlled = (props) => {
     const handleInput = (event) => {
         const el = event.target;
         const nextValue = el.value;
-        const matcher = new RegExp(`^${pattern}+$`);
+        const matcher = new RegExp(`^${patternRegexp}+$`);
         if (nextValue && !nextValue.match(matcher))
             return;
         if (el.selectionStart === null)
@@ -156,6 +156,6 @@ const PinFieldControlled = (props) => {
                 },
             }, children: value[i] && _jsx(Text, { variant: responsiveTextVariant, children: value[i] }) }, i));
     }
-    return (_jsxs(View, { gap: 2, direction: "row", className: [s.root, className], attributes: attributes, children: [nodes, _jsx("input", Object.assign({}, inputAttributes, formControl.attributes, { type: "text", className: s.input, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onInput: handleInput, value: value, name: name, maxLength: valueLength, ref: inputRef, autoComplete: (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.autoComplete) || "one-time-code", inputMode: charPattern === "numeric" ? "numeric" : undefined, pattern: `${pattern}{${valueLength}}` }))] }));
+    return (_jsxs(View, { gap: 2, direction: "row", className: [s.root, className], attributes: attributes, children: [nodes, _jsx("input", Object.assign({}, inputAttributes, formControl.attributes, { type: "text", className: s.input, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onInput: handleInput, value: value, name: name, maxLength: valueLength, ref: inputRef, autoComplete: (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.autoComplete) || "one-time-code", inputMode: pattern === "numeric" ? "numeric" : undefined, pattern: `${patternRegexp}{${valueLength}}` }))] }));
 };
 export default PinFieldControlled;

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">
@@ -28,11 +28,11 @@ export const base = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" charPattern="alphabetic"/>
+			<PinField name="pin5" defaultValue="ab" pattern="alphabetic"/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" charPattern="alphanumeric"/>
+			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric"/>
 		</Example.Item>
 	</Example>);
 export const variant = () => (<Example>

package/components/View/View.js

@@ -129,6 +129,8 @@ const View = (props) => {
         }
         if (child.type === React.Fragment) {
             return child.props.children.map((child) => {
+                if (!child)
+                    return null;
                 const index = renderedIndex;
                 renderedItemIndex += 1;
                 return renderItem({ child, index });

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