reshaped 2.10.17 → 2.10.19

package/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}.row{border-top:2px solid transparent}[dir=rtl] .control{transform:scaleX(-1)}.cell-button{padding:var(--rs-unit-x2);text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:border-radius,background-color,box-shadow}.cell-button[disabled],.cell-button[disabled]:hover{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}.cell{padding:0}.cell .cell-button:hover,.cell--in-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell--active-end .cell-button,.cell--active-end:hover .cell-button,.cell--active-start .cell-button,.cell--active-start:hover .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell--active-start .cell-button,.cell:first-child .cell-button{border-end-start-radius:var(--rs-unit-radius-small);border-start-start-radius:var(--rs-unit-radius-small)}.cell--active-end .cell-button,.cell--active-start+.cell:hover:not(.cell--in-range) .cell-button,.cell--in-range+.cell:hover:not(.cell--in-range) .cell-button,.cell:last-child .cell-button{border-end-end-radius:var(--rs-unit-radius-small);border-start-end-radius:var(--rs-unit-radius-small)}.cell--active-single+.cell:hover .cell-button,.cell:hover:not(.cell--in-range,.cell--in-range+.cell:hover,.cell--active-start+.cell:hover) .cell-button{border-radius:var(--rs-unit-radius-small)}
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}.row{border-top:2px solid transparent}[dir=rtl] .control{transform:scaleX(-1)}.cell-button{padding:var(--rs-unit-x2);text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:border-radius,background-color,box-shadow,color}.cell-button[disabled],.cell-button[disabled]:hover{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}.cell{padding:0}.cell .cell-button:hover,.cell--in-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell--active-end .cell-button,.cell--active-end:hover .cell-button,.cell--active-start .cell-button,.cell--active-start:hover .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell--active-start .cell-button,.cell:first-child .cell-button{border-end-start-radius:var(--rs-unit-radius-small);border-start-start-radius:var(--rs-unit-radius-small)}.cell--active-end .cell-button,.cell--active-start+.cell:hover:not(.cell--in-range) .cell-button,.cell--in-range+.cell:hover:not(.cell--in-range) .cell-button,.cell:last-child .cell-button{border-end-end-radius:var(--rs-unit-radius-small);border-start-end-radius:var(--rs-unit-radius-small)}.cell--active-single+.cell:hover .cell-button,.cell:hover:not(.cell--in-range,.cell--in-range+.cell:hover,.cell--active-start+.cell:hover) .cell-button{border-radius:var(--rs-unit-radius-small)}

package/components/Modal/Modal.js

@@ -67,13 +67,17 @@ const Modal = (props) => {
         setDragDistance(0);
     };
     const handleDragStart = (e) => {
-        const el = e.target;
-        // Prioritize scrolling over modal swiping
-        if (el.scrollTop !== 0 || el.scrollLeft !== 0)
-            return;
-        // Start dragging only when starting on static elements
-        if (el.matches("input,textarea"))
-            return;
+        let currentEl = e.target;
+        const rootEl = rootRef.current;
+        while (currentEl && (currentEl === rootEl || (rootEl === null || rootEl === void 0 ? void 0 : rootEl.contains(currentEl)))) {
+            // Prioritize scrolling over modal swiping
+            if (currentEl.scrollTop !== 0 || currentEl.scrollLeft !== 0)
+                return;
+            // Start dragging only when starting on static elements
+            if (currentEl.matches("input,textarea"))
+                return;
+            currentEl = currentEl ? currentEl.parentElement : null;
+        }
         // Prevent the drag handling when browser tab swiping is triggering
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;

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

@@ -108,7 +108,8 @@ export const overlay = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const edgeCases = () => {
-    const { active, activate, deactivate } = useToggle();
+    const menuModalToggle = useToggle();
+    const scrollModalToggle = useToggle();
     return (<Example>
 			<Example.Item title="trap focus works with custom children components">
 				<Demo title="Modal title">
@@ -118,6 +119,16 @@ export const edgeCases = () => {
 					</View>
 				</Demo>
 			</Example.Item>
+			<Example.Item title="scrollable area in modal ignores swipe-to-close">
+				<View gap={3} direction="row">
+					<Button onClick={scrollModalToggle.activate}>Open</Button>
+					<Modal active={scrollModalToggle.active} onClose={scrollModalToggle.deactivate} size="300px" position="bottom">
+						<View height="1000px" backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+							Content
+						</View>
+					</Modal>
+				</View>
+			</Example.Item>
 			<Example.Item title={[
             "trap focus works correctly when it was already trapped",
             "focus return back to the dropdown trigger on modal close",
@@ -128,11 +139,11 @@ export const edgeCases = () => {
 						{(attributes) => <Button attributes={attributes}>Open menu</Button>}
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content>
-						<DropdownMenu.Item onClick={activate}>Open dialog</DropdownMenu.Item>
+						<DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>
 						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
 					</DropdownMenu.Content>
 				</DropdownMenu>
-				<Modal active={active} onClose={deactivate}>
+				<Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>
 					<View gap={3}>
 						<DropdownMenu>
 							<DropdownMenu.Trigger>
@@ -143,7 +154,7 @@ export const edgeCases = () => {
 								<DropdownMenu.Item>Item 2</DropdownMenu.Item>
 							</DropdownMenu.Content>
 						</DropdownMenu>
-						<Button onClick={deactivate}>Close</Button>
+						<Button onClick={menuModalToggle.deactivate}>Close</Button>
 					</View>
 				</Modal>
 			</Example.Item>

package/components/PinField/PinFieldControlled.js

@@ -156,8 +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: charPattern === "numeric" ? "numeric" : undefined, pattern: `${pattern}{${valueLength}}` }))] }));
 };
 export default PinFieldControlled;

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