reshaped 3.0.2 → 3.0.4

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 (59) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.d.ts +3 -3
  4. package/dist/bundle.js +10 -10
  5. package/dist/components/Autocomplete/Autocomplete.js +2 -2
  6. package/dist/components/Autocomplete/Autocomplete.types.d.ts +2 -1
  7. package/dist/components/Carousel/Carousel.types.d.ts +2 -2
  8. package/dist/components/Carousel/index.d.ts +1 -1
  9. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +3 -2
  10. package/dist/components/DropdownMenu/index.d.ts +1 -1
  11. package/dist/components/Modal/Modal.js +9 -4
  12. package/dist/components/Popover/Popover.js +2 -2
  13. package/dist/components/Popover/Popover.types.d.ts +3 -2
  14. package/dist/components/Popover/index.d.ts +1 -1
  15. package/dist/components/Reshaped/Reshaped.css +1 -1
  16. package/dist/components/Slider/Slider.module.css +1 -1
  17. package/dist/components/Slider/Slider.types.d.ts +2 -0
  18. package/dist/components/Slider/Slider.utilities.d.ts +4 -0
  19. package/dist/components/Slider/Slider.utilities.js +10 -0
  20. package/dist/components/Slider/SliderControlled.js +31 -27
  21. package/dist/components/Slider/SliderThumb.js +2 -2
  22. package/dist/components/Slider/tests/Slider.stories.d.ts +1 -0
  23. package/dist/components/Slider/tests/Slider.stories.js +9 -0
  24. package/dist/components/Text/Text.js +1 -1
  25. package/dist/components/Text/Text.module.css +1 -1
  26. package/dist/components/Text/Text.types.d.ts +1 -1
  27. package/dist/components/Text/tests/Text.stories.js +3 -0
  28. package/dist/components/Tooltip/Tooltip.js +2 -2
  29. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  30. package/dist/components/Tooltip/tests/Tooltip.stories.js +25 -1
  31. package/dist/components/View/View.js +3 -1
  32. package/dist/components/View/View.module.css +1 -1
  33. package/dist/components/View/View.types.d.ts +1 -1
  34. package/dist/components/View/tests/View.stories.js +6 -0
  35. package/dist/components/_private/Flyout/Flyout.constants.d.ts +3 -0
  36. package/dist/components/_private/Flyout/Flyout.constants.js +3 -0
  37. package/dist/components/_private/Flyout/Flyout.module.css +1 -1
  38. package/dist/components/_private/Flyout/Flyout.types.d.ts +9 -3
  39. package/dist/components/_private/Flyout/FlyoutContent.js +7 -4
  40. package/dist/components/_private/Flyout/FlyoutControlled.js +33 -18
  41. package/dist/components/_private/Flyout/index.d.ts +1 -1
  42. package/dist/components/_private/Flyout/tests/Flyout.stories.d.ts +3 -0
  43. package/dist/components/_private/Flyout/tests/Flyout.stories.js +62 -0
  44. package/dist/components/_private/Flyout/useFlyout.d.ts +4 -1
  45. package/dist/components/_private/Flyout/useFlyout.js +21 -16
  46. package/dist/components/_private/Flyout/utilities/calculatePosition.d.ts +1 -0
  47. package/dist/components/_private/Flyout/utilities/calculatePosition.js +3 -3
  48. package/dist/components/_private/Flyout/utilities/cooldown.d.ts +8 -0
  49. package/dist/components/_private/Flyout/utilities/cooldown.js +18 -0
  50. package/dist/index.d.ts +3 -3
  51. package/dist/styles/border/border.module.css +1 -0
  52. package/dist/styles/border/index.d.ts +3 -0
  53. package/dist/styles/border/index.js +10 -0
  54. package/dist/styles/types.d.ts +1 -0
  55. package/dist/utilities/dom.d.ts +2 -0
  56. package/dist/utilities/dom.js +9 -0
  57. package/package.json +1 -1
  58. package/dist/constants/timeouts.d.ts +0 -2
  59. package/dist/constants/timeouts.js +0 -2
package/dist/components/View/View.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));--rs-view-border-width:0px;gap:var(--rs-view-gap-value);z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top)) - var(--rs-view-border-width)) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)) - var(--rs-view-border-width))}.--padding-top{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top))}.--padding-bottom{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom))}.--padding-start{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start))}.--padding-end{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end))}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-warning-faded{background-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--bd{--rs-view-border-width:1px;border:var(--rs-view-border-width) solid var(--rs-view-border-color)}.--bd-neutral-faded{--rs-view-border-color:var(--rs-color-border-neutral-faded)}.--bd-neutral{--rs-view-border-color:var(--rs-color-border-neutral)}.--bd-positive{--rs-view-border-color:var(--rs-color-border-positive)}.--bd-positive-faded{--rs-view-border-color:var(--rs-color-border-positive-faded)}.--bd-warning{--rs-view-border-color:var(--rs-color-border-warning)}.--bd-warning-faded{--rs-view-border-color:var(--rs-color-border-warning-faded)}.--bd-critical{--rs-view-border-color:var(--rs-color-border-critical)}.--bd-critical-faded{--rs-view-border-color:var(--rs-color-border-critical-faded)}.--bd-primary{--rs-view-border-color:var(--rs-color-border-primary)}.--bd-primary-faded{--rs-view-border-color:var(--rs-color-border-primary-faded)}.--bd-disabled{--rs-view-border-color:var(--rs-color-border-disabled)}.--bd-brand{--rs-view-border-color:var(--rs-color-brand)}.--bd-transparent{--rs-view-border-color:transparent}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.--padding{--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.--padding-top{--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.--padding-bottom{--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.--padding-start{--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.--padding-end{--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-m)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-m)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-m)}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-l)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-l)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-l)}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-xl)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-xl)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-xl)}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}
1
+ .root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));--rs-view-border-width:0px;gap:var(--rs-view-gap-value);z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top)) - var(--rs-view-border-width)) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)) - var(--rs-view-border-width))}.--padding-top{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top))}.--padding-bottom{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom))}.--padding-start{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start))}.--padding-end{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end))}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-warning{background-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-warning-faded{background-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-brand{background-color:var(--rs-color-brand);color:var(--rs-color-on-brand)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--overflow-hidden{overflow:hidden}.--overflow-auto{overflow:auto}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (--rs-viewport-m ){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (--rs-viewport-l ){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (--rs-viewport-xl ){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (--rs-viewport-m ){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (--rs-viewport-l ){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (--rs-viewport-xl ){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.--padding{--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.--padding-top{--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.--padding-bottom{--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.--padding-start{--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.--padding-end{--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (--rs-viewport-m ){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-m)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-m)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-m)}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (--rs-viewport-l ){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-l)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-l)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-l)}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (--rs-viewport-xl ){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-xl)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-xl)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-xl)}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}
package/dist/components/View/View.types.d.ts CHANGED
@@ -29,7 +29,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
29
29
  bleed?: G.Responsive<number>;
30
30
  textAlign?: "center" | "start" | "end";
31
31
  backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
32
- borderColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";
32
+ borderColor?: G.Responsive<TStyles.BorderColor>;
33
33
  borderRadius?: G.Responsive<TStyles.Radius>;
34
34
  position?: G.Responsive<TStyles.Position>;
35
35
  inset?: G.Responsive<number>;
package/dist/components/View/tests/View.stories.js CHANGED
@@ -566,6 +566,12 @@ export const border = () => (<Example>
566
566
  Content
567
567
  </View>
568
568
  </Example.Item>
569
+
570
+ <Example.Item title={["responsive", "[s] primary", "[m+] neutral"]}>
571
+ <View borderColor={{ s: "primary", m: "neutral" }} padding={4}>
572
+ Content
573
+ </View>
574
+ </Example.Item>
569
575
  </Example>);
570
576
  export const radius = () => (<Example>
571
577
  <Example.Item title="radius: small">
package/dist/components/_private/Flyout/Flyout.constants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const mouseEnter = 800;
2
+ export declare const mouseEnterShort = 50;
3
+ export declare const mouseLeave = 150;
package/dist/components/_private/Flyout/Flyout.constants.js ADDED
@@ -0,0 +1,3 @@
1
+ export const mouseEnter = 800;
2
+ export const mouseEnterShort = 50;
3
+ export const mouseLeave = 150;
package/dist/components/_private/Flyout/Flyout.module.css CHANGED
@@ -1 +1 @@
1
- .content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}
1
+ .content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}.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-fast);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}.content.--hover-disabled{pointer-events:none}
package/dist/components/_private/Flyout/Flyout.types.d.ts CHANGED
@@ -9,6 +9,7 @@ export type Width = "trigger" | string;
9
9
  export type Options = {
10
10
  width?: Width;
11
11
  position: Position;
12
+ container?: HTMLElement | null;
12
13
  rtl: boolean;
13
14
  forcePosition?: boolean;
14
15
  };
@@ -32,9 +33,10 @@ export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
32
33
  /**
33
34
  * Component
34
35
  */
35
- export type InstanceRef = {
36
+ export type Instance = {
36
37
  open: () => void;
37
38
  close: () => void;
39
+ updatePosition: () => void;
38
40
  } | undefined;
39
41
  type WithUncontrolled = {
40
42
  active?: never;
@@ -63,7 +65,9 @@ type BaseProps = {
63
65
  position?: Position;
64
66
  forcePosition?: boolean;
65
67
  trapFocusMode?: TrapMode;
68
+ disabled?: boolean;
66
69
  disableHideAnimation?: boolean;
70
+ disableContentHover?: boolean;
67
71
  children?: React.ReactNode;
68
72
  onOpen?: () => void;
69
73
  onClose?: () => void;
@@ -71,7 +75,8 @@ type BaseProps = {
71
75
  contentGap?: number;
72
76
  contentClassName?: string;
73
77
  contentAttributes?: G.Attributes<"div">;
74
- instanceRef?: React.Ref<InstanceRef>;
78
+ instanceRef?: React.Ref<Instance>;
79
+ containerRef?: React.RefObject<HTMLElement>;
75
80
  };
76
81
  export type DefaultProps = Required<{
77
82
  position: BaseProps["position"];
@@ -107,6 +112,7 @@ export type ContextProps = {
107
112
  handleFocus: () => void;
108
113
  handleContentMouseDown: () => void;
109
114
  handleContentMouseUp: () => void;
110
- } & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap">;
115
+ isSubmenu: boolean;
116
+ } & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "containerRef" | "disableContentHover">;
111
117
  export type TriggerContextProps = Pick<ContextProps, "triggerElRef">;
112
118
  export {};
package/dist/components/_private/Flyout/FlyoutContent.js CHANGED
@@ -5,11 +5,12 @@ import { classNames } from "../../../utilities/helpers.js";
5
5
  import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
6
6
  import Portal from "../Portal/index.js";
7
7
  import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
8
+ import cooldown from "./utilities/cooldown.js";
8
9
  import { useFlyoutContext } from "./Flyout.context.js";
9
10
  import s from "./Flyout.module.css";
10
11
  const FlyoutContent = (props) => {
11
12
  const { children, className, attributes } = props;
12
- const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
13
+ const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
13
14
  const { styles, status, position } = flyout;
14
15
  const [mounted, setMounted] = React.useState(false);
15
16
  useIsomorphicLayoutEffect(() => {
@@ -28,8 +29,9 @@ const FlyoutContent = (props) => {
28
29
  if (status === "idle" || !mounted)
29
30
  return null;
30
31
  const contentClassNames = classNames(s.content, status === "visible" && s["--visible"],
31
- // Animate after correct position has been assigned
32
- ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"]);
32
+ // animating only when we're opening the first flyout or closing the last flyout within the same cooldown
33
+ // content is rendered only once flyout is already warm so checking for timer instead
34
+ (cooldown.status === "cooling" || !cooldown.timer || isSubmenu) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"], triggerType === "hover" && disableContentHover && s["--hover-disabled"]);
33
35
  // className is applied to inner element because it has the transform and is treated like a real root element
34
36
  const innerClassNames = classNames(s.inner, className, contentClassName);
35
37
  let role;
@@ -52,6 +54,7 @@ const FlyoutContent = (props) => {
52
54
  "--rs-flyout-gap": contentGap,
53
55
  }, 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, "aria-modal": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }));
54
56
  const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
55
- return (_jsx(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable }, children: content }));
57
+ const scrollableRef = closestScrollable === document.body ? undefined : { current: closestScrollable };
58
+ return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });
56
59
  };
57
60
  export default FlyoutContent;
package/dist/components/_private/Flyout/FlyoutControlled.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import React from "react";
4
- import { debounce } from "../../../utilities/helpers.js";
5
4
  import TrapFocus from "../../../utilities/a11y/TrapFocus.js";
6
- import * as timeouts from "../../../constants/timeouts.js";
7
5
  import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
8
6
  import useElementId from "../../../hooks/useElementId.js";
9
7
  import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
@@ -12,11 +10,15 @@ import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
12
10
  import useRTL from "../../../hooks/useRTL.js";
13
11
  import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
14
12
  import useFlyout from "./useFlyout.js";
13
+ import * as timeouts from "./Flyout.constants.js";
14
+ import cooldown from "./utilities/cooldown.js";
15
15
  import { Provider, useFlyoutTriggerContext, useFlyoutContext } from "./Flyout.context.js";
16
16
  const FlyoutRoot = (props) => {
17
- const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
17
+ const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
18
18
  const parentFlyoutContext = useFlyoutContext();
19
19
  const parentFlyoutTriggerContext = useFlyoutTriggerContext();
20
+ const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
21
+ parentFlyoutContext.trapFocusMode === "content-menu";
20
22
  const [isRTL] = useRTL();
21
23
  const internalTriggerElRef = React.useRef(null);
22
24
  /**
@@ -36,6 +38,7 @@ const FlyoutRoot = (props) => {
36
38
  width,
37
39
  position: passedPosition,
38
40
  defaultActive: passedActive,
41
+ container: containerRef?.current,
39
42
  forcePosition,
40
43
  });
41
44
  const { status, updatePosition, render, hide, remove, show } = flyout;
@@ -50,24 +53,23 @@ const FlyoutRoot = (props) => {
50
53
  * Called from the internal actions
51
54
  */
52
55
  const handleOpen = React.useCallback(() => {
53
- const canOpen = !lockedRef.current && status === "idle";
56
+ const canOpen = !lockedRef.current && status === "idle" && !disabled;
54
57
  if (!canOpen)
55
58
  return;
56
59
  onOpen?.();
57
60
  // eslint-disable-next-line react-hooks/exhaustive-deps
58
- }, [status]);
61
+ }, [status, disabled]);
59
62
  const handleClose = React.useCallback((options) => {
60
63
  const isLocked = triggerType === "click" && !isDismissible();
61
- const canClose = !isLocked && status !== "idle";
64
+ const canClose = !isLocked && status !== "idle" && !disabled;
62
65
  if (!canClose)
63
66
  return;
64
67
  onClose?.();
65
- if (options?.closeParents) {
68
+ if (options?.closeParents)
66
69
  parentFlyoutContext?.handleClose?.();
67
- }
68
70
  },
69
71
  // eslint-disable-next-line react-hooks/exhaustive-deps
70
- [status, isDismissible, triggerType]);
72
+ [status, isDismissible, triggerType, disabled]);
71
73
  /**
72
74
  * Trigger event handlers
73
75
  */
@@ -89,9 +91,12 @@ const FlyoutRoot = (props) => {
89
91
  }, [handleOpen]);
90
92
  const handleMouseEnter = React.useCallback(() => {
91
93
  clearTimer();
92
- timerRef.current = setTimeout(handleOpen, timeouts.mouseEnter);
93
- }, [clearTimer, timerRef, handleOpen]);
94
+ timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
95
+ if (!isSubmenu)
96
+ cooldown.warm();
97
+ }, [clearTimer, timerRef, handleOpen, isSubmenu]);
94
98
  const handleMouseLeave = React.useCallback(() => {
99
+ cooldown.cool();
95
100
  clearTimer();
96
101
  timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
97
102
  }, [clearTimer, timerRef, handleClose]);
@@ -130,9 +135,13 @@ const FlyoutRoot = (props) => {
130
135
  }
131
136
  /**
132
137
  * Check that transitions are enabled and it has been triggered on tooltip open
133
- * (keyboard focus navigation could move too fast and ignore the transitions completely)
138
+ * - keyboard focus navigation could move too fast and ignore the transitions completely
139
+ * - warmed up tooltips get removed instantly
134
140
  */
135
- if (checkTransitions() && !disableHideAnimation && transitionStartedRef.current) {
141
+ if (checkTransitions() &&
142
+ !disableHideAnimation &&
143
+ transitionStartedRef.current &&
144
+ cooldown.status !== "warm") {
136
145
  hide();
137
146
  }
138
147
  else {
@@ -193,10 +202,12 @@ const FlyoutRoot = (props) => {
193
202
  * Update position on resize or RTL
194
203
  */
195
204
  React.useEffect(() => {
196
- const update = debounce(updatePosition, 10);
197
- window.addEventListener("resize", update);
198
- return () => window.removeEventListener("resize", update);
199
- }, [updatePosition]);
205
+ const resizeObserver = new ResizeObserver(() => updatePosition({ sync: true }));
206
+ resizeObserver.observe(document.body);
207
+ if (triggerElRef.current)
208
+ resizeObserver.observe(triggerElRef.current);
209
+ return () => resizeObserver.disconnect();
210
+ }, [updatePosition, triggerElRef]);
200
211
  React.useEffect(() => {
201
212
  updatePosition();
202
213
  }, [isRTL, updatePosition]);
@@ -206,7 +217,8 @@ const FlyoutRoot = (props) => {
206
217
  React.useImperativeHandle(instanceRef, () => ({
207
218
  open: handleOpen,
208
219
  close: handleClose,
209
- }), [handleOpen, handleClose]);
220
+ updatePosition: () => updatePosition({ sync: true }),
221
+ }), [handleOpen, handleClose, updatePosition]);
210
222
  useHotkeys({ Escape: () => handleClose() }, [handleClose]);
211
223
  useOnClickOutside([flyoutElRef, triggerElRef], () => {
212
224
  // Clicking outside changes focused element so we don't need to set it back ourselves
@@ -235,6 +247,9 @@ const FlyoutRoot = (props) => {
235
247
  contentGap,
236
248
  contentClassName,
237
249
  contentAttributes,
250
+ containerRef,
251
+ disableContentHover,
252
+ isSubmenu,
238
253
  }, children: children }));
239
254
  };
240
255
  export default FlyoutRoot;
package/dist/components/_private/Flyout/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default } from "./Flyout";
2
2
  export { useFlyoutContext } from "./Flyout.context";
3
- export type { Props as FlyoutProps, InstanceRef as FlyoutInstanceRef, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";
3
+ export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";
package/dist/components/_private/Flyout/tests/Flyout.stories.d.ts CHANGED
@@ -11,8 +11,11 @@ export declare const modeContentMenuClick: () => React.JSX.Element;
11
11
  export declare const modeDialogHover: () => React.JSX.Element;
12
12
  export declare const modeActionMenuHover: () => React.JSX.Element;
13
13
  export declare const modeContentMenuHover: () => React.JSX.Element;
14
+ export declare const disableContentHover: () => React.JSX.Element;
15
+ export declare const customPortalTarget: () => React.JSX.Element;
14
16
  export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
15
17
  export declare const testInsideScrollArea: () => React.JSX.Element;
16
18
  export declare const testInsideFixed: () => React.JSX.Element;
19
+ export declare const testDynamicBounds: () => React.JSX.Element;
17
20
  export declare const widthTrigger: () => React.JSX.Element;
18
21
  export declare const scopedTheming: () => React.JSX.Element;
package/dist/components/_private/Flyout/tests/Flyout.stories.js CHANGED
@@ -78,6 +78,31 @@ export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFoc
78
78
  <button type="button">Item 2</button>
79
79
  <button type="button">Close</button>
80
80
  </Demo>);
81
+ export const disableContentHover = () => (<Demo triggerType="hover" disableContentHover>
82
+ Content
83
+ </Demo>);
84
+ export const customPortalTarget = () => {
85
+ const portalRef = React.useRef(null);
86
+ return (<div style={{ position: "relative", padding: 16, height: 200, overflow: "auto" }} ref={portalRef}>
87
+ <Flyout position="bottom-start" containerRef={portalRef} active>
88
+ <Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
89
+ <Flyout.Content>
90
+ <div style={{
91
+ background: "var(--rs-color-background-elevation-overlay)",
92
+ padding: "var(--rs-unit-x4)",
93
+ height: 100,
94
+ width: 160,
95
+ borderRadius: "var(--rs-radius-medium)",
96
+ border: "1px solid var(--rs-color-border-neutral-faded)",
97
+ boxSizing: "border-box",
98
+ }}>
99
+ {"Content"}
100
+ </div>
101
+ </Flyout.Content>
102
+ </Flyout>
103
+ <div style={{ height: 1000 }}/>
104
+ </div>);
105
+ };
81
106
  export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
82
107
  Should work on mobile
83
108
  <button type="button">Item 1</button>
@@ -131,6 +156,43 @@ export const testInsideFixed = () => (<Example>
131
156
  <div style={{ height: 2000 }}/>
132
157
  </Example.Item>
133
158
  </Example>);
159
+ export const testDynamicBounds = () => {
160
+ const [left, setLeft] = React.useState("50%");
161
+ const [size, setSize] = React.useState("medium");
162
+ return (<View gap={4}>
163
+ <View direction="row" gap={2}>
164
+ <Button onClick={() => setLeft("0%")}>Left</Button>
165
+ <Button onClick={() => setLeft("50%")}>Center</Button>
166
+ <Button onClick={() => setLeft("100%")}>Right</Button>
167
+ <Button onClick={() => setSize("large")}>Large button</Button>
168
+ <Button onClick={() => setSize("medium")}>Small button</Button>
169
+ </View>
170
+ <View height={100}>
171
+ <Flyout position="bottom" active>
172
+ <Flyout.Trigger>
173
+ {(attributes) => (<div style={{ position: "absolute", left, top: "50%" }}>
174
+ <Button color="primary" attributes={attributes} size={size}>
175
+ Open
176
+ </Button>
177
+ </div>)}
178
+ </Flyout.Trigger>
179
+ <Flyout.Content>
180
+ <div style={{
181
+ background: "var(--rs-color-background-elevation-overlay)",
182
+ padding: "var(--rs-unit-x4)",
183
+ height: 100,
184
+ width: 160,
185
+ borderRadius: "var(--rs-radius-medium)",
186
+ border: "1px solid var(--rs-color-border-neutral-faded)",
187
+ boxSizing: "border-box",
188
+ }}>
189
+ {"Content"}
190
+ </div>
191
+ </Flyout.Content>
192
+ </Flyout>
193
+ </View>
194
+ </View>);
195
+ };
134
196
  export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
135
197
  <Flyout.Trigger>
136
198
  {(attributes) => <button {...attributes}>Trigger with long text</button>}
package/dist/components/_private/Flyout/useFlyout.d.ts CHANGED
@@ -9,9 +9,12 @@ type PassedFlyoutOptions = {
9
9
  position?: T.Position;
10
10
  defaultActive?: boolean;
11
11
  forcePosition?: boolean;
12
+ container?: HTMLElement | null;
12
13
  };
13
14
  type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<T.State, "styles" | "position" | "status"> & {
14
- updatePosition: () => void;
15
+ updatePosition: (options?: {
16
+ sync?: boolean;
17
+ }) => void;
15
18
  render: () => void;
16
19
  hide: () => void;
17
20
  remove: () => void;
package/dist/components/_private/Flyout/useFlyout.js CHANGED
@@ -23,16 +23,17 @@ const getPositionOrder = (position) => {
23
23
  /**
24
24
  * Check if element visually fits on the screen
25
25
  */
26
- const fullyVisible = (bounds) => {
26
+ const fullyVisible = (args) => {
27
+ const { styles, scopeOffset } = args;
27
28
  const htmlEl = document.documentElement;
28
29
  const pageLeft = htmlEl.scrollLeft;
29
30
  const pageRight = pageLeft + htmlEl.clientWidth;
30
31
  const pageTop = htmlEl.scrollTop;
31
32
  const pageBottom = pageTop + htmlEl.clientHeight;
32
- return (bounds.left >= pageLeft &&
33
- bounds.left + bounds.width <= pageRight &&
34
- bounds.top >= pageTop &&
35
- bounds.top + bounds.height <= pageBottom);
33
+ return (styles.left + scopeOffset.left >= pageLeft &&
34
+ styles.left + styles.width + scopeOffset.left <= pageRight &&
35
+ styles.top + scopeOffset.top >= pageTop &&
36
+ styles.top + styles.height + scopeOffset.top <= pageBottom);
36
37
  };
37
38
  /**
38
39
  * Order of keys here is responsible for the order of styles applied
@@ -59,7 +60,7 @@ const resetStyles = {
59
60
  * Set position of the target element to fit on the screen
60
61
  */
61
62
  const flyout = (triggerEl, flyoutEl, options) => {
62
- const { position, forcePosition, width } = options;
63
+ const { position, forcePosition, width, container } = options;
63
64
  const targetClone = flyoutEl.cloneNode(true);
64
65
  const triggerBounds = triggerEl.getBoundingClientRect();
65
66
  // Reset all styles applied on the previous hook execution
@@ -78,14 +79,14 @@ const flyout = (triggerEl, flyoutEl, options) => {
78
79
  }
79
80
  document.body.appendChild(targetClone);
80
81
  const flyoutBounds = targetClone.getBoundingClientRect();
81
- const scrollableParent = getClosestFlyoutTarget(triggerEl);
82
+ const scrollableParent = container || getClosestFlyoutTarget(triggerEl);
82
83
  const scopeBounds = scrollableParent.getBoundingClientRect();
83
84
  const scopeOffset = {
84
85
  top: scopeBounds.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
85
86
  left: scopeBounds.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
86
87
  };
87
88
  let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
88
- if (!fullyVisible(calculated.styles) && !forcePosition) {
89
+ if (!fullyVisible(calculated) && !forcePosition) {
89
90
  const order = getPositionOrder(position);
90
91
  const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
91
92
  const test = (testOrder, extraOptions = {}) => {
@@ -102,7 +103,7 @@ const flyout = (triggerEl, flyoutEl, options) => {
102
103
  scopeOffset,
103
104
  ...calculateOptions,
104
105
  });
105
- if (fullyVisible(tested.styles)) {
106
+ if (fullyVisible(tested)) {
106
107
  calculated = tested;
107
108
  return true;
108
109
  }
@@ -110,7 +111,7 @@ const flyout = (triggerEl, flyoutEl, options) => {
110
111
  });
111
112
  };
112
113
  test(order);
113
- if (!fullyVisible(calculated.styles)) {
114
+ if (!fullyVisible(calculated)) {
114
115
  test(mobileOrder, { fullWidth: true });
115
116
  }
116
117
  }
@@ -125,11 +126,13 @@ const flyoutReducer = (state, action) => {
125
126
  // Disable events before it's positioned to avoid mouseleave getting triggered
126
127
  return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
127
128
  case "position":
128
- if (state.status !== "rendered")
129
+ if (!action.payload.sync && state.status !== "rendered")
130
+ return state;
131
+ if (action.payload.sync && state.status !== "visible")
129
132
  return state;
130
133
  return {
131
134
  ...state,
132
- status: "positioned",
135
+ status: action.payload.sync ? "visible" : "positioned",
133
136
  position: action.payload.position,
134
137
  styles: { ...defaultStyles, ...action.payload.styles },
135
138
  };
@@ -150,7 +153,7 @@ const flyoutReducer = (state, action) => {
150
153
  }
151
154
  };
152
155
  const useFlyout = (originRef, targetRef, options) => {
153
- const { position: defaultPosition = "bottom", forcePosition, width } = options;
156
+ const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
154
157
  const [isRTL] = useRTL();
155
158
  const [state, dispatch] = React.useReducer(flyoutReducer, {
156
159
  position: defaultPosition,
@@ -169,7 +172,7 @@ const useFlyout = (originRef, targetRef, options) => {
169
172
  const remove = React.useCallback(() => {
170
173
  dispatch({ type: "remove" });
171
174
  }, []);
172
- const updatePosition = React.useCallback(() => {
175
+ const updatePosition = React.useCallback((options) => {
173
176
  if (!originRef.current || !targetRef.current)
174
177
  return;
175
178
  const nextFlyoutData = flyout(originRef.current, targetRef.current, {
@@ -177,9 +180,11 @@ const useFlyout = (originRef, targetRef, options) => {
177
180
  position: defaultPosition,
178
181
  forcePosition,
179
182
  rtl: isRTL,
183
+ container,
180
184
  });
181
- dispatch({ type: "position", payload: nextFlyoutData });
182
- }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
185
+ if (nextFlyoutData)
186
+ dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
187
+ }, [container, defaultPosition, forcePosition, isRTL, originRef, targetRef, width]);
183
188
  React.useEffect(() => {
184
189
  if (state.status === "rendered")
185
190
  updatePosition();
package/dist/components/_private/Flyout/utilities/calculatePosition.d.ts CHANGED
@@ -14,5 +14,6 @@ declare const calculatePosition: (args: T.Options & {
14
14
  height: number;
15
15
  };
16
16
  position: T.Position;
17
+ scopeOffset: Record<"left" | "top", number>;
17
18
  };
18
19
  export default calculatePosition;
package/dist/components/_private/Flyout/utilities/calculatePosition.js CHANGED
@@ -33,7 +33,7 @@ const calculatePosition = (args) => {
33
33
  case "start":
34
34
  case "start-top":
35
35
  case "start-bottom":
36
- left = triggerBounds.left - triggerBounds.width;
36
+ left = triggerBounds.left - flyoutBounds.width;
37
37
  break;
38
38
  case "end":
39
39
  case "end-top":
@@ -72,7 +72,7 @@ const calculatePosition = (args) => {
72
72
  break;
73
73
  case "start-bottom":
74
74
  case "end-bottom":
75
- top = triggerBounds.bottom - triggerBounds.height;
75
+ top = triggerBounds.bottom - flyoutBounds.height;
76
76
  break;
77
77
  default:
78
78
  break;
@@ -92,6 +92,6 @@ const calculatePosition = (args) => {
92
92
  widthStyle = triggerBounds.width;
93
93
  }
94
94
  const styles = { left, top, width: widthStyle, height };
95
- return { styles, position };
95
+ return { styles, position, scopeOffset };
96
96
  };
97
97
  export default calculatePosition;