reshaped 2.5.6 → 2.5.7

package/components/_private/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -61,6 +61,7 @@ export type ContentProps = {
 export type ContextProps = {
     id: string;
     flyout: ReturnType<typeof useFlyout>;
+    width?: FlyoutWidth;
     triggerElRef: React.RefObject<HTMLButtonElement>;
     flyoutElRef: React.RefObject<HTMLDivElement>;
     handleClose: (options?: {

package/components/_private/Flyout/FlyoutContent.js

@@ -8,7 +8,7 @@ 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, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -18,7 +18,7 @@ const FlyoutContent = (props) => {
         return null;
     const contentClassNames = classNames(s.content, status === "visible" && s["--visible"], 
     // Animate after correct position has been assigned
-    ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`]);
+    ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"]);
     // className is applied to inner element because it has the transform and is treated like a real root element
     const innerClassNames = classNames(s.inner, className, contentClassName);
     let role;

package/components/_private/Flyout/FlyoutControlled.js

@@ -199,6 +199,7 @@ const FlyoutRoot = (props) => {
     return (React.createElement(Provider, { value: {
             id,
             flyout,
+            width,
             triggerElRef,
             flyoutElRef,
             handleClose,

package/hooks/_private/useFlyout.js

@@ -208,7 +208,7 @@ const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return Object.assign(Object.assign({}, state), { status: "rendered", styles: { pointerEvents: "none" } });
+            return Object.assign(Object.assign({}, state), { status: "rendered", styles: Object.assign({ pointerEvents: "none" }, resetStyles) });
         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":

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.5.6",
+	"version": "2.5.7",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",