@databricks/design-system 2.0.2 → 2.0.4

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 {};

package/dist-types/design-system/_shared_/Menu/index.d.ts

@@ -1,3 +1,3 @@
 export declare const getNewChildren: (children: React.ReactNode, props: {
 	disabled?: boolean;
-}, disabledReason: React.ReactNode, ref: React.RefObject<HTMLElement>) => React.ReactNode;
+}, disabledReason: React.ReactNode, zIndex?: number) => React.ReactNode;

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

@@ -1 +1,2 @@
 export declare const DM_SANS_FONT_FAMILY = "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif";
+export declare const DM_MONO_FONT_FAMILY = "'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";

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

@@ -74,6 +74,6 @@ export * from "./Tooltip";
 export * from "./Tree";
 export * from "./TreeGrid";
 export * from "./TypeaheadCombobox";
-export * as TypeaheadComboboxReactAria from "./TypeaheadComboboxReactAria";
+export * as TypeaheadComboboxV2 from "./TypeaheadComboboxV2";
 export * from "./Typography";
 export * from "./utils";

package/dist-types/test-utils/rtl/buttonVariants.d.ts

@@ -0,0 +1,11 @@
+export declare const BUTTON_VARIANT_CLASS_TOKENS: {
+	readonly primary: readonly ["du-bois-light-btn-primary", "du-bois-dark-btn-primary", "ant-btn-primary", "ds-btn-primary"];
+	readonly dangerous: readonly ["du-bois-light-btn-dangerous", "du-bois-dark-btn-dangerous", "ant-btn-dangerous", "ds-btn-danger"];
+	readonly block: readonly ["du-bois-light-btn-block", "du-bois-dark-btn-block", "ant-btn-block", "ds-btn-block"];
+	readonly link: readonly ["du-bois-light-btn-link", "du-bois-dark-btn-link", "ant-btn-link", "ds-btn-link"];
+};
+export type ButtonVariant = keyof typeof BUTTON_VARIANT_CLASS_TOKENS;
+export declare const isPrimaryButton: (button: Element) => boolean;
+export declare const isDangerousButton: (button: Element) => boolean;
+export declare const isBlockButton: (button: Element) => boolean;
+export declare const isLinkButton: (button: Element) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databricks/design-system",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "DuBois Design System",
   "keywords": [],
   "license": "ISC",
@@ -26,6 +26,11 @@
       "import": "./dist/patterns.js",
       "require": "./dist/patterns.js"
     },
+    "./test-utils/rtl/buttonVariants": {
+      "types": "./dist-types/test-utils/rtl/buttonVariants.d.ts",
+      "import": "./dist/test-utils/rtl/buttonVariants.js",
+      "require": "./dist/test-utils/rtl/buttonVariants.js"
+    },
     "./test-utils/*": {
       "types": "./dist-types/test-utils/*/index.d.ts",
       "import": "./dist/test-utils/*",
@@ -40,7 +45,8 @@
     "./dist/index.mitigated.css": "./dist/index.mitigated.css",
     "./dist/index-dark.mitigated.css": "./dist/index-dark.mitigated.css",
     "./dist/dubois-colors.less": "./dist/dubois-colors.less",
-    "./fonts/dm-sans.css": "./dist/fonts/dm-sans/dm-sans.css"
+    "./fonts/dm-sans.css": "./dist/fonts/dm-sans/dm-sans.css",
+    "./fonts/dm-mono.css": "./dist/fonts/dm-mono/dm-mono.css"
   },
   "sideEffects": [
     "*.css"
@@ -131,6 +137,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@databricks/testing-library": "1.0.0",
     "@emotion/unitless": "^0.8.1",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/react": "^0.26.25",