reshaped 2.5.5 → 2.5.6

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.
Files changed (11) hide show
  1. package/bundle.css +1 -1
  2. package/bundle.js +1 -1
  3. package/components/Toast/ToastProvider.js +0 -2
  4. package/components/_private/Flyout/Flyout.module.css +1 -1
  5. package/components/_private/Flyout/FlyoutContent.js +2 -2
  6. package/components/_private/Flyout/tests/Flyout.stories.d.ts +1 -0
  7. package/components/_private/Flyout/tests/Flyout.stories.js +23 -0
  8. package/hooks/_private/useFlyout.js +4 -4
  9. package/package.json +4 -4
  10. package/utilities/dom.d.ts +1 -1
  11. package/utilities/dom.js +7 -4
package/components/Toast/ToastProvider.js CHANGED
@@ -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) => {
package/components/_private/Flyout/Flyout.module.css CHANGED
@@ -1 +1 @@
1
- .content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%}.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)}
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)}
package/components/_private/Flyout/FlyoutContent.js CHANGED
@@ -3,7 +3,7 @@ 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 { getClosestScrollableParent } from "../../../utilities/dom.js";
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) => {
@@ -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 = getClosestScrollableParent(triggerElRef.current);
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;
package/components/_private/Flyout/tests/Flyout.stories.d.ts CHANGED
@@ -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;
package/components/_private/Flyout/tests/Flyout.stories.js CHANGED
@@ -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>}
package/hooks/_private/useFlyout.js CHANGED
@@ -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 { getClosestScrollableParent } from "../../utilities/dom.js";
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 = getClosestScrollableParent(origin);
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,
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.5",
4
+ "version": "2.5.6",
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.5",
95
- "@types/node": "20.8.6",
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.4",
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 getClosestScrollableParent: (el: HTMLElement | null) => HTMLElement;
1
+ export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;
package/utilities/dom.js CHANGED
@@ -1,9 +1,12 @@
1
- export const getClosestScrollableParent = (el) => {
2
- const overflowY = el && window.getComputedStyle(el).overflowY;
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 getClosestScrollableParent(el.parentElement);
11
+ return getClosestFlyoutTarget(el.parentElement);
9
12
  };