reshaped 3.1.3 → 3.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +1 -1
- package/dist/bundle.js +11 -11
- package/dist/cjs/config/tailwind.js +5 -9
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +1 -1
- package/dist/cjs/themes/_generator/utilities/generateColors.js +2 -2
- package/dist/cjs/themes/figma/theme.css +1 -1
- package/dist/cjs/themes/reshaped/theme.css +1 -1
- package/dist/cjs/themes/slate/theme.css +1 -1
- package/dist/components/Accordion/tests/Accordion.stories.js +33 -19
- package/dist/components/Autocomplete/Autocomplete.js +22 -18
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +4 -2
- package/dist/components/Autocomplete/index.d.ts +1 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +1 -0
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +81 -0
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/Badge.types.d.ts +1 -1
- package/dist/components/Button/tests/Button.stories.js +1 -1
- package/dist/components/Dismissible/Dismissible.module.css +1 -1
- package/dist/components/FileUpload/FileUpload.js +8 -2
- package/dist/components/FileUpload/FileUpload.types.d.ts +2 -0
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +1 -0
- package/dist/components/FileUpload/tests/FileUpload.stories.js +10 -0
- package/dist/components/Image/Image.js +3 -1
- package/dist/components/Loader/tests/Loader.stories.js +1 -1
- package/dist/components/Modal/Modal.js +3 -3
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Modal/Modal.types.d.ts +7 -3
- package/dist/components/Modal/tests/Modal.stories.d.ts +1 -0
- package/dist/components/Modal/tests/Modal.stories.js +27 -0
- package/dist/components/Overlay/Overlay.js +5 -5
- package/dist/components/Overlay/Overlay.module.css +1 -1
- package/dist/components/Overlay/Overlay.types.d.ts +4 -1
- package/dist/components/Overlay/index.d.ts +1 -1
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Reshaped/Reshaped.js +3 -3
- package/dist/components/Reshaped/Reshaped.module.css +1 -1
- package/dist/components/Reshaped/Reshaped.types.d.ts +4 -3
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Switch/tests/Switch.stories.js +5 -0
- package/dist/components/Table/Table.module.css +1 -1
- package/dist/components/TextField/TextField.js +5 -6
- package/dist/components/TextField/TextField.module.css +1 -1
- package/dist/components/TextField/TextField.types.d.ts +2 -0
- package/dist/components/TextField/tests/TextField.stories.d.ts +1 -1
- package/dist/components/TextField/tests/TextField.stories.js +6 -2
- package/dist/components/Theme/GlobalColorMode.js +3 -2
- package/dist/components/Theme/Theme.d.ts +1 -0
- package/dist/components/Theme/Theme.js +13 -12
- package/dist/components/Theme/Theme.types.d.ts +4 -0
- package/dist/components/Theme/Theme.utilities.d.ts +1 -0
- package/dist/components/Theme/Theme.utilities.js +1 -0
- package/dist/components/Theme/index.d.ts +1 -1
- package/dist/components/Theme/index.js +1 -1
- package/dist/components/Toast/Toast.types.d.ts +1 -1
- package/dist/components/Toast/tests/Toast.stories.js +16 -0
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
- package/dist/components/_private/Aligner/Aligner.module.css +1 -1
- package/dist/components/_private/Flyout/FlyoutControlled.js +1 -3
- package/dist/components/_private/Flyout/tests/Flyout.stories.js +6 -0
- package/dist/components/_private/Portal/Portal.types.d.ts +2 -2
- package/dist/config/tailwind.js +5 -9
- package/dist/constants/keys.d.ts +1 -0
- package/dist/constants/keys.js +1 -0
- package/dist/hooks/_private/useSingletonHotkeys.d.ts +3 -3
- package/dist/hooks/useDrag.d.ts +1 -1
- package/dist/hooks/useResponsiveClientValue.js +3 -3
- package/dist/icons/Plus.d.ts +2 -0
- package/dist/icons/Plus.js +3 -0
- package/dist/index.d.ts +1 -1
- package/dist/themes/_generator/tokens/font/font.transforms.js +1 -1
- package/dist/themes/_generator/utilities/generateColors.js +2 -2
- package/dist/themes/figma/theme.css +1 -1
- package/dist/themes/reshaped/theme.css +1 -1
- package/dist/themes/slate/theme.css +1 -1
- package/package.json +2 -1
|
@@ -51,15 +51,12 @@ const getTheme = (theme) => {
|
|
|
51
51
|
config.textColor[cssTokenName] = configValue;
|
|
52
52
|
config.colors[cssTokenName] = configValue;
|
|
53
53
|
});
|
|
54
|
-
Object.keys(definition.
|
|
54
|
+
Object.keys(definition.radius).forEach((tokenName) => {
|
|
55
55
|
const cssTokenName = (0, string_1.camelToKebab)(tokenName);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
config.borderRadius[name] = configValue;
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
56
|
+
config.borderRadius[tokenName] = `var(--rs-radius-${cssTokenName})`;
|
|
57
|
+
return;
|
|
58
|
+
});
|
|
59
|
+
Object.keys(definition.unit).forEach((tokenName) => {
|
|
63
60
|
if (tokenName.startsWith("base")) {
|
|
64
61
|
[...Array(11).keys()].forEach((i) => {
|
|
65
62
|
if (i === 0) {
|
|
@@ -69,7 +66,6 @@ const getTheme = (theme) => {
|
|
|
69
66
|
config.spacing[`x${i}`] = `var(--rs-unit-x${i})`;
|
|
70
67
|
}
|
|
71
68
|
});
|
|
72
|
-
return;
|
|
73
69
|
}
|
|
74
70
|
});
|
|
75
71
|
Object.keys(definition.shadow).forEach((tokenName) => {
|
|
@@ -40,8 +40,8 @@ const generateColorValues = (args) => {
|
|
|
40
40
|
*/
|
|
41
41
|
const bgHex = hex;
|
|
42
42
|
const bgHexDark = okhslToHex(okhslDark);
|
|
43
|
-
const bgFadedHsl = { ...okhsl, l: 0.94 + 0.045 * hueLightness };
|
|
44
|
-
const bgFadedHslDark = { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
|
|
43
|
+
const bgFadedHsl = key === "neutral" ? { ...okhsl, l: 0.96 } : { ...okhsl, l: 0.94 + 0.045 * hueLightness };
|
|
44
|
+
const bgFadedHslDark = key === "neutral" ? { ...okhslDark, l: 0.15 } : { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
|
|
45
45
|
const bgFadedHex = okhslToHex(bgFadedHsl);
|
|
46
46
|
const bgFadedHexDark = okhslToHex(bgFadedHslDark);
|
|
47
47
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme=figma]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:
|
|
1
|
+
[data-rs-theme=figma]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:5rem;--rs-line-height-title-1:5.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4rem;--rs-line-height-title-2:4.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:3.5rem;--rs-line-height-title-3:3.75rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.5rem;--rs-line-height-title-4:2.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.25rem;--rs-line-height-title-5:2.5rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.5rem;--rs-line-height-title-6:1.75rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.375rem;--rs-line-height-featured-1:1.75rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.25rem;--rs-line-height-featured-2:1.75rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.125rem;--rs-line-height-featured-3:1.5rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:0.875rem;--rs-line-height-body-1:1.25rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.8125rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.6875rem;--rs-line-height-body-3:1rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.6875rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#000;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#000;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04)}[data-rs-theme=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafafa;--rs-color-background-neutral-highlighted:#d4d8e3;--rs-color-background-primary-highlighted:#007be5;--rs-color-background-positive-highlighted:#009951;--rs-color-background-critical-highlighted:#dc3412;--rs-color-rgb-background-primary:13,153,255;--rs-color-rgb-background-primary-faded:229,244,255;--rs-color-rgb-background-critical:242,72,34;--rs-color-rgb-background-critical-faded:255,226,224;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:20,174,92;--rs-color-rgb-background-positive-faded:218,236,223;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:245,245,245;--rs-color-rgb-background-disabled:228,228,228;--rs-color-rgb-background-disabled-faded:245,245,245;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,250,250;--rs-color-rgb-background-neutral-highlighted:212,216,227;--rs-color-rgb-background-primary-highlighted:0,123,229;--rs-color-rgb-background-positive-highlighted:0,153,81;--rs-color-rgb-background-critical-highlighted:220,52,18}[data-rs-theme=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-background-neutral-highlighted:#525252;--rs-color-background-primary-highlighted:#0a6dc2;--rs-color-background-positive-highlighted:#078348;--rs-color-background-critical-highlighted:#c4381c;--rs-color-rgb-background-primary:12,140,233;--rs-color-rgb-background-primary-faded:57,67,96;--rs-color-rgb-background-critical:224,62,26;--rs-color-rgb-background-critical-faded:96,51,42;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:25,143,81;--rs-color-rgb-background-positive-faded:61,87,73;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:68,68,68;--rs-color-rgb-background-neutral-faded:56,56,56;--rs-color-rgb-background-disabled:71,71,71;--rs-color-rgb-background-disabled-faded:58,58,58;--rs-color-rgb-background-elevation-base:44,44,44;--rs-color-rgb-background-elevation-raised:44,44,44;--rs-color-rgb-background-elevation-overlay:44,44,44;--rs-color-rgb-background-page:44,44,44;--rs-color-rgb-background-page-faded:30,30,30;--rs-color-rgb-background-neutral-highlighted:82,82,82;--rs-color-rgb-background-primary-highlighted:10,109,194;--rs-color-rgb-background-positive-highlighted:7,131,72;--rs-color-rgb-background-critical-highlighted:196,56,28}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:
|
|
1
|
+
[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f1f2f6;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000001a;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#f9f9fb;--rs-color-rgb-background-primary:90,88,242;--rs-color-rgb-background-primary-faded:236,235,254;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:253,237,237;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:237,253,245;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:241,242,246;--rs-color-rgb-background-disabled:236,238,242;--rs-color-rgb-background-disabled-faded:245,246,249;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:249,249,251}[data-rs-theme=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#582929;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#293b2f;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82,79,234;--rs-color-rgb-background-primary-faded:37,37,68;--rs-color-rgb-background-critical:208,38,38;--rs-color-rgb-background-critical-faded:62,31,31;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:20,120,74;--rs-color-rgb-background-positive-faded:31,42,35;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:73,79,96;--rs-color-rgb-background-neutral-faded:34,40,53;--rs-color-rgb-background-disabled:30,33,42;--rs-color-rgb-background-disabled-faded:23,25,33;--rs-color-rgb-background-elevation-base:21,23,30;--rs-color-rgb-background-elevation-raised:25,27,35;--rs-color-rgb-background-elevation-overlay:28,31,40;--rs-color-rgb-background-page:15,17,22;--rs-color-rgb-background-page-faded:17,19,25}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:
|
|
1
|
+
[data-rs-theme=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d7e2f6;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f6e1de;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#f0e8d0;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#dcf1e2;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000000f;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#253759;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#d72828;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e68075;--rs-color-border-critical-faded:#532a26;--rs-color-foreground-critical:#e68075;--rs-color-background-warning:#d7ae06;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#eed58a;--rs-color-border-warning-faded:#40371b;--rs-color-foreground-warning:#eed58a;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#223f2d;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#212227;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:215,40,40;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:215,174,6;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:33,34,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}
|
|
@@ -3,6 +3,7 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
|
|
|
3
3
|
import Accordion from "../index.js";
|
|
4
4
|
import Button from "../../Button/index.js";
|
|
5
5
|
import View from "../../View/index.js";
|
|
6
|
+
import useToggle from "../../../hooks/useToggle.js";
|
|
6
7
|
export default {
|
|
7
8
|
title: "Utilities/Accordion",
|
|
8
9
|
component: Accordion,
|
|
@@ -97,30 +98,43 @@ const DemoMultiple = () => {
|
|
|
97
98
|
</View>))}
|
|
98
99
|
</View>);
|
|
99
100
|
};
|
|
100
|
-
export const composition = () =>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<Accordion.Content>
|
|
105
|
-
<View paddingTop={2}>
|
|
106
|
-
<Placeholder h={200}/>
|
|
107
|
-
</View>
|
|
108
|
-
</Accordion.Content>
|
|
109
|
-
</Accordion>
|
|
110
|
-
</Example.Item>
|
|
111
|
-
<Example.Item title="inside View">
|
|
112
|
-
<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
|
|
101
|
+
export const composition = () => {
|
|
102
|
+
const toggle = useToggle();
|
|
103
|
+
return (<Example>
|
|
104
|
+
<Example.Item title="custom content size">
|
|
113
105
|
<Accordion>
|
|
114
106
|
<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
|
|
107
|
+
<Accordion.Content>
|
|
108
|
+
<View paddingTop={2}>
|
|
109
|
+
<Placeholder h={200}/>
|
|
110
|
+
</View>
|
|
111
|
+
</Accordion.Content>
|
|
112
|
+
</Accordion>
|
|
113
|
+
</Example.Item>
|
|
114
|
+
<Example.Item title="inside View">
|
|
115
|
+
<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
|
|
116
|
+
<Accordion>
|
|
117
|
+
<Accordion.Trigger>Accordion trigger</Accordion.Trigger>
|
|
118
|
+
<Accordion.Content>
|
|
119
|
+
<View paddingTop={2}>
|
|
120
|
+
<Placeholder />
|
|
121
|
+
</View>
|
|
122
|
+
</Accordion.Content>
|
|
123
|
+
</Accordion>
|
|
124
|
+
</View>
|
|
125
|
+
</Example.Item>
|
|
126
|
+
<Example.Item title="multiple items, depending on state">
|
|
127
|
+
<DemoMultiple />
|
|
128
|
+
</Example.Item>
|
|
129
|
+
<Example.Item title="external trigger">
|
|
130
|
+
<Button onClick={toggle.toggle}>Toggle</Button>
|
|
131
|
+
<Accordion active={toggle.active}>
|
|
115
132
|
<Accordion.Content>
|
|
116
133
|
<View paddingTop={2}>
|
|
117
134
|
<Placeholder />
|
|
118
135
|
</View>
|
|
119
136
|
</Accordion.Content>
|
|
120
137
|
</Accordion>
|
|
121
|
-
</
|
|
122
|
-
</Example
|
|
123
|
-
|
|
124
|
-
<DemoMultiple />
|
|
125
|
-
</Example.Item>
|
|
126
|
-
</Example>);
|
|
138
|
+
</Example.Item>
|
|
139
|
+
</Example>);
|
|
140
|
+
};
|
|
@@ -6,18 +6,29 @@ import DropdownMenu from "../DropdownMenu/index.js";
|
|
|
6
6
|
import useHotkeys from "../../hooks/useHotkeys.js";
|
|
7
7
|
import { getActiveElement } from "../../utilities/a11y/focus.js";
|
|
8
8
|
import * as keys from "../../constants/keys.js";
|
|
9
|
+
import useHandlerRef from "../../hooks/useHandlerRef.js";
|
|
9
10
|
const AutocompleteContext = React.createContext({});
|
|
10
11
|
const Autocomplete = (props) => {
|
|
11
|
-
const { children, onChange, onInput, onItemSelect, name, containerRef, ...textFieldProps } = props;
|
|
12
|
-
const
|
|
12
|
+
const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, ...textFieldProps } = props;
|
|
13
|
+
const onBackspaceRef = useHandlerRef(onBackspace);
|
|
14
|
+
const internalInputRef = React.useRef(null);
|
|
15
|
+
const inputAttributesRef = textFieldProps.inputAttributes?.ref;
|
|
16
|
+
const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
|
|
17
|
+
? inputAttributesRef
|
|
18
|
+
: internalInputRef;
|
|
13
19
|
const [active, setActive] = React.useState(false);
|
|
14
|
-
// Prevent dropdown from opening on selecting an item
|
|
15
|
-
const [locked, setLocked] = React.useState(false);
|
|
16
20
|
const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
|
|
21
|
+
const lockedRef = React.useRef(false);
|
|
17
22
|
const handleOpen = React.useCallback(() => setActive(true), []);
|
|
18
23
|
const handleClose = () => setActive(false);
|
|
19
24
|
useHotkeys({
|
|
20
|
-
[
|
|
25
|
+
[keys.BACKSPACE]: () => onBackspaceRef.current?.(),
|
|
26
|
+
}, [onBackspaceRef], {
|
|
27
|
+
ref: inputRef,
|
|
28
|
+
disabled: !onBackspaceRef.current,
|
|
29
|
+
});
|
|
30
|
+
useHotkeys({
|
|
31
|
+
[keys.DOWN]: () => handleOpen(),
|
|
21
32
|
[keys.ENTER]: () => {
|
|
22
33
|
const el = getActiveElement();
|
|
23
34
|
el?.click();
|
|
@@ -25,34 +36,27 @@ const Autocomplete = (props) => {
|
|
|
25
36
|
}, [handleOpen], { ref: inputRef, preventDefault: true });
|
|
26
37
|
const handleChange = (args) => {
|
|
27
38
|
onChange?.(args);
|
|
28
|
-
setLocked(false);
|
|
29
39
|
handleOpen();
|
|
30
40
|
};
|
|
31
41
|
const handleItemClick = (args) => {
|
|
32
42
|
onChange?.({ value: args.value, name });
|
|
33
43
|
onItemSelect?.({ value: args.value });
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (!locked)
|
|
39
|
-
return;
|
|
40
|
-
setActive(false);
|
|
41
|
-
setLocked(false);
|
|
42
|
-
});
|
|
43
|
-
textFieldProps.onFocus?.(e);
|
|
44
|
+
// Prevent dropdown from re-opening when clicked on item with mouse
|
|
45
|
+
// and focus moves to the item and back to the input
|
|
46
|
+
lockedRef.current = true;
|
|
47
|
+
setTimeout(() => (lockedRef.current = false), 100);
|
|
44
48
|
};
|
|
45
49
|
const handleInput = (e) => {
|
|
46
50
|
onInput?.({ value: e.currentTarget.value, name, event: e });
|
|
47
51
|
textFieldProps.inputAttributes?.onInput?.(e);
|
|
48
52
|
};
|
|
49
|
-
return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !
|
|
53
|
+
return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !lockedRef.current && hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active,
|
|
50
54
|
// Ignoring the type check since TS can't infer the correct html element type
|
|
51
55
|
attributes: { ...textFieldProps.attributes, ref }, inputAttributes: {
|
|
52
56
|
...textFieldProps.inputAttributes,
|
|
53
57
|
onFocus: (e) => {
|
|
54
58
|
attributes.onFocus?.();
|
|
55
|
-
|
|
59
|
+
textFieldProps.onFocus?.(e);
|
|
56
60
|
},
|
|
57
61
|
onInput: handleInput,
|
|
58
62
|
ref: inputRef,
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { TextFieldProps } from "../TextField";
|
|
2
2
|
import type { MenuItemProps } from "../MenuItem";
|
|
3
|
-
import type { DropdownMenuProps } from "../DropdownMenu";
|
|
4
|
-
export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef"> & {
|
|
3
|
+
import type { DropdownMenuProps, DropdownMenuInstance } from "../DropdownMenu";
|
|
4
|
+
export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef"> & {
|
|
5
5
|
onInput?: TextFieldProps["onChange"];
|
|
6
6
|
onItemSelect?: (args: {
|
|
7
7
|
value: string;
|
|
8
8
|
}) => void;
|
|
9
|
+
onBackspace?: () => void;
|
|
9
10
|
children: React.ReactNode;
|
|
10
11
|
};
|
|
11
12
|
export type ItemProps = MenuItemProps & {
|
|
@@ -16,3 +17,4 @@ export type Context = {
|
|
|
16
17
|
value: string;
|
|
17
18
|
}) => void;
|
|
18
19
|
};
|
|
20
|
+
export type Instance = DropdownMenuInstance;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./Autocomplete";
|
|
2
|
-
export type { Props as AutocompleteProps } from "./Autocomplete.types";
|
|
2
|
+
export type { Props as AutocompleteProps, Instance as AutocompleteInstance, } from "./Autocomplete.types";
|
|
@@ -3,6 +3,14 @@ import { Example } from "../../../utilities/storybook/index.js";
|
|
|
3
3
|
import Autocomplete from "../index.js";
|
|
4
4
|
import Loader from "../../Loader/index.js";
|
|
5
5
|
import View from "../../View/index.js";
|
|
6
|
+
import Badge from "../../Badge/index.js";
|
|
7
|
+
import useToggle from "../../../hooks/useToggle.js";
|
|
8
|
+
import Modal from "../../Modal/index.js";
|
|
9
|
+
import TextField from "../../TextField/index.js";
|
|
10
|
+
import Text from "../../Text/index.js";
|
|
11
|
+
import Button from "../../Button/index.js";
|
|
12
|
+
import PlusIcon from "../../../icons/Plus.js";
|
|
13
|
+
import Dismissible from "../../Dismissible/index.js";
|
|
6
14
|
export default {
|
|
7
15
|
title: "Components/Autocomplete",
|
|
8
16
|
component: Autocomplete,
|
|
@@ -53,3 +61,76 @@ export const base = () => (<Example>
|
|
|
53
61
|
<DemoAsync />
|
|
54
62
|
</Example.Item>
|
|
55
63
|
</Example>);
|
|
64
|
+
export const multiselect = () => {
|
|
65
|
+
const inputRef = React.useRef(null);
|
|
66
|
+
const [values, setValues] = React.useState([]);
|
|
67
|
+
const [query, setQuery] = React.useState("");
|
|
68
|
+
const [customValueQuery, setCustomValueQuery] = React.useState("");
|
|
69
|
+
const customValueToggle = useToggle();
|
|
70
|
+
const handleDismiss = (dismissedValue) => {
|
|
71
|
+
const nextValues = values.filter((value) => value !== dismissedValue);
|
|
72
|
+
setValues(nextValues);
|
|
73
|
+
inputRef.current?.focus();
|
|
74
|
+
};
|
|
75
|
+
const handleAddCustomValue = () => {
|
|
76
|
+
if (customValueQuery.length) {
|
|
77
|
+
setValues((prev) => [...prev, customValueQuery]);
|
|
78
|
+
}
|
|
79
|
+
customValueToggle.deactivate();
|
|
80
|
+
setCustomValueQuery("");
|
|
81
|
+
};
|
|
82
|
+
const valuesNode = !!values.length && (<View direction="row" gap={1}>
|
|
83
|
+
{values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value} size="small">
|
|
84
|
+
{value}
|
|
85
|
+
</Badge>))}
|
|
86
|
+
</View>);
|
|
87
|
+
return (<>
|
|
88
|
+
<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
|
|
89
|
+
if (!query.length)
|
|
90
|
+
handleDismiss(values[values.length - 1]);
|
|
91
|
+
}} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
|
|
92
|
+
setCustomValueQuery(query);
|
|
93
|
+
setQuery("");
|
|
94
|
+
if (args.value === "_custom") {
|
|
95
|
+
customValueToggle.activate();
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
setValues((prev) => [...prev, args.value]);
|
|
99
|
+
}}>
|
|
100
|
+
{["Pizza", "Pie", "Ice-cream"].map((v) => {
|
|
101
|
+
if (!v.toLowerCase().includes(query.toLowerCase()))
|
|
102
|
+
return;
|
|
103
|
+
if (values.includes(v))
|
|
104
|
+
return;
|
|
105
|
+
return (<Autocomplete.Item key={v} value={v}>
|
|
106
|
+
{v}
|
|
107
|
+
</Autocomplete.Item>);
|
|
108
|
+
})}
|
|
109
|
+
{!!query.length && (<Autocomplete.Item value="_custom" icon={PlusIcon}>
|
|
110
|
+
Add a custom value
|
|
111
|
+
</Autocomplete.Item>)}
|
|
112
|
+
</Autocomplete>
|
|
113
|
+
<Modal onClose={customValueToggle.deactivate} active={customValueToggle.active}>
|
|
114
|
+
<View gap={4}>
|
|
115
|
+
<Dismissible onClose={customValueToggle.deactivate} closeAriaLabel="Close modal">
|
|
116
|
+
<Modal.Title>
|
|
117
|
+
<Text variant="body-3" weight="medium">
|
|
118
|
+
Add a custom value
|
|
119
|
+
</Text>
|
|
120
|
+
</Modal.Title>
|
|
121
|
+
</Dismissible>
|
|
122
|
+
<View direction="row" gap={3} as="form" attributes={{
|
|
123
|
+
onSubmit: (e) => {
|
|
124
|
+
e.preventDefault();
|
|
125
|
+
handleAddCustomValue();
|
|
126
|
+
},
|
|
127
|
+
}}>
|
|
128
|
+
<View.Item grow>
|
|
129
|
+
<TextField name="custom" onChange={(args) => setCustomValueQuery(args.value)} value={customValueQuery}/>
|
|
130
|
+
</View.Item>
|
|
131
|
+
<Button type="submit">Add</Button>
|
|
132
|
+
</View>
|
|
133
|
+
</View>
|
|
134
|
+
</Modal>
|
|
135
|
+
</>);
|
|
136
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);
|
|
1
|
+
.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss,.root{border-radius:var(--rs-radius-small)}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
|
|
@@ -12,7 +12,7 @@ type BaseProps = {
|
|
|
12
12
|
} & Pick<ActionableProps, "href" | "onClick" | "attributes">;
|
|
13
13
|
type WithChildren = BaseProps & {
|
|
14
14
|
children: React.ReactNode;
|
|
15
|
-
color?: "critical" | "warning" | "positive" | "primary";
|
|
15
|
+
color?: "neutral" | "critical" | "warning" | "positive" | "primary";
|
|
16
16
|
variant?: "faded" | "outline";
|
|
17
17
|
};
|
|
18
18
|
type WithEmpty = BaseProps & {
|
|
@@ -607,7 +607,7 @@ export const aligner = () => (<Example>
|
|
|
607
607
|
</Example>);
|
|
608
608
|
export const composition = () => (<Example>
|
|
609
609
|
<Example.Item title="slot gap">
|
|
610
|
-
<Button variant="
|
|
610
|
+
<Button variant="outline">
|
|
611
611
|
<Avatar size={6} initials="RS"/>
|
|
612
612
|
Label
|
|
613
613
|
<Hotkey>B</Hotkey>
|
|
@@ -1 +1 @@
|
|
|
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%)}
|
|
1
|
+
.root{min-height:var(--rs-unit-x5);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%)}
|
|
@@ -10,7 +10,7 @@ const FileUploadTrigger = (props) => {
|
|
|
10
10
|
return _jsx("span", { className: s.trigger, children: children });
|
|
11
11
|
};
|
|
12
12
|
const FileUpload = (props) => {
|
|
13
|
-
const { name, children, className, attributes, inputAttributes, onChange } = props;
|
|
13
|
+
const { name, children, height, className, attributes, inputAttributes, onChange } = props;
|
|
14
14
|
const highlightToggle = useToggle();
|
|
15
15
|
const rootClassNames = classNames(s.root, highlightToggle.active && s["--highlighted"], className);
|
|
16
16
|
const handleDragOver = (event) => {
|
|
@@ -41,7 +41,13 @@ const FileUpload = (props) => {
|
|
|
41
41
|
onChange?.({ name, event, value: Array.from(nextValue) });
|
|
42
42
|
inputAttributes?.onChange?.(event);
|
|
43
43
|
};
|
|
44
|
-
return (_jsx(
|
|
44
|
+
return (_jsx(View, { className: rootClassNames, height: height, attributes: {
|
|
45
|
+
...attributes,
|
|
46
|
+
onDragOver: handleDragOver,
|
|
47
|
+
onDragEnter: handleDragEnter,
|
|
48
|
+
onDragLeave: handleDragLeave,
|
|
49
|
+
onDrop: handleDrop,
|
|
50
|
+
}, children: _jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [_jsx(View.Item, { children: children }), _jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) })] }) }));
|
|
45
51
|
};
|
|
46
52
|
FileUpload.Trigger = FileUploadTrigger;
|
|
47
53
|
export default FileUpload;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
+
import type { ViewProps } from "../View";
|
|
2
3
|
import type * as G from "../../types/global";
|
|
3
4
|
export type Props = {
|
|
4
5
|
name: string;
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
|
|
8
|
+
height?: ViewProps["height"];
|
|
7
9
|
className?: G.ClassName;
|
|
8
10
|
attributes?: G.Attributes<"div">;
|
|
9
11
|
inputAttributes?: G.Attributes<"input">;
|
|
@@ -49,3 +49,13 @@ export const base = () => (<Example>
|
|
|
49
49
|
</FileUpload>
|
|
50
50
|
</Example.Item>
|
|
51
51
|
</Example>);
|
|
52
|
+
export const height = () => (<Example>
|
|
53
|
+
<Example.Item title="Custom height">
|
|
54
|
+
<FileUpload name="file" height="300px">
|
|
55
|
+
<View gap={3}>
|
|
56
|
+
<Icon svg={IconMic} size={8}/>
|
|
57
|
+
Drop files to attach
|
|
58
|
+
</View>
|
|
59
|
+
</FileUpload>
|
|
60
|
+
</Example.Item>
|
|
61
|
+
</Example>);
|
|
@@ -15,7 +15,9 @@ const Image = (props) => {
|
|
|
15
15
|
const baseClassNames = classNames(s.root, radiusStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
|
|
16
16
|
const imgClassNames = classNames(s.image, baseClassNames);
|
|
17
17
|
const fallbackClassNames = classNames(s.fallback, baseClassNames);
|
|
18
|
+
const isFallback = (status === "error" || !src) && !!fallback;
|
|
18
19
|
const style = {
|
|
20
|
+
...attributes?.style,
|
|
19
21
|
...widthStyles?.variables,
|
|
20
22
|
...heightStyles?.variables,
|
|
21
23
|
};
|
|
@@ -30,7 +32,7 @@ const Image = (props) => {
|
|
|
30
32
|
React.useEffect(() => {
|
|
31
33
|
setStatus("loading");
|
|
32
34
|
}, [src]);
|
|
33
|
-
if (
|
|
35
|
+
if (isFallback) {
|
|
34
36
|
if (typeof fallback === "string") {
|
|
35
37
|
return (_jsx("img", { ...attributes, src: fallback, alt: alt, role: alt ? undefined : "presentation", className: fallbackClassNames, style: style }));
|
|
36
38
|
}
|
|
@@ -19,7 +19,7 @@ export const size = () => {
|
|
|
19
19
|
<Loader size="small" attributes={{ "data-foo": "23" }}/>
|
|
20
20
|
</Example.Item>
|
|
21
21
|
<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
|
|
22
|
-
<Loader size={{ s: "small", m: "medium" }}
|
|
22
|
+
<Loader size={{ s: "small", m: "medium" }}/>
|
|
23
23
|
</Example.Item>
|
|
24
24
|
</Example>);
|
|
25
25
|
};
|