reshaped 3.7.0-canary.7 → 3.7.0-canary.9

package/dist/components/Autocomplete/Autocomplete.js

@@ -10,8 +10,9 @@ import useHandlerRef from "../../hooks/useHandlerRef.js";
 import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, active, onOpen, onClose, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
     const onBackspaceRef = useHandlerRef(onBackspace);
+    const onEnterRef = useHandlerRef(onEnter);
     const internalInputRef = React.useRef(null);
     const inputAttributesRef = textFieldProps.inputAttributes?.ref;
     const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
@@ -67,9 +68,12 @@ const Autocomplete = (props) => {
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
         },
-    }, [onBackspaceRef], {
+        [keys.ENTER]: () => {
+            onEnterRef.current?.();
+        },
+    }, [onBackspaceRef, onEnterRef], {
         ref: inputRef,
-        disabled: !onBackspaceRef.current,
+        disabled: !onBackspaceRef.current && !onEnterRef.current,
     });
     useHotkeys({
         [keys.DOWN]: () => {

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -9,6 +9,7 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
     onInput?: TextFieldProps["onChange"];
     onItemSelect?: (args: SelectArgs) => void;
     onBackspace?: () => void;
+    onEnter?: () => void;
     children: React.ReactNode;
 };
 export type ItemProps = MenuItemProps & SelectArgs;

package/dist/components/Carousel/Carousel.module.css

@@ -1 +1 @@
-.root{isolation:isolate;position:relative;width:100%}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
+.root{isolation:isolate;position:relative;width:100%}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);outline:none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}[data-rs-keyboard] .scroll:focus{box-shadow:var(--rs-focus-shadow)}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

package/dist/components/Flyout/FlyoutControlled.js

@@ -72,7 +72,6 @@ const FlyoutControlled = (props) => {
         active: isRendered && triggerType !== "hover",
         contentRef: flyoutElRef,
         triggerRef: triggerElRef,
-        blocking: false,
     });
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)

package/dist/components/Modal/tests/Modal.stories.js

@@ -190,6 +190,14 @@ export const edgeCases = () => {
 					</View>
 				</Demo>
 			</Example.Item>
+			<Example.Item title="Focus moves to the input with autoFocus">
+				<Demo title="Modal title">
+					<View gap={3} direction="row">
+						<Button onClick={() => { }}>Button</Button>
+						<TextField name="name" placeholder="autofocus" inputAttributes={{ autoFocus: true }}/>
+					</View>
+				</Demo>
+			</Example.Item>
 			<Example.Item title="scrollable area in modal ignores swipe-to-close">
 				<View gap={3} direction="row">
 					<Button onClick={scrollModalToggle.activate}>Open</Button>

package/dist/components/Overlay/Overlay.js

@@ -31,8 +31,7 @@ const Overlay = (props) => {
     // Separating rendered and visible states to make sure animation is triggered only once overlay was added to the dom
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
-    // Check that when close was triggered there were no other overlays / flyouts rendered above it
-    const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
+    const isDismissible = useIsDismissible({ active, contentRef });
     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);
     const isInsideContent = (el) => {
         if (!contentRef.current)

package/dist/components/Popover/tests/Popover.stories.d.ts

@@ -50,15 +50,19 @@ export declare const dismissible: StoryObj<{
     handleClose: ReturnType<typeof fn>;
 }>;
 export declare const className: StoryObj;
+export declare const testNested: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const testWithTooltip: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const variant: {
+export declare const testContentEditable: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const teslContentEditable: {
+export declare const variant: {
     name: string;
     render: () => import("react").JSX.Element;
 };

package/dist/components/Popover/tests/Popover.stories.js

@@ -221,6 +221,25 @@ export const className = {
         expect(menu).toHaveClass("test-classname");
     },
 };
+export const testNested = {
+    name: "test: nested",
+    render: () => (<Popover position="bottom">
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<View gap={2} align="start">
+					Popover content
+					<Popover>
+						<Popover.Trigger>
+							{(attributes) => <Button attributes={attributes}>Open</Button>}
+						</Popover.Trigger>
+						<Popover.Content>Hello</Popover.Content>
+					</Popover>
+				</View>
+			</Popover.Content>
+		</Popover>),
+};
 export const testWithTooltip = {
     name: "test: with tooltip",
     render: () => (<View paddingTop={10}>
@@ -244,22 +263,7 @@ export const testWithTooltip = {
 			</Tooltip>
 		</View>),
 };
-export const variant = {
-    name: "variant [deprecated]",
-    render: () => (<Example>
-			<Example.Item title="variant: headless">
-				<Popover variant="headless" defaultActive position="bottom-start">
-					<Popover.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</Popover.Trigger>
-					<Popover.Content>
-						<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
-					</Popover.Content>
-				</Popover>
-			</Example.Item>
-		</Example>),
-};
-export const teslContentEditable = {
+export const testContentEditable = {
     name: "test: contenteditable",
     render: () => {
         const [active, setActive] = useState(false);
@@ -299,3 +303,18 @@ export const teslContentEditable = {
 			</Popover>);
     },
 };
+export const variant = {
+    name: "variant [deprecated]",
+    render: () => (<Example>
+			<Example.Item title="variant: headless">
+				<Popover variant="headless" defaultActive position="bottom-start">
+					<Popover.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</Popover.Trigger>
+					<Popover.Content>
+						<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
+					</Popover.Content>
+				</Popover>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/TextArea/TextArea.module.css

@@ -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%;word-break:break-all}.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)}}
+.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)}}

package/dist/components/TextField/TextField.js

@@ -50,7 +50,7 @@ const TextField = (props) => {
             return;
         onChange({ name, value: event.target.value, event });
     };
-    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 }), _jsxs("div", { className: s.inner, children: [_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 })] })] }));
+    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 }), _jsxs("div", { className: s.inner, children: [_jsx("input", { type: "text", autoComplete: "off", ...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 })] })] }));
 };
 TextField.Aligner = Aligner;
 TextField.displayName = "TextField";

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -8,6 +8,5 @@ declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;
     triggerRef?: Ref;
-    blocking?: boolean;
 }) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -4,6 +4,7 @@
  */
 import React from "react";
 import useElementId from "../useElementId.js";
+import { onNextFrame } from "../../utilities/animation.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {
@@ -22,19 +23,22 @@ const addToQueue = (id, contentRef, triggerRef) => {
     latestId = id;
 };
 const useIsDismissible = (args) => {
-    const { active, contentRef, triggerRef, blocking } = args;
+    const { active, contentRef, triggerRef } = args;
     const id = useElementId();
-    const isDismissible = React.useCallback(() => {
-        if (!blocking)
-            return true;
-        return active ? latestId === id : true;
-    }, [id, active, blocking]);
     React.useEffect(() => {
         if (!active)
             return;
-        addToQueue(id, contentRef, triggerRef);
+        if (queue.length) {
+            // Make sure new item is added to the queue after others unmount first
+            onNextFrame(() => addToQueue(id, contentRef, triggerRef));
+        }
+        else {
+            addToQueue(id, contentRef, triggerRef);
+        }
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
-    return isDismissible;
+    return React.useCallback(() => {
+        return active ? latestId === id : true;
+    }, [id, active]);
 };
 export default useIsDismissible;

package/dist/utilities/a11y/TrapFocus.js

@@ -119,9 +119,13 @@ class TrapFocus {
             this.#screenReaderTrap.trap();
         // Don't add back to the chain if we're traversing back
         const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
+        const currentActiveElement = getActiveElement(this.#root);
         if (!tailItem || this.#root !== tailItem.data.#root) {
             this.#chainId = _a.chain.add(this);
-            focusElement(initialFocusEl || focusable[0], { pseudoFocus });
+            // If the focus was moved manually (e.g. with autoFocus) - keep it there
+            if (!this.#root.contains(currentActiveElement)) {
+                focusElement(initialFocusEl || focusable[0], { pseudoFocus });
+            }
         }
         this.trapped = true;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.7.0-canary.7",
+	"version": "3.7.0-canary.9",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",