@langchain/macaw-components 1.0.0-beta.0

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

@@ -0,0 +1,99 @@
+import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { ControlSize } from '../../utils/componentSizes.js';
+export interface TypeaheadOption<TValue extends string = string> {
+    value: TValue;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    rightDecorator?: ReactNode;
+    keywords?: string[];
+}
+export type FreeSoloValue = string & Record<never, never>;
+export type TypeaheadSize = ControlSize;
+export type TypeaheadSelectedValue<TOption> = TOption | FreeSoloValue;
+export type TypeaheadSingleValue<TOption> = TypeaheadSelectedValue<TOption> | null | undefined;
+export type TypeaheadMultipleValue<TOption> = Array<TypeaheadSelectedValue<TOption>>;
+export interface TypeaheadTagProps {
+    key: string;
+    tabIndex: number;
+    'data-tag-index': number;
+    onDelete: () => void;
+}
+export interface TypeaheadRenderOptionState {
+    selected: boolean;
+    disabled: boolean;
+    inputValue: string;
+}
+export interface TypeaheadFilterOptionsState<TOption> {
+    inputValue: string;
+    getOptionLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+}
+export interface TypeaheadListItem<TOption> {
+    option: TypeaheadSelectedValue<TOption>;
+    source: 'option' | 'selected';
+}
+interface TypeaheadBaseProps<TOption> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'onKeyDown'> {
+    options: TOption[];
+    placeholder?: string;
+    /** Static content rendered before the editable input. */
+    leftDecorator?: ReactNode;
+    /** Keeps the placeholder visible after values have been selected in multiple mode. */
+    showPlaceholderWithValues?: boolean;
+    emptyText?: string;
+    /** Control height: xs=20px, sm=24px, md=32px, lg=40px. */
+    size?: TypeaheadSize;
+    disabled?: boolean;
+    isError?: boolean;
+    freeSolo?: boolean;
+    disableClearable?: boolean;
+    disableCloseOnSelect?: boolean;
+    /** Override the default client-side option filtering. */
+    filterOptions?: (options: TOption[], state: TypeaheadFilterOptionsState<TOption>) => TOption[];
+    forcePopupIcon?: boolean;
+    clearOnBlur?: boolean;
+    clearValueOnInputClear?: boolean;
+    displaySelectedValueWhenInputEmpty?: boolean;
+    maxVisibleOptions?: number;
+    hideEmptyList?: boolean;
+    emptyState?: ReactNode;
+    listFooter?: ReactNode;
+    onCreateNew?: (inputValue: string) => void;
+    createNewLabel?: (inputValue: string) => ReactNode;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    getOptionLabel?: (option: TypeaheadSelectedValue<TOption>) => string;
+    getOptionValue?: (option: TypeaheadSelectedValue<TOption>) => string;
+    getOptionDisabled?: (option: TOption) => boolean;
+    renderOption?: (option: TOption, state: TypeaheadRenderOptionState) => ReactNode;
+    inputId?: string;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    'aria-label'?: string;
+    'data-testid'?: string;
+}
+interface TypeaheadSingleProps<TOption> extends TypeaheadBaseProps<TOption> {
+    /** Searchable single-select mode. */
+    multiple?: false;
+    value?: TypeaheadSingleValue<NoInfer<TOption>>;
+    onChange: (value: TypeaheadSingleValue<NoInfer<TOption>>) => void;
+    renderTags?: never;
+}
+interface TypeaheadMultipleProps<TOption> extends TypeaheadBaseProps<TOption> {
+    /**
+     * Enables the canonical searchable multi-select pattern. Selected values are
+     * rendered as removable tags and the option list stays searchable.
+     */
+    multiple: true;
+    value?: TypeaheadMultipleValue<NoInfer<TOption>>;
+    onChange: (value: TypeaheadMultipleValue<NoInfer<TOption>>) => void;
+    renderTags?: (value: TypeaheadMultipleValue<TOption>, getTagProps: (params: {
+        index: number;
+    }) => TypeaheadTagProps) => ReactNode;
+}
+/**
+ * Searchable selection input. Use `multiple` for searchable multi-selects and
+ * add `freeSolo` only when values outside the provided options are valid.
+ */
+export type TypeaheadProps<TOption = string> = TypeaheadSingleProps<TOption> | TypeaheadMultipleProps<TOption>;
+export {};

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

@@ -0,0 +1,25 @@
+import type { TypeaheadFilterOptionsState, TypeaheadListItem, TypeaheadMultipleValue, TypeaheadOption, TypeaheadSelectedValue } from './Typeahead.types.js';
+export declare function isTypeaheadOption(option: unknown): option is TypeaheadOption;
+export declare function defaultOptionLabel<TOption>(option: TypeaheadSelectedValue<TOption>): string;
+export declare function defaultOptionValue<TOption>(option: TypeaheadSelectedValue<TOption>): string;
+export declare const normalize: (value: string) => string;
+export declare function filterTypeaheadOptions<TOption>(options: TOption[], inputValue: string, getLabel: (option: TOption) => string): TOption[];
+export declare function getTypeaheadListItems<TOption>({ options, selectedValues, inputValue, getLabel, getValue, filterOptions, maxVisibleOptions, includeSelectedValues, }: {
+    options: TOption[];
+    selectedValues: TypeaheadMultipleValue<TOption>;
+    inputValue: string;
+    getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    getValue: (option: TypeaheadSelectedValue<TOption>) => string;
+    filterOptions?: (options: TOption[], state: TypeaheadFilterOptionsState<TOption>) => TOption[];
+    maxVisibleOptions?: number;
+    includeSelectedValues?: boolean;
+}): TypeaheadListItem<TOption>[];
+export declare function isActiveOptionSelected<TOption>(listNode: HTMLElement | null, selectedValues: TypeaheadMultipleValue<TOption>, getValue: (option: TypeaheadSelectedValue<TOption>) => string): boolean;
+export declare function getTypeaheadDisplayInputValue<TOption>(inputValue: string, selectedValues: TypeaheadMultipleValue<TOption>, getLabel: (option: TypeaheadSelectedValue<TOption>) => string, multiple?: boolean, displaySelectedValueWhenInputEmpty?: boolean): string;
+export declare function getTypeaheadSelectedSummary<TOption>(selectedValues: TypeaheadMultipleValue<TOption>, getLabel: (option: TypeaheadSelectedValue<TOption>) => string, multiple?: boolean): string | undefined;
+export declare function getTypeaheadCreateState<TOption>(inputValue: string, options: TOption[], selectedValues: TypeaheadMultipleValue<TOption>, getLabel: (option: TypeaheadSelectedValue<TOption>) => string, freeSolo: boolean, hasCustomCreate: boolean): {
+    customCreateInputValue: string;
+    showCreateOption: boolean;
+    showFreeSoloCreateOption: boolean;
+    trimmedInputValue: string;
+};

package/dist/components/Typeahead/Typeahead.utils.js

@@ -0,0 +1,73 @@
+//#region packages/components/src/components/Typeahead/Typeahead.utils.ts
+function isTypeaheadOption(option) {
+	return typeof option === "object" && option != null && "value" in option && typeof option.value === "string";
+}
+function defaultOptionLabel(option) {
+	if (isTypeaheadOption(option)) return option.label ?? option.value;
+	return String(option ?? "");
+}
+function defaultOptionValue(option) {
+	if (isTypeaheadOption(option)) return option.value;
+	return defaultOptionLabel(option);
+}
+var normalize = (value) => value.trim().toLowerCase();
+function filterTypeaheadOptions(options, inputValue, getLabel) {
+	const query = normalize(inputValue);
+	return query ? options.filter((option) => {
+		if (normalize(getLabel(option)).includes(query)) return true;
+		if (isTypeaheadOption(option)) return option.keywords?.some((keyword) => normalize(keyword).includes(query));
+		return false;
+	}) : options;
+}
+function getTypeaheadListItems({ options, selectedValues, inputValue, getLabel, getValue, filterOptions, maxVisibleOptions, includeSelectedValues }) {
+	const filteredOptions = filterOptions ? filterOptions(options, {
+		inputValue,
+		getOptionLabel: getLabel
+	}) : filterTypeaheadOptions(options, inputValue, getLabel);
+	const filteredItems = (maxVisibleOptions == null ? filteredOptions : filteredOptions.slice(0, maxVisibleOptions)).map((option) => ({
+		option,
+		source: "option"
+	}));
+	const query = normalize(inputValue);
+	if (!includeSelectedValues || query.length === 0) return filteredItems;
+	const optionKeys = new Set(options.map((option) => getValue(option)));
+	const itemKeys = new Set(filteredItems.map((item) => getValue(item.option)));
+	const selectedItems = selectedValues.filter((selected) => {
+		const selectedKey = getValue(selected);
+		return !optionKeys.has(selectedKey) && !itemKeys.has(selectedKey) && normalize(getLabel(selected)).includes(query);
+	}).map((option) => ({
+		option,
+		source: "selected"
+	}));
+	return [...filteredItems, ...selectedItems];
+}
+function isActiveOptionSelected(listNode, selectedValues, getValue) {
+	const activeValue = listNode?.querySelector("[cmdk-item][aria-selected=\"true\"]")?.getAttribute("data-value");
+	if (activeValue == null) return false;
+	return selectedValues.some((selected) => getValue(selected).trim() === activeValue);
+}
+function getTypeaheadDisplayInputValue(inputValue, selectedValues, getLabel, multiple, displaySelectedValueWhenInputEmpty) {
+	return displaySelectedValueWhenInputEmpty && !multiple && inputValue.length === 0 && selectedValues.length > 0 ? getLabel(selectedValues[0]) : inputValue;
+}
+function getTypeaheadSelectedSummary(selectedValues, getLabel, multiple) {
+	if (!multiple) return void 0;
+	if (selectedValues.length === 0) return "No selected values.";
+	return `Selected values: ${selectedValues.map((selected) => getLabel(selected)).join(", ")}.`;
+}
+function getTypeaheadCreateState(inputValue, options, selectedValues, getLabel, freeSolo, hasCustomCreate) {
+	const trimmedInputValue = inputValue.trim();
+	const normalizedInputValue = normalize(inputValue);
+	const createMatchesOption = normalizedInputValue.length > 0 && options.some((option) => normalize(getLabel(option)) === normalizedInputValue);
+	const createMatchesSelection = normalizedInputValue.length > 0 && selectedValues.some((selected) => normalize(getLabel(selected)) === normalizedInputValue);
+	const showFreeSoloCreateOption = freeSolo && !hasCustomCreate && trimmedInputValue.length > 0 && !createMatchesOption && !createMatchesSelection;
+	return {
+		customCreateInputValue: createMatchesOption || createMatchesSelection ? "" : trimmedInputValue,
+		showCreateOption: showFreeSoloCreateOption || hasCustomCreate,
+		showFreeSoloCreateOption,
+		trimmedInputValue
+	};
+}
+//#endregion
+export { defaultOptionLabel, defaultOptionValue, filterTypeaheadOptions, getTypeaheadCreateState, getTypeaheadDisplayInputValue, getTypeaheadListItems, getTypeaheadSelectedSummary, isActiveOptionSelected, isTypeaheadOption, normalize };
+
+//# sourceMappingURL=Typeahead.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typeahead.utils.js","names":[],"sources":["../../../src/components/Typeahead/Typeahead.utils.ts"],"sourcesContent":["import type {\n  TypeaheadFilterOptionsState,\n  TypeaheadListItem,\n  TypeaheadMultipleValue,\n  TypeaheadOption,\n  TypeaheadSelectedValue,\n} from './Typeahead.types';\n\nexport function isTypeaheadOption(option: unknown): option is TypeaheadOption {\n  return (\n    typeof option === 'object' &&\n    option != null &&\n    'value' in option &&\n    typeof (option as TypeaheadOption).value === 'string'\n  );\n}\n\nexport function defaultOptionLabel<TOption>(\n  option: TypeaheadSelectedValue<TOption>\n) {\n  if (isTypeaheadOption(option)) {\n    return option.label ?? option.value;\n  }\n  return String(option ?? '');\n}\n\nexport function defaultOptionValue<TOption>(\n  option: TypeaheadSelectedValue<TOption>\n) {\n  if (isTypeaheadOption(option)) {\n    return option.value;\n  }\n  return defaultOptionLabel(option);\n}\n\nexport const normalize = (value: string) => value.trim().toLowerCase();\n\nexport function filterTypeaheadOptions<TOption>(\n  options: TOption[],\n  inputValue: string,\n  getLabel: (option: TOption) => string\n) {\n  const query = normalize(inputValue);\n  const filteredOptions = query\n    ? options.filter((option) => {\n        const labelMatch = normalize(getLabel(option)).includes(query);\n        if (labelMatch) {\n          return true;\n        }\n        if (isTypeaheadOption(option)) {\n          return option.keywords?.some((keyword) =>\n            normalize(keyword).includes(query)\n          );\n        }\n        return false;\n      })\n    : options;\n\n  return filteredOptions;\n}\n\nexport function getTypeaheadListItems<TOption>({\n  options,\n  selectedValues,\n  inputValue,\n  getLabel,\n  getValue,\n  filterOptions,\n  maxVisibleOptions,\n  includeSelectedValues,\n}: {\n  options: TOption[];\n  selectedValues: TypeaheadMultipleValue<TOption>;\n  inputValue: string;\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string;\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string;\n  filterOptions?: (\n    options: TOption[],\n    state: TypeaheadFilterOptionsState<TOption>\n  ) => TOption[];\n  maxVisibleOptions?: number;\n  includeSelectedValues?: boolean;\n}): TypeaheadListItem<TOption>[] {\n  const filteredOptions = filterOptions\n    ? filterOptions(options, { inputValue, getOptionLabel: getLabel })\n    : filterTypeaheadOptions(options, inputValue, getLabel);\n  const visibleOptions =\n    maxVisibleOptions == null\n      ? filteredOptions\n      : filteredOptions.slice(0, maxVisibleOptions);\n  const filteredItems = visibleOptions.map<TypeaheadListItem<TOption>>(\n    (option) => ({\n      option,\n      source: 'option',\n    })\n  );\n\n  const query = normalize(inputValue);\n  if (!includeSelectedValues || query.length === 0) return filteredItems;\n\n  const optionKeys = new Set(options.map((option) => getValue(option)));\n  const itemKeys = new Set(filteredItems.map((item) => getValue(item.option)));\n  const selectedItems = selectedValues\n    .filter((selected) => {\n      const selectedKey = getValue(selected);\n      return (\n        !optionKeys.has(selectedKey) &&\n        !itemKeys.has(selectedKey) &&\n        normalize(getLabel(selected)).includes(query)\n      );\n    })\n    .map<TypeaheadListItem<TOption>>((option) => ({\n      option,\n      source: 'selected',\n    }));\n\n  return [...filteredItems, ...selectedItems];\n}\n\nexport function isActiveOptionSelected<TOption>(\n  listNode: HTMLElement | null,\n  selectedValues: TypeaheadMultipleValue<TOption>,\n  getValue: (option: TypeaheadSelectedValue<TOption>) => string\n) {\n  const activeValue = listNode\n    ?.querySelector('[cmdk-item][aria-selected=\"true\"]')\n    ?.getAttribute('data-value');\n  if (activeValue == null) return false;\n  return selectedValues.some(\n    (selected) => getValue(selected).trim() === activeValue\n  );\n}\n\nexport function getTypeaheadDisplayInputValue<TOption>(\n  inputValue: string,\n  selectedValues: TypeaheadMultipleValue<TOption>,\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string,\n  multiple?: boolean,\n  displaySelectedValueWhenInputEmpty?: boolean\n) {\n  return displaySelectedValueWhenInputEmpty &&\n    !multiple &&\n    inputValue.length === 0 &&\n    selectedValues.length > 0\n    ? getLabel(selectedValues[0])\n    : inputValue;\n}\n\nexport function getTypeaheadSelectedSummary<TOption>(\n  selectedValues: TypeaheadMultipleValue<TOption>,\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string,\n  multiple?: boolean\n) {\n  if (!multiple) return undefined;\n  if (selectedValues.length === 0) return 'No selected values.';\n  return `Selected values: ${selectedValues.map((selected) => getLabel(selected)).join(', ')}.`;\n}\n\nexport function getTypeaheadCreateState<TOption>(\n  inputValue: string,\n  options: TOption[],\n  selectedValues: TypeaheadMultipleValue<TOption>,\n  getLabel: (option: TypeaheadSelectedValue<TOption>) => string,\n  freeSolo: boolean,\n  hasCustomCreate: boolean\n) {\n  const trimmedInputValue = inputValue.trim();\n  const normalizedInputValue = normalize(inputValue);\n  const createMatchesOption =\n    normalizedInputValue.length > 0 &&\n    options.some(\n      (option) => normalize(getLabel(option)) === normalizedInputValue\n    );\n  const createMatchesSelection =\n    normalizedInputValue.length > 0 &&\n    selectedValues.some(\n      (selected) => normalize(getLabel(selected)) === normalizedInputValue\n    );\n  const showFreeSoloCreateOption =\n    freeSolo &&\n    !hasCustomCreate &&\n    trimmedInputValue.length > 0 &&\n    !createMatchesOption &&\n    !createMatchesSelection;\n\n  return {\n    customCreateInputValue:\n      createMatchesOption || createMatchesSelection ? '' : trimmedInputValue,\n    showCreateOption: showFreeSoloCreateOption || hasCustomCreate,\n    showFreeSoloCreateOption,\n    trimmedInputValue,\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { TypeaheadRenderOptionState, TypeaheadSelectedValue, TypeaheadSize } from './Typeahead.types.js';
+export declare function TypeaheadClearButton({ label, onClick, size, }: {
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    size: TypeaheadSize;
+}): import("react").JSX.Element;
+export declare function TypeaheadDefaultTag<TOption>({ selected, index, disabled, size, getLabel, getValue, onRemove, }: {
+    selected: TypeaheadSelectedValue<TOption>;
+    index: number;
+    disabled: boolean;
+    size: TypeaheadSize;
+    getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    getValue: (option: TypeaheadSelectedValue<TOption>) => string;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+export declare function TypeaheadDefaultOption<TOption>({ option, state, getLabel, }: {
+    option: TypeaheadSelectedValue<TOption>;
+    state: TypeaheadRenderOptionState;
+    getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+}): import("react").JSX.Element;
+export declare function TypeaheadCreateOption({ inputValue, label, }: {
+    inputValue: string;
+    label?: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;

package/dist/components/Typeahead/TypeaheadParts.js

@@ -0,0 +1,109 @@
+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 { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { isTypeaheadOption } from "./Typeahead.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Typeahead/TypeaheadParts.tsx
+function TypeaheadClearButton({ label, onClick, size }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		type: "button",
+		icon: XIcon,
+		iconWeight: "regular",
+		label,
+		variant: "plain",
+		color: "secondary",
+		size: CONTROL_ICON_SIZES[size].buttonSize,
+		tooltipProps: { title: null },
+		className: "bg-transparent text-icon-tertiary shadow-none hover:bg-elevated-hover hover:text-icon-primary",
+		style: { marginBlock: CONTROL_ICON_SIZES[size].actionOffset },
+		onMouseDown: (event) => event.preventDefault(),
+		onClick
+	});
+}
+function TypeaheadDefaultTag({ selected, index, disabled, size, getLabel, getValue, onRemove }) {
+	const label = getLabel(selected);
+	return /* @__PURE__ */ jsx(Badge, {
+		color: "plain",
+		rounded: "xs",
+		size: size === "xs" || size === "sm" ? "xs" : "sm",
+		textWeight: "normal",
+		rightDecorator: !disabled ? XIcon : void 0,
+		iconWeight: "regular",
+		"aria-label": !disabled ? `Remove ${label}` : void 0,
+		role: !disabled ? "button" : void 0,
+		tabIndex: !disabled ? 0 : void 0,
+		onMouseDown: (event) => event.preventDefault(),
+		onKeyDown: (event) => {
+			if (!disabled && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				event.stopPropagation();
+				onRemove();
+			}
+		},
+		onClick: !disabled ? (event) => {
+			event.stopPropagation();
+			onRemove();
+		} : void 0,
+		className: cn("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", size === "xs" && "border-0 py-0", !disabled && "cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]", disabled && "cursor-not-allowed"),
+		children: label
+	}, `${getValue(selected)}-${index}`);
+}
+function TypeaheadDefaultOption({ option, state, getLabel }) {
+	const label = getLabel(option);
+	const description = isTypeaheadOption(option) ? option.description : void 0;
+	const rightDecorator = isTypeaheadOption(option) ? option.rightDecorator : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			icon: CheckIcon,
+			size: "md",
+			className: cn("shrink-0 text-icon-primary", state.selected ? "opacity-100" : "opacity-0")
+		}),
+		/* @__PURE__ */ jsx(OptionText, {
+			label,
+			description
+		}),
+		rightDecorator && /* @__PURE__ */ jsx("div", {
+			className: "ml-auto shrink-0",
+			children: rightDecorator
+		})
+	] });
+}
+function OptionText({ label, description }) {
+	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",
+			children: label
+		}), description && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "xs",
+			className: "truncate text-tertiary",
+			children: description
+		})]
+	});
+}
+function TypeaheadCreateOption({ inputValue, label }) {
+	if (label != null) return label;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "inline-flex size-4 shrink-0 text-icon-secondary",
+		children: /* @__PURE__ */ jsx(PlusIcon, {
+			size: "100%",
+			weight: "regular"
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate",
+		children: inputValue || "Add new"
+	})] });
+}
+//#endregion
+export { TypeaheadClearButton, TypeaheadCreateOption, TypeaheadDefaultOption, TypeaheadDefaultTag };
+
+//# sourceMappingURL=TypeaheadParts.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,81 @@
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode, Ref } from 'react';
+import type { TypeaheadListItem, TypeaheadMultipleValue, TypeaheadRenderOptionState, TypeaheadSelectedValue, TypeaheadSize, TypeaheadTagProps } from './Typeahead.types.js';
+interface TypeaheadViewRootProps {
+    ref: Ref<HTMLDivElement>;
+    props: HTMLAttributes<HTMLDivElement>;
+    handleBlur: (event: FocusEvent<HTMLDivElement>) => void;
+    dataTestId?: string;
+    className?: string;
+}
+interface TypeaheadViewState {
+    size: TypeaheadSize;
+    disabled: boolean;
+    isError: boolean;
+    multiple?: boolean;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+interface TypeaheadViewIds {
+    commandLabel: string;
+    resolvedInputId: string;
+    listId: string;
+    selectedSummaryId: string;
+    inputAriaLabel?: string;
+}
+interface TypeaheadViewInputProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    leftDecorator?: ReactNode;
+    showPlaceholderWithValues: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    setNode: (node: HTMLInputElement | null) => void;
+    focus: () => void;
+}
+interface TypeaheadViewSelectionProps<TOption> {
+    selectedValues: TypeaheadMultipleValue<TOption>;
+    selectedKeys: Set<string>;
+    getTagProps: (params: {
+        index: number;
+    }) => TypeaheadTagProps;
+    renderTags?: (value: TypeaheadMultipleValue<TOption>, getTagProps: (params: {
+        index: number;
+    }) => TypeaheadTagProps) => ReactNode;
+    getLabel: (option: TypeaheadSelectedValue<TOption>) => string;
+    getValue: (option: TypeaheadSelectedValue<TOption>) => string;
+    showClearButton: boolean;
+    clearValue: () => void;
+    forcePopupIcon: boolean;
+    selectedSummary?: string;
+}
+interface TypeaheadViewListProps<TOption> {
+    ref: Ref<HTMLDivElement>;
+    items: TypeaheadListItem<TOption>[];
+    emptyText: string;
+    emptyState?: ReactNode;
+    listFooter?: ReactNode;
+    hideEmptyList: boolean;
+    optionIsDisabled: (item: TypeaheadListItem<TOption>) => boolean;
+    selectValue: (selected: TypeaheadSelectedValue<TOption>) => void;
+    renderOption?: (option: TOption, state: TypeaheadRenderOptionState) => ReactNode;
+}
+interface TypeaheadViewCreateOptionProps {
+    show: boolean;
+    inputValue: string;
+    label?: ReactNode;
+    onCreate: () => void;
+}
+interface TypeaheadViewProps<TOption> {
+    root: TypeaheadViewRootProps;
+    state: TypeaheadViewState;
+    ids: TypeaheadViewIds;
+    input: TypeaheadViewInputProps;
+    selection: TypeaheadViewSelectionProps<TOption>;
+    list: TypeaheadViewListProps<TOption>;
+    createOption: TypeaheadViewCreateOptionProps;
+    popoverContentRef: Ref<HTMLDivElement>;
+}
+export declare function TypeaheadView<TOption>({ root, state, ids, input, selection, list, createOption, popoverContentRef, }: TypeaheadViewProps<TOption>): import("react").JSX.Element;
+export {};