reshaped 3.7.0-canary.8 → 3.7.0-canary.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +10 -10
- package/dist/components/Autocomplete/Autocomplete.js +7 -3
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -0
- package/dist/components/Flyout/FlyoutControlled.js +0 -1
- package/dist/components/Overlay/Overlay.js +1 -2
- package/dist/components/Popover/tests/Popover.stories.d.ts +6 -2
- package/dist/components/Popover/tests/Popover.stories.js +35 -16
- package/dist/components/TextArea/TextArea.module.css +1 -1
- package/dist/hooks/_private/useIsDismissible.d.ts +0 -1
- package/dist/hooks/_private/useIsDismissible.js +12 -8
- package/package.json +1 -1
|
@@ -10,8 +10,9 @@ import useHandlerRef from "../../hooks/useHandlerRef.js";
|
|
|
10
10
|
import s from "./Autocomplete.module.css";
|
|
11
11
|
const AutocompleteContext = React.createContext({});
|
|
12
12
|
const Autocomplete = (props) => {
|
|
13
|
-
const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, active, onOpen, onClose, ...textFieldProps } = props;
|
|
13
|
+
const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
|
|
14
14
|
const onBackspaceRef = useHandlerRef(onBackspace);
|
|
15
|
+
const onEnterRef = useHandlerRef(onEnter);
|
|
15
16
|
const internalInputRef = React.useRef(null);
|
|
16
17
|
const inputAttributesRef = textFieldProps.inputAttributes?.ref;
|
|
17
18
|
const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
|
|
@@ -67,9 +68,12 @@ const Autocomplete = (props) => {
|
|
|
67
68
|
[keys.BACKSPACE]: () => {
|
|
68
69
|
onBackspaceRef.current?.();
|
|
69
70
|
},
|
|
70
|
-
|
|
71
|
+
[keys.ENTER]: () => {
|
|
72
|
+
onEnterRef.current?.();
|
|
73
|
+
},
|
|
74
|
+
}, [onBackspaceRef, onEnterRef], {
|
|
71
75
|
ref: inputRef,
|
|
72
|
-
disabled: !onBackspaceRef.current,
|
|
76
|
+
disabled: !onBackspaceRef.current && !onEnterRef.current,
|
|
73
77
|
});
|
|
74
78
|
useHotkeys({
|
|
75
79
|
[keys.DOWN]: () => {
|
|
@@ -9,6 +9,7 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
|
|
|
9
9
|
onInput?: TextFieldProps["onChange"];
|
|
10
10
|
onItemSelect?: (args: SelectArgs) => void;
|
|
11
11
|
onBackspace?: () => void;
|
|
12
|
+
onEnter?: () => void;
|
|
12
13
|
children: React.ReactNode;
|
|
13
14
|
};
|
|
14
15
|
export type ItemProps = MenuItemProps & SelectArgs;
|
|
@@ -31,8 +31,7 @@ const Overlay = (props) => {
|
|
|
31
31
|
// Separating rendered and visible states to make sure animation is triggered only once overlay was added to the dom
|
|
32
32
|
const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
|
|
33
33
|
const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
|
|
34
|
-
|
|
35
|
-
const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
|
|
34
|
+
const isDismissible = useIsDismissible({ active, contentRef });
|
|
36
35
|
const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
|
|
37
36
|
const isInsideContent = (el) => {
|
|
38
37
|
if (!contentRef.current)
|
|
@@ -50,15 +50,19 @@ export declare const dismissible: StoryObj<{
|
|
|
50
50
|
handleClose: ReturnType<typeof fn>;
|
|
51
51
|
}>;
|
|
52
52
|
export declare const className: StoryObj;
|
|
53
|
+
export declare const testNested: {
|
|
54
|
+
name: string;
|
|
55
|
+
render: () => import("react").JSX.Element;
|
|
56
|
+
};
|
|
53
57
|
export declare const testWithTooltip: {
|
|
54
58
|
name: string;
|
|
55
59
|
render: () => import("react").JSX.Element;
|
|
56
60
|
};
|
|
57
|
-
export declare const
|
|
61
|
+
export declare const testContentEditable: {
|
|
58
62
|
name: string;
|
|
59
63
|
render: () => import("react").JSX.Element;
|
|
60
64
|
};
|
|
61
|
-
export declare const
|
|
65
|
+
export declare const variant: {
|
|
62
66
|
name: string;
|
|
63
67
|
render: () => import("react").JSX.Element;
|
|
64
68
|
};
|
|
@@ -221,6 +221,25 @@ export const className = {
|
|
|
221
221
|
expect(menu).toHaveClass("test-classname");
|
|
222
222
|
},
|
|
223
223
|
};
|
|
224
|
+
export const testNested = {
|
|
225
|
+
name: "test: nested",
|
|
226
|
+
render: () => (<Popover position="bottom">
|
|
227
|
+
<Popover.Trigger>
|
|
228
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
229
|
+
</Popover.Trigger>
|
|
230
|
+
<Popover.Content>
|
|
231
|
+
<View gap={2} align="start">
|
|
232
|
+
Popover content
|
|
233
|
+
<Popover>
|
|
234
|
+
<Popover.Trigger>
|
|
235
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
236
|
+
</Popover.Trigger>
|
|
237
|
+
<Popover.Content>Hello</Popover.Content>
|
|
238
|
+
</Popover>
|
|
239
|
+
</View>
|
|
240
|
+
</Popover.Content>
|
|
241
|
+
</Popover>),
|
|
242
|
+
};
|
|
224
243
|
export const testWithTooltip = {
|
|
225
244
|
name: "test: with tooltip",
|
|
226
245
|
render: () => (<View paddingTop={10}>
|
|
@@ -244,22 +263,7 @@ export const testWithTooltip = {
|
|
|
244
263
|
</Tooltip>
|
|
245
264
|
</View>),
|
|
246
265
|
};
|
|
247
|
-
export const
|
|
248
|
-
name: "variant [deprecated]",
|
|
249
|
-
render: () => (<Example>
|
|
250
|
-
<Example.Item title="variant: headless">
|
|
251
|
-
<Popover variant="headless" defaultActive position="bottom-start">
|
|
252
|
-
<Popover.Trigger>
|
|
253
|
-
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
254
|
-
</Popover.Trigger>
|
|
255
|
-
<Popover.Content>
|
|
256
|
-
<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
|
|
257
|
-
</Popover.Content>
|
|
258
|
-
</Popover>
|
|
259
|
-
</Example.Item>
|
|
260
|
-
</Example>),
|
|
261
|
-
};
|
|
262
|
-
export const teslContentEditable = {
|
|
266
|
+
export const testContentEditable = {
|
|
263
267
|
name: "test: contenteditable",
|
|
264
268
|
render: () => {
|
|
265
269
|
const [active, setActive] = useState(false);
|
|
@@ -299,3 +303,18 @@ export const teslContentEditable = {
|
|
|
299
303
|
</Popover>);
|
|
300
304
|
},
|
|
301
305
|
};
|
|
306
|
+
export const variant = {
|
|
307
|
+
name: "variant [deprecated]",
|
|
308
|
+
render: () => (<Example>
|
|
309
|
+
<Example.Item title="variant: headless">
|
|
310
|
+
<Popover variant="headless" defaultActive position="bottom-start">
|
|
311
|
+
<Popover.Trigger>
|
|
312
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
|
313
|
+
</Popover.Trigger>
|
|
314
|
+
<Popover.Content>
|
|
315
|
+
<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
|
|
316
|
+
</Popover.Content>
|
|
317
|
+
</Popover>
|
|
318
|
+
</Example.Item>
|
|
319
|
+
</Example>),
|
|
320
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100
|
|
1
|
+
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";overflow:hidden;overflow-wrap:break-word;visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);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)}.--size-large{--rs-p:var(--rs-unit-x3);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)}.--size-xlarge{--rs-p:var(--rs-unit-x4);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)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2);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)}.--size-large--m{--rs-p:var(--rs-unit-x3);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)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);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)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);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)}.--size-large--l{--rs-p:var(--rs-unit-x3);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)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);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)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);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)}.--size-large--xl{--rs-p:var(--rs-unit-x3);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)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);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)}}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import React from "react";
|
|
6
6
|
import useElementId from "../useElementId.js";
|
|
7
|
+
import { onNextFrame } from "../../utilities/animation.js";
|
|
7
8
|
let queue = {};
|
|
8
9
|
let latestId = null;
|
|
9
10
|
const removeFromQueue = (id) => {
|
|
@@ -22,19 +23,22 @@ const addToQueue = (id, contentRef, triggerRef) => {
|
|
|
22
23
|
latestId = id;
|
|
23
24
|
};
|
|
24
25
|
const useIsDismissible = (args) => {
|
|
25
|
-
const { active, contentRef, triggerRef
|
|
26
|
+
const { active, contentRef, triggerRef } = args;
|
|
26
27
|
const id = useElementId();
|
|
27
|
-
const isDismissible = React.useCallback(() => {
|
|
28
|
-
if (!blocking)
|
|
29
|
-
return true;
|
|
30
|
-
return active ? latestId === id : true;
|
|
31
|
-
}, [id, active, blocking]);
|
|
32
28
|
React.useEffect(() => {
|
|
33
29
|
if (!active)
|
|
34
30
|
return;
|
|
35
|
-
|
|
31
|
+
if (queue.length) {
|
|
32
|
+
// Make sure new item is added to the queue after others unmount first
|
|
33
|
+
onNextFrame(() => addToQueue(id, contentRef, triggerRef));
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
addToQueue(id, contentRef, triggerRef);
|
|
37
|
+
}
|
|
36
38
|
return () => removeFromQueue(id);
|
|
37
39
|
}, [active, id, contentRef, triggerRef]);
|
|
38
|
-
return
|
|
40
|
+
return React.useCallback(() => {
|
|
41
|
+
return active ? latestId === id : true;
|
|
42
|
+
}, [id, active]);
|
|
39
43
|
};
|
|
40
44
|
export default useIsDismissible;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.7.0-canary.
|
|
4
|
+
"version": "3.7.0-canary.9",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|