reshaped 4.3.0 → 4.4.0-canary.1

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 (26) hide show
  1. package/dist/bundle.cjs +1 -1
  2. package/dist/bundle.css +1 -1
  3. package/dist/components/Autocomplete/Autocomplete.js +14 -6
  4. package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -0
  5. package/dist/components/DropdownMenu/DropdownMenu.context.js +3 -2
  6. package/dist/components/DropdownMenu/DropdownMenu.js +7 -6
  7. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +9 -2
  8. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +1 -0
  9. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +98 -0
  10. package/dist/components/Flyout/Flyout.module.css +1 -1
  11. package/dist/components/Flyout/Flyout.types.d.ts +2 -1
  12. package/dist/components/Flyout/FlyoutContent.js +2 -2
  13. package/dist/components/Flyout/FlyoutControlled.js +64 -31
  14. package/dist/components/Flyout/utilities/cooldown.d.ts +5 -0
  15. package/dist/components/Flyout/utilities/cooldown.js +11 -0
  16. package/dist/components/Image/tests/Image.stories.js +4 -1
  17. package/dist/components/Modal/Modal.module.css +1 -1
  18. package/dist/components/Overlay/Overlay.js +32 -10
  19. package/dist/components/Overlay/Overlay.module.css +1 -1
  20. package/dist/components/Popover/tests/Popover.stories.d.ts +3 -0
  21. package/dist/components/Popover/tests/Popover.stories.js +23 -1
  22. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +3 -0
  23. package/dist/components/Tooltip/tests/Tooltip.stories.js +36 -0
  24. package/dist/hooks/useOnClickOutside.d.ts +5 -0
  25. package/dist/hooks/useOnClickOutside.js +4 -4
  26. package/package.json +3 -3
package/dist/components/Modal/Modal.module.css CHANGED
@@ -1 +1 @@
1
- @property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;--rs-modal-padding:calc(var(--rs-modal-p) * var(--rs-unit-x1));--rs-modal-env-top:env(safe-area-inset-top,0px);--rs-modal-env-bottom:env(safe-area-inset-bottom,0px);--rs-modal-env-start:env(safe-area-inset-left,0px);--rs-modal-env-end:env(safe-area-inset-right,0px);--rs-modal-offset:var(--rs-unit-x2);--rs-modal-inset-top:max(var(--rs-modal-offset),var(--rs-modal-env-top));--rs-modal-inset-bottom:max(var(--rs-modal-offset),var(--rs-modal-env-bottom));--rs-modal-inset-start:max(var(--rs-modal-offset),var(--rs-modal-env-start));--rs-modal-inset-end:max(var(--rs-modal-offset),var(--rs-modal-env-end));--rs-modal-far-offset:var(--rs-unit-x6);transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);border:0 solid var(--rs-color-border-neutral-faded);padding-block:var(--rs-modal-padding) calc(var(--rs-modal-padding) + var(--rs-modal-env-bottom) * var(--rs-modal-safe));padding-inline:calc(var(--rs-modal-padding) + var(--rs-modal-env-start) * var(--rs-modal-safe)) calc(var(--rs-modal-padding) + var(--rs-modal-env-end) * var(--rs-modal-safe));will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}[dir=rtl] .root{--rs-modal-env-start:env(safe-area-inset-right,0px);--rs-modal-env-end:env(safe-area-inset-left,0px)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%;--rs-modal-env-top:0px;--rs-modal-env-bottom:0px;--rs-modal-env-start:0px;--rs-modal-env-end:0px}.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);--rs-modal-p-s:0;--rs-modal-p-m:var(--rs-modal-p-s);--rs-modal-p-l:var(--rs-modal-p-m);--rs-modal-p-xl:var(--rs-modal-p-l);--rs-modal-p:var(--rs-modal-p-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(var(--rs-modal-drag))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(var(--rs-modal-drag))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.edge{position:fixed;inset-inline:0;bottom:0;height:calc(var(--rs-unit-x1) * 12);background:var(--rs-color-background-elevation-overlay);pointer-events:none}.--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);--rs-modal-p:var(--rs-modal-p-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(var(--rs-modal-drag))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--m{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l);--rs-modal-p:var(--rs-modal-p-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(var(--rs-modal-drag))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--l{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl);--rs-modal-p:var(--rs-modal-p-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;--rs-modal-safe:1;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--xl{--rs-modal-size-s:100%;--rs-modal-safe:0;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
1
+ @property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;--rs-modal-padding:calc(var(--rs-modal-p) * var(--rs-unit-x1));--rs-modal-env-top:env(safe-area-inset-top,0px);--rs-modal-env-bottom:env(safe-area-inset-bottom,0px);--rs-modal-env-start:env(safe-area-inset-left,0px);--rs-modal-env-end:env(safe-area-inset-right,0px);--rs-modal-offset:var(--rs-unit-x2);--rs-modal-inset-top:max(var(--rs-modal-offset),var(--rs-modal-env-top));--rs-modal-inset-bottom:max(var(--rs-modal-offset),var(--rs-modal-env-bottom));--rs-modal-inset-start:max(var(--rs-modal-offset),var(--rs-modal-env-start));--rs-modal-inset-end:max(var(--rs-modal-offset),var(--rs-modal-env-end));--rs-modal-far-offset:var(--rs-unit-x6);--rs-modal-floating-shadow:var(--rs-shadow-overlay);--rs-modal-full-screen-shadow:var(--rs-shadow-overlay);transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);border:0 solid var(--rs-color-border-neutral-faded);padding-block:var(--rs-modal-padding) calc(var(--rs-modal-padding) + var(--rs-modal-env-bottom) * var(--rs-modal-safe));padding-inline:calc(var(--rs-modal-padding) + var(--rs-modal-env-start) * var(--rs-modal-safe)) calc(var(--rs-modal-padding) + var(--rs-modal-env-end) * var(--rs-modal-safe));will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}[dir=rtl] .root{--rs-modal-env-start:env(safe-area-inset-right,0px);--rs-modal-env-end:env(safe-area-inset-left,0px)}@supports (-webkit-touch-callout:none){.root:not(.--contained){--rs-modal-floating-shadow:none;--rs-modal-full-screen-shadow:0 0 0 50lvh var(--rs-color-background-elevation-overlay)}}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%;--rs-modal-env-top:0px;--rs-modal-env-bottom:0px;--rs-modal-env-start:0px;--rs-modal-env-end:0px}.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);--rs-modal-p-s:0;--rs-modal-p-m:var(--rs-modal-p-s);--rs-modal-p-l:var(--rs-modal-p-m);--rs-modal-p-xl:var(--rs-modal-p-l);--rs-modal-p:var(--rs-modal-p-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(var(--rs-modal-drag))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(var(--rs-modal-drag))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.edge{position:fixed;inset-inline:0;bottom:0;height:calc(var(--rs-unit-x1) * 12);background:var(--rs-color-background-elevation-overlay);pointer-events:none}.--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);--rs-modal-p:var(--rs-modal-p-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(var(--rs-modal-drag))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--m{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l);--rs-modal-p:var(--rs-modal-p-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(var(--rs-modal-drag))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--l{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl);--rs-modal-p:var(--rs-modal-p-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-shadow-overlay);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-width:1px;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;--rs-modal-safe:1;box-shadow:var(--rs-shadow-overlay);width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-width:1px 0 0;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(var(--rs-modal-drag))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-start) - max(var(--rs-modal-far-offset), var(--rs-modal-env-end)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:var(--rs-modal-inset-start) auto;transform:translate(calc(-100% - var(--rs-modal-inset-start)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(calc(100% + var(--rs-modal-inset-start)))}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-safe:0;box-shadow:var(--rs-modal-floating-shadow);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-modal-inset-end) - max(var(--rs-modal-far-offset), var(--rs-modal-env-start)));max-height:none;margin:0;inset-block:var(--rs-modal-inset-top) var(--rs-modal-inset-bottom);inset-inline:auto var(--rs-modal-inset-end);transform:translate(calc(100% + var(--rs-modal-inset-end)));position:absolute;border-width:1px;border-radius:var(--rs-radius-large);overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(calc(-100% - var(--rs-modal-inset-end)))}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(var(--rs-modal-drag))}.--position-full-screen--xl{--rs-modal-size-s:100%;--rs-modal-safe:0;box-shadow:var(--rs-modal-full-screen-shadow);width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-width:0;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
package/dist/components/Overlay/Overlay.js CHANGED
@@ -35,6 +35,7 @@ const Overlay = (props) => {
35
35
  const isDismissible = useIsDismissible({ active, contentRef });
36
36
  const shouldBeContained = containerRef && contained !== false;
37
37
  const rootClassNames = classNames(s.root, visible && s["--visible"], transparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], shouldBeContained && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
38
+ const backdropClassNames = classNames(s.backdrop, visible && s["--visible"], transparent && s["--click-through"], animated && s["--animated"], shouldBeContained && s["--contained"]);
38
39
  const isInsideContent = (el) => {
39
40
  // Clicked on another portal rendered above the overlay so it's considered as a part of the modal
40
41
  if (!scopeRef.current?.contains(el))
@@ -115,6 +116,26 @@ const Overlay = (props) => {
115
116
  });
116
117
  return () => trapFocus.release();
117
118
  }, [rendered, containerRef]);
119
+ /**
120
+ * iOS Safari tints its toolbars with the color of the fixed elements attached to the screen edges,
121
+ * so the backdrop is positioned absolutely there and is aligned with the viewport manually.
122
+ * Its top margin is kept as the offset from the viewport edge to let it bleed under the browser toolbars.
123
+ * Page scroll is locked with overflow only on iOS, so the scroll position stays the same while it's rendered
124
+ */
125
+ useIsomorphicLayoutEffect(() => {
126
+ // Backdrop is only in the dom once the overlay is rendered and mounted
127
+ const backdropEl = backdropRef.current;
128
+ if (!backdropEl || shouldBeContained)
129
+ return;
130
+ const style = window.getComputedStyle(backdropEl);
131
+ if (style.position !== "absolute")
132
+ return;
133
+ backdropEl.style.setProperty("top", "0px");
134
+ backdropEl.style.setProperty("left", "0px");
135
+ const rect = backdropEl.getBoundingClientRect();
136
+ backdropEl.style.setProperty("top", `${Number.parseFloat(style.marginTop) - rect.top}px`);
137
+ backdropEl.style.setProperty("left", `${-rect.left}px`);
138
+ }, [rendered, mounted, shouldBeContained]);
118
139
  // Unlock scroll on unmount
119
140
  React.useEffect(() => {
120
141
  return () => unlockScroll();
@@ -127,20 +148,21 @@ const Overlay = (props) => {
127
148
  if (transparent)
128
149
  return;
129
150
  // Applied directly to the backdrop element to keep the style recalculation scoped to it
130
- backdropRef.current?.style.setProperty("opacity", `${value}`);
151
+ backdropRef.current?.style.setProperty("--rs-overlay-backdrop-opacity", `${value}`);
131
152
  },
132
153
  }), [transparent]);
133
154
  if (!rendered || !mounted)
134
155
  return null;
135
- return (_jsx(Portal, { targetRef: containerRef, children: _jsx(Portal.Scope, { scopeRef: scopeRef, children: (ref) => (_jsx("div", { ...attributes, ref: (node) => {
136
- rootRef.current = node;
137
- ref.current = node;
138
- }, style: {
139
- "--rs-overlay-offset-x": containerRef ? `${offset[0]}px` : undefined,
140
- "--rs-overlay-offset-y": containerRef ? `${offset[1]}px` : undefined,
141
- },
142
- // Clicking the backdrop is a pointer shortcut, keyboard users close it with Escape
143
- role: "presentation", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: s.wrapper, children: [_jsx("div", { className: s.backdrop, ref: backdropRef }), _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) })] }) })) }) }));
156
+ const offsetStyle = {
157
+ "--rs-overlay-offset-x": containerRef ? `${offset[0]}px` : undefined,
158
+ "--rs-overlay-offset-y": containerRef ? `${offset[1]}px` : undefined,
159
+ };
160
+ return (_jsxs(Portal, { targetRef: containerRef, children: [_jsx("div", { className: backdropClassNames, style: offsetStyle, ref: backdropRef, "aria-hidden": "true" }), _jsx(Portal.Scope, { scopeRef: scopeRef, children: (ref) => (_jsx("div", { ...attributes, ref: (node) => {
161
+ rootRef.current = node;
162
+ ref.current = node;
163
+ }, style: offsetStyle,
164
+ // Clicking the backdrop is a pointer shortcut, keyboard users close it with Escape
165
+ role: "presentation", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) })] }));
144
166
  };
145
167
  Overlay.displayName = "Overlay";
146
168
  export default Overlay;
package/dist/components/Overlay/Overlay.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{position:absolute;inset:0;z-index:-1;background-color:rgb(from var(--rs-color-black) r g b/70%);opacity:0;will-change:opacity}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible,.root.--visible .backdrop{opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .backdrop{opacity:0}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated,.root.--animated .backdrop{transition:opacity var(--rs-duration-medium) var(--rs-easing-accelerate)}.root.--animated.--visible,.root.--animated.--visible .backdrop{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}
1
+ .root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{--rs-overlay-backdrop-opacity:1;position:fixed;inset:0;z-index:var(--rs-z-index-fixed);background-color:rgb(from var(--rs-color-black) r g b/70%);opacity:0;will-change:opacity;pointer-events:none}@supports (-webkit-touch-callout:none){.backdrop:not(.--contained){--rs-overlay-backdrop-bleed:50lvh;position:absolute;inset:0 auto auto 0;width:100vw;height:calc(100dvh + var(--rs-overlay-backdrop-bleed) * 2);margin-top:calc(var(--rs-overlay-backdrop-bleed) * -1)}}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{opacity:1}.backdrop.--visible{opacity:var(--rs-overlay-backdrop-opacity)}.root.--click-through{color:inherit;pointer-events:none}.backdrop.--click-through{opacity:0}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.backdrop.--contained{position:absolute;inset:var(--rs-overlay-offset-y) auto auto var(--rs-overlay-offset-x);width:100%;height:100%}.backdrop.--animated,.root.--animated{transition:opacity var(--rs-duration-medium) var(--rs-easing-accelerate)}.backdrop.--animated.--visible,.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}
package/dist/components/Popover/tests/Popover.stories.d.ts CHANGED
@@ -60,6 +60,9 @@ export declare const className: StoryObj;
60
60
  export declare const testNested: {
61
61
  name: string;
62
62
  render: () => import("react").JSX.Element;
63
+ play: ({ canvasElement }: {
64
+ canvasElement: HTMLElement;
65
+ }) => Promise<void>;
63
66
  };
64
67
  export declare const testWithTooltip: {
65
68
  name: string;
package/dist/components/Popover/tests/Popover.stories.js CHANGED
@@ -295,13 +295,35 @@ export const testNested = {
295
295
  Popover content
296
296
  <Popover>
297
297
  <Popover.Trigger>
298
- {(attributes) => <Button attributes={attributes}>Open</Button>}
298
+ {(attributes) => <Button attributes={attributes}>Open nested</Button>}
299
299
  </Popover.Trigger>
300
300
  <Popover.Content>Hello</Popover.Content>
301
301
  </Popover>
302
302
  </View>
303
303
  </Popover.Content>
304
304
  </Popover>),
305
+ play: async ({ canvasElement }) => {
306
+ const canvas = within(canvasElement.ownerDocument.body);
307
+ await userEvent.click(canvas.getByRole("button", { name: "Open" }));
308
+ const content = await canvas.findByText("Popover content");
309
+ await userEvent.click(canvas.getByRole("button", { name: "Open nested" }));
310
+ const nestedContent = await canvas.findByText("Hello");
311
+ // Clicks inside the nested popover are not outside clicks for the parent popover
312
+ await userEvent.click(nestedContent);
313
+ await sleep(100);
314
+ expect(content).toBeInTheDocument();
315
+ expect(nestedContent).toBeInTheDocument();
316
+ // Outside clicks close the popovers one by one, starting from the latest opened one
317
+ await userEvent.click(canvasElement.ownerDocument.body);
318
+ await waitFor(() => {
319
+ expect(nestedContent).not.toBeInTheDocument();
320
+ });
321
+ expect(content).toBeInTheDocument();
322
+ await userEvent.click(canvasElement.ownerDocument.body);
323
+ await waitFor(() => {
324
+ expect(content).not.toBeInTheDocument();
325
+ });
326
+ },
305
327
  };
306
328
  export const testWithTooltip = {
307
329
  name: "test: with tooltip",
package/dist/components/Tooltip/tests/Tooltip.stories.d.ts CHANGED
@@ -23,6 +23,9 @@ export declare const defaultActive: StoryObj<{
23
23
  handleOpen: ReturnType<typeof fn>;
24
24
  handleClose: ReturnType<typeof fn>;
25
25
  }>;
26
+ export declare const disableContentHover: StoryObj<{
27
+ handleClose: ReturnType<typeof fn>;
28
+ }>;
26
29
  export declare const contentMaxWidth: {
27
30
  name: string;
28
31
  render: () => import("react").JSX.Element;
package/dist/components/Tooltip/tests/Tooltip.stories.js CHANGED
@@ -136,6 +136,42 @@ export const defaultActive = {
136
136
  // });
137
137
  },
138
138
  };
139
+ export const disableContentHover = {
140
+ name: "disableContentHover",
141
+ args: {
142
+ handleClose: fn(),
143
+ },
144
+ render: (args) => {
145
+ const renderTriggers = (text) => Array.from({ length: 4 }).map((_, index) => (<Demo key={index} position="bottom" text={text} disableContentHover onClose={index === 0 ? args.handleClose : undefined}/>));
146
+ return (<Example>
147
+ <Example.Item title="disableContentHover, row of triggers">
148
+ <View direction="row" gap={2}>
149
+ {renderTriggers("Very long tooltip text that overlaps the neighbouring triggers")}
150
+ </View>
151
+ </Example.Item>
152
+
153
+ <Example.Item title="disableContentHover, column of triggers">
154
+ <View gap={1} align="start">
155
+ {renderTriggers("Tooltip opens over the next trigger")}
156
+ </View>
157
+ </Example.Item>
158
+ </Example>);
159
+ },
160
+ play: async ({ canvasElement, args }) => {
161
+ const canvas = within(canvasElement.ownerDocument.body);
162
+ const trigger = canvas.getAllByRole("button")[0];
163
+ await userEvent.hover(trigger);
164
+ const content = await canvas.findByRole("tooltip");
165
+ await waitFor(() => {
166
+ expect(getComputedStyle(content).pointerEvents).toBe("none");
167
+ });
168
+ // Closes right away without waiting for the pointer to leave the safe area
169
+ await userEvent.unhover(trigger);
170
+ await waitFor(() => {
171
+ expect(args.handleClose).toHaveBeenCalledTimes(1);
172
+ }, { timeout: 500 });
173
+ },
174
+ };
139
175
  export const contentMaxWidth = {
140
176
  name: "contentMaxWidth",
141
177
  render: () => (<Example>
package/dist/hooks/useOnClickOutside.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import React from "react";
2
2
  declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, options?: {
3
3
  disabled?: boolean;
4
+ /**
5
+ * Handle clicks in the capture phase, so they are detected even when
6
+ * the clicked element stops the event propagation
7
+ */
8
+ capture?: boolean;
4
9
  }) => void;
5
10
  export default useOnClickOutside;
package/dist/hooks/useOnClickOutside.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { keys } from "@reshaped/utilities";
3
3
  import useHandlerRef from "./useHandlerRef.js";
4
4
  const useOnClickOutside = (refs, handler, options) => {
5
- const { disabled } = options || {};
5
+ const { disabled, capture } = options || {};
6
6
  const handlerRef = useHandlerRef(handler);
7
7
  /**
8
8
  * We're checking the element position in the DOM on mousedown to make sure
@@ -63,13 +63,13 @@ const useOnClickOutside = (refs, handler, options) => {
63
63
  return;
64
64
  handlerRef.current?.(event);
65
65
  };
66
- document.addEventListener("click", handleClick);
66
+ document.addEventListener("click", handleClick, { capture });
67
67
  document.addEventListener("contextmenu", handleContextMenu, { capture: true });
68
68
  return () => {
69
- document.removeEventListener("click", handleClick);
69
+ document.removeEventListener("click", handleClick, { capture });
70
70
  document.removeEventListener("contextmenu", handleContextMenu, { capture: true });
71
71
  };
72
72
  // oxlint-disable-next-line react-hooks/exhaustive-deps
73
- }, [handlerRef, disabled, ...refs]);
73
+ }, [handlerRef, disabled, capture, ...refs]);
74
74
  };
75
75
  export default useOnClickOutside;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reshaped",
3
- "version": "4.3.0",
3
+ "version": "4.4.0-canary.1",
4
4
  "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
5
5
  "keywords": [
6
6
  "accessibility",
@@ -81,8 +81,8 @@
81
81
  "cssnano": "8.0.2",
82
82
  "csstype": "3.2.3",
83
83
  "postcss-custom-media": "12.0.1",
84
- "@reshaped/utilities": "4.3.0",
85
- "@reshaped/theming": "4.3.0"
84
+ "@reshaped/theming": "4.4.0-canary.1",
85
+ "@reshaped/utilities": "4.4.0-canary.1"
86
86
  },
87
87
  "peerDependencies": {
88
88
  "postcss": "^8",