reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,236 +1,230 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.stopPropagation = exports.as = exports.type = exports.borderRadius = exports.disableFocusRing = exports.insetFocus = exports.fullWidth = exports.disabled = exports.base = void 0;
-const test_1 = require("storybook/test");
-const Actionable_1 = __importDefault(require("../../../components/Actionable"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Actionable from "../../../components/Actionable/index.js";
+import Button from "../../../components/Button/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Actionable",
-    component: Actionable_1.default,
+    component: Actionable,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/actionable",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "href, onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
-        handleSecondClick: (0, test_1.fn)(),
+        handleClick: fn(),
+        handleSecondClick: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="span">
-				<Actionable_1.default>Span</Actionable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="onClick">
-				<Actionable_1.default onClick={args.handleClick}>Button</Actionable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="href">
-				<Actionable_1.default href="https://reshaped.so" attributes={{ target: "_blank" }}>
+    render: (args) => (<Example>
+			<Example.Item title="span">
+				<Actionable>Span</Actionable>
+			</Example.Item>
+			<Example.Item title="onClick">
+				<Actionable onClick={args.handleClick}>Button</Actionable>
+			</Example.Item>
+			<Example.Item title="href">
+				<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
 					Link
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
+				</Actionable>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="attributes.href">
-				<Actionable_1.default attributes={{ href: "https://reshaped.so" }}>Link with attributes</Actionable_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="attributes.href">
+				<Actionable attributes={{ href: "https://reshaped.so" }}>Link with attributes</Actionable>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="href, onClick">
-				<Actionable_1.default onClick={(e) => {
+			<Example.Item title="href, onClick">
+				<Actionable onClick={(e) => {
             e.preventDefault();
             args.handleSecondClick(e);
         }} href="https://reshaped.so">
 					Link with onClick
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const span = canvas.getByText("Span");
         const link = canvas.getByText("Link");
         const button = canvas.getByText("Button");
         const linkWithAttributes = canvas.getByText("Link with attributes");
         const linkWithOnClick = canvas.getByText("Link with onClick");
-        (0, test_1.expect)(span).toBeInTheDocument();
-        (0, test_1.expect)(span.tagName).toBe("SPAN");
-        (0, test_1.expect)(link).toBeInTheDocument();
-        (0, test_1.expect)(link).toHaveRole("link");
-        (0, test_1.expect)(link).toHaveAttribute("href", "https://reshaped.so");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button).toBeInTheDocument();
-        (0, test_1.expect)(button).toHaveRole("button");
-        (0, test_1.expect)(button).toHaveAttribute("type", "button");
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: button }));
-        (0, test_1.expect)(linkWithAttributes).toBeInTheDocument();
-        (0, test_1.expect)(linkWithAttributes).toHaveRole("link");
-        (0, test_1.expect)(linkWithAttributes).toHaveAttribute("href", "https://reshaped.so");
-        await test_1.userEvent.click(linkWithOnClick);
-        (0, test_1.expect)(linkWithOnClick).toBeInTheDocument();
-        (0, test_1.expect)(linkWithOnClick).toHaveRole("link");
-        (0, test_1.expect)(linkWithOnClick).toHaveAttribute("href", "https://reshaped.so");
-        (0, test_1.expect)(args.handleSecondClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleSecondClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: linkWithOnClick }));
+        expect(span).toBeInTheDocument();
+        expect(span.tagName).toBe("SPAN");
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveRole("link");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
+        await userEvent.click(button);
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveRole("button");
+        expect(button).toHaveAttribute("type", "button");
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
+        expect(linkWithAttributes).toBeInTheDocument();
+        expect(linkWithAttributes).toHaveRole("link");
+        expect(linkWithAttributes).toHaveAttribute("href", "https://reshaped.so");
+        await userEvent.click(linkWithOnClick);
+        expect(linkWithOnClick).toBeInTheDocument();
+        expect(linkWithOnClick).toHaveRole("link");
+        expect(linkWithOnClick).toHaveAttribute("href", "https://reshaped.so");
+        expect(args.handleSecondClick).toHaveBeenCalledTimes(1);
+        expect(args.handleSecondClick).toHaveBeenCalledWith(expect.objectContaining({ target: linkWithOnClick }));
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled, button">
-				<Actionable_1.default disabled onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="disabled, button">
+				<Actionable disabled onClick={() => { }}>
 					Button
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, link">
-				<Actionable_1.default disabled href="https://reshaped.so">
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="disabled, link">
+				<Actionable disabled href="https://reshaped.so">
 					Link
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
         const link = canvas.getByText("Link");
-        (0, test_1.expect)(button).toBeDisabled();
-        (0, test_1.expect)(link).not.toHaveAttribute("href");
-        (0, test_1.expect)(link).not.toHaveRole("link");
+        expect(button).toBeDisabled();
+        expect(link).not.toHaveAttribute("href");
+        expect(link).not.toHaveRole("link");
     },
 };
-exports.fullWidth = {
+export const fullWidth = {
     name: "fullWidth",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fullWidth">
-				<Actionable_1.default fullWidth href="https://reshaped.so">
+    render: () => (<Example>
+			<Example.Item title="fullWidth">
+				<Actionable fullWidth href="https://reshaped.so">
 					Actionable
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: async () => {
-        await test_1.userEvent.keyboard("{Tab/}");
+        await userEvent.keyboard("{Tab/}");
     },
 };
-exports.insetFocus = {
+export const insetFocus = {
     name: "insetFocus",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="insetFocus">
-				<Actionable_1.default insetFocus onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="insetFocus">
+				<Actionable insetFocus onClick={() => { }}>
 					Actionable
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: async () => {
-        await test_1.userEvent.keyboard("{Tab/}");
+        await userEvent.keyboard("{Tab/}");
     },
 };
-exports.disableFocusRing = {
+export const disableFocusRing = {
     name: "disableFocusRing",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disableFocusRing">
-				<Actionable_1.default disableFocusRing onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="disableFocusRing">
+				<Actionable disableFocusRing onClick={() => { }}>
 					Actionable
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: async () => {
-        await test_1.userEvent.keyboard("{Tab/}");
+        await userEvent.keyboard("{Tab/}");
     },
 };
-exports.borderRadius = {
+export const borderRadius = {
     name: "borderRadius",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="borderRadius: inherit">
-				<Actionable_1.default borderRadius="inherit" onClick={() => { }}>
-					<View_1.default borderRadius="large">Actionable</View_1.default>
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="borderRadius: inherit">
+				<Actionable borderRadius="inherit" onClick={() => { }}>
+					<View borderRadius="large">Actionable</View>
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: async () => {
-        await test_1.userEvent.keyboard("{Tab/}");
+        await userEvent.keyboard("{Tab/}");
     },
 };
-exports.type = {
+export const type = {
     name: "type",
     args: {
-        handleSubmit: (0, test_1.fn)(),
+        handleSubmit: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="type: submit">
+    render: (args) => (<Example>
+			<Example.Item title="type: submit">
 				<form onSubmit={(e) => {
             e.preventDefault();
             args.handleSubmit();
         }}>
-					<Actionable_1.default onClick={() => { }} type="submit">
+					<Actionable onClick={() => { }} type="submit">
 						Submit
-					</Actionable_1.default>
+					</Actionable>
 				</form>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleSubmit).toHaveBeenCalledTimes(1);
+        await userEvent.click(button);
+        expect(args.handleSubmit).toHaveBeenCalledTimes(1);
     },
 };
-exports.as = {
+export const as = {
     name: "as, render",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="as: span">
-				<Actionable_1.default onClick={() => { }} as="span">
+    render: () => (<Example>
+			<Example.Item title="as: span">
+				<Actionable onClick={() => { }} as="span">
 					Trigger
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="render, disabled">
-				<Actionable_1.default disabled onClick={() => { }} render={(props) => <section {...props}/>}>
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="render, disabled">
+				<Actionable disabled onClick={() => { }} render={(props) => <section {...props}/>}>
 					Trigger
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="render, with component">
-				<Actionable_1.default disabled onClick={() => { }} render={({ children, ref, disabled, ...attributes }) => (<Button_1.default disabled={disabled} attributes={attributes} ref={ref}>
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="render, with component">
+				<Actionable disabled onClick={() => { }} render={({ children, ref, disabled, ...attributes }) => (<Button disabled={disabled} attributes={attributes} ref={ref}>
 							{children}
-						</Button_1.default>)}>
+						</Button>)}>
 					Trigger
-				</Actionable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Actionable>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const [asEl, renderEl] = canvas.getAllByText("Trigger");
-        (0, test_1.expect)(asEl.tagName).toBe("SPAN");
-        (0, test_1.expect)(renderEl.tagName).toBe("SECTION");
-        (0, test_1.expect)(renderEl).toHaveAttribute("aria-disabled", "true");
+        expect(asEl.tagName).toBe("SPAN");
+        expect(renderEl.tagName).toBe("SECTION");
+        expect(renderEl).toHaveAttribute("aria-disabled", "true");
     },
 };
-exports.stopPropagation = {
+export const stopPropagation = {
     name: "stopPropagation",
     args: {
-        handleParentClick: (0, test_1.fn)(),
+        handleParentClick: fn(),
     },
     render: (args) => (
     // oxlint-disable-next-line jsx_a11y/click-events-have-key-events, jsx_a11y/no-static-element-interactions
     <div onClick={args.handleParentClick}>
-			<Actionable_1.default stopPropagation onClick={() => { }}>
+			<Actionable stopPropagation onClick={() => { }}>
 				Trigger
-			</Actionable_1.default>
+			</Actionable>
 		</div>),
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleParentClick).not.toHaveBeenCalled();
+        await userEvent.click(button);
+        expect(args.handleParentClick).not.toHaveBeenCalled();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Actionable_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<Actionable className="test-classname" attributes={{ id: "test-id" }}>
 				Trigger
-			</Actionable_1.default>
+			</Actionable>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

package/dist/components/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import * as T from "./Alert.types";
+import * as T from "./Alert.types.js";
 declare const Alert: React.FC<T.Props>;
 export default Alert;

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from "../../components/Icon";
-import Text from "../../components/Text";
-import View from "../../components/View";
+import Icon from "../../components/Icon/index.js";
+import Text from "../../components/Text/index.js";
+import View from "../../components/View/index.js";
 import s from "./Alert.module.css";
 const Alert = (props) => {
     const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { IconProps } from "../../components/Icon";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { IconProps } from "../../components/Icon/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** SVG component for the icon */
     icon?: IconProps["svg"];

package/dist/components/Alert/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Alert";
-export type { Props as AlertProps } from "./Alert.types";
+export { default } from "./Alert.js";
+export type { Props as AlertProps } from "./Alert.types.js";

package/dist/components/Alert/index.js

@@ -1 +1 @@
-export { default } from "./Alert";
+export { default } from "./Alert.js";

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Alert").AlertProps>;
+    component: import("react").FC<import("../../../components/Alert/index.js").AlertProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,84 +1,78 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.bleed = exports.inline = exports.color = void 0;
-const test_1 = require("storybook/test");
-const Alert_1 = __importDefault(require("../../../components/Alert"));
-const Link_1 = __importDefault(require("../../../components/Link"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect } from "storybook/test";
+import Alert from "../../../components/Alert/index.js";
+import Link from "../../../components/Link/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Alert",
-    component: Alert_1.default,
+    component: Alert,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/alert",
         },
     },
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			{["neutral", "primary", "critical", "positive", "warning"].map((color) => (<storybook_1.Example.Item title={`color: ${color}`} key={color}>
-					<Alert_1.default color={color} title="Alert title goes here" icon={Zap_1.default} actionsSlot={<>
-								<Link_1.default variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
+    render: () => (<Example>
+			{["neutral", "primary", "critical", "positive", "warning"].map((color) => (<Example.Item title={`color: ${color}`} key={color}>
+					<Alert color={color} title="Alert title goes here" icon={IconZap} actionsSlot={<>
+								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
 									View now
-								</Link_1.default>
-								<Link_1.default variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
+								</Link>
+								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
 									Dismiss
-								</Link_1.default>
+								</Link>
 							</>}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard
-					</Alert_1.default>
-				</storybook_1.Example.Item>))}
-		</storybook_1.Example>),
+					</Alert>
+				</Example.Item>))}
+		</Example>),
 };
-exports.inline = {
+export const inline = {
     name: "inline",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="inline: true">
-				<Alert_1.default inline title="Alert title goes here" icon={Zap_1.default} actionsSlot={<>
-							<Link_1.default variant="plain" onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="inline: true">
+				<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
+							<Link variant="plain" onClick={() => { }}>
 								View now
-							</Link_1.default>
-							<Link_1.default variant="plain" onClick={() => { }}>
+							</Link>
+							<Link variant="plain" onClick={() => { }}>
 								Dismiss
-							</Link_1.default>
+							</Link>
 						</>}>
 					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
 					been the industry's standard
-				</Alert_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Alert>
+			</Example.Item>
+		</Example>),
 };
-exports.bleed = {
+export const bleed = {
     name: "bleed",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="bleed: 4">
-				<Alert_1.default bleed={4} icon={Zap_1.default}>
+    render: () => (<Example>
+			<Example.Item title="bleed: 4">
+				<Alert bleed={4} icon={IconZap}>
 					Content
-				</Alert_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bleed: [s] 4, [m+] 0">
-				<Alert_1.default bleed={{ s: 4, m: 0 }} icon={Zap_1.default}>
+				</Alert>
+			</Example.Item>
+			<Example.Item title="bleed: [s] 4, [m+] 0">
+				<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
 					Content
-				</Alert_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Alert>
+			</Example.Item>
+		</Example>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Alert_1.default className="test-classname" attributes={{ id: "test-id" }}>
-				<storybook_1.Placeholder />
-			</Alert_1.default>
+			<Alert className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Alert>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import * as T from "./Autocomplete.types";
+import * as T from "./Autocomplete.types.js";
 declare const Autocomplete: React.FC<T.Props>;
 export declare const AutocompleteItem: React.FC<T.ItemProps>;
 export default Autocomplete;

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import DropdownMenu from "../../components/DropdownMenu";
-import TextField from "../../components/TextField";
-import useElementId from "../../hooks/useElementId";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useHotkeys from "../../hooks/useHotkeys";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import * as keys from "../../constants/keys";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
+import TextField from "../../components/TextField/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import * as keys from "../../constants/keys.js";
 import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
@@ -93,6 +93,7 @@ const Autocomplete = (props) => {
                 const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
                 const nextOption = options.at(highlightedIndex - 1) || options.at(-1);
                 setHighlightedId(nextOption.id);
+                nextOption.scrollIntoView({ block: "nearest" });
             }
         },
         [keys.DOWN]: () => {
@@ -102,6 +103,7 @@ const Autocomplete = (props) => {
                 const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
                 const nextOption = options.at(highlightedIndex + 1) || options.at(0);
                 setHighlightedId(nextOption.id);
+                nextOption.scrollIntoView({ block: "nearest" });
             }
         },
     }, [handleOpen, getOptionElements, highlightedId], { ref: inputRef, preventDefault: true });
@@ -128,7 +130,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, contentZIndex: contentZIndex, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, onAfterOpen: onAfterOpen, onAfterClose: onAfterClose, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, contentZIndex: contentZIndex, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             ref: ref,

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

@@ -1,7 +1,7 @@
-import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu";
-import type { MenuItemProps } from "../../components/MenuItem";
-import type { TextFieldProps } from "../../components/TextField";
-import type * as G from "../../types/global";
+import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu/index.js";
+import type { MenuItemProps } from "../../components/MenuItem/index.js";
+import type { TextFieldProps } from "../../components/TextField/index.js";
+import type * as G from "../../types/global.js";
 type SelectArgs = {
     /** Value that will be passed to the input on selection */
     value: string;
@@ -20,7 +20,7 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
     /** Slot for rendering the Autocomplete.Item components */
     children: React.ReactNode;
 };
-export type ItemProps = MenuItemProps & SelectArgs;
+export type ItemProps = Omit<MenuItemProps, "focusIndicator"> & SelectArgs;
 export type Context = {
     onItemClick: (args: SelectArgs) => void;
     highlightedId?: string;