reshaped 3.4.6 → 3.5.0-rc.0
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 +0 -13
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +2 -0
- package/dist/bundle.js +11 -11
- package/dist/components/Autocomplete/Autocomplete.js +25 -8
- package/dist/components/Autocomplete/Autocomplete.module.css +1 -0
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +14 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +181 -64
- package/dist/components/Badge/Badge.types.d.ts +4 -2
- package/dist/components/Button/Button.types.d.ts +4 -2
- package/dist/components/Calendar/Calendar.module.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +17 -4
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.ts +1 -0
- package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +1 -0
- package/dist/components/Checkbox/tests/Checkbox.stories.js +40 -0
- package/dist/components/Dismissible/Dismissible.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
- package/dist/components/FormControl/FormControlLabel.js +2 -7
- package/dist/components/MenuItem/MenuItem.types.d.ts +4 -2
- package/dist/components/NumberField/NumberField.d.ts +6 -0
- package/dist/components/NumberField/NumberField.js +11 -0
- package/dist/components/NumberField/NumberField.module.css +1 -0
- package/dist/components/NumberField/NumberField.types.d.ts +19 -0
- package/dist/components/NumberField/NumberField.types.js +1 -0
- package/dist/components/NumberField/NumberFieldControlled.d.ts +6 -0
- package/dist/components/NumberField/NumberFieldControlled.js +162 -0
- package/dist/components/NumberField/NumberFieldUncontrolled.d.ts +6 -0
- package/dist/components/NumberField/NumberFieldUncontrolled.js +16 -0
- package/dist/components/NumberField/index.d.ts +2 -0
- package/dist/components/NumberField/index.js +1 -0
- package/dist/components/NumberField/tests/NumberField.stories.d.ts +30 -0
- package/dist/components/NumberField/tests/NumberField.stories.js +240 -0
- package/dist/components/Overlay/Overlay.js +2 -2
- package/dist/components/PinField/PinField.module.css +1 -1
- package/dist/components/PinField/PinField.types.d.ts +1 -1
- package/dist/components/PinField/PinFieldControlled.js +1 -0
- package/dist/components/PinField/tests/PinField.stories.js +8 -0
- package/dist/components/Radio/Radio.js +11 -4
- package/dist/components/Radio/Radio.module.css +1 -1
- package/dist/components/Radio/Radio.types.d.ts +1 -0
- package/dist/components/Radio/tests/Radio.stories.d.ts +1 -0
- package/dist/components/Radio/tests/Radio.stories.js +31 -0
- package/dist/components/Select/Select.module.css +1 -1
- package/dist/components/Select/Select.types.d.ts +1 -1
- package/dist/components/Select/tests/Select.stories.js +42 -16
- package/dist/components/Switch/Switch.js +10 -4
- package/dist/components/Switch/Switch.module.css +1 -1
- package/dist/components/Switch/Switch.types.d.ts +1 -1
- package/dist/components/Switch/tests/Switch.stories.js +30 -15
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/TextField/TextField.module.css +1 -1
- package/dist/components/TextField/TextField.types.d.ts +2 -2
- package/dist/components/TextField/index.d.ts +1 -1
- package/dist/components/TextField/tests/TextField.stories.js +4 -0
- package/dist/components/Toast/ToastContainer.js +2 -2
- package/dist/components/_private/Flyout/FlyoutControlled.js +2 -2
- package/dist/hooks/tests/useScrollLock.stories.d.ts +1 -0
- package/dist/hooks/tests/useScrollLock.stories.js +29 -0
- package/dist/icons/ChevronUp.d.ts +2 -0
- package/dist/icons/ChevronUp.js +5 -0
- package/dist/icons/Minus.d.ts +2 -0
- package/dist/icons/Minus.js +3 -0
- package/dist/icons/Plus.d.ts +2 -2
- package/dist/icons/Plus.js +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/utilities/a11y/TrapFocus.d.ts +3 -17
- package/dist/utilities/a11y/TrapFocus.js +54 -49
- package/dist/utilities/a11y/tests/TrapFocus.stories.js +20 -20
- package/dist/utilities/scroll/lock.js +15 -7
- package/dist/utilities/scroll/lockStandard.d.ts +1 -2
- package/dist/utilities/scroll/lockStandard.js +2 -9
- package/package.json +31 -31
- package/dist/components/Autocomplete/tests/Autocomplete.test.stories.d.ts +0 -27
- package/dist/components/Autocomplete/tests/Autocomplete.test.stories.js +0 -86
|
@@ -12,5 +12,6 @@ declare const _default: {
|
|
|
12
12
|
};
|
|
13
13
|
export default _default;
|
|
14
14
|
export declare const selection: () => import("react").JSX.Element;
|
|
15
|
+
export declare const size: () => import("react").JSX.Element;
|
|
15
16
|
export declare const error: () => import("react").JSX.Element;
|
|
16
17
|
export declare const disabled: () => import("react").JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
2
2
|
import Radio from "../index.js";
|
|
3
|
+
import View from "../../View/index.js";
|
|
3
4
|
export default {
|
|
4
5
|
title: "Components/Radio",
|
|
5
6
|
component: Radio,
|
|
@@ -28,6 +29,36 @@ export const selection = () => (<Example>
|
|
|
28
29
|
</Radio>
|
|
29
30
|
</Example.Item>
|
|
30
31
|
</Example>);
|
|
32
|
+
export const size = () => (<Example>
|
|
33
|
+
<Example.Item title="size: small">
|
|
34
|
+
<View gap={4} direction="row">
|
|
35
|
+
<Radio name="animal" value="dog" size="small" defaultChecked>
|
|
36
|
+
Radio
|
|
37
|
+
</Radio>
|
|
38
|
+
</View>
|
|
39
|
+
</Example.Item>
|
|
40
|
+
<Example.Item title="size: medium">
|
|
41
|
+
<View gap={4} direction="row">
|
|
42
|
+
<Radio name="animal" value="dog" size="medium">
|
|
43
|
+
Radio
|
|
44
|
+
</Radio>
|
|
45
|
+
</View>
|
|
46
|
+
</Example.Item>
|
|
47
|
+
<Example.Item title="size: large">
|
|
48
|
+
<View gap={4} direction="row">
|
|
49
|
+
<Radio name="animal" value="dog" size="large">
|
|
50
|
+
Radio
|
|
51
|
+
</Radio>
|
|
52
|
+
</View>
|
|
53
|
+
</Example.Item>
|
|
54
|
+
<Example.Item title="size: responsive, s: small, m: large">
|
|
55
|
+
<View gap={4} direction="row">
|
|
56
|
+
<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
|
|
57
|
+
Radio
|
|
58
|
+
</Radio>
|
|
59
|
+
</View>
|
|
60
|
+
</Example.Item>
|
|
61
|
+
</Example>);
|
|
31
62
|
export const error = () => (<Example>
|
|
32
63
|
<Example.Item title="error">
|
|
33
64
|
<Radio name="error" value="dog" hasError>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.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)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}
|
|
@@ -3,7 +3,7 @@ import type * as G from "../../types/global";
|
|
|
3
3
|
import type { FormControlProps } from "../FormControl";
|
|
4
4
|
import type { ActionableProps } from "../Actionable";
|
|
5
5
|
import type { IconProps } from "../Icon";
|
|
6
|
-
type Size = G.Responsive<"medium" | "large" | "xlarge">;
|
|
6
|
+
type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
|
|
7
7
|
type Option = {
|
|
8
8
|
label: string;
|
|
9
9
|
value: string;
|
|
@@ -44,46 +44,72 @@ export const variants = () => (<Example>
|
|
|
44
44
|
</Example.Item>
|
|
45
45
|
</Example>);
|
|
46
46
|
export const size = () => (<Example>
|
|
47
|
-
<Example.Item title="size:
|
|
48
|
-
<
|
|
47
|
+
<Example.Item title="size: small">
|
|
48
|
+
<View direction="row" gap={4}>
|
|
49
|
+
<View.Item grow>
|
|
50
|
+
<Select size="small" name="animal" icon={IconZap} options={[
|
|
49
51
|
{ label: "Dog", value: "dog" },
|
|
50
52
|
{ label: "Turtle", value: "turtle" },
|
|
51
53
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<Select size="medium" name="animal" icon={IconZap} options={[
|
|
54
|
+
</View.Item>
|
|
55
|
+
<View.Item grow>
|
|
56
|
+
<Select size="small" name="animal" startSlot={<Placeholder h={16}/>} options={[
|
|
56
57
|
{ label: "Dog", value: "dog" },
|
|
57
58
|
{ label: "Turtle", value: "turtle" },
|
|
58
59
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
60
|
+
</View.Item>
|
|
61
|
+
</View>
|
|
59
62
|
</Example.Item>
|
|
60
63
|
|
|
61
|
-
<Example.Item title="size:
|
|
62
|
-
<
|
|
64
|
+
<Example.Item title="size: medium">
|
|
65
|
+
<View direction="row" gap={4}>
|
|
66
|
+
<View.Item grow>
|
|
67
|
+
<Select size="medium" name="animal" icon={IconZap} options={[
|
|
63
68
|
{ label: "Dog", value: "dog" },
|
|
64
69
|
{ label: "Turtle", value: "turtle" },
|
|
65
70
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<Select size="large" name="animal" icon={IconZap} options={[
|
|
71
|
+
</View.Item>
|
|
72
|
+
<View.Item grow>
|
|
73
|
+
<Select size="medium" name="animal" startSlot={<Placeholder h={24}/>} options={[
|
|
70
74
|
{ label: "Dog", value: "dog" },
|
|
71
75
|
{ label: "Turtle", value: "turtle" },
|
|
72
76
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
77
|
+
</View.Item>
|
|
78
|
+
</View>
|
|
73
79
|
</Example.Item>
|
|
74
80
|
|
|
75
|
-
<Example.Item title="size:
|
|
76
|
-
<
|
|
81
|
+
<Example.Item title="size: large">
|
|
82
|
+
<View direction="row" gap={4}>
|
|
83
|
+
<View.Item grow>
|
|
84
|
+
<Select size="large" name="animal" icon={IconZap} options={[
|
|
85
|
+
{ label: "Dog", value: "dog" },
|
|
86
|
+
{ label: "Turtle", value: "turtle" },
|
|
87
|
+
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
88
|
+
</View.Item>
|
|
89
|
+
<View.Item grow>
|
|
90
|
+
<Select size="large" name="animal" startSlot={<Placeholder h={24}/>} options={[
|
|
77
91
|
{ label: "Dog", value: "dog" },
|
|
78
92
|
{ label: "Turtle", value: "turtle" },
|
|
79
93
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
94
|
+
</View.Item>
|
|
95
|
+
</View>
|
|
80
96
|
</Example.Item>
|
|
81
97
|
|
|
82
|
-
<Example.Item title="size: xlarge
|
|
83
|
-
<
|
|
98
|
+
<Example.Item title="size: xlarge">
|
|
99
|
+
<View direction="row" gap={4}>
|
|
100
|
+
<View.Item grow>
|
|
101
|
+
<Select size="xlarge" name="animal" icon={IconZap} options={[
|
|
102
|
+
{ label: "Dog", value: "dog" },
|
|
103
|
+
{ label: "Turtle", value: "turtle" },
|
|
104
|
+
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
105
|
+
</View.Item>
|
|
106
|
+
<View.Item grow>
|
|
107
|
+
<Select size="xlarge" name="animal" startSlot={<Placeholder h={24}/>} options={[
|
|
84
108
|
{ label: "Dog", value: "dog" },
|
|
85
109
|
{ label: "Turtle", value: "turtle" },
|
|
86
110
|
]} inputAttributes={{ "aria-label": "test select" }}/>
|
|
111
|
+
</View.Item>
|
|
112
|
+
</View>
|
|
87
113
|
</Example.Item>
|
|
88
114
|
|
|
89
115
|
<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { classNames } from "../../utilities/helpers.js";
|
|
3
|
+
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
|
|
4
4
|
import { useFormControl } from "../FormControl/index.js";
|
|
5
5
|
import Text from "../Text/index.js";
|
|
6
6
|
import useElementId from "../../hooks/useElementId.js";
|
|
7
7
|
import s from "./Switch.module.css";
|
|
8
8
|
const Switch = (props) => {
|
|
9
|
-
const { children, name, checked, size, reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
|
|
10
|
-
const rootClassNames = classNames(s.root, size && s
|
|
9
|
+
const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
|
|
10
|
+
const rootClassNames = classNames(s.root, size && responsiveClassNames(s, "--size", size), reversed && s["--reversed"], className);
|
|
11
11
|
const formControl = useFormControl();
|
|
12
12
|
const id = useElementId(formControl?.attributes.id || props.id || props.inputAttributes?.id);
|
|
13
13
|
const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
|
|
@@ -21,7 +21,13 @@ const Switch = (props) => {
|
|
|
21
21
|
checked: event.target.checked,
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
|
-
return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: size
|
|
24
|
+
return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: responsivePropDependency(size, (value) => {
|
|
25
|
+
if (value === "large")
|
|
26
|
+
return "body-2";
|
|
27
|
+
if (value === "medium")
|
|
28
|
+
return "body-3";
|
|
29
|
+
return "caption-1";
|
|
30
|
+
}), weight: "medium", color: disabled ? "disabled" : undefined, children: children }))] }));
|
|
25
31
|
};
|
|
26
32
|
Switch.displayName = "Switch";
|
|
27
33
|
export default Switch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;display:inline-flex;gap:var(--rs-
|
|
1
|
+
.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.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(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.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:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}
|
|
@@ -6,7 +6,7 @@ type BaseProps = {
|
|
|
6
6
|
name: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
reversed?: boolean;
|
|
9
|
-
size?: "medium" | "small" | "large"
|
|
9
|
+
size?: G.Responsive<"medium" | "small" | "large">;
|
|
10
10
|
onChange?: G.ChangeHandler<boolean>;
|
|
11
11
|
onFocus?: (e: React.FocusEvent) => void;
|
|
12
12
|
onBlur?: (e: React.FocusEvent) => void;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
2
2
|
import Switch from "../index.js";
|
|
3
|
+
import View from "../../View/index.js";
|
|
3
4
|
export default {
|
|
4
5
|
title: "Components/Switch",
|
|
5
6
|
component: Switch,
|
|
@@ -30,27 +31,41 @@ export const size = () => (<Example>
|
|
|
30
31
|
<Example.Item title="size: large">
|
|
31
32
|
<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
|
|
32
33
|
</Example.Item>
|
|
34
|
+
<Example.Item title="size: responsive, s: small, m: large">
|
|
35
|
+
<Switch name="active" size={{ s: "small", m: "large" }} inputAttributes={{ "aria-label": "test switch" }}/>
|
|
36
|
+
</Example.Item>
|
|
33
37
|
</Example>);
|
|
34
38
|
export const label = () => (<Example>
|
|
35
39
|
<Example.Item title="size: medium">
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
<View direction="row" gap={8}>
|
|
41
|
+
<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
|
|
42
|
+
Wi-fi
|
|
43
|
+
</Switch>
|
|
44
|
+
<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
|
|
45
|
+
Wi-fi
|
|
46
|
+
</Switch>
|
|
47
|
+
</View>
|
|
39
48
|
</Example.Item>
|
|
40
49
|
<Example.Item title="size: small">
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</
|
|
50
|
+
<View direction="row" gap={8}>
|
|
51
|
+
<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
|
|
52
|
+
Wi-fi
|
|
53
|
+
</Switch>
|
|
54
|
+
<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
|
|
55
|
+
Wi-fi
|
|
56
|
+
</Switch>
|
|
57
|
+
</View>
|
|
49
58
|
</Example.Item>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
59
|
+
|
|
60
|
+
<Example.Item title="size: large">
|
|
61
|
+
<View direction="row" gap={8}>
|
|
62
|
+
<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
|
|
63
|
+
Wi-fi
|
|
64
|
+
</Switch>
|
|
65
|
+
<Switch reversed name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
|
|
66
|
+
Wi-fi
|
|
67
|
+
</Switch>
|
|
68
|
+
</View>
|
|
54
69
|
</Example.Item>
|
|
55
70
|
</Example>);
|
|
56
71
|
export const disabled = () => (<Example>
|
|
@@ -50,7 +50,7 @@ const TextField = (props) => {
|
|
|
50
50
|
return;
|
|
51
51
|
onChange({ name, value: event.target.value, event });
|
|
52
52
|
};
|
|
53
|
-
return (_jsxs("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsx("input", { ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] }));
|
|
53
|
+
return (_jsxs("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsx("input", { type: "text", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] }));
|
|
54
54
|
};
|
|
55
55
|
TextField.Aligner = Aligner;
|
|
56
56
|
TextField.displayName = "TextField";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);
|
|
1
|
+
.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);display:flex;gap:var(--rs-text-field-gap);padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.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:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:calc(var(--rs-text-field-p-v) - 1px);padding-inline: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,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.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-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:has(label:active),.root.--variant-faded:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):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.--focused,.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.--focused,.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-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}
|
|
@@ -2,8 +2,8 @@ import type React from "react";
|
|
|
2
2
|
import type * as G from "../../types/global";
|
|
3
3
|
import type { FormControlProps } from "../FormControl";
|
|
4
4
|
import type { IconProps } from "../Icon";
|
|
5
|
-
type Size = G.Responsive<"medium" | "large" | "xlarge">;
|
|
6
|
-
type BaseProps = {
|
|
5
|
+
type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
|
|
6
|
+
export type BaseProps = {
|
|
7
7
|
id?: string;
|
|
8
8
|
name: string;
|
|
9
9
|
size?: Size;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./TextField";
|
|
2
|
-
export type { Props as TextFieldProps } from "./TextField.types";
|
|
2
|
+
export type { Props as TextFieldProps, BaseProps as TextFieldBaseProps } from "./TextField.types";
|
|
@@ -83,6 +83,10 @@ export const attachments = () => (<Example>
|
|
|
83
83
|
</Example.Item>
|
|
84
84
|
</Example>);
|
|
85
85
|
export const size = () => (<Example>
|
|
86
|
+
<Example.Item title="size: small">
|
|
87
|
+
<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
|
|
88
|
+
</Example.Item>
|
|
89
|
+
|
|
86
90
|
<Example.Item title="size: medium">
|
|
87
91
|
<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
|
|
88
92
|
</Example.Item>
|
|
@@ -59,9 +59,9 @@ const ToastContainer = (props) => {
|
|
|
59
59
|
React.useEffect(() => {
|
|
60
60
|
if (!wrapperRef.current)
|
|
61
61
|
return;
|
|
62
|
-
const trapFocus = new TrapFocus(
|
|
62
|
+
const trapFocus = new TrapFocus();
|
|
63
63
|
if (visible) {
|
|
64
|
-
trapFocus.trap({
|
|
64
|
+
trapFocus.trap(wrapperRef.current, {
|
|
65
65
|
includeTrigger: true,
|
|
66
66
|
mode: "content-menu",
|
|
67
67
|
});
|
|
@@ -231,8 +231,8 @@ const FlyoutControlled = (props) => {
|
|
|
231
231
|
return;
|
|
232
232
|
if (trapFocusRef.current?.trapped)
|
|
233
233
|
return;
|
|
234
|
-
trapFocusRef.current = new TrapFocus(
|
|
235
|
-
trapFocusRef.current.trap({
|
|
234
|
+
trapFocusRef.current = new TrapFocus();
|
|
235
|
+
trapFocusRef.current.trap(flyoutElRef.current, {
|
|
236
236
|
mode: trapFocusMode,
|
|
237
237
|
initialFocusEl: initialFocusRef?.current,
|
|
238
238
|
includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { expect, userEvent } from "@storybook/test";
|
|
3
|
+
import { Example } from "../../utilities/storybook/index.js";
|
|
3
4
|
import Button from "../../components/Button/index.js";
|
|
4
5
|
import useScrollLock from "../useScrollLock.js";
|
|
5
6
|
import View from "../../components/View/index.js";
|
|
@@ -66,3 +67,31 @@ export const container = {
|
|
|
66
67
|
expect(root).not.toHaveStyle("overflow: hidden");
|
|
67
68
|
},
|
|
68
69
|
};
|
|
70
|
+
export const testContainerAsync = {
|
|
71
|
+
name: "test: containerRef locked count",
|
|
72
|
+
render: () => {
|
|
73
|
+
const containerRef = React.useRef(null);
|
|
74
|
+
const globalLock = useScrollLock();
|
|
75
|
+
const scopedLock = useScrollLock({ containerRef });
|
|
76
|
+
return (<Example>
|
|
77
|
+
<Example.Item title="calling regular lock and lock with a container only requires a single unlock to remove overflow">
|
|
78
|
+
<View attributes={{ ref: containerRef }} gap={4} direction="row">
|
|
79
|
+
<Button onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}>
|
|
80
|
+
Toggle
|
|
81
|
+
</Button>
|
|
82
|
+
<Button onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}>
|
|
83
|
+
Toggle
|
|
84
|
+
</Button>
|
|
85
|
+
</View>
|
|
86
|
+
</Example.Item>
|
|
87
|
+
</Example>);
|
|
88
|
+
},
|
|
89
|
+
play: async ({ canvas }) => {
|
|
90
|
+
const [buttonGlobal, buttonScoped] = canvas.getAllByRole("button");
|
|
91
|
+
await userEvent.click(buttonGlobal);
|
|
92
|
+
expect(document.body).toHaveStyle("overflow: hidden");
|
|
93
|
+
await userEvent.click(buttonScoped);
|
|
94
|
+
await userEvent.click(buttonGlobal);
|
|
95
|
+
expect(document.body).not.toHaveStyle("overflow: hidden");
|
|
96
|
+
},
|
|
97
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const IconChevronUp = () => {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "18 15 12 9 6 15" }) }));
|
|
4
|
+
};
|
|
5
|
+
export default IconChevronUp;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const IconMinus = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
|
|
3
|
+
export default IconMinus;
|
package/dist/icons/Plus.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
export default
|
|
1
|
+
declare const IconPlus: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default IconPlus;
|
package/dist/icons/Plus.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const
|
|
3
|
-
export default
|
|
2
|
+
const IconPlus = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
|
|
3
|
+
export default IconPlus;
|
package/dist/index.d.ts
CHANGED
|
@@ -63,6 +63,8 @@ export { default as MenuItem } from "./components/MenuItem";
|
|
|
63
63
|
export type { MenuItemProps } from "./components/MenuItem";
|
|
64
64
|
export { default as Modal } from "./components/Modal";
|
|
65
65
|
export type { ModalProps } from "./components/Modal";
|
|
66
|
+
export { default as NumberField } from "./components/NumberField";
|
|
67
|
+
export type { NumberFieldProps } from "./components/NumberField";
|
|
66
68
|
export { default as Overlay } from "./components/Overlay";
|
|
67
69
|
export type { OverlayProps } from "./components/Overlay";
|
|
68
70
|
export { default as Pagination } from "./components/Pagination";
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export { default as Link } from "./components/Link/index.js";
|
|
|
32
32
|
export { default as Loader } from "./components/Loader/index.js";
|
|
33
33
|
export { default as MenuItem } from "./components/MenuItem/index.js";
|
|
34
34
|
export { default as Modal } from "./components/Modal/index.js";
|
|
35
|
+
export { default as NumberField } from "./components/NumberField/index.js";
|
|
35
36
|
export { default as Overlay } from "./components/Overlay/index.js";
|
|
36
37
|
export { default as Pagination } from "./components/Pagination/index.js";
|
|
37
38
|
export { default as PinField } from "./components/PinField/index.js";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import Chain from "../Chain";
|
|
2
|
-
import TrapScreenReader from "./TrapScreenReader";
|
|
3
2
|
import type { FocusableElement, TrapMode } from "./types";
|
|
4
3
|
type ReleaseOptions = {
|
|
5
4
|
withoutFocusReturn?: boolean;
|
|
@@ -11,28 +10,15 @@ type TrapOptions = {
|
|
|
11
10
|
mode?: TrapMode;
|
|
12
11
|
};
|
|
13
12
|
declare class TrapFocus {
|
|
13
|
+
#private;
|
|
14
14
|
static chain: Chain<TrapFocus>;
|
|
15
|
-
chainId?: number;
|
|
16
|
-
root: HTMLElement;
|
|
17
|
-
trigger: FocusableElement | null;
|
|
18
|
-
options: TrapOptions & {
|
|
19
|
-
pseudoFocus?: boolean;
|
|
20
|
-
};
|
|
21
15
|
trapped?: boolean;
|
|
22
|
-
|
|
23
|
-
mutationObserver: MutationObserver | null;
|
|
24
|
-
constructor(root: HTMLElement);
|
|
25
|
-
/**
|
|
26
|
-
* Handle keyboard navigation while focus is trapped
|
|
27
|
-
*/
|
|
28
|
-
handleKeyDown: (event: KeyboardEvent) => void;
|
|
29
|
-
addListeners: () => void;
|
|
30
|
-
removeListeners: () => void;
|
|
16
|
+
constructor();
|
|
31
17
|
/**
|
|
32
18
|
* Trap the focus, add observer and keyboard event listeners
|
|
33
19
|
* and create a chain item
|
|
34
20
|
*/
|
|
35
|
-
trap: (options?: TrapOptions) => void;
|
|
21
|
+
trap: (root: HTMLElement, options?: TrapOptions) => void;
|
|
36
22
|
/**
|
|
37
23
|
* Disabled the trap focus for the element,
|
|
38
24
|
* cleanup all observers/handlers and trap for the previous element in the chain
|