reshaped 2.10.13 → 2.10.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/bundle.css +1 -1
- package/bundle.js +15 -15
- package/components/Actionable/Actionable.js +0 -1
- package/components/Autocomplete/Autocomplete.js +7 -2
- package/components/Badge/Badge.module.css +1 -1
- package/components/Badge/Badge.types.d.ts +1 -1
- package/components/Button/Button.module.css +1 -1
- package/components/Calendar/CalendarMonth.js +1 -1
- package/components/Card/Card.d.ts +1 -1
- package/components/Card/Card.module.css +1 -1
- package/components/Card/tests/Card.stories.d.ts +1 -1
- package/components/Carousel/Carousel.module.css +1 -1
- package/components/FormControl/FormControl.context.d.ts +0 -2
- package/components/Link/Link.module.css +1 -1
- package/components/Loader/Loader.module.css +1 -1
- package/components/Modal/Modal.module.css +1 -1
- package/components/Overlay/Overlay.js +5 -16
- package/components/Pagination/Pagination.module.css +1 -0
- package/components/Pagination/PaginationControlled.js +3 -2
- package/components/Reshaped/Reshaped.css +1 -1
- package/components/Scrim/Scrim.module.css +1 -1
- package/components/ScrollArea/ScrollArea.module.css +1 -1
- package/components/Skeleton/Skeleton.module.css +1 -1
- package/components/Stepper/Stepper.module.css +1 -1
- package/components/Switch/Switch.module.css +1 -1
- package/components/Table/Table.js +1 -1
- package/components/Table/Table.module.css +1 -1
- package/components/Table/tests/Table.stories.js +16 -0
- package/components/Tabs/Tabs.module.css +1 -1
- package/components/Tabs/TabsItem.js +1 -1
- package/components/Tabs/TabsList.js +9 -9
- package/components/Tabs/tests/Tabs.stories.js +1 -1
- package/components/TextField/TextField.module.css +1 -1
- package/components/TextField/tests/TextField.stories.js +1 -1
- package/components/Toast/Toast.module.css +1 -1
- package/components/Toast/ToastContainer.js +6 -6
- package/components/Toast/ToastRegion.js +1 -1
- package/components/View/View.module.css +1 -1
- package/components/_private/Flyout/Flyout.module.css +1 -1
- package/components/_private/Flyout/Flyout.types.d.ts +1 -1
- package/components/_private/Flyout/FlyoutControlled.js +8 -14
- package/config/postcss.d.ts +1 -0
- package/config/postcss.js +1 -1
- package/hooks/_private/useSingletonKeyboardMode.js +3 -3
- package/hooks/useHotkeys.d.ts +6 -6
- package/package.json +31 -31
- package/styles/padding/padding.module.css +1 -1
- package/utilities/a11y/TrapFocus.d.ts +41 -0
- package/utilities/a11y/TrapFocus.js +127 -0
- package/utilities/a11y/TrapScreenReader.d.ts +15 -0
- package/utilities/a11y/TrapScreenReader.js +39 -0
- package/utilities/a11y/focus.d.ts +24 -0
- package/utilities/a11y/focus.js +90 -0
- package/utilities/a11y/keyboardMode.d.ts +3 -0
- package/utilities/a11y/keyboardMode.js +10 -0
- package/utilities/a11y/types.d.ts +18 -0
- package/utilities/a11y/types.js +1 -0
- package/utilities/helpers.d.ts +1 -1
- package/constants/attributes.d.ts +0 -2
- package/constants/attributes.js +0 -2
- package/utilities/a11y.d.ts +0 -36
- package/utilities/a11y.js +0 -220
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { classNames, throttle } from "../../utilities/helpers.js";
|
|
5
5
|
import useRTL from "../../hooks/useRTL.js";
|
|
6
|
-
import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y.js";
|
|
6
|
+
import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/focus.js";
|
|
7
7
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
|
8
8
|
import useHotkeys from "../../hooks/useHotkeys.js";
|
|
9
9
|
import Button from "../Button/index.js";
|
|
@@ -23,8 +23,8 @@ const TabsList = (props) => {
|
|
|
23
23
|
const { children, className, attributes } = props;
|
|
24
24
|
const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
|
|
25
25
|
const [rtl] = useRTL();
|
|
26
|
-
const [
|
|
27
|
-
const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`],
|
|
26
|
+
const [fadeSide, setFadeSide] = React.useState(null);
|
|
27
|
+
const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
|
|
28
28
|
const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
|
|
29
29
|
const handleNextClick = () => {
|
|
30
30
|
elScrollableRef.current.scrollBy({
|
|
@@ -114,19 +114,19 @@ const TabsList = (props) => {
|
|
|
114
114
|
const updateArrowNav = () => {
|
|
115
115
|
const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
|
|
116
116
|
if (!isScrollable)
|
|
117
|
-
|
|
117
|
+
setFadeSide(null);
|
|
118
118
|
// scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
|
|
119
119
|
const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
|
|
120
120
|
const cutOffStart = scrollLeft > 1;
|
|
121
121
|
const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
|
|
122
122
|
if (cutOffEnd && cutOffStart)
|
|
123
|
-
return
|
|
123
|
+
return setFadeSide("both");
|
|
124
124
|
if (cutOffStart)
|
|
125
|
-
return
|
|
125
|
+
return setFadeSide("start");
|
|
126
126
|
if (cutOffEnd)
|
|
127
|
-
return
|
|
127
|
+
return setFadeSide("end");
|
|
128
128
|
};
|
|
129
|
-
const debouncedUpdateArrowNav = throttle(updateArrowNav,
|
|
129
|
+
const debouncedUpdateArrowNav = throttle(updateArrowNav, 16);
|
|
130
130
|
// Use RaF when scroll to have scrollWidth calculated correctly on the first effect
|
|
131
131
|
// For example: And edge case inside the complex flexbox layout
|
|
132
132
|
requestAnimationFrame(() => {
|
|
@@ -148,6 +148,6 @@ const TabsList = (props) => {
|
|
|
148
148
|
"--rs-tab-selection-y": selection.top,
|
|
149
149
|
"--rs-tab-selection-scale-x": selection.scaleX,
|
|
150
150
|
"--rs-tab-selection-scale-y": selection.scaleY,
|
|
151
|
-
} })] }) }), (
|
|
151
|
+
} })] }) }), (fadeSide === "start" || fadeSide === "both") && (_jsx("span", { className: s.prev, children: _jsx(Button, { onClick: handlePrevClick, size: "small", icon: IconChevronLeft, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) })), (fadeSide === "end" || fadeSide === "both") && (_jsx("span", { className: s.next, children: _jsx(Button, { onClick: handleNextClick, size: "small", icon: IconChevronRight, rounded: true, attributes: { "aria-hidden": true, tabIndex: -1 } }) }))] })));
|
|
152
152
|
};
|
|
153
153
|
export default TabsList;
|
|
@@ -15,8 +15,8 @@ export const variant = () => (<Example>
|
|
|
15
15
|
<Example.Item title="variant: default">
|
|
16
16
|
<Tabs>
|
|
17
17
|
<Tabs.List>
|
|
18
|
-
<Tabs.Item value="0">Item 1</Tabs.Item>
|
|
19
18
|
<Tabs.Item value="1">Long item 2</Tabs.Item>
|
|
19
|
+
<Tabs.Item value="0">Item 1</Tabs.Item>
|
|
20
20
|
<Tabs.Item value="2">Very long item 3</Tabs.Item>
|
|
21
21
|
</Tabs.List>
|
|
22
22
|
</Tabs>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-text-field-gap);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;
|
|
1
|
+
.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-text-field-gap);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;padding:calc(var(--rs-p-v) - 1px) 0;position:relative;z-index:0}.root:focus-within:not(:has(button:focus,a:focus)){border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) 0;outline:none;padding:0 var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex;flex-shrink:0}.attachment--position-start{gap:var(--rs-text-field-gap);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end{gap:var(--rs-unit-x1);padding-inline-end:var(--rs-unit-x1)}.attachment--position-end .affix,.attachment--position-end .icon{padding-inline-end:calc(var(--rs-text-field-gap) - var(--rs-unit-x1))}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:var(--rs-text-field-gap)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -92,7 +92,7 @@ export const slots = () => (<Example>
|
|
|
92
92
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={24}/>}/>
|
|
93
93
|
</Example.Item>
|
|
94
94
|
<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
|
|
95
|
-
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<
|
|
95
|
+
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }}/>}/>
|
|
96
96
|
</Example.Item>
|
|
97
97
|
</Example>);
|
|
98
98
|
export const formControl = () => (<Example>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}
|
|
1
|
+
.container{display:block;opacity:0;position:relative;transition:var(--rs-duration-medium) ease-out;transition-property:transform,height,opacity;width:100%}.container--visible{opacity:1}.container--visible .wrapper{height:calc(100% - var(--rs-unit-x2))}.container--index-0{z-index:var(--rs-z-index-raised)}.container--index-1{height:var(--rs-unit-x2)!important}.container--index-1 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x1) * -1)) translateZ(0) scaleX(0.9)}.container--index-2{height:var(--rs-unit-x2)!important}.container--index-2 .wrapper{height:100%;transform:translateY(calc(var(--rs-unit-x2) * -1)) translateZ(0) scaleX(0.8)}.container--index-overflow{height:0!important}.container--index-overflow .wrapper{height:100%;opacity:0;transform:translateY(calc(var(--rs-unit-x3) * -1)) translateZ(0) scaleX(0.8)}.wrapper{border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);height:100%;margin-top:var(--rs-unit-x2);overflow:hidden;transform-origin:50% 0;transition:var(--rs-duration-medium) ease-out;transition-property:height,transform,opacity}.region,.wrapper{display:flex;flex-direction:column}.region{max-width:100%;padding:var(--rs-unit-x4);position:fixed;width:100%;z-index:var(--rs-z-index-notification)}.region--nested{position:absolute}.region--position-top{align-items:center;left:50%;top:0;transform:translateX(-50%)}.region--position-top-start{align-items:start;inset-inline-start:0;top:0}.region--position-top-end{inset-inline-end:0;top:0}.region--position-top,.region--position-top-end,.region--position-top-start{flex-direction:column-reverse}.region--position-top .wrapper,.region--position-top-end .wrapper,.region--position-top-start .wrapper{justify-content:flex-end;margin-bottom:var(--rs-unit-x2);margin-top:0;transform-origin:bottom}.region--position-top .container--index-2 .wrapper,.region--position-top-end .container--index-2 .wrapper,.region--position-top-start .container--index-2 .wrapper{transform:translateY(0) translateZ(0) scaleX(0.8)}.region--position-top .container--index-overflow .wrapper,.region--position-top-end .container--index-overflow .wrapper,.region--position-top-start .container--index-overflow .wrapper{transform:translateY(var(--rs-unit-x1)) translateZ(0) scaleX(0.8)}.region--position-bottom{align-items:center;bottom:0;left:50%;transform:translateX(-50%)}.region--position-bottom-start{align-items:start;bottom:0;inset-inline-start:0}.region--position-bottom-end{align-items:end;bottom:0;inset-inline-end:0}@media (--rs-viewport-m ){.region{width:360px}}
|
|
@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { classNames } from "../../utilities/helpers.js";
|
|
5
5
|
import { onNextFrame } from "../../utilities/animation.js";
|
|
6
|
-
import {
|
|
6
|
+
import { checkKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
|
|
7
|
+
import TrapFocus from "../../utilities/a11y/TrapFocus.js";
|
|
7
8
|
import Toast from "./Toast.js";
|
|
8
9
|
import ToastContext from "./Toast.context.js";
|
|
9
10
|
import { timeouts } from "./Toast.constants.js";
|
|
@@ -15,7 +16,6 @@ const ToastContainer = (props) => {
|
|
|
15
16
|
const [toastHeight, setToastHeight] = React.useState();
|
|
16
17
|
const timeoutRef = React.useRef();
|
|
17
18
|
const resizingRef = React.useRef(false);
|
|
18
|
-
const trapFocusRef = React.useRef(null);
|
|
19
19
|
const wrapperRef = React.useRef(null);
|
|
20
20
|
const visible = status === "entered";
|
|
21
21
|
const containerClassNames = classNames(s.container, visible && s[`container--visible`], index === 0 && s[`container--index-${index}`], !inspected && (index === 1 || index === 2) && s[`container--index-${index}`], !inspected && index >= 3 && s["container--index-overflow"]);
|
|
@@ -60,15 +60,15 @@ const ToastContainer = (props) => {
|
|
|
60
60
|
React.useEffect(() => {
|
|
61
61
|
if (!wrapperRef.current)
|
|
62
62
|
return;
|
|
63
|
+
const trapFocus = new TrapFocus(wrapperRef.current);
|
|
63
64
|
if (visible) {
|
|
64
|
-
|
|
65
|
+
trapFocus.trap({
|
|
65
66
|
includeTrigger: true,
|
|
66
67
|
mode: "content-menu",
|
|
67
68
|
});
|
|
68
69
|
}
|
|
69
|
-
else if (
|
|
70
|
-
|
|
71
|
-
trapFocusRef.current = null;
|
|
70
|
+
else if (checkKeyboardMode()) {
|
|
71
|
+
trapFocus.release();
|
|
72
72
|
}
|
|
73
73
|
}, [visible]);
|
|
74
74
|
React.useEffect(() => {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { classNames } from "../../utilities/helpers.js";
|
|
5
|
-
import { focusableSelector } from "../../utilities/a11y.js";
|
|
5
|
+
import { focusableSelector } from "../../utilities/a11y/focus.js";
|
|
6
6
|
import ToastContainer from "./ToastContainer.js";
|
|
7
7
|
import ToastContext from "./Toast.context.js";
|
|
8
8
|
import s from "./Toast.module.css";
|
|
@@ -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));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))) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)))}.--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{border:1px 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)}.--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 +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(0.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,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type * as G from "../../../types/global";
|
|
3
|
-
import type { TrapMode } from "../../../utilities/a11y";
|
|
3
|
+
import type { TrapMode } from "../../../utilities/a11y/types";
|
|
4
4
|
import useFlyout, { FlyoutPosition, FlyoutWidth } from "../../../hooks/_private/useFlyout";
|
|
5
5
|
export type InstanceRef = {
|
|
6
6
|
open: () => void;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { debounce } from "../../../utilities/helpers.js";
|
|
5
|
-
import
|
|
5
|
+
import TrapFocus from "../../../utilities/a11y/TrapFocus.js";
|
|
6
6
|
import * as timeouts from "../../../constants/timeouts.js";
|
|
7
7
|
import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
|
|
8
8
|
import useElementId from "../../../hooks/useElementId.js";
|
|
@@ -20,7 +20,7 @@ const FlyoutRoot = (props) => {
|
|
|
20
20
|
const flyoutElRef = React.useRef(null);
|
|
21
21
|
const id = useElementId(passedId);
|
|
22
22
|
const timerRef = React.useRef();
|
|
23
|
-
const
|
|
23
|
+
const trapFocusRef = React.useRef(null);
|
|
24
24
|
const lockedRef = React.useRef(false);
|
|
25
25
|
const lockedBlurEffects = React.useRef(false);
|
|
26
26
|
const shouldReturnFocusRef = React.useRef(true);
|
|
@@ -134,21 +134,22 @@ const FlyoutRoot = (props) => {
|
|
|
134
134
|
useIsomorphicLayoutEffect(() => {
|
|
135
135
|
if (status !== "visible" || !flyoutElRef.current)
|
|
136
136
|
return;
|
|
137
|
-
|
|
137
|
+
trapFocusRef.current = new TrapFocus(flyoutElRef.current);
|
|
138
|
+
trapFocusRef.current.trap({
|
|
138
139
|
mode: trapFocusMode,
|
|
139
140
|
includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
|
|
140
141
|
onNavigateOutside: () => {
|
|
141
|
-
releaseFocusRef.current = null;
|
|
142
142
|
handleClose();
|
|
143
143
|
},
|
|
144
144
|
});
|
|
145
145
|
}, [status, triggerType, handleClose, trapFocusMode]);
|
|
146
146
|
React.useEffect(() => {
|
|
147
|
+
var _a;
|
|
147
148
|
if (!disableHideAnimation && status !== "hidden")
|
|
148
149
|
return;
|
|
149
150
|
if (disableHideAnimation && status !== "idle")
|
|
150
151
|
return;
|
|
151
|
-
if (
|
|
152
|
+
if ((_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.trapped) {
|
|
152
153
|
/* Locking the popover to not open it again on trigger focus */
|
|
153
154
|
if (triggerType === "hover") {
|
|
154
155
|
lockedRef.current = true;
|
|
@@ -156,10 +157,7 @@ const FlyoutRoot = (props) => {
|
|
|
156
157
|
lockedRef.current = false;
|
|
157
158
|
}, 100);
|
|
158
159
|
}
|
|
159
|
-
|
|
160
|
-
withoutFocusReturn: !shouldReturnFocusRef.current,
|
|
161
|
-
});
|
|
162
|
-
releaseFocusRef.current = null;
|
|
160
|
+
trapFocusRef.current.release({ withoutFocusReturn: !shouldReturnFocusRef.current });
|
|
163
161
|
shouldReturnFocusRef.current = true;
|
|
164
162
|
}
|
|
165
163
|
}, [status, triggerType, disableHideAnimation]);
|
|
@@ -167,11 +165,7 @@ const FlyoutRoot = (props) => {
|
|
|
167
165
|
* Release focus trapping on unmount
|
|
168
166
|
*/
|
|
169
167
|
React.useEffect(() => {
|
|
170
|
-
return () => {
|
|
171
|
-
if (releaseFocusRef.current)
|
|
172
|
-
releaseFocusRef.current();
|
|
173
|
-
releaseFocusRef.current = null;
|
|
174
|
-
};
|
|
168
|
+
return () => { var _a; return (_a = trapFocusRef.current) === null || _a === void 0 ? void 0 : _a.release(); };
|
|
175
169
|
}, []);
|
|
176
170
|
/**
|
|
177
171
|
* Update position on resize or RTL
|
package/config/postcss.d.ts
CHANGED
package/config/postcss.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
|
|
3
3
|
const useSingletonKeyboardMode = () => {
|
|
4
4
|
React.useEffect(() => {
|
|
5
5
|
const handleKeyDown = (e) => {
|
|
6
6
|
if (e.metaKey || e.altKey || e.ctrlKey)
|
|
7
7
|
return;
|
|
8
|
-
|
|
8
|
+
enableKeyboardMode();
|
|
9
9
|
};
|
|
10
10
|
const handleClick = () => {
|
|
11
|
-
|
|
11
|
+
disableKeyboardMode();
|
|
12
12
|
};
|
|
13
13
|
window.addEventListener("keydown", handleKeyDown);
|
|
14
14
|
window.addEventListener("mousedown", handleClick);
|
package/hooks/useHotkeys.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const useHotkeys: <
|
|
3
|
-
ref?: React.RefObject<
|
|
4
|
-
disabled?: boolean
|
|
5
|
-
preventDefault?: boolean
|
|
6
|
-
}
|
|
7
|
-
ref: React.RefObject<
|
|
2
|
+
declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
|
|
3
|
+
ref?: React.RefObject<Element>;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
preventDefault?: boolean;
|
|
6
|
+
}) => {
|
|
7
|
+
ref: React.RefObject<Element>;
|
|
8
8
|
checkHotkeyState: (key: string) => boolean;
|
|
9
9
|
};
|
|
10
10
|
export default useHotkeys;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.10.
|
|
4
|
+
"version": "2.10.15",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"test:unit": "jest --config tools/jest/jest.config.js",
|
|
74
74
|
"test:size": "size-limit",
|
|
75
75
|
"lint": "yarn lint:js && yarn lint:css",
|
|
76
|
-
"lint:js": "eslint --
|
|
76
|
+
"lint:js": "eslint --quiet --fix",
|
|
77
77
|
"lint:css": "stylelint 'src/**/*.css'",
|
|
78
78
|
"commit": "git-cz"
|
|
79
79
|
},
|
|
@@ -81,28 +81,28 @@
|
|
|
81
81
|
"defaults and not IE 11"
|
|
82
82
|
],
|
|
83
83
|
"devDependencies": {
|
|
84
|
-
"@commitlint/cli": "
|
|
85
|
-
"@commitlint/config-conventional": "
|
|
86
|
-
"@commitlint/types": "
|
|
87
|
-
"@size-limit/preset-big-lib": "11.
|
|
88
|
-
"@storybook/addon-a11y": "
|
|
89
|
-
"@storybook/addon-controls": "
|
|
90
|
-
"@storybook/addon-docs": "
|
|
91
|
-
"@storybook/addon-storysource": "
|
|
92
|
-
"@storybook/react": "
|
|
93
|
-
"@storybook/react-vite": "
|
|
94
|
-
"@testing-library/jest-dom": "6.4.
|
|
95
|
-
"@testing-library/react": "14.
|
|
84
|
+
"@commitlint/cli": "19.2.1",
|
|
85
|
+
"@commitlint/config-conventional": "19.1.0",
|
|
86
|
+
"@commitlint/types": "19.0.3",
|
|
87
|
+
"@size-limit/preset-big-lib": "11.1.2",
|
|
88
|
+
"@storybook/addon-a11y": "8.0.6",
|
|
89
|
+
"@storybook/addon-controls": "8.0.6",
|
|
90
|
+
"@storybook/addon-docs": "8.0.6",
|
|
91
|
+
"@storybook/addon-storysource": "8.0.6",
|
|
92
|
+
"@storybook/react": "8.0.6",
|
|
93
|
+
"@storybook/react-vite": "8.0.6",
|
|
94
|
+
"@testing-library/jest-dom": "6.4.2",
|
|
95
|
+
"@testing-library/react": "14.3.0",
|
|
96
96
|
"@testing-library/user-event": "14.5.2",
|
|
97
97
|
"@types/events": "3.0.3",
|
|
98
98
|
"@types/jest": "29.5.12",
|
|
99
|
-
"@types/node": "20.
|
|
100
|
-
"@types/react": "18.2.
|
|
101
|
-
"@types/react-dom": "18.2.
|
|
102
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
103
|
-
"@typescript-eslint/parser": "6.
|
|
99
|
+
"@types/node": "20.12.5",
|
|
100
|
+
"@types/react": "18.2.74",
|
|
101
|
+
"@types/react-dom": "18.2.24",
|
|
102
|
+
"@typescript-eslint/eslint-plugin": "7.6.0",
|
|
103
|
+
"@typescript-eslint/parser": "7.6.0",
|
|
104
104
|
"@vitejs/plugin-react": "4.2.1",
|
|
105
|
-
"chromatic": "
|
|
105
|
+
"chromatic": "11.3.0",
|
|
106
106
|
"cz-conventional-changelog": "3.3.0",
|
|
107
107
|
"eslint": "8.56.0",
|
|
108
108
|
"eslint-config-airbnb-typescript": "17.1.0",
|
|
@@ -116,24 +116,24 @@
|
|
|
116
116
|
"jest": "29.7.0",
|
|
117
117
|
"jest-environment-jsdom": "29.7.0",
|
|
118
118
|
"jest-matchmedia-mock": "1.1.0",
|
|
119
|
-
"lefthook": "1.6.
|
|
120
|
-
"postcss": "8.4.
|
|
119
|
+
"lefthook": "1.6.8",
|
|
120
|
+
"postcss": "8.4.38",
|
|
121
121
|
"postcss-cli": "11.0.0",
|
|
122
122
|
"postcss-each": "1.1.0",
|
|
123
123
|
"postcss-nested": "6.0.1",
|
|
124
124
|
"prettier": "3.2.5",
|
|
125
125
|
"react": "18.2.0",
|
|
126
126
|
"react-dom": "18.2.0",
|
|
127
|
-
"resolve-tspaths": "0.8.
|
|
128
|
-
"size-limit": "11.
|
|
129
|
-
"storybook": "
|
|
130
|
-
"stylelint": "16.
|
|
127
|
+
"resolve-tspaths": "0.8.18",
|
|
128
|
+
"size-limit": "11.1.2",
|
|
129
|
+
"storybook": "8.0.6",
|
|
130
|
+
"stylelint": "16.3.1",
|
|
131
131
|
"stylelint-config-prettier": "9.0.5",
|
|
132
132
|
"stylelint-config-standard": "36.0.0",
|
|
133
133
|
"ts-jest": "29.1.2",
|
|
134
|
-
"typescript": "5.
|
|
135
|
-
"vite": "5.
|
|
136
|
-
"vite-tsconfig-paths": "4.3.
|
|
134
|
+
"typescript": "5.4.4",
|
|
135
|
+
"vite": "5.2.8",
|
|
136
|
+
"vite-tsconfig-paths": "4.3.2"
|
|
137
137
|
},
|
|
138
138
|
"peerDependencies": {
|
|
139
139
|
"postcss": "^8",
|
|
@@ -144,8 +144,8 @@
|
|
|
144
144
|
"@csstools/postcss-global-data": "2.1.1",
|
|
145
145
|
"chalk": "4.1.2",
|
|
146
146
|
"commander": "11.1.0",
|
|
147
|
-
"cssnano": "6.
|
|
148
|
-
"postcss-custom-media": "10.0.
|
|
147
|
+
"cssnano": "6.1.2",
|
|
148
|
+
"postcss-custom-media": "10.0.4"
|
|
149
149
|
},
|
|
150
150
|
"resolutions": {
|
|
151
151
|
"jackspeak": "2.1.1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{padding:calc(var(--rs-p) * var(--rs-unit-x1));--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s)}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}
|
|
1
|
+
.root{padding:calc(var(--rs-p) * var(--rs-unit-x1) - var(--rs-border-width, 0px));--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s)}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import Chain from "../Chain";
|
|
2
|
+
import TrapScreenReader from "./TrapScreenReader";
|
|
3
|
+
import type { FocusableElement, TrapMode } from "./types";
|
|
4
|
+
type ReleaseOptions = {
|
|
5
|
+
withoutFocusReturn?: boolean;
|
|
6
|
+
};
|
|
7
|
+
type TrapOptions = {
|
|
8
|
+
onNavigateOutside?: () => void;
|
|
9
|
+
includeTrigger?: boolean;
|
|
10
|
+
mode?: TrapMode;
|
|
11
|
+
};
|
|
12
|
+
declare class TrapFocus {
|
|
13
|
+
static chain: Chain<TrapFocus>;
|
|
14
|
+
chainId?: number;
|
|
15
|
+
root: HTMLElement;
|
|
16
|
+
trigger: FocusableElement | null;
|
|
17
|
+
options: TrapOptions & {
|
|
18
|
+
pseudoFocus?: boolean;
|
|
19
|
+
};
|
|
20
|
+
trapped?: boolean;
|
|
21
|
+
screenReaderTrap: TrapScreenReader;
|
|
22
|
+
mutationObserver: MutationObserver | null;
|
|
23
|
+
constructor(root: HTMLElement);
|
|
24
|
+
/**
|
|
25
|
+
* Handle keyboard navigation while focus is trapped
|
|
26
|
+
*/
|
|
27
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
28
|
+
addListeners: () => void;
|
|
29
|
+
removeListeners: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* Trap the focus, add observer and keyboard event listeners
|
|
32
|
+
* and create a chain item
|
|
33
|
+
*/
|
|
34
|
+
trap: (options?: TrapOptions) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Disabled the trap focus for the element,
|
|
37
|
+
* cleanup all observers/handlers and trap for the previous element in the chain
|
|
38
|
+
*/
|
|
39
|
+
release: (releaseOptions?: ReleaseOptions) => void;
|
|
40
|
+
}
|
|
41
|
+
export default TrapFocus;
|