@databricks/design-system 2.0.2 → 2.0.3

package/dist/patterns.js

@@ -1,11 +1,10 @@
-export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-DnwQIMN1.js';
+export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-DsAS2ZAT.js';
 import '@emotion/react/jsx-runtime';
 import 'lodash/isUndefined';
 import 'react';
 import '@emotion/react';
 import 'antd';
 import 'classnames';
-import '@ant-design/icons';
 import '@floating-ui/react';
 import 'lodash/uniqueId';
 import 'date-fns';
@@ -41,6 +40,8 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import '@radix-ui/react-accordion';
 import '@radix-ui/react-tooltip-patch';
+import 'lodash/kebabCase';
+import '@ant-design/icons';
 import 'lodash/random';
 import 'lodash/times';
 import '@radix-ui/react-context-menu';

package/dist/patterns.js.map

@@ -1 +1 @@
-{"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-types/design-system/ContextMenu/ContextMenu.d.ts

@@ -20,11 +20,11 @@ export interface ContextMenuContentProps extends RadixContextMenuContentProps {
 	minWidth?: number;
 	forceCloseOnEscape?: boolean;
 }
-export declare const Content: ({ children, minWidth, forceCloseOnEscape, onEscapeKeyDown, onKeyDown, ...childrenProps }: ContextMenuContentProps) => JSX.Element;
+export declare const Content: ({ children, minWidth, forceCloseOnEscape, onEscapeKeyDown, onKeyDown, className, style, ...childrenProps }: ContextMenuContentProps) => JSX.Element;
 export interface ContextMenuSubContentProps extends RadixContextMenuSubContentProps {
 	minWidth?: number;
 }
-export declare const SubContent: ({ children, minWidth, ...childrenProps }: ContextMenuSubContentProps) => JSX.Element;
+export declare const SubContent: ({ children, minWidth, className, style, ...childrenProps }: ContextMenuSubContentProps) => JSX.Element;
 export interface ContextMenuItemProps extends RadixContextMenuItemProps, AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
 	disabledReason?: React.ReactNode;
 }

package/dist-types/design-system/DesignSystemProvider/DesignSystemProvider.d.ts

@@ -6,9 +6,21 @@ import React from "react";
 import type { DesignSystemFlags } from "../../flags";
 import type { Theme } from "../../theme";
 import type { ValidSemanticColors } from "../../theme/_generated/ValidSemanticColors";
+/**
+* Raw design-token overrides keyed by their `--db-*` custom-property name, e.g.
+* `{ '--db-radius-md': '10px', '--db-space-lg': '20px' }`. Applied on top of `semanticColors`
+* (which covers the `--db-color-*` family) and inherits down the DOM the same way, so a consumer
+* can retheme non-color tokens (radius, spacing, …) for the whole subtree — including portaled
+* surfaces, which re-apply this on their own outermost portal element.
+*
+* Keys are the full custom-property names because the family prefixes are not derivable from a
+* single rule (unlike `semanticColors`, whose camelCase keys map cleanly to `--db-color-<kebab>`).
+*/
+export type DesignTokenOverrides = Partial<Record<`--db-${string}`, string>>;
 export interface DesignSystemThemeProviderProps {
 	isDarkMode?: boolean;
 	semanticColors?: Record<ValidSemanticColors, string>;
+	designTokenOverrides?: DesignTokenOverrides;
 }
 export interface DesignSystemProviderProps {
 	/**
@@ -39,10 +51,20 @@ export interface DesignSystemProviderProps {
 		typography?: Partial<Theme["typography"]>;
 		spacing?: Partial<Theme["spacing"]>;
 	};
+	/**
+	* Internal. When true, suppresses the `display: contents` token-scope wrapper this provider
+	* otherwise renders around its children. Set by `ApplyDesignSystemContextOverrides`: it only
+	* overrides context props and cannot change the token scope (no `isDarkMode`/`semanticColors`),
+	* so the scope is already established by an ancestor provider (in-tree) or re-applied on the
+	* portal root (Modal/Drawer/DropdownMenu each carry the scope class themselves). A second wrapper
+	* there would only add a redundant DOM node that breaks consumers' direct-child selectors.
+	*/
+	disableTokenScopeWrapper?: boolean;
 }
 export interface DuboisThemeContextType {
 	isDarkMode: boolean;
 	semanticColors?: Record<ValidSemanticColors, string>;
+	designTokenOverrides?: DesignTokenOverrides;
 }
 export interface DuboisContextType {
 	enableAnimation: boolean;
@@ -53,10 +75,32 @@ export interface DuboisContextType {
 export declare const DesignSystemThemeContext: Context<DuboisThemeContextType>;
 export declare const DesignSystemContext: Context<DuboisContextType>;
 export declare const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = "du-bois-enable-animation";
+/**
+* `data-testid` on the `display: contents` scope wrapper `DesignSystemProvider` renders around its
+* children. The wrapper carries the theme-scope class / consumer token overrides but no visual box,
+* so tests treat it as transparent: the shared `@databricks/testing-library` `render` returns
+* `container` pointing inside this wrapper, so `container.firstChild` / emptiness assertions see the
+* component's own output.
+*/
+export declare const DS_OVERRIDE_TOKENS_WRAPPER_TESTID = "ds-override-tokens-wrapper";
 export declare const getAnimationCss: ((enableAnimation: boolean) => CSSObject) & MemoizedFunction;
 type AntDConfigProviderPropsProps = Pick<AntDConfigProviderProps, "prefixCls" | "getPopupContainer" | "virtual">;
 /** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
 export declare const DesignSystemThemeProvider: React.FC<React.PropsWithChildren<DesignSystemThemeProviderProps>>;
+/**
+* Returns the inline style that re-declares the consumer's design-token overrides as `--db-*` custom
+* properties, or `undefined` when none are set. It merges the `semanticColors` override (emitted as
+* `--db-color-<name>`) with any raw `designTokenOverrides` (already keyed by `--db-*` name) layered
+* on top. The values inherit down the DOM, so setting this on a theme-scope element re-themes every
+* native (plain-CSS) component below it.
+*
+* `DesignSystemProvider` applies this to the scope wrapper it renders around its children, which
+* covers the whole in-tree subtree by inheritance. Portaled surfaces (Modal, Drawer, Popover,
+* DropdownMenu, Notification, …) render outside that wrapper in the DOM, so each merges this style
+* (plus `useDuboisThemeClass`) onto its own outermost portal element — context crosses React portals
+* while DOM inheritance does not.
+*/
+export declare function useDesignTokenOverrideStyles(): React.CSSProperties | undefined;
 export declare const DesignSystemProvider: React.FC<React.PropsWithChildren<DesignSystemProviderProps>>;
 export declare const ApplyDesignSystemContextOverrides: React.FC<React.PropsWithChildren<DesignSystemProviderProps>>;
 export declare const ApplyDesignSystemFlags: React.FC<React.PropsWithChildren<{

package/dist-types/design-system/Grid/Col.d.ts

@@ -1,4 +1,2 @@
-import type { ColProps as AntDColProps } from "antd";
-import type { HTMLDataAttributes } from "../types";
-export interface ColProps extends AntDColProps, HTMLDataAttributes {}
+import type { ColProps } from "./types";
 export declare const Col: React.FC<React.PropsWithChildren<ColProps>>;

package/dist-types/design-system/Grid/NativeCol.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { ColProps } from "./types";
+/**
+* Native flexbox implementation of the DuBois `Col` for the
+* `databricks.fe.designsystem.useNativeGrid` migration. Reproduces antd's box model exactly — inline
+* `%` flex-basis, `parseFlex`, and gutter padding taken from the enclosing `Row` via
+* {@link NativeGridContext} — so consumer `padding`/`flex`/`margin` overrides compose
+* identically to the antd variant on an identical single-`<div>` DOM.
+*/
+export declare const NativeCol: ForwardRefExoticComponent<PropsWithoutRef<ColProps> & RefAttributes<HTMLDivElement>>;

package/dist-types/design-system/Grid/NativeGridContext.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "react";
+/**
+* Resolved horizontal/vertical gutter (in px) shared from a native `Row` to its
+* native `Col` children — the same channel AntD's grid uses (`antd/es/grid/RowContext`).
+* The `Row` applies negative margins from these values and each `Col` applies the
+* matching padding, so the two stay in lockstep. `[0, 0]` means "no gutter".
+*/
+export interface NativeGridGutter {
+	gutter: [number, number];
+}
+export declare const NativeGridContext: Context<NativeGridGutter>;

package/dist-types/design-system/Grid/NativeRow.d.ts

@@ -0,0 +1,13 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { RowProps } from "./types";
+/**
+* Native flexbox implementation of the DuBois `Row` for the
+* `databricks.fe.designsystem.useNativeGrid` migration. Reproduces antd's box model exactly — a flex
+* container whose horizontal gutter is a negative Row margin with matching padding on each child
+* `Col` (via {@link NativeGridContext}), and whose vertical gutter is a flex `row-gap` on the Row.
+* Preserves the DuBois
+* `gutter` default of {@link ROW_GUTTER_SIZE} (8) — antd's own default is 0, but 75% of `<Row>`
+* usages rely on the DuBois 8 default, so it must be applied here (the flag-gated `Row` no longer
+* injects it as a prop default).
+*/
+export declare const NativeRow: ForwardRefExoticComponent<PropsWithoutRef<RowProps> & RefAttributes<HTMLDivElement>>;

package/dist-types/design-system/Grid/Row.d.ts

@@ -1,5 +1,4 @@
-import type { RowProps as AntDRowProps } from "antd";
-import type { HTMLDataAttributes } from "../types";
-export interface RowProps extends AntDRowProps, HTMLDataAttributes {}
-export declare const ROW_GUTTER_SIZE = 8;
+import { ROW_GUTTER_SIZE } from "./rowConstants";
+import type { RowProps } from "./types";
+export { ROW_GUTTER_SIZE };
 export declare const Row: React.FC<React.PropsWithChildren<RowProps>>;

package/dist-types/design-system/Grid/grid-styling.d.ts

@@ -0,0 +1,22 @@
+import type { CSSObject } from "@emotion/react";
+import type { ColSize, ColSpanType, FlexType } from "./types";
+/**
+* Mirrors antd/es/grid/col.js `parseFlex`: a bare number becomes a grow/shrink/auto triple, a bare
+* length becomes a fixed basis, anything else is passed through unchanged. Note the length regex
+* requires a unit, so a unitless `0` (like `auto`/`none`) intentionally falls through as-is — kept
+* deliberately to stay 1:1 with antd for backwards compatibility.
+*/
+export declare function parseFlex(flex: FlexType): string;
+/**
+* Coerces an antd span/offset/order/push/pull value to a finite number, or `undefined`. antd types
+* these as `number | string`; in practice they are the integers 0–24. Non-numeric values are
+* dropped (antd would route those through its class-name path, which the compat classes still cover).
+*/
+export declare function toNum(value: ColSpanType | undefined): number | undefined;
+/**
+* Converts a 24-column grid span into flexbox properties, mirroring antd's grid box model.
+* @param span - number of columns to span (0–24); `0` hides the column (`display: none`).
+*/
+export declare function spanToBasis(span: number): CSSObject;
+export declare function normalizeSize(value: ColSpanType | ColSize | undefined): ColSize | undefined;
+export declare function sizeStyles(size: ColSize): CSSObject;

package/dist-types/design-system/Grid/gridConstants.d.ts

@@ -0,0 +1,2 @@
+export declare const RESPONSIVE_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+export type ResponsiveSize = (typeof RESPONSIVE_SIZES)[number];

package/dist-types/design-system/Grid/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Col";
 export * from "./Row";
+export * from "./types";

package/dist-types/design-system/Grid/rowConstants.d.ts

@@ -0,0 +1,7 @@
+/**
+* Default horizontal gutter (px) for `Row`. NOTE this diverges from AntD's own default of `0`:
+* DuBois has always defaulted `Row` to `8`, and ~75% of `<Row>` usages rely on it, so both the
+* AntD-backed `Row` and the native `NativeRow` must apply it. Kept in its own module so both
+* variants (and the flag-gated `Row`) share one source without an import cycle.
+*/
+export declare const ROW_GUTTER_SIZE = 8;

package/dist-types/design-system/Grid/types.d.ts

@@ -0,0 +1,49 @@
+import type { ResponsiveSize } from "./gridConstants";
+import type { HTMLDataAttributes } from "../types";
+export type ColSpanType = number | string;
+export type FlexType = number | "none" | "auto" | string;
+/** Per-breakpoint responsive value for a `Col` (`{ flex, span, order, offset, push, pull }`). */
+export interface ColSize {
+	flex?: FlexType;
+	span?: ColSpanType;
+	order?: ColSpanType;
+	offset?: ColSpanType;
+	push?: ColSpanType;
+	pull?: ColSpanType;
+}
+/**
+* DuBois `Col` props. Owns antd's 24-column `ColProps` surface rather than extending it, so the
+* native-flexbox grid migration (`databricks.fe.designsystem.useNativeGrid`) isn't coupled to antd's
+* types. The shape is kept identical to antd's `ColProps` so consumers and the AntD-backed `Col`
+* wrapper are unaffected.
+*/
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement>, HTMLDataAttributes {
+	span?: ColSpanType;
+	order?: ColSpanType;
+	offset?: ColSpanType;
+	push?: ColSpanType;
+	pull?: ColSpanType;
+	xs?: ColSpanType | ColSize;
+	sm?: ColSpanType | ColSize;
+	md?: ColSpanType | ColSize;
+	lg?: ColSpanType | ColSize;
+	xl?: ColSpanType | ColSize;
+	xxl?: ColSpanType | ColSize;
+	prefixCls?: string;
+	flex?: FlexType;
+}
+/** One gutter axis: a px number, or a per-breakpoint map (antd's `Gutter`). */
+export type Gutter = number | Partial<Record<ResponsiveSize, number>>;
+/**
+* DuBois `Row` props. Owns antd's `RowProps` surface rather than extending it, so the native-flexbox
+* grid migration (`databricks.fe.designsystem.useNativeGrid`) isn't coupled to antd's types. The
+* shape is kept identical to antd's `RowProps` so consumers and the AntD-backed `Row` wrapper are
+* unaffected.
+*/
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement>, HTMLDataAttributes {
+	gutter?: Gutter | [Gutter, Gutter];
+	align?: "top" | "middle" | "bottom" | "stretch";
+	justify?: "start" | "end" | "center" | "space-around" | "space-between";
+	prefixCls?: string;
+	wrap?: boolean;
+}

package/dist-types/design-system/Hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useDesignSystemTheme, WithDesignSystemThemeHoc } from "./useDesignSystemTheme";
+export { useDesignSystemTheme, useDuboisThemeClass, WithDesignSystemThemeHoc } from "./useDesignSystemTheme";
 export { useDesignSystemFlags } from "./useDesignSystemFlags";
 export { useThemedStyles } from "./useThemedStyles";
 export type { DesignSystemHocProps, DesignSystemThemeInterface } from "./useDesignSystemTheme";

package/dist-types/design-system/Hooks/useDesignSystemTheme.d.ts

@@ -14,14 +14,14 @@ export declare function getClassNamePrefix(theme: Theme): string;
 export declare function getPrefixedClassNameFromTheme(theme: Theme, className: string | null | undefined): string;
 /**
 * Returns the theme-scope class for the current context: `du-bois-dark` in dark
-* mode, `du-bois-light` otherwise.
+* mode, `du-bois-light` otherwise. The `.du-bois-*` rule declares the `--db-color-*`
+* tokens, so any element carrying this class becomes a resolution scope for the
+* native (plain-CSS, token-driven) components below it.
 *
-* Native (plain-CSS, token-driven) components put this on their OWN root element
-* so the CSS custom-property cascade has a `:where(.du-bois-*)` ancestor to
-* resolve dark/light values against. Self-scoping (rather than relying on a
-* provider-emitted wrapper) means no extra DOM node is inserted into consumer
-* trees, and forced-theme subtrees / portaled content resolve correctly because
-* the class rides React context, not DOM ancestry. See DUBOIS-448.
+* `DesignSystemProvider` puts this on the scope wrapper it renders around its
+* children, so in-tree native components inherit the tokens without self-scoping.
+* Use it to re-establish that scope on content that renders OUTSIDE that wrapper —
+* i.e. portaled surfaces (context crosses React portals, DOM inheritance does not).
 */
 export declare function useDuboisThemeClass(): string;
 export declare function useDesignSystemTheme(): DesignSystemThemeInterface;

package/dist-types/design-system/Icon/LegacyAntDIcon.d.ts

@@ -0,0 +1,21 @@
+import { EllipsisOutlined as AntEllipsisOutlined } from "@ant-design/icons";
+import type { ComponentType } from "react";
+/** Props type for all the antd built-in icons are the same, so pick any one */
+type AntdIconProps = React.ComponentProps<typeof AntEllipsisOutlined>;
+/**
+* The icon components' props are picked from React's HTMLProps, which, in React 17, include
+* `onPointerEnterCapture` and `onPointerLeaveCapture`, but in React 18 do not. Hence, instead of
+* these props being optional, they are now `unknown` and thus must be declared on a component
+* instance, unless we specifically remove them from the props interface.
+*/
+type IconPropsWithoutPointerEvents = Omit<AntdIconProps, "onPointerEnterCapture" | "onPointerLeaveCapture">;
+/**
+* Antd built-in icons used by the design system's own legacy components, with an interface that has
+* been made compatible with the React 18 types by removing the props that are no longer present on
+* the React DOM types.
+*
+* These are deliberately NOT reëxported from the design system's public API: product code should
+* use Du Bois icons from `__generated/icons`.
+*/
+export declare const LegacyEllipsisOutlined: ComponentType<IconPropsWithoutPointerEvents>;
+export {};

package/dist-types/design-system/Icon/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./AntdIcon";
 export { Icon } from "./Icon";
 export type { IconProps } from "./Icon";
 export * from "./__generated/icons";

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxAddButton.d.ts

@@ -1,3 +1,7 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { ButtonProps } from "../Button";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxAddButton: ForwardRefExoticComponent<PropsWithoutRef<ButtonProps> & RefAttributes<HTMLButtonElement>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxCheckboxItem.d.ts

@@ -1,11 +1,19 @@
 import type { UseComboboxReturnValue } from "downshift";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import { type TypeaheadComboboxMenuItemProps } from "./TypeaheadComboboxMenuItem";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxCheckboxItemProps<T> extends TypeaheadComboboxMenuItemProps<T> {
 	comboboxState: UseComboboxReturnValue<T>;
 	selectedItems: T[];
 	selectedMatcher?: (a: T, b: T) => boolean;
 	_type?: string;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxCheckboxItem: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxCheckboxItemProps<any>> & RefAttributes<HTMLLIElement>>;
 export default TypeaheadComboboxCheckboxItem;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxFooter.d.ts

@@ -1,9 +1,21 @@
 import type { FunctionComponent } from "react";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	* DO NOT USE, INTERNAL USE ONLY
 	*/
 	_type?: string;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const DuboisTypeaheadComboboxFooter: FunctionComponent<TypeaheadComboboxFooterProps>;
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxFooter: FunctionComponent<TypeaheadComboboxFooterProps>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxInput.d.ts

@@ -1,6 +1,10 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { ComboboxStateAnalyticsReturnValue } from "./hooks";
 import type { InputProps } from "../Input";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxInputProps<T> extends Omit<InputProps, "componentId" | "analyticsEvents"> {
 	comboboxState: ComboboxStateAnalyticsReturnValue<T>;
 	allowClear?: boolean;
@@ -10,4 +14,8 @@ export interface TypeaheadComboboxInputProps<T> extends Omit<InputProps, "compon
 	/** When true, replaces the dropdown toggle button with a spinner to indicate async loading. */
 	loading?: boolean;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxInput: ForwardRefExoticComponent<PropsWithoutRef<Omit<TypeaheadComboboxInputProps<any>, "componentId" | "analyticsEvents">> & RefAttributes<HTMLDivElement | null>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMenu.d.ts

@@ -1,6 +1,10 @@
 import type { UseComboboxReturnValue } from "downshift";
 import type { ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactNode, RefAttributes } from "react";
 import React from "react";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxMenuProps<T> extends HTMLAttributes<HTMLUListElement> {
 	comboboxState: UseComboboxReturnValue<T>;
 	loading?: boolean;
@@ -15,4 +19,8 @@ export interface TypeaheadComboboxMenuProps<T> extends HTMLAttributes<HTMLUListE
 	children?: ReactNode;
 	matchTriggerWidth?: boolean;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxMenu: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxMenuProps<any>> & RefAttributes<HTMLElement | null>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMenuItem.d.ts

@@ -1,6 +1,10 @@
 import { css } from "@emotion/react";
 import type { UseComboboxReturnValue } from "downshift";
 import type { Theme } from "../../theme";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxMenuItemProps<T> extends React.HTMLAttributes<HTMLElement> {
 	item: T;
 	/**
@@ -22,6 +26,10 @@ export interface TypeaheadComboboxMenuItemProps<T> extends React.HTMLAttributes<
 	_type?: string;
 }
 export declare const getMenuItemStyles: (theme: Theme, isHighlighted: boolean, disabled?: boolean) => ReturnType<typeof css>;
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxMenuItem: <T>(props: TypeaheadComboboxMenuItemProps<T> & {
 	ref?: React.Ref<HTMLLIElement>;
 }) => JSX.Element;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMultiSelectInput.d.ts

@@ -2,6 +2,10 @@ import type { UseMultipleSelectionReturnValue } from "downshift";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { TypeaheadComboboxInputProps } from "./TypeaheadComboboxInput";
 import type { ComboboxStateAnalyticsReturnValue } from "./hooks";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxMultiSelectInputProps<T> extends TypeaheadComboboxInputProps<T> {
 	comboboxState: ComboboxStateAnalyticsReturnValue<T>;
 	multipleSelectionState: UseMultipleSelectionReturnValue<T>;
@@ -28,4 +32,8 @@ export interface TypeaheadComboboxMultiSelectInputProps<T> extends TypeaheadComb
 	*/
 	size?: "middle";
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxMultiSelectInput: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxMultiSelectInputProps<any>> & RefAttributes<HTMLInputElement>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxRoot.d.ts

@@ -1,10 +1,18 @@
 import React from "react";
 import type { ComboboxStateAnalyticsReturnValue } from "./hooks";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxRootProps<T> extends React.HTMLAttributes<HTMLDivElement> {
 	comboboxState: ComboboxStateAnalyticsReturnValue<T>;
 	multiSelect?: boolean;
 	floatingStrategy?: "absolute" | "fixed";
 	children: React.ReactNode;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxRoot: React.FC<React.PropsWithChildren<TypeaheadComboboxRootProps<any>>>;
 export default TypeaheadComboboxRoot;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxSectionHeader.d.ts

@@ -1 +1,5 @@
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxSectionHeader: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxSelectedItem.d.ts

@@ -1,6 +1,10 @@
 import { type SerializedStyles } from "@emotion/react";
 import type { UseMultipleSelectionGetSelectedItemPropsOptions } from "downshift";
 import type { Theme } from "../../theme";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxSelectedItemProps<T> {
 	label: React.ReactNode;
 	item: any;
@@ -9,4 +13,8 @@ export interface TypeaheadComboboxSelectedItemProps<T> {
 	disabled?: boolean;
 }
 export declare const getSelectedItemStyles: (theme: Theme, disabled?: boolean) => SerializedStyles;
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxSelectedItem: React.FC<React.PropsWithChildren<any>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxSeparator.d.ts

@@ -1 +1,5 @@
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxSeparator: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxToggleButton.d.ts

@@ -1,5 +1,9 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import React from "react";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface DownshiftToggleButtonProps {
 	id: string;
 	onClick: (e: React.SyntheticEvent) => void;
@@ -8,5 +12,9 @@ export interface DownshiftToggleButtonProps {
 interface TypeaheadComboboxToggleButtonProps extends DownshiftToggleButtonProps {
 	disabled?: boolean;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxToggleButton: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxToggleButtonProps> & RefAttributes<HTMLButtonElement>>;
 export {};

package/dist-types/design-system/TypeaheadCombobox/hooks/downshiftHookWrappers.d.ts

@@ -43,9 +43,17 @@ export type ComboboxStateAnalyticsReturnValue<T> = UseComboboxReturnValue<T> & A
 	onView: (value: any) => void;
 	firstOnViewValue?: string;
 };
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare function useComboboxState<T>({ allItems, items, itemToString, onIsOpenChange, allowNewValue, formValue, formOnChange, formOnBlur, componentId, valueHasNoPii, analyticsEvents, matcher, preventUnsetOnBlur, selectedMatcher, ...props }: UseComboboxStateProps<T>): ComboboxStateAnalyticsReturnValue<T>;
 interface AnalyticsConfig extends AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
 	itemToString?: (item: any) => string;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare function useMultipleSelectionState<T>(selectedItems: T[], setSelectedItems: React.Dispatch<React.SetStateAction<T[]>>, { componentId, analyticsEvents, valueHasNoPii, itemToString }: AnalyticsConfig): UseMultipleSelectionReturnValue<T>;
 export {};

package/dist-types/design-system/{TypeaheadComboboxReactAria → TypeaheadComboboxV2}/hooks/useComboboxState.d.ts

@@ -15,6 +15,11 @@ interface BaseComboboxStateProps<T> extends AnalyticsEventValueChangeNoPiiFlagPr
 	*/
 	isItemDisabled?: (item: T) => boolean;
 	allowNewValue?: boolean;
+	/**
+	* Single-select only: open the menu showing the full option list (even with a value selected), and
+	* filter only once the user types. Multi-select clears the input on select, so it is unaffected.
+	*/
+	showAllOptionsOnOpen?: boolean;
 	initialInputValue?: string;
 	initialSelectedItem?: T;
 	formValue?: T;
@@ -63,6 +68,7 @@ export interface ComboboxStateValue<T> {
 	onView: (value: any) => void;
 	firstOnViewValue?: string;
 	multiSelect: boolean;
+	showAllOptionsOnOpen: boolean;
 }
 /**
 * Backs the Du Bois TypeaheadCombobox (react-aria variant) by wrapping react-aria's

package/dist-types/design-system/TypeaheadComboboxV2/hooks/useRestoreHighlightedOption.d.ts

@@ -0,0 +1,18 @@
+import type { ComboBoxState, SelectionMode } from "@react-stately/combobox";
+import type { WrappedItem } from "./useComboboxItems";
+/**
+* Keeps an option highlighted while the menu is open so Enter commits it, matching the original
+* downshift variant's `defaultHighlightedIndex: 0`. react-aria clears the focused key on every input
+* change (useComboBoxState: "Clear focused key when input value changes"), and its `commit()` only
+* selects when `focusedKey != null` — so without this, typing leaves nothing highlighted and Enter
+* falls through to commitValue(), selecting nothing.
+*
+* Only re-focuses when nothing is focused, so arrowing or hovering to another option sticks and we
+* merely restore the default after react-aria drops it. Keyed on the collection so it re-runs as
+* filtering narrows the list. Skipped when `allowNewValue`: there Enter commits the typed text, so
+* pre-highlighting an option would hijack it and select the option instead.
+*/
+export declare function useRestoreHighlightedOption<T>(state: ComboBoxState<WrappedItem<T>, SelectionMode>, { allowNewValue, showAllOptionsOnOpen }: {
+	allowNewValue: boolean;
+	showAllOptionsOnOpen: boolean;
+}): void;

package/dist-types/design-system/TypeaheadComboboxV2/hooks/useTypeaheadComboboxContext.d.ts

@@ -0,0 +1,2 @@
+import type { TypeaheadComboboxV2ContextType } from "../providers/TypeaheadComboboxContext";
+export declare const useTypeaheadComboboxV2Context: () => TypeaheadComboboxV2ContextType;

package/dist-types/design-system/{TypeaheadComboboxReactAria → TypeaheadComboboxV2}/providers/TypeaheadComboboxContext.d.ts

@@ -6,9 +6,11 @@ import { type InputHTMLAttributes, type MutableRefObject, type RefObject } from
 import type { DesignSystemEventProviderAnalyticsEventTypes } from "../../DesignSystemEventProvider/DesignSystemEventProvider";
 import type { AnalyticsEventProps } from "../../types";
 import type { WrappedItem } from "../hooks/useComboboxItems";
-export interface TypeaheadComboboxReactAriaContextType extends AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
+export interface TypeaheadComboboxV2ContextType extends AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
 	isInsideTypeaheadCombobox: boolean;
 	multiSelect: boolean;
+	/** Single-select only: whether the menu opens showing all options (filtering begins on type). */
+	showAllOptionsOnOpen: boolean;
 	/** Null outside of a Root. */
 	comboBoxState: ComboBoxState<WrappedItem<unknown>, SelectionMode> | null;
 	inputProps: InputHTMLAttributes<HTMLInputElement>;
@@ -36,10 +38,10 @@ export interface TypeaheadComboboxReactAriaContextType extends AnalyticsEventPro
 	removeByKey: (key: Key) => void;
 	clearSelection: () => void;
 }
-export declare const TypeaheadComboboxReactAriaContext: React.Context<TypeaheadComboboxReactAriaContextType>;
+export declare const TypeaheadComboboxV2Context: React.Context<TypeaheadComboboxV2ContextType>;
 interface ProviderProps {
 	children: React.ReactNode;
-	value: Omit<TypeaheadComboboxReactAriaContextType, "triggerWidth" | "setTriggerWidth">;
+	value: Omit<TypeaheadComboboxV2ContextType, "triggerWidth" | "setTriggerWidth">;
 }
-export declare const TypeaheadComboboxReactAriaContextProvider: ({ children, value }: ProviderProps) => JSX.Element;
+export declare const TypeaheadComboboxV2ContextProvider: ({ children, value }: ProviderProps) => JSX.Element;
 export {};