reshaped 2.5.5 → 2.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.css +1 -1
- package/bundle.js +7 -7
- package/components/Toast/ToastProvider.js +0 -2
- package/components/_private/Flyout/Flyout.module.css +1 -1
- package/components/_private/Flyout/Flyout.types.d.ts +1 -0
- package/components/_private/Flyout/FlyoutContent.js +4 -4
- package/components/_private/Flyout/FlyoutControlled.js +1 -0
- package/components/_private/Flyout/tests/Flyout.stories.d.ts +1 -0
- package/components/_private/Flyout/tests/Flyout.stories.js +23 -0
- package/hooks/_private/useFlyout.js +5 -5
- package/package.json +4 -4
- package/utilities/dom.d.ts +1 -1
- package/utilities/dom.js +7 -4
|
@@ -54,7 +54,6 @@ const ToastProvider = (props) => {
|
|
|
54
54
|
const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
|
|
55
55
|
const add = React.useCallback((toastProps) => {
|
|
56
56
|
const id = generateId();
|
|
57
|
-
console.log("add");
|
|
58
57
|
dispatch({ type: "add", payload: { toastProps, id } });
|
|
59
58
|
return id;
|
|
60
59
|
}, []);
|
|
@@ -62,7 +61,6 @@ const ToastProvider = (props) => {
|
|
|
62
61
|
dispatch({ type: "show", payload: { id } });
|
|
63
62
|
}, []);
|
|
64
63
|
const hide = React.useCallback((id) => {
|
|
65
|
-
console.log("hide");
|
|
66
64
|
dispatch({ type: "hide", payload: { id } });
|
|
67
65
|
}, []);
|
|
68
66
|
const remove = React.useCallback((id) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50
|
|
1
|
+
.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)}
|
|
@@ -61,6 +61,7 @@ export type ContentProps = {
|
|
|
61
61
|
export type ContextProps = {
|
|
62
62
|
id: string;
|
|
63
63
|
flyout: ReturnType<typeof useFlyout>;
|
|
64
|
+
width?: FlyoutWidth;
|
|
64
65
|
triggerElRef: React.RefObject<HTMLButtonElement>;
|
|
65
66
|
flyoutElRef: React.RefObject<HTMLDivElement>;
|
|
66
67
|
handleClose: (options?: {
|
|
@@ -3,12 +3,12 @@ import React from "react";
|
|
|
3
3
|
import { classNames } from "../../../utilities/helpers.js";
|
|
4
4
|
import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
|
|
5
5
|
import Portal from "../Portal/index.js";
|
|
6
|
-
import {
|
|
6
|
+
import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
|
|
7
7
|
import { useFlyoutContext } from "./Flyout.context.js";
|
|
8
8
|
import s from "./Flyout.module.css";
|
|
9
9
|
const FlyoutContent = (props) => {
|
|
10
10
|
const { children, className, attributes } = props;
|
|
11
|
-
const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
|
|
11
|
+
const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
|
|
12
12
|
const { styles, status, position } = flyout;
|
|
13
13
|
const [mounted, setMounted] = React.useState(false);
|
|
14
14
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -18,7 +18,7 @@ const FlyoutContent = (props) => {
|
|
|
18
18
|
return null;
|
|
19
19
|
const contentClassNames = classNames(s.content, status === "visible" && s["--visible"],
|
|
20
20
|
// Animate after correct position has been assigned
|
|
21
|
-
["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`]);
|
|
21
|
+
["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"]);
|
|
22
22
|
// className is applied to inner element because it has the transform and is treated like a real root element
|
|
23
23
|
const innerClassNames = classNames(s.inner, className, contentClassName);
|
|
24
24
|
let role;
|
|
@@ -38,7 +38,7 @@ const FlyoutContent = (props) => {
|
|
|
38
38
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
39
39
|
React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp },
|
|
40
40
|
React.createElement("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames }), children)));
|
|
41
|
-
const closestScrollable =
|
|
41
|
+
const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
|
|
42
42
|
return (React.createElement(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable } }, content));
|
|
43
43
|
};
|
|
44
44
|
export default FlyoutContent;
|
|
@@ -13,5 +13,6 @@ export declare const modeActionMenuHover: () => React.JSX.Element;
|
|
|
13
13
|
export declare const modeContentMenuHover: () => React.JSX.Element;
|
|
14
14
|
export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
|
|
15
15
|
export declare const testInsideScrollArea: () => React.JSX.Element;
|
|
16
|
+
export declare const testInsideFixed: () => React.JSX.Element;
|
|
16
17
|
export declare const widthTrigger: () => React.JSX.Element;
|
|
17
18
|
export declare const scopedTheming: () => React.JSX.Element;
|
|
@@ -119,6 +119,29 @@ export const testInsideScrollArea = () => (<Example>
|
|
|
119
119
|
<div style={{ height: 2000 }}/>
|
|
120
120
|
</Example.Item>
|
|
121
121
|
</Example>);
|
|
122
|
+
export const testInsideFixed = () => (<Example>
|
|
123
|
+
<Example.Item title="should move the content on page scroll">
|
|
124
|
+
<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
|
|
125
|
+
<Flyout triggerType="click" position="bottom-start">
|
|
126
|
+
<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
|
|
127
|
+
<Flyout.Content>
|
|
128
|
+
<div style={{
|
|
129
|
+
background: "var(--rs-color-background-elevation-overlay)",
|
|
130
|
+
padding: "var(--rs-unit-x4)",
|
|
131
|
+
height: 100,
|
|
132
|
+
width: 160,
|
|
133
|
+
borderRadius: "var(--rs-unit-radius-medium)",
|
|
134
|
+
border: "1px solid var(--rs-color-border-neutral-faded)",
|
|
135
|
+
boxSizing: "border-box",
|
|
136
|
+
}}>
|
|
137
|
+
{"Content"}
|
|
138
|
+
</div>
|
|
139
|
+
</Flyout.Content>
|
|
140
|
+
</Flyout>
|
|
141
|
+
</View>
|
|
142
|
+
<div style={{ height: 2000 }}/>
|
|
143
|
+
</Example.Item>
|
|
144
|
+
</Example>);
|
|
122
145
|
export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
|
|
123
146
|
<Flyout.Trigger>
|
|
124
147
|
{(attributes) => <button {...attributes}>Trigger with long text</button>}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import useRTL from "../useRTL.js";
|
|
3
3
|
import { onNextFrame } from "../../utilities/animation.js";
|
|
4
|
-
import {
|
|
4
|
+
import { getClosestFlyoutTarget } from "../../utilities/dom.js";
|
|
5
5
|
const SCREEN_OFFSET = 16;
|
|
6
6
|
const topPos = ["top-start", "top", "top-end"];
|
|
7
7
|
const bottomPos = ["bottom-start", "bottom", "bottom-end"];
|
|
@@ -138,7 +138,6 @@ const defaultStyles = {
|
|
|
138
138
|
top: 0,
|
|
139
139
|
width: "auto",
|
|
140
140
|
height: "auto",
|
|
141
|
-
position: "absolute",
|
|
142
141
|
// z-index doesn't accept strings
|
|
143
142
|
zIndex: "var(--rs-z-index-flyout)",
|
|
144
143
|
};
|
|
@@ -146,7 +145,8 @@ const resetStyles = {
|
|
|
146
145
|
left: 0,
|
|
147
146
|
top: 0,
|
|
148
147
|
position: "fixed",
|
|
149
|
-
opacity: 0,
|
|
148
|
+
// opacity: 0,
|
|
149
|
+
visibility: "hidden",
|
|
150
150
|
animation: "none",
|
|
151
151
|
transition: "none",
|
|
152
152
|
zIndex: "var(--rs-z-index-tooltip)",
|
|
@@ -174,7 +174,7 @@ const flyout = (origin, target, options) => {
|
|
|
174
174
|
}
|
|
175
175
|
document.body.appendChild(targetClone);
|
|
176
176
|
const targetBounds = targetClone.getBoundingClientRect();
|
|
177
|
-
const scrollableParent =
|
|
177
|
+
const scrollableParent = getClosestFlyoutTarget(origin);
|
|
178
178
|
const boundsDelta = scrollableParent.getBoundingClientRect();
|
|
179
179
|
const parentOffset = {
|
|
180
180
|
top: boundsDelta.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
|
|
@@ -208,7 +208,7 @@ const flyoutReducer = (state, action) => {
|
|
|
208
208
|
switch (action.type) {
|
|
209
209
|
case "render":
|
|
210
210
|
// Disable events before it's positioned to avoid mouseleave getting triggered
|
|
211
|
-
return Object.assign(Object.assign({}, state), { status: "rendered", styles: { pointerEvents: "none" } });
|
|
211
|
+
return Object.assign(Object.assign({}, state), { status: "rendered", styles: Object.assign({ pointerEvents: "none" }, resetStyles) });
|
|
212
212
|
case "position":
|
|
213
213
|
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) });
|
|
214
214
|
case "show":
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.5.
|
|
4
|
+
"version": "2.5.7",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -91,13 +91,13 @@
|
|
|
91
91
|
"@testing-library/react": "14.0.0",
|
|
92
92
|
"@testing-library/user-event": "14.5.1",
|
|
93
93
|
"@types/events": "3.0.2",
|
|
94
|
-
"@types/jest": "29.5.
|
|
95
|
-
"@types/node": "20.8.
|
|
94
|
+
"@types/jest": "29.5.7",
|
|
95
|
+
"@types/node": "20.8.10",
|
|
96
96
|
"@types/react": "18.2.28",
|
|
97
97
|
"@types/react-dom": "18.2.13",
|
|
98
98
|
"@typescript-eslint/eslint-plugin": "6.9.1",
|
|
99
99
|
"@typescript-eslint/parser": "6.9.1",
|
|
100
|
-
"@vitejs/plugin-react": "4.0
|
|
100
|
+
"@vitejs/plugin-react": "4.1.0",
|
|
101
101
|
"chromatic": "7.6.0",
|
|
102
102
|
"cz-conventional-changelog": "3.3.0",
|
|
103
103
|
"eslint": "8.52.0",
|
package/utilities/dom.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;
|
package/utilities/dom.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
export const
|
|
2
|
-
const
|
|
1
|
+
export const getClosestFlyoutTarget = (el) => {
|
|
2
|
+
const style = el && window.getComputedStyle(el);
|
|
3
|
+
const overflowY = style === null || style === void 0 ? void 0 : style.overflowY;
|
|
4
|
+
const position = style === null || style === void 0 ? void 0 : style.position;
|
|
3
5
|
const isScrollable = overflowY === null || overflowY === void 0 ? void 0 : overflowY.includes("scroll");
|
|
6
|
+
const isFixed = position === "fixed";
|
|
4
7
|
if (el === document.body || !el)
|
|
5
8
|
return document.body;
|
|
6
|
-
if (isScrollable && el.scrollHeight > el.clientHeight)
|
|
9
|
+
if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
|
|
7
10
|
return el;
|
|
8
|
-
return
|
|
11
|
+
return getClosestFlyoutTarget(el.parentElement);
|
|
9
12
|
};
|