reshaped 3.0.8-rc.0 → 3.0.9
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 +4 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +7 -7
- package/dist/components/Card/Card.module.css +1 -1
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/Dismissible/Dismissible.module.css +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -0
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +1 -0
- package/dist/components/Modal/tests/Modal.stories.d.ts +1 -0
- package/dist/components/Modal/tests/Modal.stories.js +17 -1
- package/dist/components/Popover/Popover.d.ts +2 -0
- package/dist/components/Popover/Popover.js +7 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +2 -0
- package/dist/components/Popover/tests/Popover.stories.js +16 -0
- package/dist/components/Radio/Radio.module.css +1 -1
- package/dist/components/Slider/Slider.module.css +1 -1
- package/dist/components/Switch/Switch.module.css +1 -1
- package/dist/components/_private/Flyout/FlyoutControlled.js +6 -1
- package/dist/components/_private/Flyout/tests/Flyout.stories.js +39 -12
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-border-width:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-width) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.content,.root{position:relative}.content{z-index:var(--rs-z-index-raised)}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}
|
|
1
|
+
.root{--rs-border-width:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-width) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.content,.root{position:relative}.content{z-index:var(--rs-z-index-raised)}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}.--actionable:not(.--selected):focus-visible{box-shadow:var(--rs-focus-shadow)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--actionable:not(.--selected):hover:before{opacity:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:calc(var(--rs-line-height-body-3) * .4)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:calc(var(--rs-line-height-body-3) * .4)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}.input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{
|
|
1
|
+
.root{padding-inline-end:var(--rs-unit-x7);position:relative}.close{inset-block-start:0;inset-inline-end:0;position:absolute;z-index:5}.--hide-close,.--variant-media{padding:0}.--variant-media .close{inset-block-start:var(--rs-unit-x2);inset-inline-end:var(--rs-unit-x2)}.--align-center .close{inset-block-start:50%;transform:translateY(-50%)}
|
|
@@ -2,6 +2,7 @@ import { type MenuItemProps } from "../MenuItem";
|
|
|
2
2
|
import type * as T from "./DropdownMenu.types";
|
|
3
3
|
declare const DropdownMenu: {
|
|
4
4
|
(props: T.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
Dismissible: (props: import("../Dismissible").DismissibleProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
Section: (props: T.SectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -66,6 +66,7 @@ const DropdownMenuSubTrigger = (props) => {
|
|
|
66
66
|
const { children } = props;
|
|
67
67
|
return (_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(DropdownMenuSubTriggerItem, { attributes: attributes, children: children })) }));
|
|
68
68
|
};
|
|
69
|
+
DropdownMenu.Dismissible = Popover.Dismissible;
|
|
69
70
|
DropdownMenu.Trigger = Popover.Trigger;
|
|
70
71
|
DropdownMenu.Content = DropdownMenuContent;
|
|
71
72
|
DropdownMenu.Section = DropdownMenuSection;
|
|
@@ -2,6 +2,7 @@ declare const _default: {
|
|
|
2
2
|
title: string;
|
|
3
3
|
component: {
|
|
4
4
|
(props: import("./..").DropdownMenuProps): import("react").JSX.Element;
|
|
5
|
+
Dismissible: (props: import("../../Dismissible").DismissibleProps) => import("react").JSX.Element;
|
|
5
6
|
Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
|
|
6
7
|
Content: (props: import("../DropdownMenu.types").ContentProps) => import("react").JSX.Element;
|
|
7
8
|
Section: (props: import("../DropdownMenu.types").SectionProps) => import("react").JSX.Element;
|
|
@@ -14,6 +14,7 @@ declare const _default: {
|
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
export default _default;
|
|
17
|
+
export declare const foo: () => React.JSX.Element;
|
|
17
18
|
export declare const position: () => React.JSX.Element;
|
|
18
19
|
export declare const size: () => React.JSX.Element;
|
|
19
20
|
export declare const padding: () => React.JSX.Element;
|
|
@@ -9,6 +9,7 @@ import Switch from "../../Switch/index.js";
|
|
|
9
9
|
import TextField from "../../TextField/index.js";
|
|
10
10
|
import useToggle from "../../../hooks/useToggle.js";
|
|
11
11
|
import Radio from "../../Radio/index.js";
|
|
12
|
+
import Slider from "../../Slider/index.js";
|
|
12
13
|
export default {
|
|
13
14
|
title: "Components/Modal",
|
|
14
15
|
component: Modal,
|
|
@@ -18,6 +19,21 @@ export default {
|
|
|
18
19
|
},
|
|
19
20
|
},
|
|
20
21
|
};
|
|
22
|
+
export const foo = () => {
|
|
23
|
+
const { activate, deactivate, active } = useToggle(false);
|
|
24
|
+
return (<>
|
|
25
|
+
<Button onClick={console.log}>Other</Button>
|
|
26
|
+
<Button onClick={activate}>Open modal</Button>
|
|
27
|
+
<Button onClick={console.log}>Other</Button>
|
|
28
|
+
|
|
29
|
+
<Modal active={active} onClose={deactivate}>
|
|
30
|
+
<Slider name="slider" defaultValue={20} onChange={(args) => console.log(args.value)}/>
|
|
31
|
+
<Button onClick={console.log}>Btn 1</Button>
|
|
32
|
+
|
|
33
|
+
<Button onClick={console.log}>Btn 2</Button>
|
|
34
|
+
</Modal>
|
|
35
|
+
</>);
|
|
36
|
+
};
|
|
21
37
|
const Demo = (props) => {
|
|
22
38
|
const { active: activeProp, title, subtitle, children, ...modalProps } = props;
|
|
23
39
|
const { active, activate, deactivate } = useToggle(activeProp);
|
|
@@ -105,7 +121,7 @@ export const edgeCases = () => {
|
|
|
105
121
|
const scrollModalToggle = useToggle();
|
|
106
122
|
const inputRef = React.useRef(null);
|
|
107
123
|
return (<Example>
|
|
108
|
-
<Example.Item title="
|
|
124
|
+
<Example.Item title="keyboard focus stays on the modal first">
|
|
109
125
|
<Demo title="Modal title" autoFocus={false}/>
|
|
110
126
|
</Example.Item>
|
|
111
127
|
<Example.Item title="trap focus works with custom children components">
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { type DismissibleProps } from "../Dismissible";
|
|
1
2
|
import type * as T from "./Popover.types";
|
|
2
3
|
declare const Popover: {
|
|
3
4
|
(props: T.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
Dismissible: (props: DismissibleProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
6
|
Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
7
|
Content: (props: import("../_private/Flyout").FlyoutContentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
6
8
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { classNames } from "../../utilities/helpers.js";
|
|
3
|
-
import Flyout from "../_private/Flyout/index.js";
|
|
3
|
+
import Flyout, { useFlyoutContext } from "../_private/Flyout/index.js";
|
|
4
|
+
import Dismissible from "../Dismissible/index.js";
|
|
4
5
|
import s from "./Popover.module.css";
|
|
5
6
|
import getPaddingStyles from "../../styles/padding/index.js";
|
|
6
7
|
const Popover = (props) => {
|
|
@@ -13,6 +14,11 @@ const Popover = (props) => {
|
|
|
13
14
|
// @ts-ignore
|
|
14
15
|
_jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
|
|
15
16
|
};
|
|
17
|
+
const PopoverDismissible = (props) => {
|
|
18
|
+
const { handleClose } = useFlyoutContext();
|
|
19
|
+
return _jsx(Dismissible, { ...props, onClose: handleClose });
|
|
20
|
+
};
|
|
21
|
+
Popover.Dismissible = PopoverDismissible;
|
|
16
22
|
Popover.Trigger = Flyout.Trigger;
|
|
17
23
|
Popover.Content = Flyout.Content;
|
|
18
24
|
export default Popover;
|
|
@@ -2,6 +2,7 @@ declare const _default: {
|
|
|
2
2
|
title: string;
|
|
3
3
|
component: {
|
|
4
4
|
(props: import("./..").PopoverProps): import("react").JSX.Element;
|
|
5
|
+
Dismissible: (props: import("../../Dismissible").DismissibleProps) => import("react").JSX.Element;
|
|
5
6
|
Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
|
|
6
7
|
Content: (props: import("../../_private/Flyout").FlyoutContentProps) => import("react").JSX.Element | null;
|
|
7
8
|
};
|
|
@@ -17,4 +18,5 @@ export declare const width: () => import("react").JSX.Element;
|
|
|
17
18
|
export declare const variant: () => import("react").JSX.Element;
|
|
18
19
|
export declare const padding: () => import("react").JSX.Element;
|
|
19
20
|
export declare const triggerType: () => import("react").JSX.Element;
|
|
21
|
+
export declare const dismissible: () => import("react").JSX.Element;
|
|
20
22
|
export declare const edgeCases: () => import("react").JSX.Element;
|
|
@@ -94,6 +94,22 @@ export const triggerType = () => (<Example>
|
|
|
94
94
|
<Demo triggerType="hover"/>
|
|
95
95
|
</Example.Item>
|
|
96
96
|
</Example>);
|
|
97
|
+
export const dismissible = () => {
|
|
98
|
+
return (<Example>
|
|
99
|
+
<Example.Item title="with dismissible">
|
|
100
|
+
<Popover>
|
|
101
|
+
<Popover.Trigger>
|
|
102
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
103
|
+
</Popover.Trigger>
|
|
104
|
+
<Popover.Content>
|
|
105
|
+
<Popover.Dismissible closeAriaLabel="Close" align="center">
|
|
106
|
+
Popover content
|
|
107
|
+
</Popover.Dismissible>
|
|
108
|
+
</Popover.Content>
|
|
109
|
+
</Popover>
|
|
110
|
+
</Example.Item>
|
|
111
|
+
</Example>);
|
|
112
|
+
};
|
|
97
113
|
export const edgeCases = () => (<Example>
|
|
98
114
|
<Example.Item title="Popover with tooltip">
|
|
99
115
|
<Tooltip position="top" text="Hello">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-decorator-size) * .4)}
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-decorator-size) * .4)}.input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
1
|
+
.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.input:focus-visible+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus-visible+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus-visible+.thumb .tooltip,.thumb--active .tooltip{opacity:1}.input:focus-visible+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}
|
|
1
|
+
.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}.input:focus-visible+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}
|
|
@@ -9,6 +9,7 @@ import useHotkeys from "../../../hooks/useHotkeys.js";
|
|
|
9
9
|
import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
|
|
10
10
|
import useRTL from "../../../hooks/useRTL.js";
|
|
11
11
|
import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
|
|
12
|
+
import { checkKeyboardMode } from "../../../utilities/a11y/keyboardMode.js";
|
|
12
13
|
import useFlyout from "./useFlyout.js";
|
|
13
14
|
import * as timeouts from "./Flyout.constants.js";
|
|
14
15
|
import cooldown from "./utilities/cooldown.js";
|
|
@@ -75,6 +76,8 @@ const FlyoutRoot = (props) => {
|
|
|
75
76
|
* Trigger event handlers
|
|
76
77
|
*/
|
|
77
78
|
const handleBlur = React.useCallback((e) => {
|
|
79
|
+
if (!checkKeyboardMode())
|
|
80
|
+
return;
|
|
78
81
|
const focusedContent = flyoutElRef.current?.contains(e.relatedTarget);
|
|
79
82
|
if (
|
|
80
83
|
// Empty flyouts don't move the focus so they have to be closed on blur
|
|
@@ -88,8 +91,10 @@ const FlyoutRoot = (props) => {
|
|
|
88
91
|
handleClose();
|
|
89
92
|
}, [handleClose, triggerType, trapFocusMode]);
|
|
90
93
|
const handleFocus = React.useCallback(() => {
|
|
94
|
+
if (triggerType === "hover" && !checkKeyboardMode())
|
|
95
|
+
return;
|
|
91
96
|
handleOpen();
|
|
92
|
-
}, [handleOpen]);
|
|
97
|
+
}, [handleOpen, triggerType]);
|
|
93
98
|
const handleMouseEnter = React.useCallback(() => {
|
|
94
99
|
clearTimer();
|
|
95
100
|
timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
2
3
|
import { Example } from "../../../../utilities/storybook/index.js";
|
|
4
|
+
import Reshaped from "../../../Reshaped/index.js";
|
|
3
5
|
import View from "../../../View/index.js";
|
|
4
6
|
import Theme from "../../../Theme/index.js";
|
|
5
7
|
import Button from "../../../Button/index.js";
|
|
@@ -81,27 +83,52 @@ export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFoc
|
|
|
81
83
|
export const disableContentHover = () => (<Demo triggerType="hover" disableContentHover>
|
|
82
84
|
Content
|
|
83
85
|
</Demo>);
|
|
86
|
+
class CustomElement extends window.HTMLElement {
|
|
87
|
+
constructor() {
|
|
88
|
+
super();
|
|
89
|
+
this.attachShadow({ mode: "open" });
|
|
90
|
+
if (!this.shadowRoot)
|
|
91
|
+
return;
|
|
92
|
+
const node = (<Reshaped>
|
|
93
|
+
<Flyout active>
|
|
94
|
+
<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
|
|
95
|
+
<Flyout.Content>Content</Flyout.Content>
|
|
96
|
+
</Flyout>
|
|
97
|
+
</Reshaped>);
|
|
98
|
+
const root = createRoot(this.shadowRoot);
|
|
99
|
+
root.render(node);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
window.customElements.define("custom-element", CustomElement);
|
|
84
103
|
export const customPortalTarget = () => {
|
|
85
104
|
const portalRef = React.useRef(null);
|
|
86
|
-
return (<
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
105
|
+
return (<Example>
|
|
106
|
+
<Example.Item title="Custom containerRef">
|
|
107
|
+
<View padding={4} paddingInline={40} height={50} overflow="auto" backgroundColor="neutral-faded" borderRadius="small" attributes={{ ref: portalRef }}>
|
|
108
|
+
<Flyout position="bottom-end" containerRef={portalRef} active>
|
|
109
|
+
<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
|
|
110
|
+
<Flyout.Content>
|
|
111
|
+
<div style={{
|
|
91
112
|
background: "var(--rs-color-background-elevation-overlay)",
|
|
92
113
|
padding: "var(--rs-unit-x4)",
|
|
93
|
-
height:
|
|
114
|
+
height: 200,
|
|
94
115
|
width: 160,
|
|
95
116
|
borderRadius: "var(--rs-radius-medium)",
|
|
96
117
|
border: "1px solid var(--rs-color-border-neutral-faded)",
|
|
97
118
|
boxSizing: "border-box",
|
|
98
119
|
}}>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
120
|
+
{"Content"}
|
|
121
|
+
</div>
|
|
122
|
+
</Flyout.Content>
|
|
123
|
+
</Flyout>
|
|
124
|
+
<div style={{ height: 1000 }}/>
|
|
125
|
+
</View>
|
|
126
|
+
</Example.Item>
|
|
127
|
+
<Example.Item title="Shadow dom">
|
|
128
|
+
{/* @ts-ignore */}
|
|
129
|
+
<custom-element />
|
|
130
|
+
</Example.Item>
|
|
131
|
+
</Example>);
|
|
105
132
|
};
|
|
106
133
|
export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
|
|
107
134
|
Should work on mobile
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.9",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|