@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

package/dist/components/Toast/index.js

@@ -1,9 +1,9 @@
 import { cn } from "../../utils/cn.js";
 import zIndices from "../../utils/zIndices.js";
 import { ZIndexProvider } from "../../utils/ZIndexContext.js";
-import { CheckIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { CheckIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { CopyIconButton } from "../CopyButton/CopyButton.js";
 import { ToastContext } from "./ToastContext.js";
 import React, { useCallback } from "react";
@@ -16,41 +16,41 @@ var DEFAULT_DURATION_MS = 5e3;
 var ERROR_DURATION_MS = Infinity;
 function ToastProvider({ children }) {
 	const [open, setOpen] = React.useState(false);
-	const [config, setConfig] = React.useState(null);
+	const [toast, setToast] = React.useState(null);
+	const config = toast?.config;
 	const createToast = useCallback((titleOrConfig) => {
 		const preConfig = typeof titleOrConfig === "string" ? { title: titleOrConfig } : titleOrConfig;
 		const config = {
 			duration: preConfig.error || preConfig.type === "error" ? ERROR_DURATION_MS : DEFAULT_DURATION_MS,
 			...preConfig
 		};
-		setConfig(config);
+		setToast((previous) => ({
+			id: (previous?.id ?? 0) + 1,
+			config
+		}));
 		setOpen(true);
 	}, []);
-	return /* @__PURE__ */ jsx(ToastContext.Provider, {
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
 		value: { createToast },
-		children: /* @__PURE__ */ jsxs(ToastLib.Provider, {
+		children: [children, /* @__PURE__ */ jsxs(ToastLib.Provider, {
 			swipeDirection: "right",
-			children: [
-				children,
-				/* @__PURE__ */ jsx(ZIndexProvider, {
-					value: zIndices.toast,
-					children: /* @__PURE__ */ jsx(Toast, {
-						title: config?.title,
-						description: config?.description,
-						open,
-						setOpen,
-						action: config?.action,
-						error: config?.error,
-						duration: config?.duration,
-						type: config?.type
-					})
-				}),
-				/* @__PURE__ */ jsx(ToastLib.Viewport, {
-					className: cn("fixed bottom-0 right-0 m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]", config?.viewPortClassName),
-					style: { zIndex: zIndices.toast }
+			children: [/* @__PURE__ */ jsx(ZIndexProvider, {
+				value: zIndices.toast,
+				children: /* @__PURE__ */ jsx(Toast, {
+					title: config?.title,
+					description: config?.description,
+					open,
+					setOpen,
+					action: config?.action,
+					error: config?.error,
+					duration: config?.duration,
+					type: config?.type
 				})
-			]
-		})
+			}), /* @__PURE__ */ jsx(ToastLib.Viewport, {
+				className: cn("fixed bottom-0 right-0 m-0 flex w-[390px] max-w-full list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]", config?.viewPortClassName),
+				style: { zIndex: zIndices.toast }
+			})]
+		}, toast?.id)]
 	});
 }
 var stopSwipeOnTextSelect = (e) => e.stopPropagation();
@@ -65,29 +65,34 @@ function renderToastIcon(isError, type) {
 	if (isError) return /* @__PURE__ */ jsx(Icon, {
 		icon: ExclamationMarkIcon,
 		weight: "regular",
+		size: "sm",
 		rounded: true,
 		color: "error"
 	});
 	if (type === "success") return /* @__PURE__ */ jsx(Icon, {
 		icon: CheckIcon,
+		size: "sm",
 		rounded: true,
 		color: "success"
 	});
 	if (type === "warning") return /* @__PURE__ */ jsx(Icon, {
 		icon: ExclamationMarkIcon,
 		weight: "regular",
+		size: "sm",
 		rounded: true,
 		color: "warning"
 	});
 	if (type === "info") return /* @__PURE__ */ jsx(Icon, {
 		icon: InfoIcon,
 		weight: "fill",
+		size: "sm",
 		rounded: true,
 		color: "info"
 	});
 	return /* @__PURE__ */ jsx(Icon, {
 		icon: InfoIcon,
 		weight: "fill",
+		size: "sm",
 		rounded: true,
 		color: "neutral"
 	});
@@ -128,14 +133,14 @@ function Toast({ title, open, setOpen, description, action, error, duration, typ
 		onOpenChange: setOpen,
 		duration,
 		children: hasTitle ? /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full flex-col gap-space-2 pb-space-1",
+			className: cn("flex w-full flex-col gap-space-1", Boolean(description) && "pb-space-1"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex w-full items-center",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex w-full items-center gap-space-2",
+						className: "flex w-full items-center gap-space-3",
 						children: [renderToastIcon(isError, type), /* @__PURE__ */ jsx(ToastLib.Title, {
-							className: "cursor-text select-text font-medium text-primary",
+							className: "cursor-text select-text text-sm font-medium text-primary",
 							onPointerDown: stopSwipeOnTextSelect,
 							children: title
 						})]

package/dist/components/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ExclamationMarkIcon } from '@phosphor-icons/react/dist/ssr/ExclamationMark';\nimport { InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';\nimport * as ToastLib from '@radix-ui/react-toast';\n\nimport { CheckIcon, XCloseIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { CopyIconButton } from '../CopyButton';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { ToastContext } from './ToastContext';\n\nconst DEFAULT_DURATION_MS = 5000;\n// Error toasts do not auto-dismiss; the user must click the close button.\nconst ERROR_DURATION_MS = Infinity;\n\n// Provider wraps whole application\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  // note this only supports one toast at a time currently\n  const [open, setOpen] = React.useState(false);\n  const [config, setConfig] = React.useState<ToastConfig | null>(null);\n\n  const createToast = useCallback((titleOrConfig: ToastConfig | string) => {\n    const preConfig =\n      typeof titleOrConfig === 'string'\n        ? { title: titleOrConfig }\n        : titleOrConfig;\n    const isError = preConfig.error || preConfig.type === 'error';\n    const config: ToastConfig = {\n      duration: isError ? ERROR_DURATION_MS : DEFAULT_DURATION_MS,\n      ...preConfig,\n    };\n\n    setConfig(config);\n    setOpen(true);\n  }, []);\n\n  return (\n    <ToastContext.Provider value={{ createToast }}>\n      <ToastLib.Provider swipeDirection=\"right\">\n        {children}\n        <ZIndexProvider value={zIndices.toast}>\n          <Toast\n            title={config?.title}\n            description={config?.description}\n            open={open}\n            setOpen={setOpen}\n            action={config?.action}\n            error={config?.error}\n            duration={config?.duration}\n            type={config?.type}\n          />\n        </ZIndexProvider>\n        <ToastLib.Viewport\n          className={cn(\n            'fixed bottom-0 right-0 m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]',\n            config?.viewPortClassName\n          )}\n          style={{ zIndex: zIndices.toast }}\n        />\n      </ToastLib.Provider>\n    </ToastContext.Provider>\n  );\n}\n\nexport type ToastConfig = {\n  title?: string | React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  duration?: number;\n  viewPortClassName?: string;\n  error?: boolean;\n  type?: 'error' | 'info' | 'warning' | 'success';\n};\n\nconst stopSwipeOnTextSelect = (e: React.PointerEvent) => e.stopPropagation();\n\nconst SURFACE_BY_TYPE = {\n  default: 'bg-surface-level-2 border-subtle',\n  error: 'bg-error border-error',\n  warning: 'bg-warning border-warning',\n  success: 'bg-success border-success',\n  info: 'bg-brand-subtle border-brand-75',\n} as const;\n\nfunction renderToastIcon(isError: boolean, type: ToastConfig['type']) {\n  if (isError)\n    return (\n      <Icon icon={ExclamationMarkIcon} weight=\"regular\" rounded color=\"error\" />\n    );\n  if (type === 'success')\n    return <Icon icon={CheckIcon} rounded color=\"success\" />;\n  if (type === 'warning')\n    return (\n      <Icon\n        icon={ExclamationMarkIcon}\n        weight=\"regular\"\n        rounded\n        color=\"warning\"\n      />\n    );\n  if (type === 'info')\n    return <Icon icon={InfoIcon} weight=\"fill\" rounded color=\"info\" />;\n  return <Icon icon={InfoIcon} weight=\"fill\" rounded color=\"neutral\" />;\n}\n\nfunction Toast({\n  title,\n  open,\n  setOpen,\n  description,\n  action,\n  error,\n  duration,\n  type,\n}: {\n  title?: string | React.ReactNode;\n  open: boolean;\n  setOpen?: (open: boolean) => void;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  error?: boolean;\n  duration?: number;\n  type?: 'error' | 'info' | 'warning' | 'success';\n}) {\n  const isError = error || type === 'error';\n  const surface = SURFACE_BY_TYPE[isError ? 'error' : (type ?? 'default')];\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const copyText =\n    isError && typeof title === 'string'\n      ? typeof description === 'string'\n        ? `${title}\\n${description}`\n        : title\n      : null;\n\n  const descriptionNode = description && (\n    <ToastLib.Description asChild>\n      <div\n        className={cn(\n          'max-h-32 cursor-text select-text overflow-y-auto whitespace-pre-wrap',\n          hasTitle\n            ? 'ml-space-6 text-xxs text-secondary'\n            : 'text-sm text-primary'\n        )}\n        onPointerDown={stopSwipeOnTextSelect}\n      >\n        {description}\n      </div>\n    </ToastLib.Description>\n  );\n\n  const trailingButtons = (\n    <div className=\"flex gap-space-2\">\n      {copyText && (\n        <CopyIconButton\n          size=\"xs\"\n          copy={copyText}\n          copyText=\"Copy error message\"\n        />\n      )}\n      <ToastLib.Close asChild>\n        <IconButton\n          icon={XCloseIcon}\n          label=\"Dismiss\"\n          size=\"xs\"\n          variant=\"plain\"\n          color=\"secondary\"\n        />\n      </ToastLib.Close>\n    </div>\n  );\n\n  return (\n    <ToastLib.Root\n      className={cn(\n        'flex items-start gap-space-2 rounded-md border p-space-3',\n        surface,\n        'shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]',\n        'data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-hide data-[state=open]:animate-slideIn data-[swipe=end]:animate-swipeOut data-[swipe=cancel]:transition-[transform_200ms_ease-out]'\n      )}\n      open={open}\n      onOpenChange={setOpen}\n      duration={duration}\n    >\n      {hasTitle ? (\n        <div className=\"flex w-full flex-col gap-space-2 pb-space-1\">\n          <div className=\"flex w-full items-center\">\n            <div className=\"flex w-full items-center gap-space-2\">\n              {renderToastIcon(isError, type)}\n              <ToastLib.Title\n                className=\"cursor-text select-text font-medium text-primary\"\n                onPointerDown={stopSwipeOnTextSelect}\n              >\n                {title}\n              </ToastLib.Title>\n            </div>\n            {trailingButtons}\n          </div>\n          {descriptionNode}\n          {action && <div className=\"ml-space-6\">{action}</div>}\n        </div>\n      ) : (\n        <div className=\"flex w-full items-start gap-space-2\">\n          {renderToastIcon(isError, type)}\n          <div className=\"flex flex-1 flex-col gap-space-2\">\n            {descriptionNode}\n            {action}\n          </div>\n          {trailingButtons}\n        </div>\n      )}\n    </ToastLib.Root>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ExclamationMarkIcon } from '@phosphor-icons/react/dist/ssr/ExclamationMark';\nimport { InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';\nimport * as ToastLib from '@radix-ui/react-toast';\n\nimport { CheckIcon, XCloseIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { CopyIconButton } from '../CopyButton';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { ToastContext } from './ToastContext';\n\nconst DEFAULT_DURATION_MS = 5000;\n// Error toasts do not auto-dismiss; the user must click the close button.\nconst ERROR_DURATION_MS = Infinity;\n\n// Provider wraps whole application\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  // note this only supports one toast at a time currently\n  const [open, setOpen] = React.useState(false);\n  const [toast, setToast] = React.useState<{\n    id: number;\n    config: ToastConfig;\n  } | null>(null);\n  const config = toast?.config;\n\n  const createToast = useCallback((titleOrConfig: ToastConfig | string) => {\n    const preConfig =\n      typeof titleOrConfig === 'string'\n        ? { title: titleOrConfig }\n        : titleOrConfig;\n    const isError = preConfig.error || preConfig.type === 'error';\n    const config: ToastConfig = {\n      duration: isError ? ERROR_DURATION_MS : DEFAULT_DURATION_MS,\n      ...preConfig,\n    };\n\n    setToast((previous) => ({ id: (previous?.id ?? 0) + 1, config }));\n    setOpen(true);\n  }, []);\n\n  return (\n    <ToastContext.Provider value={{ createToast }}>\n      {children}\n      {/* Reset Radix's paused state without remounting application children. */}\n      <ToastLib.Provider key={toast?.id} swipeDirection=\"right\">\n        <ZIndexProvider value={zIndices.toast}>\n          <Toast\n            title={config?.title}\n            description={config?.description}\n            open={open}\n            setOpen={setOpen}\n            action={config?.action}\n            error={config?.error}\n            duration={config?.duration}\n            type={config?.type}\n          />\n        </ZIndexProvider>\n        <ToastLib.Viewport\n          className={cn(\n            'fixed bottom-0 right-0 m-0 flex w-[390px] max-w-full list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]',\n            config?.viewPortClassName\n          )}\n          style={{ zIndex: zIndices.toast }}\n        />\n      </ToastLib.Provider>\n    </ToastContext.Provider>\n  );\n}\n\nexport type ToastConfig = {\n  title?: string | React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  duration?: number;\n  viewPortClassName?: string;\n  error?: boolean;\n  type?: 'error' | 'info' | 'warning' | 'success';\n};\n\nconst stopSwipeOnTextSelect = (e: React.PointerEvent) => e.stopPropagation();\n\nconst SURFACE_BY_TYPE = {\n  default: 'bg-surface-level-2 border-subtle',\n  error: 'bg-error border-error',\n  warning: 'bg-warning border-warning',\n  success: 'bg-success border-success',\n  info: 'bg-brand-subtle border-brand-75',\n} as const;\n\nfunction renderToastIcon(isError: boolean, type: ToastConfig['type']) {\n  if (isError)\n    return (\n      <Icon\n        icon={ExclamationMarkIcon}\n        weight=\"regular\"\n        size=\"sm\"\n        rounded\n        color=\"error\"\n      />\n    );\n  if (type === 'success')\n    return <Icon icon={CheckIcon} size=\"sm\" rounded color=\"success\" />;\n  if (type === 'warning')\n    return (\n      <Icon\n        icon={ExclamationMarkIcon}\n        weight=\"regular\"\n        size=\"sm\"\n        rounded\n        color=\"warning\"\n      />\n    );\n  if (type === 'info')\n    return (\n      <Icon icon={InfoIcon} weight=\"fill\" size=\"sm\" rounded color=\"info\" />\n    );\n  return (\n    <Icon icon={InfoIcon} weight=\"fill\" size=\"sm\" rounded color=\"neutral\" />\n  );\n}\n\nfunction Toast({\n  title,\n  open,\n  setOpen,\n  description,\n  action,\n  error,\n  duration,\n  type,\n}: {\n  title?: string | React.ReactNode;\n  open: boolean;\n  setOpen?: (open: boolean) => void;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  error?: boolean;\n  duration?: number;\n  type?: 'error' | 'info' | 'warning' | 'success';\n}) {\n  const isError = error || type === 'error';\n  const surface = SURFACE_BY_TYPE[isError ? 'error' : (type ?? 'default')];\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const copyText =\n    isError && typeof title === 'string'\n      ? typeof description === 'string'\n        ? `${title}\\n${description}`\n        : title\n      : null;\n\n  const descriptionNode = description && (\n    <ToastLib.Description asChild>\n      <div\n        className={cn(\n          'max-h-32 cursor-text select-text overflow-y-auto whitespace-pre-wrap',\n          hasTitle\n            ? 'ml-space-6 text-xxs text-secondary'\n            : 'text-sm text-primary'\n        )}\n        onPointerDown={stopSwipeOnTextSelect}\n      >\n        {description}\n      </div>\n    </ToastLib.Description>\n  );\n\n  const trailingButtons = (\n    <div className=\"flex gap-space-2\">\n      {copyText && (\n        <CopyIconButton\n          size=\"xs\"\n          copy={copyText}\n          copyText=\"Copy error message\"\n        />\n      )}\n      <ToastLib.Close asChild>\n        <IconButton\n          icon={XCloseIcon}\n          label=\"Dismiss\"\n          size=\"xs\"\n          variant=\"plain\"\n          color=\"secondary\"\n        />\n      </ToastLib.Close>\n    </div>\n  );\n\n  return (\n    <ToastLib.Root\n      className={cn(\n        'flex items-start gap-space-2 rounded-md border p-space-3',\n        surface,\n        'shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]',\n        'data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-hide data-[state=open]:animate-slideIn data-[swipe=end]:animate-swipeOut data-[swipe=cancel]:transition-[transform_200ms_ease-out]'\n      )}\n      open={open}\n      onOpenChange={setOpen}\n      duration={duration}\n    >\n      {hasTitle ? (\n        <div\n          className={cn(\n            'flex w-full flex-col gap-space-1',\n            Boolean(description) && 'pb-space-1'\n          )}\n        >\n          <div className=\"flex w-full items-center\">\n            <div className=\"flex w-full items-center gap-space-3\">\n              {renderToastIcon(isError, type)}\n              <ToastLib.Title\n                className=\"cursor-text select-text text-sm font-medium text-primary\"\n                onPointerDown={stopSwipeOnTextSelect}\n              >\n                {title}\n              </ToastLib.Title>\n            </div>\n            {trailingButtons}\n          </div>\n          {descriptionNode}\n          {action && <div className=\"ml-space-6\">{action}</div>}\n        </div>\n      ) : (\n        <div className=\"flex w-full items-start gap-space-2\">\n          {renderToastIcon(isError, type)}\n          <div className=\"flex flex-1 flex-col gap-space-2\">\n            {descriptionNode}\n            {action}\n          </div>\n          {trailingButtons}\n        </div>\n      )}\n    </ToastLib.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,10 +1,10 @@
 import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
 import zIndices from "../../utils/zIndices.js";
 import { useZIndex } from "../../utils/useZIndex.js";
 import { ZIndexProvider } from "../../utils/ZIndexContext.js";
-import { Text } from "../Text/Text.js";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 //#region packages/components/src/components/Tooltip/Tooltip.tsx
 function Tooltip({ title, description, children, tooltipClassName, side = "top", sideOffset = 10, align = "center", alignOffset = 0, invert = false, delayDuration = 300, disabled = false, blockTriggerEvents = false, open, onOpenChange, disableHoverableContent = true }) {
 	const zIndex = useZIndex(zIndices.tooltip);

package/dist/components/Typeahead/Typeahead.js

@@ -5,7 +5,7 @@ import { useTypeaheadUncontrolledInput } from "./useTypeaheadUncontrolledInput.j
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/components/src/components/Typeahead/Typeahead.tsx
-function TypeaheadInner({ options, value, onChange, placeholder = "Search...", leftDecorator, showPlaceholderWithValues = false, emptyText = "No results found.", size = "md", disabled = false, isError = false, freeSolo = false, multiple, disableClearable = false, disableCloseOnSelect = false, filterOptions, forcePopupIcon = true, clearOnBlur, clearValueOnInputClear = false, displaySelectedValueWhenInputEmpty = false, maxVisibleOptions, hideEmptyList = false, emptyState, listFooter, onCreateNew, createNewLabel, inputValue: controlledInputValue, onInputChange, getOptionLabel, getOptionValue, getOptionDisabled, renderOption, renderTags, className, inputId, autoFocus, autoComplete, onKeyDown, onBlur, "aria-label": ariaLabel, "data-testid": dataTestId, ...rest }, ref) {
+function TypeaheadInner({ options, value, onChange, placeholder = "Search...", leftDecorator, showPlaceholderWithValues = false, emptyText = "No results found.", size = "md", disabled = false, isError = false, freeSolo = false, multiple, disableClearable = false, disableCloseOnSelect = false, filterOptions, forcePopupIcon = true, clearOnBlur, clearValueOnInputClear = false, displaySelectedValueWhenInputEmpty = false, maxVisibleOptions, hideEmptyList = false, emptyState, listFooter, onCreateNew, createNewLabel, inputValue: controlledInputValue, onInputChange, onOpenChange, getOptionLabel, getOptionValue, getOptionDisabled, renderOption, renderTags, className, inputId, autoFocus, autoComplete, onKeyDown, onBlur, "aria-label": ariaLabel, "data-testid": dataTestId, ...rest }, ref) {
 	const generatedId = useId();
 	const resolvedInputId = inputId ?? generatedId;
 	const listId = `${resolvedInputId}-listbox`;
@@ -16,12 +16,22 @@ function TypeaheadInner({ options, value, onChange, placeholder = "Search...", l
 	const listRef = useRef(null);
 	const popoverContentRef = useRef(null);
 	const [open, setOpenState] = useState(false);
+	const openRef = useRef(false);
 	const [uncontrolledInputValue, setUncontrolledInputValue] = useState("");
 	const setOpen = useCallback((nextOpen) => {
-		if (!disabled || !nextOpen) setOpenState(nextOpen);
-	}, [disabled]);
+		if (disabled && nextOpen || openRef.current === nextOpen) return;
+		openRef.current = nextOpen;
+		setOpenState(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [disabled, onOpenChange]);
+	useEffect(() => {
+		if (disabled && open) setOpen(false);
+	}, [
+		disabled,
+		open,
+		setOpen
+	]);
 	useEffect(() => {
-		if (disabled) setOpenState(false);
 		if (autoFocus) requestAnimationFrame(() => internalInputRef.current?.focus());
 	}, [autoFocus, disabled]);
 	const inputValue = controlledInputValue ?? uncontrolledInputValue;
@@ -41,6 +51,7 @@ function TypeaheadInner({ options, value, onChange, placeholder = "Search...", l
 		controlledInputValue,
 		freeSolo,
 		getLabel,
+		getValue,
 		multiple,
 		open,
 		setUncontrolledInputValue,
@@ -210,14 +221,13 @@ function TypeaheadInner({ options, value, onChange, placeholder = "Search...", l
 		removeAtIndex,
 		selectedValues
 	]);
-	const hasValue = selectedValues.length > 0;
-	const showClearButton = !disabled && !disableClearable && (hasValue || !multiple && inputValue.length > 0);
+	const showClearButton = !disabled && !disableClearable && (selectedValues.length > 0 || !multiple && inputValue.length > 0);
 	const selectedSummary = getTypeaheadSelectedSummary(selectedValues, getLabel, multiple);
 	const displayInputValue = getTypeaheadDisplayInputValue(inputValue, selectedValues, getLabel, multiple, displaySelectedValueWhenInputEmpty);
 	const setInputNode = useCallback((node) => {
 		internalInputRef.current = node;
 	}, []);
-	useTypeaheadDomSync({
+	const setListNode = useTypeaheadDomSync({
 		autoComplete,
 		commandLabel,
 		inputAriaLabel,
@@ -279,7 +289,7 @@ function TypeaheadInner({ options, value, onChange, placeholder = "Search...", l
 			selectedSummary
 		},
 		list: {
-			ref: listRef,
+			ref: setListNode,
 			items: visibleItems,
 			emptyText,
 			emptyState,

package/dist/components/Typeahead/Typeahead.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.js","names":[],"sources":["../../../src/components/Typeahead/Typeahead.tsx"],"sourcesContent":["import type { FocusEvent, KeyboardEvent, ReactElement, Ref } from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport type {\n  TypeaheadMultipleValue,\n  TypeaheadProps,\n  TypeaheadSelectedValue,\n  TypeaheadSingleValue,\n  TypeaheadTagProps,\n} from './Typeahead.types';\nimport {\n  defaultOptionLabel,\n  defaultOptionValue,\n  getTypeaheadCreateState,\n  getTypeaheadDisplayInputValue,\n  getTypeaheadListItems,\n  getTypeaheadSelectedSummary,\n  isActiveOptionSelected,\n  isTypeaheadOption,\n} from './Typeahead.utils';\nimport { TypeaheadView } from './TypeaheadView';\nimport { useTypeaheadDomSync } from './useTypeaheadDomSync';\nimport { useTypeaheadUncontrolledInput } from './useTypeaheadUncontrolledInput';\n\nfunction TypeaheadInner<TOption = string>(\n  {\n    options,\n    value,\n    onChange,\n    placeholder = 'Search...',\n    leftDecorator,\n    showPlaceholderWithValues = false,\n    emptyText = 'No results found.',\n    size = 'md',\n    disabled = false,\n    isError = false,\n    freeSolo = false,\n    multiple,\n    disableClearable = false,\n    disableCloseOnSelect = false,\n    filterOptions,\n    forcePopupIcon = true,\n    clearOnBlur,\n    clearValueOnInputClear = false,\n    displaySelectedValueWhenInputEmpty = false,\n    maxVisibleOptions,\n    hideEmptyList = false,\n    emptyState,\n    listFooter,\n    onCreateNew,\n    createNewLabel,\n    inputValue: controlledInputValue,\n    onInputChange,\n    getOptionLabel,\n    getOptionValue,\n    getOptionDisabled,\n    renderOption,\n    renderTags,\n    className,\n    inputId,\n    autoFocus,\n    autoComplete,\n    onKeyDown,\n    onBlur,\n    'aria-label': ariaLabel,\n    'data-testid': dataTestId,\n    ...rest\n  }: TypeaheadProps<TOption>,\n  ref: Ref<HTMLDivElement>\n) {\n  const generatedId = useId();\n  const resolvedInputId = inputId ?? generatedId;\n  const listId = `${resolvedInputId}-listbox`;\n  const selectedSummaryId = `${resolvedInputId}-selected-summary`;\n  const commandLabel = ariaLabel ?? placeholder;\n  const inputAriaLabel = ariaLabel ?? (inputId ? undefined : placeholder);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const popoverContentRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpenState] = useState(false);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!disabled || !nextOpen) {\n        setOpenState(nextOpen);\n      }\n    },\n    [disabled]\n  );\n  useEffect(() => {\n    if (disabled) setOpenState(false);\n    if (autoFocus)\n      requestAnimationFrame(() => internalInputRef.current?.focus());\n  }, [autoFocus, disabled]);\n\n  const inputValue = controlledInputValue ?? uncontrolledInputValue;\n  const getLabel = useCallback(\n    (option: TypeaheadSelectedValue<TOption>) =>\n      getOptionLabel ? getOptionLabel(option) : defaultOptionLabel(option),\n    [getOptionLabel]\n  );\n  const getValue = useCallback(\n    (option: TypeaheadSelectedValue<TOption>) =>\n      getOptionValue ? getOptionValue(option) : defaultOptionValue(option),\n    [getOptionValue]\n  );\n\n  const selectedValues = useMemo<TypeaheadMultipleValue<TOption>>(() => {\n    if (multiple) {\n      return Array.isArray(value) ? value : [];\n    }\n    return value == null ? [] : [value];\n  }, [multiple, value]);\n\n  const selectedKeys = useMemo(\n    () => new Set(selectedValues.map((selected) => getValue(selected))),\n    [getValue, selectedValues]\n  );\n\n  const setInputValue = useCallback(\n    (nextValue: string) => {\n      if (controlledInputValue === undefined) {\n        setUncontrolledInputValue(nextValue);\n      }\n      onInputChange?.(nextValue);\n    },\n    [controlledInputValue, onInputChange]\n  );\n\n  useTypeaheadUncontrolledInput({\n    clearOnBlur,\n    controlledInputValue,\n    freeSolo,\n    getLabel,\n    multiple,\n    open,\n    setUncontrolledInputValue,\n    value,\n  });\n\n  const visibleItems = getTypeaheadListItems({\n    options,\n    selectedValues,\n    inputValue,\n    getLabel,\n    getValue,\n    filterOptions,\n    maxVisibleOptions,\n    includeSelectedValues: multiple,\n  });\n\n  const optionIsDisabled = useCallback(\n    (item: (typeof visibleItems)[number]) => {\n      if (item.source === 'selected') return false;\n      const option = item.option as TOption;\n      return (\n        getOptionDisabled?.(option) ??\n        (isTypeaheadOption(option) ? !!option.disabled : false)\n      );\n    },\n    [getOptionDisabled]\n  );\n\n  const {\n    customCreateInputValue,\n    showCreateOption,\n    showFreeSoloCreateOption,\n    trimmedInputValue,\n  } = getTypeaheadCreateState(\n    inputValue,\n    options,\n    selectedValues,\n    getLabel,\n    freeSolo,\n    !!onCreateNew\n  );\n  const hasPopupContent =\n    visibleItems.length > 0 ||\n    showCreateOption ||\n    emptyState != null ||\n    listFooter != null ||\n    !hideEmptyList;\n  const popupOpen = open && hasPopupContent;\n  const focusInput = useCallback(() => {\n    requestAnimationFrame(() => internalInputRef.current?.focus());\n  }, []);\n\n  // `onChange` can't be narrowed from the single/multiple props union after destructuring; callers below branch on `multiple` first, so funnel both shapes through one callback.\n  const emitChange = useCallback(\n    (next: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>) =>\n      (onChange as (value: typeof next) => void)(next),\n    [onChange]\n  );\n  const selectValue = useCallback(\n    (selected: TypeaheadSelectedValue<TOption>) => {\n      if (disabled) return;\n      if (multiple) {\n        const selectedKey = getValue(selected);\n        const nextValue = selectedKeys.has(selectedKey)\n          ? selectedValues.filter((item) => getValue(item) !== selectedKey)\n          : [...selectedValues, selected];\n\n        emitChange(nextValue);\n        setInputValue('');\n        if (disableCloseOnSelect) {\n          focusInput();\n        } else {\n          setOpen(false);\n        }\n        return;\n      }\n\n      emitChange(selected);\n      setInputValue(\n        displaySelectedValueWhenInputEmpty ? '' : getLabel(selected)\n      );\n      setOpen(false);\n    },\n    [\n      disableCloseOnSelect,\n      disabled,\n      emitChange,\n      focusInput,\n      getLabel,\n      getValue,\n      displaySelectedValueWhenInputEmpty,\n      multiple,\n      selectedKeys,\n      selectedValues,\n      setInputValue,\n      setOpen,\n    ]\n  );\n\n  const createFreeSoloValue = useCallback(() => {\n    if (!showFreeSoloCreateOption) return;\n    selectValue(trimmedInputValue);\n  }, [selectValue, showFreeSoloCreateOption, trimmedInputValue]);\n\n  const createCustomValue = useCallback(() => {\n    if (!onCreateNew) return;\n    onCreateNew(customCreateInputValue);\n    setOpen(false);\n  }, [customCreateInputValue, onCreateNew, setOpen]);\n\n  const removeAtIndex = useCallback(\n    (index: number) => {\n      if (!multiple || disabled || index < 0) return;\n      emitChange(selectedValues.filter((_, i) => i !== index));\n      focusInput();\n    },\n    [disabled, emitChange, focusInput, multiple, selectedValues]\n  );\n\n  const clearValue = useCallback(() => {\n    if (disabled || disableClearable) return;\n    if (multiple) {\n      emitChange([]);\n    } else {\n      emitChange(null);\n    }\n    setInputValue('');\n    setOpen(false);\n    focusInput();\n  }, [\n    disableClearable,\n    disabled,\n    emitChange,\n    focusInput,\n    multiple,\n    setInputValue,\n    setOpen,\n  ]);\n\n  const handleInputValueChange = useCallback(\n    (nextValue: string) => {\n      if (disabled) return;\n      if (\n        clearValueOnInputClear &&\n        !multiple &&\n        nextValue.length === 0 &&\n        selectedValues.length > 0\n      ) {\n        emitChange(null);\n      }\n      setInputValue(nextValue);\n      setOpen(true);\n    },\n    [\n      clearValueOnInputClear,\n      disabled,\n      emitChange,\n      multiple,\n      selectedValues.length,\n      setInputValue,\n      setOpen,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented || disabled) return;\n\n      if (event.key === 'Backspace' && multiple && inputValue.length === 0) {\n        removeAtIndex(selectedValues.length - 1);\n        return;\n      }\n\n      if (\n        event.key === 'Enter' &&\n        multiple &&\n        freeSolo &&\n        popupOpen &&\n        isActiveOptionSelected(listRef.current, selectedValues, getValue)\n      ) {\n        event.preventDefault();\n        if (showFreeSoloCreateOption) createFreeSoloValue();\n        else setInputValue('');\n        return;\n      }\n\n      // When open, cmdk owns Enter so active options and create rows win over free-solo.\n      if (event.key === 'ArrowDown' || event.key === 'Enter') {\n        if (!open && hasPopupContent) {\n          event.preventDefault();\n          setOpen(true);\n        }\n        return;\n      }\n\n      if (event.key === 'Escape' && open) {\n        if (popupOpen) {\n          event.preventDefault();\n        }\n        setOpen(false);\n      }\n    },\n    [\n      createFreeSoloValue,\n      disabled,\n      freeSolo,\n      getValue,\n      hasPopupContent,\n      inputValue.length,\n      multiple,\n      onKeyDown,\n      open,\n      popupOpen,\n      removeAtIndex,\n      selectedValues,\n      setInputValue,\n      setOpen,\n      showFreeSoloCreateOption,\n    ]\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      const nextTarget = event.relatedTarget as Node | null;\n      if (\n        !nextTarget ||\n        (!event.currentTarget.contains(nextTarget) &&\n          !popoverContentRef.current?.contains(nextTarget))\n      ) {\n        setOpen(false);\n      }\n    },\n    [onBlur, setOpen]\n  );\n\n  const getTagProps = useCallback(\n    ({ index }: { index: number }): TypeaheadTagProps => ({\n      key: `${getValue(selectedValues[index])}-${index}`,\n      tabIndex: -1,\n      'data-tag-index': index,\n      onDelete: () => removeAtIndex(index),\n    }),\n    [getValue, removeAtIndex, selectedValues]\n  );\n\n  const hasValue = selectedValues.length > 0;\n  const showClearButton =\n    !disabled &&\n    !disableClearable &&\n    (hasValue || (!multiple && inputValue.length > 0));\n  const selectedSummary = getTypeaheadSelectedSummary(\n    selectedValues,\n    getLabel,\n    multiple\n  );\n  const displayInputValue = getTypeaheadDisplayInputValue(\n    inputValue,\n    selectedValues,\n    getLabel,\n    multiple,\n    displaySelectedValueWhenInputEmpty\n  );\n\n  const setInputNode = useCallback((node: HTMLInputElement | null) => {\n    internalInputRef.current = node;\n  }, []);\n\n  useTypeaheadDomSync({\n    autoComplete,\n    commandLabel,\n    inputAriaLabel,\n    inputRef: internalInputRef,\n    inputValue,\n    isError,\n    listId,\n    listRef,\n    multiple,\n    open: popupOpen,\n    resolvedInputId,\n    selectedSummaryId,\n  });\n\n  return (\n    <TypeaheadView\n      root={{\n        ref,\n        props: rest,\n        handleBlur,\n        dataTestId,\n        className,\n      }}\n      state={{\n        size,\n        disabled,\n        isError,\n        multiple,\n        open: popupOpen,\n        setOpen,\n      }}\n      ids={{\n        commandLabel,\n        resolvedInputId,\n        listId,\n        selectedSummaryId,\n        inputAriaLabel,\n      }}\n      input={{\n        value: displayInputValue,\n        onValueChange: handleInputValueChange,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        leftDecorator,\n        showPlaceholderWithValues,\n        autoFocus,\n        autoComplete,\n        setNode: setInputNode,\n        focus: focusInput,\n      }}\n      selection={{\n        selectedValues,\n        selectedKeys,\n        getTagProps,\n        renderTags,\n        getLabel,\n        getValue,\n        showClearButton,\n        clearValue,\n        forcePopupIcon,\n        selectedSummary,\n      }}\n      list={{\n        ref: listRef,\n        items: visibleItems,\n        emptyText,\n        emptyState,\n        listFooter,\n        hideEmptyList,\n        optionIsDisabled,\n        selectValue,\n        renderOption,\n      }}\n      createOption={{\n        show: showCreateOption,\n        inputValue: onCreateNew ? customCreateInputValue : trimmedInputValue,\n        label: createNewLabel?.(customCreateInputValue),\n        onCreate: onCreateNew ? createCustomValue : createFreeSoloValue,\n      }}\n      popoverContentRef={popoverContentRef}\n    />\n  );\n}\n\nexport const Typeahead = forwardRef(TypeaheadInner) as <TOption = string>(\n  props: TypeaheadProps<TOption> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement<unknown>;\n"],"mappings":"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"}
+{"version":3,"file":"Typeahead.js","names":[],"sources":["../../../src/components/Typeahead/Typeahead.tsx"],"sourcesContent":["import type { FocusEvent, KeyboardEvent, ReactElement, Ref } from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport type {\n  TypeaheadMultipleValue,\n  TypeaheadProps,\n  TypeaheadSelectedValue,\n  TypeaheadSingleValue,\n  TypeaheadTagProps,\n} from './Typeahead.types';\nimport {\n  defaultOptionLabel,\n  defaultOptionValue,\n  getTypeaheadCreateState,\n  getTypeaheadDisplayInputValue,\n  getTypeaheadListItems,\n  getTypeaheadSelectedSummary,\n  isActiveOptionSelected,\n  isTypeaheadOption,\n} from './Typeahead.utils';\nimport { TypeaheadView } from './TypeaheadView';\nimport { useTypeaheadDomSync } from './useTypeaheadDomSync';\nimport { useTypeaheadUncontrolledInput } from './useTypeaheadUncontrolledInput';\n\nfunction TypeaheadInner<TOption = string>(\n  {\n    options,\n    value,\n    onChange,\n    placeholder = 'Search...',\n    leftDecorator,\n    showPlaceholderWithValues = false,\n    emptyText = 'No results found.',\n    size = 'md',\n    disabled = false,\n    isError = false,\n    freeSolo = false,\n    multiple,\n    disableClearable = false,\n    disableCloseOnSelect = false,\n    filterOptions,\n    forcePopupIcon = true,\n    clearOnBlur,\n    clearValueOnInputClear = false,\n    displaySelectedValueWhenInputEmpty = false,\n    maxVisibleOptions,\n    hideEmptyList = false,\n    emptyState,\n    listFooter,\n    onCreateNew,\n    createNewLabel,\n    inputValue: controlledInputValue,\n    onInputChange,\n    onOpenChange,\n    getOptionLabel,\n    getOptionValue,\n    getOptionDisabled,\n    renderOption,\n    renderTags,\n    className,\n    inputId,\n    autoFocus,\n    autoComplete,\n    onKeyDown,\n    onBlur,\n    'aria-label': ariaLabel,\n    'data-testid': dataTestId,\n    ...rest\n  }: TypeaheadProps<TOption>,\n  ref: Ref<HTMLDivElement>\n) {\n  const generatedId = useId();\n  const resolvedInputId = inputId ?? generatedId;\n  const listId = `${resolvedInputId}-listbox`;\n  const selectedSummaryId = `${resolvedInputId}-selected-summary`;\n  const commandLabel = ariaLabel ?? placeholder;\n  const inputAriaLabel = ariaLabel ?? (inputId ? undefined : placeholder);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const popoverContentRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpenState] = useState(false);\n  const openRef = useRef(false);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if ((disabled && nextOpen) || openRef.current === nextOpen) return;\n      // Track the change immediately so batched events cannot notify twice.\n      openRef.current = nextOpen;\n      setOpenState(nextOpen);\n      onOpenChange?.(nextOpen);\n    },\n    [disabled, onOpenChange]\n  );\n  useEffect(() => {\n    if (disabled && open) setOpen(false);\n  }, [disabled, open, setOpen]);\n  useEffect(() => {\n    if (autoFocus)\n      requestAnimationFrame(() => internalInputRef.current?.focus());\n  }, [autoFocus, disabled]);\n\n  const inputValue = controlledInputValue ?? uncontrolledInputValue;\n  const getLabel = useCallback(\n    (option: TypeaheadSelectedValue<TOption>) =>\n      getOptionLabel ? getOptionLabel(option) : defaultOptionLabel(option),\n    [getOptionLabel]\n  );\n  const getValue = useCallback(\n    (option: TypeaheadSelectedValue<TOption>) =>\n      getOptionValue ? getOptionValue(option) : defaultOptionValue(option),\n    [getOptionValue]\n  );\n\n  const selectedValues = useMemo<TypeaheadMultipleValue<TOption>>(() => {\n    if (multiple) {\n      return Array.isArray(value) ? value : [];\n    }\n    return value == null ? [] : [value];\n  }, [multiple, value]);\n\n  const selectedKeys = useMemo(\n    () => new Set(selectedValues.map((selected) => getValue(selected))),\n    [getValue, selectedValues]\n  );\n\n  const setInputValue = useCallback(\n    (nextValue: string) => {\n      if (controlledInputValue === undefined) {\n        setUncontrolledInputValue(nextValue);\n      }\n      onInputChange?.(nextValue);\n    },\n    [controlledInputValue, onInputChange]\n  );\n\n  useTypeaheadUncontrolledInput({\n    clearOnBlur,\n    controlledInputValue,\n    freeSolo,\n    getLabel,\n    getValue,\n    multiple,\n    open,\n    setUncontrolledInputValue,\n    value,\n  });\n\n  const visibleItems = getTypeaheadListItems({\n    options,\n    selectedValues,\n    inputValue,\n    getLabel,\n    getValue,\n    filterOptions,\n    maxVisibleOptions,\n    includeSelectedValues: multiple,\n  });\n\n  const optionIsDisabled = useCallback(\n    (item: (typeof visibleItems)[number]) => {\n      if (item.source === 'selected') return false;\n      const option = item.option as TOption;\n      return (\n        getOptionDisabled?.(option) ??\n        (isTypeaheadOption(option) ? !!option.disabled : false)\n      );\n    },\n    [getOptionDisabled]\n  );\n\n  const {\n    customCreateInputValue,\n    showCreateOption,\n    showFreeSoloCreateOption,\n    trimmedInputValue,\n  } = getTypeaheadCreateState(\n    inputValue,\n    options,\n    selectedValues,\n    getLabel,\n    freeSolo,\n    !!onCreateNew\n  );\n  const hasPopupContent =\n    visibleItems.length > 0 ||\n    showCreateOption ||\n    emptyState != null ||\n    listFooter != null ||\n    !hideEmptyList;\n  const popupOpen = open && hasPopupContent;\n  const focusInput = useCallback(() => {\n    requestAnimationFrame(() => internalInputRef.current?.focus());\n  }, []);\n\n  // `onChange` can't be narrowed from the single/multiple props union after destructuring; callers below branch on `multiple` first, so funnel both shapes through one callback.\n  const emitChange = useCallback(\n    (next: TypeaheadSingleValue<TOption> | TypeaheadMultipleValue<TOption>) =>\n      (onChange as (value: typeof next) => void)(next),\n    [onChange]\n  );\n  const selectValue = useCallback(\n    (selected: TypeaheadSelectedValue<TOption>) => {\n      if (disabled) return;\n      if (multiple) {\n        const selectedKey = getValue(selected);\n        const nextValue = selectedKeys.has(selectedKey)\n          ? selectedValues.filter((item) => getValue(item) !== selectedKey)\n          : [...selectedValues, selected];\n\n        emitChange(nextValue);\n        setInputValue('');\n        if (disableCloseOnSelect) {\n          focusInput();\n        } else {\n          setOpen(false);\n        }\n        return;\n      }\n\n      emitChange(selected);\n      setInputValue(\n        displaySelectedValueWhenInputEmpty ? '' : getLabel(selected)\n      );\n      setOpen(false);\n    },\n    [\n      disableCloseOnSelect,\n      disabled,\n      emitChange,\n      focusInput,\n      getLabel,\n      getValue,\n      displaySelectedValueWhenInputEmpty,\n      multiple,\n      selectedKeys,\n      selectedValues,\n      setInputValue,\n      setOpen,\n    ]\n  );\n\n  const createFreeSoloValue = useCallback(() => {\n    if (!showFreeSoloCreateOption) return;\n    selectValue(trimmedInputValue);\n  }, [selectValue, showFreeSoloCreateOption, trimmedInputValue]);\n\n  const createCustomValue = useCallback(() => {\n    if (!onCreateNew) return;\n    onCreateNew(customCreateInputValue);\n    setOpen(false);\n  }, [customCreateInputValue, onCreateNew, setOpen]);\n\n  const removeAtIndex = useCallback(\n    (index: number) => {\n      if (!multiple || disabled || index < 0) return;\n      emitChange(selectedValues.filter((_, i) => i !== index));\n      focusInput();\n    },\n    [disabled, emitChange, focusInput, multiple, selectedValues]\n  );\n\n  const clearValue = useCallback(() => {\n    if (disabled || disableClearable) return;\n    if (multiple) {\n      emitChange([]);\n    } else {\n      emitChange(null);\n    }\n    setInputValue('');\n    setOpen(false);\n    focusInput();\n  }, [\n    disableClearable,\n    disabled,\n    emitChange,\n    focusInput,\n    multiple,\n    setInputValue,\n    setOpen,\n  ]);\n\n  const handleInputValueChange = useCallback(\n    (nextValue: string) => {\n      if (disabled) return;\n      if (\n        clearValueOnInputClear &&\n        !multiple &&\n        nextValue.length === 0 &&\n        selectedValues.length > 0\n      ) {\n        emitChange(null);\n      }\n      setInputValue(nextValue);\n      setOpen(true);\n    },\n    [\n      clearValueOnInputClear,\n      disabled,\n      emitChange,\n      multiple,\n      selectedValues.length,\n      setInputValue,\n      setOpen,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented || disabled) return;\n\n      if (event.key === 'Backspace' && multiple && inputValue.length === 0) {\n        removeAtIndex(selectedValues.length - 1);\n        return;\n      }\n\n      if (\n        event.key === 'Enter' &&\n        multiple &&\n        freeSolo &&\n        popupOpen &&\n        isActiveOptionSelected(listRef.current, selectedValues, getValue)\n      ) {\n        event.preventDefault();\n        if (showFreeSoloCreateOption) createFreeSoloValue();\n        else setInputValue('');\n        return;\n      }\n\n      // When open, cmdk owns Enter so active options and create rows win over free-solo.\n      if (event.key === 'ArrowDown' || event.key === 'Enter') {\n        if (!open && hasPopupContent) {\n          event.preventDefault();\n          setOpen(true);\n        }\n        return;\n      }\n\n      if (event.key === 'Escape' && open) {\n        if (popupOpen) {\n          event.preventDefault();\n        }\n        setOpen(false);\n      }\n    },\n    [\n      createFreeSoloValue,\n      disabled,\n      freeSolo,\n      getValue,\n      hasPopupContent,\n      inputValue.length,\n      multiple,\n      onKeyDown,\n      open,\n      popupOpen,\n      removeAtIndex,\n      selectedValues,\n      setInputValue,\n      setOpen,\n      showFreeSoloCreateOption,\n    ]\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      const nextTarget = event.relatedTarget as Node | null;\n      if (\n        !nextTarget ||\n        (!event.currentTarget.contains(nextTarget) &&\n          !popoverContentRef.current?.contains(nextTarget))\n      ) {\n        setOpen(false);\n      }\n    },\n    [onBlur, setOpen]\n  );\n\n  const getTagProps = useCallback(\n    ({ index }: { index: number }): TypeaheadTagProps => ({\n      key: `${getValue(selectedValues[index])}-${index}`,\n      tabIndex: -1,\n      'data-tag-index': index,\n      onDelete: () => removeAtIndex(index),\n    }),\n    [getValue, removeAtIndex, selectedValues]\n  );\n\n  const showClearButton =\n    !disabled &&\n    !disableClearable &&\n    (selectedValues.length > 0 || (!multiple && inputValue.length > 0));\n  const selectedSummary = getTypeaheadSelectedSummary(\n    selectedValues,\n    getLabel,\n    multiple\n  );\n  const displayInputValue = getTypeaheadDisplayInputValue(\n    inputValue,\n    selectedValues,\n    getLabel,\n    multiple,\n    displaySelectedValueWhenInputEmpty\n  );\n\n  const setInputNode = useCallback((node: HTMLInputElement | null) => {\n    internalInputRef.current = node;\n  }, []);\n\n  const setListNode = useTypeaheadDomSync({\n    autoComplete,\n    commandLabel,\n    inputAriaLabel,\n    inputRef: internalInputRef,\n    inputValue,\n    isError,\n    listId,\n    listRef,\n    multiple,\n    open: popupOpen,\n    resolvedInputId,\n    selectedSummaryId,\n  });\n\n  return (\n    <TypeaheadView\n      root={{\n        ref,\n        props: rest,\n        handleBlur,\n        dataTestId,\n        className,\n      }}\n      state={{\n        size,\n        disabled,\n        isError,\n        multiple,\n        open: popupOpen,\n        setOpen,\n      }}\n      ids={{\n        commandLabel,\n        resolvedInputId,\n        listId,\n        selectedSummaryId,\n        inputAriaLabel,\n      }}\n      input={{\n        value: displayInputValue,\n        onValueChange: handleInputValueChange,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        leftDecorator,\n        showPlaceholderWithValues,\n        autoFocus,\n        autoComplete,\n        setNode: setInputNode,\n        focus: focusInput,\n      }}\n      selection={{\n        selectedValues,\n        selectedKeys,\n        getTagProps,\n        renderTags,\n        getLabel,\n        getValue,\n        showClearButton,\n        clearValue,\n        forcePopupIcon,\n        selectedSummary,\n      }}\n      list={{\n        ref: setListNode,\n        items: visibleItems,\n        emptyText,\n        emptyState,\n        listFooter,\n        hideEmptyList,\n        optionIsDisabled,\n        selectValue,\n        renderOption,\n      }}\n      createOption={{\n        show: showCreateOption,\n        inputValue: onCreateNew ? customCreateInputValue : trimmedInputValue,\n        label: createNewLabel?.(customCreateInputValue),\n        onCreate: onCreateNew ? createCustomValue : createFreeSoloValue,\n      }}\n      popoverContentRef={popoverContentRef}\n    />\n  );\n}\n\nexport const Typeahead = forwardRef(TypeaheadInner) as <TOption = string>(\n  props: TypeaheadProps<TOption> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement<unknown>;\n"],"mappings":"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"}

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

@@ -60,6 +60,8 @@ interface TypeaheadBaseProps<TOption> extends Omit<HTMLAttributes<HTMLDivElement
     onCreateNew?: (inputValue: string) => void;
     createNewLabel?: (inputValue: string) => ReactNode;
     inputValue?: string;
+    /** Called once when the options popup opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     onInputChange?: (value: string) => void;
     getOptionLabel?: (option: TypeaheadSelectedValue<TOption>) => string;
     getOptionValue?: (option: TypeaheadSelectedValue<TOption>) => string;

package/dist/components/Typeahead/TypeaheadParts.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { OptionRowSize } from '../../utils/componentSizes.js';
 import type { TypeaheadRenderOptionState, TypeaheadSelectedValue, TypeaheadSize } from './Typeahead.types.js';
 export declare function TypeaheadClearButton({ label, onClick, size, }: {
     label: string;
@@ -14,10 +15,11 @@ export declare function TypeaheadDefaultTag<TOption>({ selected, index, disabled
     getValue: (option: TypeaheadSelectedValue<TOption>) => string;
     onRemove: () => void;
 }): import("react").JSX.Element;
-export declare function TypeaheadDefaultOption<TOption>({ option, state, getLabel, }: {
+export declare function TypeaheadDefaultOption<TOption>({ option, state, getLabel, size, }: {
     option: TypeaheadSelectedValue<TOption>;
     state: TypeaheadRenderOptionState;
     getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    size: OptionRowSize;
 }): import("react").JSX.Element;
 export declare function TypeaheadCreateOption({ inputValue, label, }: {
     inputValue: string;

package/dist/components/Typeahead/TypeaheadParts.js

@@ -1,9 +1,9 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
 import { Badge } from "../Badge/Badge.js";
-import { CheckIcon, PlusIcon, XIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { CheckIcon, PlusIcon, XIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
 import { isTypeaheadOption } from "./Typeahead.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -52,7 +52,7 @@ function TypeaheadDefaultTag({ selected, index, disabled, size, getLabel, getVal
 		children: label
 	}, `${getValue(selected)}-${index}`);
 }
-function TypeaheadDefaultOption({ option, state, getLabel }) {
+function TypeaheadDefaultOption({ option, state, getLabel, size }) {
 	const label = getLabel(option);
 	const description = isTypeaheadOption(option) ? option.description : void 0;
 	const rightDecorator = isTypeaheadOption(option) ? option.rightDecorator : void 0;
@@ -65,7 +65,8 @@ function TypeaheadDefaultOption({ option, state, getLabel }) {
 		}),
 		/* @__PURE__ */ jsx(OptionText, {
 			label,
-			description
+			description,
+			size
 		}),
 		rightDecorator && /* @__PURE__ */ jsx("div", {
 			className: "ml-auto shrink-0",
@@ -73,13 +74,13 @@ function TypeaheadDefaultOption({ option, state, getLabel }) {
 		})
 	] });
 }
-function OptionText({ label, description }) {
+function OptionText({ label, description, size }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-1 flex-col",
 		children: [/* @__PURE__ */ jsx(Text, {
 			as: "span",
-			variant: "sm",
-			className: "truncate text-primary",
+			variant: size,
+			className: cn("truncate tracking-normal text-primary", size === "sm" ? "leading-4" : "leading-5"),
 			children: label
 		}), description && /* @__PURE__ */ jsx(Text, {
 			as: "span",

package/dist/components/Typeahead/TypeaheadParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadParts.js","names":[],"sources":["../../../src/components/Typeahead/TypeaheadParts.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { CheckIcon, PlusIcon, XIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Badge } from '../Badge';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\nimport type {\n  TypeaheadRenderOptionState,\n  TypeaheadSelectedValue,\n  TypeaheadSize,\n} from './Typeahead.types';\nimport { isTypeaheadOption } from './Typeahead.utils';\n\nexport function TypeaheadClearButton({\n  label,\n  onClick,\n  size,\n}: {\n  label: string;\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  size: TypeaheadSize;\n}) {\n  // Let the click target extend vertically without making tag rows taller.\n  return (\n    <IconButton\n      type=\"button\"\n      icon={XIcon}\n      iconWeight=\"regular\"\n      label={label}\n      variant=\"plain\"\n      color=\"secondary\"\n      size={CONTROL_ICON_SIZES[size].buttonSize}\n      tooltipProps={{ title: null }}\n      className=\"bg-transparent text-icon-tertiary shadow-none hover:bg-elevated-hover hover:text-icon-primary\"\n      style={{ marginBlock: CONTROL_ICON_SIZES[size].actionOffset }}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={onClick}\n    />\n  );\n}\n\nexport function TypeaheadDefaultTag<TOption>({\n  selected,\n  index,\n  disabled,\n  size,\n  getLabel,\n  getValue,\n  onRemove,\n}: {\n  selected: TypeaheadSelectedValue<TOption>;\n  index: number;\n  disabled: boolean;\n  size: TypeaheadSize;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  onRemove: () => void;\n}) {\n  const label = getLabel(selected);\n\n  return (\n    <Badge\n      key={`${getValue(selected)}-${index}`}\n      color=\"plain\"\n      rounded=\"xs\"\n      size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'}\n      textWeight=\"normal\"\n      rightDecorator={!disabled ? XIcon : undefined}\n      iconWeight=\"regular\"\n      aria-label={!disabled ? `Remove ${label}` : undefined}\n      role={!disabled ? 'button' : undefined}\n      tabIndex={!disabled ? 0 : undefined}\n      onMouseDown={(event) => event.preventDefault()}\n      onKeyDown={(event) => {\n        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          event.stopPropagation();\n          onRemove();\n        }\n      }}\n      onClick={\n        !disabled\n          ? (event) => {\n              event.stopPropagation();\n              onRemove();\n            }\n          : undefined\n      }\n      className={cn(\n        'min-w-0 max-w-full justify-start border-default bg-surface-level-2 px-space-1 text-primary [&>span]:min-w-0 [&>span]:truncate [&>span]:text-xxs',\n        size === 'xs' && 'border-0 py-0',\n        !disabled &&\n          'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]',\n        disabled && 'cursor-not-allowed'\n      )}\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function TypeaheadDefaultOption<TOption>({\n  option,\n  state,\n  getLabel,\n}: {\n  option: TypeaheadSelectedValue<TOption>;\n  state: TypeaheadRenderOptionState;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n}) {\n  const label = getLabel(option);\n  const description = isTypeaheadOption(option)\n    ? option.description\n    : undefined;\n  const rightDecorator = isTypeaheadOption(option)\n    ? option.rightDecorator\n    : undefined;\n\n  return (\n    <>\n      <Icon\n        aria-hidden=\"true\"\n        icon={CheckIcon}\n        size=\"md\"\n        className={cn(\n          'shrink-0 text-icon-primary',\n          state.selected ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n      <OptionText label={label} description={description} />\n      {rightDecorator && (\n        <div className=\"ml-auto shrink-0\">{rightDecorator}</div>\n      )}\n    </>\n  );\n}\n\nfunction OptionText({\n  label,\n  description,\n}: {\n  label: string;\n  description: ReactNode;\n}) {\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <Text as=\"span\" variant=\"sm\" className=\"truncate text-primary\">\n        {label}\n      </Text>\n      {description && (\n        <Text as=\"span\" variant=\"xs\" className=\"truncate text-tertiary\">\n          {description}\n        </Text>\n      )}\n    </div>\n  );\n}\n\nexport function TypeaheadCreateOption({\n  inputValue,\n  label,\n}: {\n  inputValue: string;\n  label?: ReactNode;\n}) {\n  if (label != null) {\n    return label;\n  }\n\n  return (\n    <>\n      <span\n        aria-hidden\n        className=\"inline-flex size-4 shrink-0 text-icon-secondary\"\n      >\n        <PlusIcon size=\"100%\" weight=\"regular\" />\n      </span>\n      <span className=\"min-w-0 truncate\">{inputValue || 'Add new'}</span>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,OACA,SACA,QAKC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM;EACN,YAAW;EACJ;EACP,SAAQ;EACR,OAAM;EACN,MAAM,mBAAmB,KAAK,CAAC;EAC/B,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAU;EACV,OAAO,EAAE,aAAa,mBAAmB,KAAK,CAAC,aAAa;EAC5D,cAAc,UAAU,MAAM,eAAe;EACpC;CACV,CAAA;AAEL;AAEA,SAAgB,oBAA6B,EAC3C,UACA,OACA,UACA,MACA,UACA,UACA,YASC;CACD,MAAM,QAAQ,SAAS,QAAQ;CAE/B,OACE,oBAAC,OAAD;EAEE,OAAM;EACN,SAAQ;EACR,MAAM,SAAS,QAAQ,SAAS,OAAO,OAAO;EAC9C,YAAW;EACX,gBAAgB,CAAC,WAAW,QAAQ,KAAA;EACpC,YAAW;EACX,cAAY,CAAC,WAAW,UAAU,UAAU,KAAA;EAC5C,MAAM,CAAC,WAAW,WAAW,KAAA;EAC7B,UAAU,CAAC,WAAW,IAAI,KAAA;EAC1B,cAAc,UAAU,MAAM,eAAe;EAC7C,YAAY,UAAU;GACpB,IAAI,CAAC,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB,SAAS;GACX;EACF;EACA,SACE,CAAC,YACI,UAAU;GACT,MAAM,gBAAgB;GACtB,SAAS;EACX,IACA,KAAA;EAEN,WAAW,GACT,mJACA,SAAS,QAAQ,iBACjB,CAAC,YACC,2IACF,YAAY,oBACd;EAEC,UAAA;CACI,GAnCA,GAAG,SAAS,QAAQ,EAAE,GAAG,OAmCzB;AAEX;AAEA,SAAgB,uBAAgC,EAC9C,QACA,OACA,YAKC;CACD,MAAM,QAAQ,SAAS,MAAM;CAC7B,MAAM,cAAc,kBAAkB,MAAM,IACxC,OAAO,cACP,KAAA;CACJ,MAAM,iBAAiB,kBAAkB,MAAM,IAC3C,OAAO,iBACP,KAAA;CAEJ,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,MAAD;GACE,eAAY;GACZ,MAAM;GACN,MAAK;GACL,WAAW,GACT,8BACA,MAAM,WAAW,gBAAgB,WACnC;EACD,CAAA;EACD,oBAAC,YAAD;GAAmB;GAAoB;EAAc,CAAA;EACpD,kBACC,oBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA;EAAoB,CAAA;CAEzD,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,eAIC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GAAK,WAAU;GACpC,UAAA;EACG,CAAA,GACL,eACC,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GAAK,WAAU;GACpC,UAAA;EACG,CAAA,CAEL;;AAET;AAEA,SAAgB,sBAAsB,EACpC,YACA,SAIC;CACD,IAAI,SAAS,MACX,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAU;EAEV,UAAA,oBAAC,UAAD;GAAU,MAAK;GAAO,QAAO;EAAW,CAAA;CACpC,CAAA,GACN,oBAAC,QAAD;EAAM,WAAU;EAAoB,UAAA,cAAc;CAAgB,CAAA,CAClE,EAAA,CAAA;AAEN"}
+{"version":3,"file":"TypeaheadParts.js","names":[],"sources":["../../../src/components/Typeahead/TypeaheadParts.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { CheckIcon, PlusIcon, XIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport type { OptionRowSize } from '../../utils/componentSizes';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Badge } from '../Badge';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\nimport type {\n  TypeaheadRenderOptionState,\n  TypeaheadSelectedValue,\n  TypeaheadSize,\n} from './Typeahead.types';\nimport { isTypeaheadOption } from './Typeahead.utils';\n\nexport function TypeaheadClearButton({\n  label,\n  onClick,\n  size,\n}: {\n  label: string;\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  size: TypeaheadSize;\n}) {\n  // Let the click target extend vertically without making tag rows taller.\n  return (\n    <IconButton\n      type=\"button\"\n      icon={XIcon}\n      iconWeight=\"regular\"\n      label={label}\n      variant=\"plain\"\n      color=\"secondary\"\n      size={CONTROL_ICON_SIZES[size].buttonSize}\n      tooltipProps={{ title: null }}\n      className=\"bg-transparent text-icon-tertiary shadow-none hover:bg-elevated-hover hover:text-icon-primary\"\n      style={{ marginBlock: CONTROL_ICON_SIZES[size].actionOffset }}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={onClick}\n    />\n  );\n}\n\nexport function TypeaheadDefaultTag<TOption>({\n  selected,\n  index,\n  disabled,\n  size,\n  getLabel,\n  getValue,\n  onRemove,\n}: {\n  selected: TypeaheadSelectedValue<TOption>;\n  index: number;\n  disabled: boolean;\n  size: TypeaheadSize;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  onRemove: () => void;\n}) {\n  const label = getLabel(selected);\n\n  return (\n    <Badge\n      key={`${getValue(selected)}-${index}`}\n      color=\"plain\"\n      rounded=\"xs\"\n      size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'}\n      textWeight=\"normal\"\n      rightDecorator={!disabled ? XIcon : undefined}\n      iconWeight=\"regular\"\n      aria-label={!disabled ? `Remove ${label}` : undefined}\n      role={!disabled ? 'button' : undefined}\n      tabIndex={!disabled ? 0 : undefined}\n      onMouseDown={(event) => event.preventDefault()}\n      onKeyDown={(event) => {\n        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          event.stopPropagation();\n          onRemove();\n        }\n      }}\n      onClick={\n        !disabled\n          ? (event) => {\n              event.stopPropagation();\n              onRemove();\n            }\n          : undefined\n      }\n      className={cn(\n        'min-w-0 max-w-full justify-start border-default bg-surface-level-2 px-space-1 text-primary [&>span]:min-w-0 [&>span]:truncate [&>span]:text-xxs',\n        size === 'xs' && 'border-0 py-0',\n        !disabled &&\n          'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]',\n        disabled && 'cursor-not-allowed'\n      )}\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function TypeaheadDefaultOption<TOption>({\n  option,\n  state,\n  getLabel,\n  size,\n}: {\n  option: TypeaheadSelectedValue<TOption>;\n  state: TypeaheadRenderOptionState;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  size: OptionRowSize;\n}) {\n  const label = getLabel(option);\n  const description = isTypeaheadOption(option)\n    ? option.description\n    : undefined;\n  const rightDecorator = isTypeaheadOption(option)\n    ? option.rightDecorator\n    : undefined;\n\n  return (\n    <>\n      <Icon\n        aria-hidden=\"true\"\n        icon={CheckIcon}\n        size=\"md\"\n        className={cn(\n          'shrink-0 text-icon-primary',\n          state.selected ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n      <OptionText label={label} description={description} size={size} />\n      {rightDecorator && (\n        <div className=\"ml-auto shrink-0\">{rightDecorator}</div>\n      )}\n    </>\n  );\n}\n\nfunction OptionText({\n  label,\n  description,\n  size,\n}: {\n  label: string;\n  description: ReactNode;\n  size: OptionRowSize;\n}) {\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <Text\n        as=\"span\"\n        variant={size}\n        className={cn(\n          'truncate tracking-normal text-primary',\n          size === 'sm' ? 'leading-4' : 'leading-5'\n        )}\n      >\n        {label}\n      </Text>\n      {description && (\n        <Text as=\"span\" variant=\"xs\" className=\"truncate text-tertiary\">\n          {description}\n        </Text>\n      )}\n    </div>\n  );\n}\n\nexport function TypeaheadCreateOption({\n  inputValue,\n  label,\n}: {\n  inputValue: string;\n  label?: ReactNode;\n}) {\n  if (label != null) {\n    return label;\n  }\n\n  return (\n    <>\n      <span\n        aria-hidden\n        className=\"inline-flex size-4 shrink-0 text-icon-secondary\"\n      >\n        <PlusIcon size=\"100%\" weight=\"regular\" />\n      </span>\n      <span className=\"min-w-0 truncate\">{inputValue || 'Add new'}</span>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,qBAAqB,EACnC,OACA,SACA,QAKC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM;EACN,YAAW;EACJ;EACP,SAAQ;EACR,OAAM;EACN,MAAM,mBAAmB,KAAK,CAAC;EAC/B,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAU;EACV,OAAO,EAAE,aAAa,mBAAmB,KAAK,CAAC,aAAa;EAC5D,cAAc,UAAU,MAAM,eAAe;EACpC;CACV,CAAA;AAEL;AAEA,SAAgB,oBAA6B,EAC3C,UACA,OACA,UACA,MACA,UACA,UACA,YASC;CACD,MAAM,QAAQ,SAAS,QAAQ;CAE/B,OACE,oBAAC,OAAD;EAEE,OAAM;EACN,SAAQ;EACR,MAAM,SAAS,QAAQ,SAAS,OAAO,OAAO;EAC9C,YAAW;EACX,gBAAgB,CAAC,WAAW,QAAQ,KAAA;EACpC,YAAW;EACX,cAAY,CAAC,WAAW,UAAU,UAAU,KAAA;EAC5C,MAAM,CAAC,WAAW,WAAW,KAAA;EAC7B,UAAU,CAAC,WAAW,IAAI,KAAA;EAC1B,cAAc,UAAU,MAAM,eAAe;EAC7C,YAAY,UAAU;GACpB,IAAI,CAAC,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB,SAAS;GACX;EACF;EACA,SACE,CAAC,YACI,UAAU;GACT,MAAM,gBAAgB;GACtB,SAAS;EACX,IACA,KAAA;EAEN,WAAW,GACT,mJACA,SAAS,QAAQ,iBACjB,CAAC,YACC,2IACF,YAAY,oBACd;EAEC,UAAA;CACI,GAnCA,GAAG,SAAS,QAAQ,EAAE,GAAG,OAmCzB;AAEX;AAEA,SAAgB,uBAAgC,EAC9C,QACA,OACA,UACA,QAMC;CACD,MAAM,QAAQ,SAAS,MAAM;CAC7B,MAAM,cAAc,kBAAkB,MAAM,IACxC,OAAO,cACP,KAAA;CACJ,MAAM,iBAAiB,kBAAkB,MAAM,IAC3C,OAAO,iBACP,KAAA;CAEJ,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,MAAD;GACE,eAAY;GACZ,MAAM;GACN,MAAK;GACL,WAAW,GACT,8BACA,MAAM,WAAW,gBAAgB,WACnC;EACD,CAAA;EACD,oBAAC,YAAD;GAAmB;GAAoB;GAAmB;EAAO,CAAA;EAChE,kBACC,oBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA;EAAoB,CAAA;CAEzD,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,aACA,QAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,MAAD;GACE,IAAG;GACH,SAAS;GACT,WAAW,GACT,yCACA,SAAS,OAAO,cAAc,WAChC;GAEC,UAAA;EACG,CAAA,GACL,eACC,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GAAK,WAAU;GACpC,UAAA;EACG,CAAA,CAEL;;AAET;AAEA,SAAgB,sBAAsB,EACpC,YACA,SAIC;CACD,IAAI,SAAS,MACX,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAU;EAEV,UAAA,oBAAC,UAAD;GAAU,MAAK;GAAO,QAAO;EAAW,CAAA;CACpC,CAAA,GACN,oBAAC,QAAD;EAAM,WAAU;EAAoB,UAAA,cAAc;CAAgB,CAAA,CAClE,EAAA,CAAA;AAEN"}

package/dist/components/Typeahead/TypeaheadView.js

@@ -1,11 +1,11 @@
 import { cn } from "../../utils/cn.js";
 import { CONTROL_SIZES } from "../../utils/componentSizes.js";
 import { Text } from "../Text/Text.js";
-import { CaretDownIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Icon } from "../Icon/Icon.js";
+import { CaretDownIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Popover, PopoverAnchor, PopoverContent } from "../Popover/Popover.js";
-import { Command as Command$1, CommandEmpty, CommandItem, CommandList } from "../Command/Command.js";
 import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { Command as Command$1, CommandEmpty, CommandItem, CommandList } from "../Command/Command.js";
 import { isTypeaheadOption } from "./Typeahead.utils.js";
 import { TypeaheadClearButton, TypeaheadCreateOption, TypeaheadDefaultOption, TypeaheadDefaultTag } from "./TypeaheadParts.js";
 import { useRef } from "react";
@@ -36,6 +36,11 @@ function TypeaheadView({ root, state, ids, input, selection, list, createOption,
 	const preventInputDismiss = (event) => {
 		if (open && event.target instanceof HTMLInputElement && event.target.getAttribute("role") === "combobox" && controlRef.current?.contains(event.target)) event.preventDefault();
 	};
+	const handleEscapeKeyDown = (event) => {
+		if (!open) return;
+		event.preventDefault();
+		setOpen(false);
+	};
 	const { ref: rootRef, handleBlur, dataTestId, className } = root;
 	const { size, disabled, isError, multiple, open, setOpen } = state;
 	const { commandLabel, resolvedInputId, listId, selectedSummaryId, inputAriaLabel } = ids;
@@ -43,11 +48,10 @@ function TypeaheadView({ root, state, ids, input, selection, list, createOption,
 	const { selectedValues, selectedKeys, getTagProps, renderTags, getLabel, getValue, showClearButton, clearValue, forcePopupIcon, selectedSummary } = selection;
 	const { ref: listRef, items, emptyText, emptyState, listFooter, hideEmptyList, optionIsDisabled, selectValue, renderOption } = list;
 	const hasValue = selectedValues.length > 0;
-	const visibleItems = open ? items : [];
-	const visibleShowCreateOption = open && createOption.show;
-	const showEmptyState = open && visibleItems.length === 0 && !visibleShowCreateOption && (emptyState != null || !hideEmptyList);
+	const showEmptyState = items.length === 0 && !createOption.show && (emptyState != null || !hideEmptyList);
 	const controlHeightClass = multiple ? CONTROL_SIZES[size].minHeightClassName : CONTROL_SIZES[size].heightClassName;
 	const controlPaddingClass = size === "xs" || size === "sm" ? "px-space-2" : "px-space-3";
+	const itemRowSize = size === "xs" || size === "sm" ? "sm" : "md";
 	const renderedTags = multiple && (renderTags ? renderTags(selectedValues, getTagProps) : selectedValues.map((selected, index) => {
 		const tagProps = getTagProps({ index });
 		return /* @__PURE__ */ jsx(TypeaheadDefaultTag, {
@@ -157,11 +161,10 @@ function TypeaheadView({ root, state, ids, input, selection, list, createOption,
 				}),
 				/* @__PURE__ */ jsx(PopoverContent, {
 					ref: popoverContentRef,
-					hidden: !open,
-					className: cn("w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary", !open && "hidden"),
+					className: "w-[var(--radix-popover-trigger-width)] min-w-48 max-w-[calc(100vw-1rem)] bg-elevated p-space-1 text-primary",
 					align: "start",
 					sideOffset: 4,
-					forceMount: true,
+					onEscapeKeyDown: handleEscapeKeyDown,
 					onOpenAutoFocus: (event) => event.preventDefault(),
 					onCloseAutoFocus: (event) => event.preventDefault(),
 					onFocusOutside: preventInputDismiss,
@@ -178,7 +181,7 @@ function TypeaheadView({ root, state, ids, input, selection, list, createOption,
 								color: "secondary",
 								children: emptyText
 							}) }),
-							visibleItems.map((item) => {
+							items.map((item) => {
 								const { option } = item;
 								const optionKey = getValue(option);
 								const optionLabel = getLabel(option);
@@ -195,20 +198,23 @@ function TypeaheadView({ root, state, ids, input, selection, list, createOption,
 									keywords: isTypeaheadOption(option) ? [optionLabel, ...option.keywords ?? []] : [optionLabel],
 									onSelect: () => selectValue(option),
 									"aria-checked": multiple ? selected : void 0,
-									className: cn("flex items-center gap-space-2 rounded-sm px-space-2 py-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2", optionDisabled && "text-disabled"),
+									size: itemRowSize,
+									className: cn("flex items-center gap-space-2 text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2", optionDisabled && "text-disabled"),
 									children: renderOption && item.source === "option" ? renderOption(option, optionState) : /* @__PURE__ */ jsx(TypeaheadDefaultOption, {
 										option,
 										state: optionState,
-										getLabel
+										getLabel,
+										size: itemRowSize
 									})
 								}, optionKey);
 							}),
-							visibleShowCreateOption && /* @__PURE__ */ jsx(CommandItem, {
+							createOption.show && /* @__PURE__ */ jsx(CommandItem, {
 								value: `__typeahead_create__${createOption.inputValue}`,
 								keywords: [createOption.inputValue],
 								onSelect: createOption.onCreate,
+								size: itemRowSize,
 								"aria-label": createOption.inputValue ? `Add ${createOption.inputValue}` : "Add new",
-								className: "flex items-center gap-space-2 rounded-sm p-space-2 text-sm text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2",
+								className: "flex items-center gap-space-2 text-primary hover:bg-surface-level-2 aria-selected:bg-surface-level-2",
 								children: /* @__PURE__ */ jsx(TypeaheadCreateOption, {
 									inputValue: createOption.inputValue,
 									label: createOption.label