reshaped 3.9.0-canary.13 → 3.9.0-canary.14
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/dist/bundle.css +1 -1
- package/dist/bundle.js +2 -2
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +3 -1
- package/dist/components/Flyout/FlyoutContent.js +2 -1
- package/dist/components/Flyout/FlyoutControlled.js +2 -1
- package/dist/components/Flyout/utilities/flyout.js +13 -2
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.css +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:
|
|
1
|
+
.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.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-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
|
|
@@ -131,6 +131,8 @@ type BaseProps = {
|
|
|
131
131
|
contentShift?: number;
|
|
132
132
|
/** Maximum height for the content */
|
|
133
133
|
contentMaxHeight?: string;
|
|
134
|
+
/** Maximum width for the content */
|
|
135
|
+
contentMaxWidth?: string;
|
|
134
136
|
/** Additional classname for the content element */
|
|
135
137
|
contentClassName?: string;
|
|
136
138
|
/** Additional attributes for the content element */
|
|
@@ -188,7 +190,7 @@ export type ContextProps = {
|
|
|
188
190
|
handleContentMouseDown: () => void;
|
|
189
191
|
handleContentMouseUp: () => void;
|
|
190
192
|
isSubmenu: boolean;
|
|
191
|
-
} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
|
|
193
|
+
} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
|
|
192
194
|
export type TriggerContextProps = {
|
|
193
195
|
elRef?: ContextProps["triggerElRef"];
|
|
194
196
|
};
|
|
@@ -11,7 +11,7 @@ import s from "./Flyout.module.css";
|
|
|
11
11
|
import cooldown from "./utilities/cooldown.js";
|
|
12
12
|
const FlyoutContent = (props) => {
|
|
13
13
|
const { children, className, attributes } = props;
|
|
14
|
-
const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
|
|
14
|
+
const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
|
|
15
15
|
const { status, position } = flyout;
|
|
16
16
|
const [mounted, setMounted] = React.useState(false);
|
|
17
17
|
const closestFixedContainer = React.useMemo(() => {
|
|
@@ -97,6 +97,7 @@ const FlyoutContent = (props) => {
|
|
|
97
97
|
const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
|
|
98
98
|
"--rs-flyout-gap": contentGap,
|
|
99
99
|
"--rs-flyout-max-h": contentMaxHeight,
|
|
100
|
+
"--rs-flyout-max-w": contentMaxWidth,
|
|
100
101
|
}, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
|
|
101
102
|
return _jsx(Portal, { targetRef: containerRef, children: content });
|
|
102
103
|
};
|
|
@@ -15,7 +15,7 @@ import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentCo
|
|
|
15
15
|
import useFlyout from "./useFlyout.js";
|
|
16
16
|
import cooldown from "./utilities/cooldown.js";
|
|
17
17
|
const FlyoutControlled = (props) => {
|
|
18
|
-
const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
|
|
18
|
+
const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
|
|
19
19
|
const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
|
|
20
20
|
const onOpenRef = useHandlerRef(onOpen);
|
|
21
21
|
const onCloseRef = useHandlerRef(onClose);
|
|
@@ -338,6 +338,7 @@ const FlyoutControlled = (props) => {
|
|
|
338
338
|
contentAttributes,
|
|
339
339
|
contentGap,
|
|
340
340
|
contentMaxHeight,
|
|
341
|
+
contentMaxWidth,
|
|
341
342
|
containerRef,
|
|
342
343
|
disableContentHover,
|
|
343
344
|
autoFocus,
|
|
@@ -42,7 +42,7 @@ const flyout = (args) => {
|
|
|
42
42
|
document.body;
|
|
43
43
|
const renderContainerBounds = container.getBoundingClientRect();
|
|
44
44
|
const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
|
|
45
|
-
const applyPosition = (position) => {
|
|
45
|
+
const applyPosition = (position, options) => {
|
|
46
46
|
return calculatePosition({
|
|
47
47
|
triggerBounds: resolvedTriggerBounds,
|
|
48
48
|
flyoutBounds,
|
|
@@ -51,7 +51,7 @@ const flyout = (args) => {
|
|
|
51
51
|
contentGap: contentGap * unitModifier,
|
|
52
52
|
contentShift: contentShift * unitModifier,
|
|
53
53
|
rtl,
|
|
54
|
-
width,
|
|
54
|
+
width: options?.width || width,
|
|
55
55
|
passedContainer: passedContainer ||
|
|
56
56
|
(closestFixedContainer !== document.body ? closestFixedContainer : undefined),
|
|
57
57
|
fallbackAdjustLayout,
|
|
@@ -75,6 +75,17 @@ const flyout = (args) => {
|
|
|
75
75
|
calculated = tested;
|
|
76
76
|
return visible;
|
|
77
77
|
});
|
|
78
|
+
// Try full width positions in case it doesn't fit on any side
|
|
79
|
+
if (!calculated) {
|
|
80
|
+
const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
|
|
81
|
+
smallScreenFallbackPositions.some((position) => {
|
|
82
|
+
const tested = applyPosition(position, { width: "full" });
|
|
83
|
+
const visible = testVisibility(tested);
|
|
84
|
+
if (visible)
|
|
85
|
+
calculated = tested;
|
|
86
|
+
return visible;
|
|
87
|
+
});
|
|
88
|
+
}
|
|
78
89
|
if (!calculated)
|
|
79
90
|
calculated = applyPosition(lastUsedPosition);
|
|
80
91
|
onPositionChoose(calculated.position);
|
|
@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
|
|
|
5
5
|
import Theme from "../Theme/index.js";
|
|
6
6
|
import s from "./Tooltip.module.css";
|
|
7
7
|
const Tooltip = (props) => {
|
|
8
|
-
const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
|
|
8
|
+
const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
|
|
9
9
|
if (!text)
|
|
10
10
|
return children({ ref: null });
|
|
11
11
|
return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover",
|
|
12
12
|
// Disable group timeouts by default since it's not controlled by the default user events
|
|
13
|
-
groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
|
|
13
|
+
groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
|
|
14
14
|
};
|
|
15
15
|
Tooltip.displayName = "Tooltip";
|
|
16
16
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
|
|
3
|
-
export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
|
|
3
|
+
export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
|
|
4
4
|
/** Node for inserting children */
|
|
5
5
|
children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
|
|
6
6
|
/** Text content for the tooltip */
|
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": "3.9.0-canary.
|
|
4
|
+
"version": "3.9.0-canary.14",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|