reshaped 3.6.0-canary.1 → 3.6.0-canary.2

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 (17) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +9 -9
  4. package/dist/components/Flyout/Flyout.types.d.ts +3 -2
  5. package/dist/components/Flyout/FlyoutContent.js +10 -8
  6. package/dist/components/Flyout/tests/Flyout.stories.d.ts +4 -0
  7. package/dist/components/Flyout/tests/Flyout.stories.js +20 -4
  8. package/dist/components/Flyout/useFlyout.js +13 -9
  9. package/dist/components/Flyout/utilities/flyout.js +4 -4
  10. package/dist/components/Modal/Modal.js +2 -2
  11. package/dist/components/Modal/Modal.module.css +1 -1
  12. package/dist/components/Overlay/Overlay.js +2 -2
  13. package/dist/components/Overlay/Overlay.module.css +1 -1
  14. package/dist/components/Overlay/Overlay.types.d.ts +1 -0
  15. package/dist/utilities/dom/find.d.ts +1 -1
  16. package/dist/utilities/dom/find.js +2 -2
  17. package/package.json +1 -1
package/dist/components/Flyout/Flyout.types.d.ts CHANGED
@@ -21,8 +21,8 @@ export type Options = {
21
21
  container?: HTMLElement | null;
22
22
  rtl: boolean;
23
23
  fallbackPositions?: Position[];
24
- lastUsedFallback: Position;
25
- onFallback: (position: Position) => void;
24
+ lastUsedPosition: Position;
25
+ onPositionChoose: (position: Position) => void;
26
26
  contentGap?: number;
27
27
  contentShift?: number;
28
28
  };
@@ -39,6 +39,7 @@ export type FlyoutData = {
39
39
  export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
40
40
  updatePosition: (args?: {
41
41
  sync?: boolean;
42
+ fallback?: boolean;
42
43
  }) => void;
43
44
  render: () => void;
44
45
  hide: () => void;
package/dist/components/Flyout/FlyoutContent.js CHANGED
@@ -24,7 +24,7 @@ const FlyoutContent = (props) => {
24
24
  const closestScrollableContainer = React.useMemo(() => {
25
25
  if (!mounted)
26
26
  return;
27
- if (!triggerElRef)
27
+ if (!triggerElRef?.current)
28
28
  return;
29
29
  return findClosestScrollableContainer({ el: triggerElRef.current });
30
30
  }, [mounted, triggerElRef]);
@@ -43,8 +43,10 @@ const FlyoutContent = (props) => {
43
43
  return () => el.removeEventListener("transitionstart", handleTransitionStart);
44
44
  }, [handleTransitionStart, flyoutElRef, status]);
45
45
  React.useEffect(() => {
46
- if (closestScrollableContainer === document.body)
46
+ if (status !== "visible")
47
47
  return;
48
+ console.log(closestScrollableContainer);
49
+ // if (closestScrollableContainer === document.body) return;
48
50
  if (!closestScrollableContainer)
49
51
  return;
50
52
  const triggerEl = triggerElRef?.current;
@@ -53,19 +55,19 @@ const FlyoutContent = (props) => {
53
55
  const triggerBounds = triggerEl?.getBoundingClientRect();
54
56
  const containerBounds = containerEl.getBoundingClientRect();
55
57
  if (triggerBounds &&
56
- (triggerBounds.bottom < containerBounds.top ||
57
- triggerBounds.right < containerBounds.left ||
58
- triggerBounds.left > containerBounds.right ||
59
- triggerBounds.top > containerBounds.bottom)) {
58
+ (triggerBounds.top < containerBounds.top ||
59
+ triggerBounds.left < containerBounds.left ||
60
+ triggerBounds.right > containerBounds.right ||
61
+ triggerBounds.bottom > containerBounds.bottom)) {
60
62
  handleClose({});
61
63
  }
62
64
  else {
63
- flyout.updatePosition({ sync: true });
65
+ flyout.updatePosition({ sync: true, fallback: false });
64
66
  }
65
67
  });
66
68
  closestScrollableContainer.addEventListener("scroll", handleScroll, { passive: true });
67
69
  return () => closestScrollableContainer.removeEventListener("scroll", handleScroll);
68
- }, [closestScrollableContainer, flyout, handleClose, triggerElRef]);
70
+ }, [closestScrollableContainer, flyout, status, handleClose, triggerElRef]);
69
71
  if (status === "idle" || !mounted)
70
72
  return null;
71
73
  const rootClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"],
package/dist/components/Flyout/tests/Flyout.stories.d.ts CHANGED
@@ -71,6 +71,10 @@ export declare const testInsideScrollable: {
71
71
  name: string;
72
72
  render: () => React.JSX.Element;
73
73
  };
74
+ export declare const testInsideModal: {
75
+ name: string;
76
+ render: () => React.JSX.Element;
77
+ };
74
78
  export declare const testDynamicBounds: {
75
79
  name: string;
76
80
  render: () => React.JSX.Element;
package/dist/components/Flyout/tests/Flyout.stories.js CHANGED
@@ -11,6 +11,7 @@ import TextField from "../../TextField/index.js";
11
11
  import Select from "../../Select/index.js";
12
12
  import Switch from "../../Switch/index.js";
13
13
  import { sleep } from "../../../utilities/helpers.js";
14
+ import Modal from "../../Modal/index.js";
14
15
  export default { title: "Utility components/Flyout" };
15
16
  const Content = (props) => (<div style={{
16
17
  background: "var(--rs-color-background-elevation-overlay)",
@@ -420,7 +421,7 @@ export const testShadowDom = {
420
421
  export const testInsideFixed = {
421
422
  name: "test: inside position fixed",
422
423
  render: () => (<React.Fragment>
423
- <View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
424
+ <View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }} height={20}>
424
425
  <Demo defaultActive position="top-start"/>
425
426
  </View>
426
427
  <View paddingTop={18} gap={4}>
@@ -455,15 +456,30 @@ export const testInsideScrollable = {
455
456
  name: "test: inside scrollable",
456
457
  render: () => {
457
458
  const containerRef = React.useRef(null);
458
- return (<View padding={50}>
459
+ return (<View padding={20}>
459
460
  <View height={30} overflow="auto" backgroundColor="neutral-faded" borderRadius="small">
460
- <View height={50} attributes={{ ref: containerRef }} padding={4} paddingBottom={30}>
461
- <Demo position="start"/>
461
+ <View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>
462
+ <Demo position="bottom"/>
462
463
  </View>
463
464
  </View>
464
465
  </View>);
465
466
  },
466
467
  };
468
+ export const testInsideModal = {
469
+ name: "test: inside modal",
470
+ render: () => {
471
+ return (<Modal active position="end">
472
+ <View gap={4} align="start">
473
+ <Modal.Title>Title</Modal.Title>
474
+ <Demo position="bottom-start"/>
475
+ <View height={300} width={25} backgroundColor="neutral-faded"/>
476
+ <Demo position="start"/>
477
+ <View height={300} width={25} backgroundColor="neutral-faded"/>
478
+ <Demo position="bottom-start"/>
479
+ </View>
480
+ </Modal>);
481
+ },
482
+ };
467
483
  export const testDynamicBounds = {
468
484
  name: "test: auto position update",
469
485
  render: () => {
package/dist/components/Flyout/useFlyout.js CHANGED
@@ -39,7 +39,7 @@ const flyoutReducer = (state, action) => {
39
39
  const useFlyout = (args) => {
40
40
  const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
41
41
  const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
42
- const lastUsedFallbackRef = React.useRef(defaultPosition);
42
+ const lastUsedPositionRef = React.useRef(defaultPosition);
43
43
  // Memo the array internally to avoid new arrays triggering useCallback
44
44
  const cachedFallbackPositions = React.useMemo(() => fallbackPositions,
45
45
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -62,28 +62,32 @@ const useFlyout = (args) => {
62
62
  const remove = React.useCallback(() => {
63
63
  dispatch({ type: "remove" });
64
64
  }, []);
65
- const handleFallback = React.useCallback((position) => {
66
- lastUsedFallbackRef.current = position;
65
+ const handlePosition = React.useCallback((position) => {
66
+ lastUsedPositionRef.current = position;
67
67
  }, []);
68
68
  const updatePosition = React.useCallback((options) => {
69
69
  if (!flyoutElRef.current)
70
70
  return;
71
+ const changePositon = options?.fallback !== false;
71
72
  const nextFlyoutData = flyout({
72
73
  triggerEl: triggerElRef.current,
73
74
  flyoutEl: flyoutElRef.current,
74
75
  triggerBounds,
75
76
  width,
76
- position: defaultPosition,
77
- fallbackPositions: cachedFallbackPositions,
78
- lastUsedFallback: lastUsedFallbackRef.current,
79
- onFallback: handleFallback,
77
+ position: changePositon ? defaultPosition : lastUsedPositionRef.current,
78
+ fallbackPositions: changePositon ? cachedFallbackPositions : [],
79
+ lastUsedPosition: lastUsedPositionRef.current,
80
+ onPositionChoose: handlePosition,
80
81
  rtl: isRTL,
81
82
  container,
82
83
  contentGap,
83
84
  contentShift,
84
85
  });
85
86
  if (nextFlyoutData) {
86
- dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
87
+ dispatch({
88
+ type: "position",
89
+ payload: { ...nextFlyoutData, sync: options?.sync },
90
+ });
87
91
  }
88
92
  }, [
89
93
  container,
@@ -96,7 +100,7 @@ const useFlyout = (args) => {
96
100
  width,
97
101
  contentGap,
98
102
  contentShift,
99
- handleFallback,
103
+ handlePosition,
100
104
  ]);
101
105
  React.useEffect(() => {
102
106
  if (state.status === "rendered")
package/dist/components/Flyout/utilities/flyout.js CHANGED
@@ -7,7 +7,7 @@ import { resetStyles } from "../Flyout.constants.js";
7
7
  * Set position of the target element to fit on the screen
8
8
  */
9
9
  const flyout = (args) => {
10
- const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, width, container: passedContainer, lastUsedFallback, onFallback, rtl, } = args;
10
+ const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
11
11
  const targetClone = flyoutEl.cloneNode(true);
12
12
  const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
13
13
  const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
@@ -63,10 +63,10 @@ const flyout = (args) => {
63
63
  container,
64
64
  });
65
65
  const validPosition = visible || fallbackPositions?.length === 0;
66
- // Saving first try in case non of the options work
67
- if (validPosition || lastUsedFallback === currentPosition) {
66
+ // Saving first try in case none of the options work
67
+ if (validPosition || lastUsedPosition === currentPosition) {
68
68
  calculated = tested;
69
- onFallback(currentPosition);
69
+ onPositionChoose(currentPosition);
70
70
  }
71
71
  return validPosition;
72
72
  });
package/dist/components/Modal/Modal.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import React from "react";
4
- import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
4
+ import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
5
5
  import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
6
6
  import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
7
7
  import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
@@ -168,7 +168,7 @@ const Modal = (props) => {
168
168
  setHideProgress(progress / 2);
169
169
  dragDistanceRef.current = dragDistance;
170
170
  }, [dragDistance, clientPosition, rootRef]);
171
- return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, containerRef: containerRef, attributes: {
171
+ return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: responsivePropDependency(position, (p) => (p === "center" ? "auto" : "hidden")), className: overlayClassName, containerRef: containerRef, attributes: {
172
172
  onTouchStart: handleDragStart,
173
173
  }, children: ({ active }) => {
174
174
  const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));
package/dist/components/Modal/Modal.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-modal-container-width:100vw;--rs-modal-position:fixed;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-position:absolute;--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
1
+ .root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
package/dist/components/Overlay/Overlay.js CHANGED
@@ -13,7 +13,7 @@ import Portal from "../_private/Portal/index.js";
13
13
  import s from "./Overlay.module.css";
14
14
  import useHandlerRef from "../../hooks/useHandlerRef.js";
15
15
  const Overlay = (props) => {
16
- const { active, children, transparent, blurred, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
16
+ const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
17
17
  // Selectors wrapped with refs to simplify working with useEffect dependency array
18
18
  const onCloseRef = useHandlerRef(onClose);
19
19
  const onOpenRef = useHandlerRef(onOpen);
@@ -33,7 +33,7 @@ const Overlay = (props) => {
33
33
  const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
34
34
  // Check that when close was triggered there were no other overlays / flyouts rendered above it
35
35
  const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
36
- const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], className);
36
+ const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
37
37
  const isInsideContent = (el) => {
38
38
  if (!contentRef.current)
39
39
  return;
package/dist/components/Overlay/Overlay.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;overflow:auto;overflow-x:clip;position:fixed;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;left:var(--rs-overlay-offset-x);opacity:0;outline:none;top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-overlay)}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);height:calc(100% + 2px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}
1
+ .root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;overflow-x:clip;position:fixed;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;left:var(--rs-overlay-offset-x);opacity:0;outline:none;top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-overlay)}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);height:calc(100% + 2px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto}
package/dist/components/Overlay/Overlay.types.d.ts CHANGED
@@ -4,6 +4,7 @@ export type CloseReason = "overlay-click" | "escape-key";
4
4
  export type Props = {
5
5
  transparent?: boolean | number;
6
6
  blurred?: boolean;
7
+ overflow?: "auto" | "hidden";
7
8
  children?: React.ReactNode | ((props: {
8
9
  active: boolean;
9
10
  }) => React.ReactNode);
package/dist/utilities/dom/find.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const findClosestPositionContainer: (args: {
4
4
  iteration?: number;
5
5
  }) => HTMLElement;
6
6
  export declare const findClosestScrollableContainer: (args: {
7
- el: HTMLElement | null;
7
+ el: HTMLElement;
8
8
  iteration?: number;
9
9
  overflowOnly?: boolean;
10
10
  }) => HTMLElement;
package/dist/utilities/dom/find.js CHANGED
@@ -29,8 +29,8 @@ export const findClosestScrollableContainer = (args) => {
29
29
  const style = el && window.getComputedStyle(el);
30
30
  const overflowY = style?.overflowY;
31
31
  const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
32
- if (el === document.body || !el)
33
- return document.body;
32
+ if (!el.parentElement)
33
+ return el;
34
34
  if (isScrollable && el.scrollHeight > el.clientHeight)
35
35
  return el;
36
36
  return findClosestScrollableContainer({ el: el.parentElement, iteration: iteration + 1 });
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.6.0-canary.1",
4
+ "version": "3.6.0-canary.2",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",