reshaped 4.0.1 → 4.0.3

package/dist/components/Flyout/FlyoutContent.js

@@ -48,7 +48,7 @@ const FlyoutContent = (props) => {
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
                 "--rs-flyout-z-index": contentZIndex,
-            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(ScrollArea, { scrollableAttributes: scrollableAttributes, scrollableClassName: scrollableClassName, children: children }) }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(ScrollArea, { overscrollBehavior: "contain", scrollableAttributes: scrollableAttributes, scrollableClassName: scrollableClassName, children: children }) }) }) }));
     return (_jsx(Portal, { targetRef: shadowRootRef.current ? shadowRootRef : undefined, colorMode: colorMode, children: content }));
 };
 FlyoutContent.displayName = "Flyout.Content";

package/dist/components/ScrollArea/ScrollArea.js

@@ -65,7 +65,7 @@ const ScrollAreaBar = (props) => {
         }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
 };
 const ScrollArea = forwardRef((props, ref) => {
-    const { children, height, maxHeight, scrollbarDisplay = "hover", onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
+    const { children, height, maxHeight, scrollbarDisplay = "hover", overscrollBehavior = "auto", onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const scrollableRef = React.useRef(null);
@@ -73,7 +73,7 @@ const ScrollArea = forwardRef((props, ref) => {
     const rootRef = React.useRef(null);
     const mixinStyles = resolveMixin({ height, maxHeight });
     const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], className);
-    const scrollableClassNames = classNames(s.scrollable, mixinStyles.classNames);
+    const scrollableClassNames = classNames(s.scrollable, overscrollBehavior && s[`--overscroll-${overscrollBehavior}`], mixinStyles.classNames);
     const updateScroll = React.useCallback(() => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{background-color:var(--rs-color-background-neutral-faded);height:100%;opacity:0;position:relative;width:100%}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{background:var(--rs-color-foreground-neutral);content:"";display:block;opacity:.2;position:absolute}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{background-color:var(--rs-color-background-neutral-faded);height:100%;opacity:0;position:relative;width:100%}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{background:var(--rs-color-foreground-neutral);content:"";display:block;opacity:.2;position:absolute}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

package/dist/components/ScrollArea/ScrollArea.types.d.ts

@@ -8,6 +8,8 @@ export type Props = {
     children: React.ReactNode;
     /** Scrollbar visibility behavior based on the user interaction */
     scrollbarDisplay?: "visible" | "hover" | "hidden";
+    /** Control whether scroll can chain to parent scrollable containers */
+    overscrollBehavior?: "auto" | "contain";
     /** Callback when the scroll area is scrolled */
     onScroll?: (args: Coordinates) => void;
     /** Height of the scroll area, literal css value or unit token multiplier */

package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts

@@ -22,6 +22,10 @@ export declare const scrollbarDisplay: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const overscrollBehavior: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const height: {
     name: string;
     render: () => React.JSX.Element;

package/dist/components/ScrollArea/tests/ScrollArea.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testDynamicHeight = exports.testNested = exports.className = exports.onScroll = exports.height = exports.scrollbarDisplay = exports.base = void 0;
+exports.testDynamicHeight = exports.testNested = exports.className = exports.onScroll = exports.height = exports.overscrollBehavior = exports.scrollbarDisplay = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const Button_1 = __importDefault(require("../../Button"));
@@ -110,6 +110,34 @@ exports.scrollbarDisplay = {
 			</storybook_1.Example.Item>
 		</storybook_1.Example>),
 };
+exports.overscrollBehavior = {
+    name: "overscrollBehavior",
+    render: () => (<storybook_1.Example>
+			<storybook_1.Example.Item title="overscrollBehavior: auto">
+				<View_1.default height="200px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
+					<View_1.default height="100px">Parent scroll area content before ScrollArea</View_1.default>
+					<ScrollArea_1.default height="100px" scrollbarDisplay="visible" overscrollBehavior="auto">
+						<View_1.default backgroundColor="neutral-faded" padding={4}>
+							{Array.from({ length: 10 }).map((_, index) => (<div key={index}>Item {index + 1}</div>))}
+						</View_1.default>
+					</ScrollArea_1.default>
+					<View_1.default height="300px">Parent scroll area content after ScrollArea</View_1.default>
+				</View_1.default>
+			</storybook_1.Example.Item>
+
+			<storybook_1.Example.Item title="overscrollBehavior: contain">
+				<View_1.default height="200px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
+					<View_1.default height="100px">Parent scroll area content before ScrollArea</View_1.default>
+					<ScrollArea_1.default height="100px" scrollbarDisplay="visible" overscrollBehavior="contain">
+						<View_1.default backgroundColor="neutral-faded" padding={4}>
+							{Array.from({ length: 10 }).map((_, index) => (<div key={index}>Item {index + 1}</div>))}
+						</View_1.default>
+					</ScrollArea_1.default>
+					<View_1.default height="300px">Parent scroll area content after ScrollArea</View_1.default>
+				</View_1.default>
+			</storybook_1.Example.Item>
+		</storybook_1.Example>),
+};
 exports.height = {
     name: "height, maxHeight",
     render: () => (<storybook_1.Example>

package/dist/components/Select/SelectCustomControlled.js

@@ -15,6 +15,7 @@ const SelectCustomControlled = (props) => {
     const searchStringRef = React.useRef("");
     const searchTimeoutRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
+    const [openedWithTouch, setOpenedWithTouch] = React.useState(false);
     const indexedOptions = [];
     const selectedOptions = [];
     const hasValue = multiple ? value.length > 0 : value;
@@ -108,7 +109,16 @@ const SelectCustomControlled = (props) => {
         }
         return null;
     };
-    return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: true, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(SelectTrigger, { ...props, triggerAttributes: attributes, value: value, children: renderValue() })) }), _jsx(DropdownMenu.Content, { attributes: {
+    return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: !openedWithTouch, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, onClose: () => setOpenedWithTouch(false), children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
+                    const triggerAttributes = {
+                        ...attributes,
+                        onTouchStart: () => {
+                            setOpenedWithTouch(true);
+                            attributes.onTouchStart?.();
+                        },
+                    };
+                    return (_jsx(SelectTrigger, { ...props, triggerAttributes: triggerAttributes, value: value, children: renderValue() }));
+                } }), _jsx(DropdownMenu.Content, { attributes: {
                     ref: dropdownRef,
                     onKeyDown: handleKeyDown,
                     // Ignore the default menu role since we're using options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reshaped",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
   "keywords": [
     "accessibility",
@@ -71,8 +71,8 @@
     "cssnano": "7.1.4",
     "csstype": "3.2.3",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/theming": "4.0.0",
-    "@reshaped/utilities": "4.0.1"
+    "@reshaped/theming": "4.0.3",
+    "@reshaped/utilities": "4.0.3"
   },
   "peerDependencies": {
     "postcss": "^8",