@langchain/macaw-components 1.0.0-beta.0

package/dist/components/TopList/TopList.js

@@ -0,0 +1,186 @@
+import { Text } from "../Text/Text.js";
+import { getFillChartColorForKey } from "../../utils/chartColors.js";
+import { BarChart } from "../BarChart/BarChart.js";
+import { limitTopListItems, sortTopListItems } from "./TopList.utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { animated, useReducedMotion, useSpring } from "@react-spring/web";
+import { getStringWidth } from "@visx/text";
+//#region packages/components/src/components/TopList/TopList.tsx
+var TOP_LIST_SERIES_ID = "top-list-values";
+var TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH = 112;
+var TOP_LIST_VALUE_LABEL_GAP = 8;
+var TOP_LIST_VALUE_LABEL_FONT_SIZE = 12;
+var numberFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+var defaultFormatValue = (value) => numberFormatter.format(value);
+var TopListValueLabel = ({ bar, label, shouldAnimate }) => {
+	const isNegative = bar.value < 0;
+	const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;
+	const targetX = isNegative ? bar.x - TOP_LIST_VALUE_LABEL_GAP : bar.x + bar.width + TOP_LIST_VALUE_LABEL_GAP;
+	const targetY = bar.y + bar.height / 2;
+	const { x, y } = useSpring({
+		from: {
+			x: bar.baselinePosition + (isNegative ? -8 : TOP_LIST_VALUE_LABEL_GAP),
+			y: targetY
+		},
+		to: {
+			x: targetX,
+			y: targetY
+		},
+		immediate: isReducedMotion
+	});
+	return /* @__PURE__ */ jsx(animated.text, {
+		x,
+		y,
+		dominantBaseline: "middle",
+		textAnchor: isNegative ? "end" : "start",
+		className: "fill-current font-mono text-xs text-secondary",
+		children: label
+	});
+};
+var TopListOverlay = ({ categories, bandwidth, innerWidth, innerHeight, getCategoryPosition, getItem, categoryLabelWidth, valueLabelPadding, hasNegativeValues, onItemPointerMove, onItemPointerOut, onItemActivate }) => categories.map((category, index) => {
+	const item = getItem(category);
+	const position = getCategoryPosition(category);
+	if (item == null || position == null) return null;
+	const previousPosition = index === 0 ? void 0 : getCategoryPosition(categories[index - 1]);
+	const nextPosition = index === categories.length - 1 ? void 0 : getCategoryPosition(categories[index + 1]);
+	const top = previousPosition == null ? 0 : (previousPosition + position) / 2;
+	const bottom = nextPosition == null ? innerHeight : (position + nextPosition) / 2;
+	const leftPadding = hasNegativeValues ? valueLabelPadding : 0;
+	const isInteractive = onItemPointerMove != null || onItemActivate != null;
+	let cursorClassName;
+	if (onItemActivate != null) cursorClassName = "cursor-pointer";
+	else if (onItemPointerMove != null) cursorClassName = "cursor-crosshair";
+	return /* @__PURE__ */ jsxs("g", {
+		className: cursorClassName,
+		onPointerMove: onItemPointerMove == null ? void 0 : (event) => {
+			event.stopPropagation();
+			onItemPointerMove(item, event);
+		},
+		onPointerLeave: onItemPointerOut,
+		onPointerUp: onItemActivate == null ? void 0 : (event) => {
+			if (event.button !== 0) return;
+			event.stopPropagation();
+			onItemActivate(item, event);
+		},
+		children: [isInteractive && /* @__PURE__ */ jsx("rect", {
+			x: -categoryLabelWidth - leftPadding,
+			y: top,
+			width: categoryLabelWidth + leftPadding + innerWidth + valueLabelPadding,
+			height: Math.max(0, bottom - top),
+			fill: "transparent",
+			pointerEvents: "all",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("foreignObject", {
+			x: -categoryLabelWidth - leftPadding,
+			y: position - bandwidth / 2,
+			width: categoryLabelWidth,
+			height: bandwidth,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex size-full min-w-0 items-center justify-end overflow-hidden pr-space-3",
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "xs",
+					color: "primary",
+					className: "block max-w-full truncate",
+					title: item.label,
+					children: item.label
+				})
+			})
+		})]
+	}, `hitbox:${item.id}`);
+});
+/** Use for ranked top-K data; adapters own data shaping, tooltips, and navigation. */
+var TopList = ({ items, sort = "descending", limit, formatValue = defaultFormatValue, valueAxisLabel, categoryLabelWidth = TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH, activeItemId, getItemAriaLabel, isRendering = true, shouldAnimate = true, onItemPointerMove, onItemPointerOut, onItemActivate, onItemFocus, onItemBlur, className, "aria-label": ariaLabel, ...rest }) => {
+	const sortedItems = sortTopListItems(items.filter((item) => Number.isFinite(item.value)), sort);
+	const visibleItems = limitTopListItems(sortedItems, limit);
+	const itemById = new Map(visibleItems.map((item) => [item.id, item]));
+	const formattedValueById = new Map(visibleItems.map((item) => [item.id, formatValue(item.value)]));
+	const resolvedCategoryLabelWidth = Number.isFinite(categoryLabelWidth) ? Math.max(0, categoryLabelWidth) : TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH;
+	const valueLabelPadding = Math.ceil(TOP_LIST_VALUE_LABEL_GAP + Math.max(0, ...Array.from(formattedValueById.values(), (value) => Math.max(getStringWidth(value, { fontSize: `${TOP_LIST_VALUE_LABEL_FONT_SIZE}px` }) ?? 0, value.length * 7))));
+	const values = sortedItems.map((item) => item.value);
+	const valueDomain = values.length === 0 ? void 0 : [Math.min(0, ...values), Math.max(0, ...values)];
+	const hasNegativeValues = (valueDomain?.[0] ?? 0) < 0;
+	const series = [{
+		id: TOP_LIST_SERIES_ID,
+		label: valueAxisLabel ?? "Value",
+		ariaLabel: valueAxisLabel ?? "Values",
+		data: visibleItems.map((item) => ({
+			id: item.id,
+			category: item.id,
+			value: item.value,
+			color: item.color ?? getFillChartColorForKey(item.id)
+		}))
+	}];
+	const getItem = (category) => itemById.get(String(category));
+	const getDatumItem = (datum) => getItem(datum.category);
+	const mapDatumHandlerToItem = (handler) => {
+		if (!isRendering || handler == null) return void 0;
+		return (datum, event) => {
+			const item = getDatumItem(datum);
+			if (item != null) handler(item, event);
+		};
+	};
+	return /* @__PURE__ */ jsx(BarChart, {
+		...rest,
+		"aria-label": ariaLabel,
+		className,
+		orientation: "horizontal",
+		mode: "grouped",
+		series,
+		showLegend: false,
+		activeBarId: activeItemId,
+		isRendering,
+		shouldAnimate,
+		minimumPlotWidth: 0,
+		categoryPadding: {
+			inner: .24,
+			outer: .24
+		},
+		categoryAxis: {
+			domain: visibleItems.map((item) => item.id),
+			thickness: resolvedCategoryLabelWidth
+		},
+		valueAxes: [{
+			id: TOP_LIST_SERIES_ID,
+			label: valueAxisLabel,
+			domain: valueDomain,
+			nice: true,
+			formatValue
+		}],
+		grid: { value: true },
+		plotPadding: {
+			left: hasNegativeValues ? valueLabelPadding : 0,
+			right: valueLabelPadding
+		},
+		slots: {
+			categoryAxis: () => null,
+			barLabel: (bar) => /* @__PURE__ */ jsx(TopListValueLabel, {
+				bar,
+				label: formattedValueById.get(bar.id) ?? formatValue(bar.value),
+				shouldAnimate
+			}, `${bar.id}:${bar.startValue}:${bar.endValue}`),
+			overlay: (slotProps) => isRendering ? /* @__PURE__ */ jsx(TopListOverlay, {
+				...slotProps,
+				getItem,
+				categoryLabelWidth: resolvedCategoryLabelWidth,
+				valueLabelPadding,
+				hasNegativeValues,
+				onItemPointerMove,
+				onItemPointerOut,
+				onItemActivate
+			}) : null
+		},
+		getCategoryAriaLabel: !isRendering ? void 0 : (datum) => {
+			const item = getDatumItem(datum);
+			if (item == null) return void 0;
+			return getItemAriaLabel?.(item) ?? `${item.label}: ${formattedValueById.get(item.id) ?? formatValue(item.value)}`;
+		},
+		onDatumActivate: mapDatumHandlerToItem(onItemActivate),
+		onDatumFocus: mapDatumHandlerToItem(onItemFocus),
+		onDatumBlur: mapDatumHandlerToItem(onItemBlur)
+	});
+};
+//#endregion
+export { TopList };
+
+//# sourceMappingURL=TopList.js.map

package/dist/components/TopList/TopList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopList.js","names":[],"sources":["../../../src/components/TopList/TopList.tsx"],"sourcesContent":["import { animated, useReducedMotion, useSpring } from '@react-spring/web';\nimport { getStringWidth } from '@visx/text';\n\nimport { getFillChartColorForKey } from '../../utils/chartColors';\nimport {\n  BarChart,\n  type BarChartCategory,\n  type BarChartInteractionDatum,\n  type BarChartPlotSlotProps,\n  type BarChartRenderedBar,\n  type BarChartSeries,\n} from '../BarChart';\nimport { Text } from '../Text';\nimport type { TopListItem, TopListProps } from './TopList.types';\nimport { limitTopListItems, sortTopListItems } from './TopList.utils';\n\nconst TOP_LIST_SERIES_ID = 'top-list-values';\nconst TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH = 112;\nconst TOP_LIST_VALUE_LABEL_GAP = 8;\nconst TOP_LIST_VALUE_LABEL_FONT_SIZE = 12;\nconst numberFormatter = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 2,\n});\n\nconst defaultFormatValue = (value: number) => numberFormatter.format(value);\n\nconst TopListValueLabel = ({\n  bar,\n  label,\n  shouldAnimate,\n}: {\n  bar: BarChartRenderedBar;\n  label: string;\n  shouldAnimate: boolean;\n}) => {\n  const isNegative = bar.value < 0;\n  const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n  const targetX = isNegative\n    ? bar.x - TOP_LIST_VALUE_LABEL_GAP\n    : bar.x + bar.width + TOP_LIST_VALUE_LABEL_GAP;\n  const targetY = bar.y + bar.height / 2;\n  const { x, y } = useSpring({\n    from: {\n      x:\n        bar.baselinePosition +\n        (isNegative ? -TOP_LIST_VALUE_LABEL_GAP : TOP_LIST_VALUE_LABEL_GAP),\n      y: targetY,\n    },\n    to: { x: targetX, y: targetY },\n    immediate: isReducedMotion,\n  });\n\n  return (\n    <animated.text\n      x={x}\n      y={y}\n      dominantBaseline=\"middle\"\n      textAnchor={isNegative ? 'end' : 'start'}\n      className=\"fill-current font-mono text-xs text-secondary\"\n    >\n      {label}\n    </animated.text>\n  );\n};\n\ntype TopListOverlayProps<Item extends TopListItem> = BarChartPlotSlotProps &\n  Pick<\n    TopListProps<Item>,\n    'onItemActivate' | 'onItemPointerMove' | 'onItemPointerOut'\n  > & {\n    getItem: (category: BarChartCategory) => Item | undefined;\n    categoryLabelWidth: number;\n    valueLabelPadding: number;\n    hasNegativeValues: boolean;\n  };\n\nconst TopListOverlay = <Item extends TopListItem>({\n  categories,\n  bandwidth,\n  innerWidth,\n  innerHeight,\n  getCategoryPosition,\n  getItem,\n  categoryLabelWidth,\n  valueLabelPadding,\n  hasNegativeValues,\n  onItemPointerMove,\n  onItemPointerOut,\n  onItemActivate,\n}: TopListOverlayProps<Item>) =>\n  categories.map((category, index) => {\n    const item = getItem(category);\n    const position = getCategoryPosition(category);\n    if (item == null || position == null) return null;\n\n    const previousPosition =\n      index === 0 ? undefined : getCategoryPosition(categories[index - 1]);\n    const nextPosition =\n      index === categories.length - 1\n        ? undefined\n        : getCategoryPosition(categories[index + 1]);\n    const top =\n      previousPosition == null ? 0 : (previousPosition + position) / 2;\n    const bottom =\n      nextPosition == null ? innerHeight : (position + nextPosition) / 2;\n    const leftPadding = hasNegativeValues ? valueLabelPadding : 0;\n    const isInteractive = onItemPointerMove != null || onItemActivate != null;\n\n    let cursorClassName: string | undefined;\n    if (onItemActivate != null) {\n      cursorClassName = 'cursor-pointer';\n    } else if (onItemPointerMove != null) {\n      cursorClassName = 'cursor-crosshair';\n    }\n\n    return (\n      <g\n        key={`hitbox:${item.id}`}\n        className={cursorClassName}\n        onPointerMove={\n          onItemPointerMove == null\n            ? undefined\n            : (event) => {\n                event.stopPropagation();\n                onItemPointerMove(item, event);\n              }\n        }\n        onPointerLeave={onItemPointerOut}\n        onPointerUp={\n          onItemActivate == null\n            ? undefined\n            : (event) => {\n                if (event.button !== 0) return;\n                event.stopPropagation();\n                onItemActivate(item, event);\n              }\n        }\n      >\n        {isInteractive && (\n          <rect\n            x={-categoryLabelWidth - leftPadding}\n            y={top}\n            width={\n              categoryLabelWidth + leftPadding + innerWidth + valueLabelPadding\n            }\n            height={Math.max(0, bottom - top)}\n            fill=\"transparent\"\n            pointerEvents=\"all\"\n            aria-hidden=\"true\"\n          />\n        )}\n        <foreignObject\n          x={-categoryLabelWidth - leftPadding}\n          y={position - bandwidth / 2}\n          width={categoryLabelWidth}\n          height={bandwidth}\n        >\n          <div className=\"flex size-full min-w-0 items-center justify-end overflow-hidden pr-space-3\">\n            <Text\n              as=\"span\"\n              variant=\"xs\"\n              color=\"primary\"\n              className=\"block max-w-full truncate\"\n              title={item.label}\n            >\n              {item.label}\n            </Text>\n          </div>\n        </foreignObject>\n      </g>\n    );\n  });\n\n/** Use for ranked top-K data; adapters own data shaping, tooltips, and navigation. */\nexport const TopList = <Item extends TopListItem>({\n  items,\n  sort = 'descending',\n  limit,\n  formatValue = defaultFormatValue,\n  valueAxisLabel,\n  categoryLabelWidth = TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH,\n  activeItemId,\n  getItemAriaLabel,\n  isRendering = true,\n  shouldAnimate = true,\n  onItemPointerMove,\n  onItemPointerOut,\n  onItemActivate,\n  onItemFocus,\n  onItemBlur,\n  className,\n  'aria-label': ariaLabel,\n  ...rest\n}: TopListProps<Item>) => {\n  const sortedItems = sortTopListItems(\n    items.filter((item) => Number.isFinite(item.value)),\n    sort\n  );\n  const visibleItems = limitTopListItems(sortedItems, limit);\n  const itemById = new Map(visibleItems.map((item) => [item.id, item]));\n  const formattedValueById = new Map(\n    visibleItems.map((item) => [item.id, formatValue(item.value)])\n  );\n  const resolvedCategoryLabelWidth = Number.isFinite(categoryLabelWidth)\n    ? Math.max(0, categoryLabelWidth)\n    : TOP_LIST_DEFAULT_CATEGORY_LABEL_WIDTH;\n  const valueLabelPadding = Math.ceil(\n    TOP_LIST_VALUE_LABEL_GAP +\n      Math.max(\n        0,\n        ...Array.from(formattedValueById.values(), (value) =>\n          Math.max(\n            getStringWidth(value, {\n              fontSize: `${TOP_LIST_VALUE_LABEL_FONT_SIZE}px`,\n            }) ?? 0,\n            value.length * 7\n          )\n        )\n      )\n  );\n  const values = sortedItems.map((item) => item.value);\n  const valueDomain: readonly [number, number] | undefined =\n    values.length === 0\n      ? undefined\n      : [Math.min(0, ...values), Math.max(0, ...values)];\n  const hasNegativeValues = (valueDomain?.[0] ?? 0) < 0;\n  const series: readonly BarChartSeries[] = [\n    {\n      id: TOP_LIST_SERIES_ID,\n      label: valueAxisLabel ?? 'Value',\n      ariaLabel: valueAxisLabel ?? 'Values',\n      data: visibleItems.map((item) => ({\n        id: item.id,\n        category: item.id,\n        value: item.value,\n        color: item.color ?? getFillChartColorForKey(item.id),\n      })),\n    },\n  ];\n  const getItem = (category: BarChartCategory) =>\n    itemById.get(String(category));\n  const getDatumItem = (datum: BarChartInteractionDatum) =>\n    getItem(datum.category);\n  const mapDatumHandlerToItem = <Event,>(\n    handler: ((item: Item, event: Event) => void) | undefined\n  ) => {\n    if (!isRendering || handler == null) return undefined;\n\n    return (datum: BarChartInteractionDatum, event: Event) => {\n      const item = getDatumItem(datum);\n      if (item != null) handler(item, event);\n    };\n  };\n\n  return (\n    <BarChart\n      {...rest}\n      aria-label={ariaLabel}\n      className={className}\n      orientation=\"horizontal\"\n      mode=\"grouped\"\n      series={series}\n      showLegend={false}\n      activeBarId={activeItemId}\n      isRendering={isRendering}\n      shouldAnimate={shouldAnimate}\n      minimumPlotWidth={0}\n      categoryPadding={{ inner: 0.24, outer: 0.24 }}\n      categoryAxis={{\n        domain: visibleItems.map((item) => item.id),\n        thickness: resolvedCategoryLabelWidth,\n      }}\n      valueAxes={[\n        {\n          id: TOP_LIST_SERIES_ID,\n          label: valueAxisLabel,\n          domain: valueDomain,\n          nice: true,\n          formatValue,\n        },\n      ]}\n      grid={{ value: true }}\n      plotPadding={{\n        left: hasNegativeValues ? valueLabelPadding : 0,\n        right: valueLabelPadding,\n      }}\n      slots={{\n        categoryAxis: () => null,\n        barLabel: (bar) => (\n          <TopListValueLabel\n            key={`${bar.id}:${bar.startValue}:${bar.endValue}`}\n            bar={bar}\n            label={formattedValueById.get(bar.id) ?? formatValue(bar.value)}\n            shouldAnimate={shouldAnimate}\n          />\n        ),\n        overlay: (slotProps) =>\n          isRendering ? (\n            <TopListOverlay\n              {...slotProps}\n              getItem={getItem}\n              categoryLabelWidth={resolvedCategoryLabelWidth}\n              valueLabelPadding={valueLabelPadding}\n              hasNegativeValues={hasNegativeValues}\n              onItemPointerMove={onItemPointerMove}\n              onItemPointerOut={onItemPointerOut}\n              onItemActivate={onItemActivate}\n            />\n          ) : null,\n      }}\n      getCategoryAriaLabel={\n        !isRendering\n          ? undefined\n          : (datum) => {\n              const item = getDatumItem(datum);\n              if (item == null) return undefined;\n              return (\n                getItemAriaLabel?.(item) ??\n                `${item.label}: ${formattedValueById.get(item.id) ?? formatValue(item.value)}`\n              );\n            }\n      }\n      onDatumActivate={mapDatumHandlerToItem(onItemActivate)}\n      onDatumFocus={mapDatumHandlerToItem(onItemFocus)}\n      onDatumBlur={mapDatumHandlerToItem(onItemBlur)}\n    />\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, PointerEvent } from 'react';
+export type TopListItem = {
+    /** Stable identifier. Must be unique within the list. */
+    id: string;
+    label: string;
+    value: number;
+    /** Chart color from `chartColors`. */
+    color?: string;
+};
+export type TopListSort<Item extends TopListItem = TopListItem> = 'ascending' | 'descending' | 'none' | ((left: Item, right: Item) => number);
+export type TopListProps<Item extends TopListItem = TopListItem> = Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'children'> & {
+    items: readonly Item[];
+    /** Sorts before applying `limit`. Defaults to descending value order. */
+    sort?: TopListSort<Item>;
+    limit?: number;
+    /** Formats value-axis ticks, value labels, and default accessible names. */
+    formatValue?: (value: number) => string;
+    valueAxisLabel?: string;
+    /** Reserved width for category labels, in pixels. Defaults to 112. */
+    categoryLabelWidth?: number;
+    activeItemId?: string | null;
+    /** Defaults to `<label>: <formatted value>`. */
+    getItemAriaLabel?: (item: Item) => string;
+    /** Keeps axes mounted while omitting rows during resize. */
+    isRendering?: boolean;
+    /** Animates the chart unless reduced motion is preferred. Defaults to true. */
+    shouldAnimate?: boolean;
+    onItemPointerMove?: (item: Item, event: PointerEvent<SVGElement>) => void;
+    onItemPointerOut?: () => void;
+    onItemActivate?: (item: Item, event: PointerEvent<SVGElement> | KeyboardEvent<SVGRectElement>) => void;
+    onItemFocus?: (item: Item, event: FocusEvent<SVGRectElement>) => void;
+    onItemBlur?: (item: Item, event: FocusEvent<SVGRectElement>) => void;
+    'aria-label': string;
+};

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

@@ -0,0 +1,3 @@
+import type { TopListItem, TopListSort } from './TopList.types.js';
+export declare const sortTopListItems: <Item extends TopListItem>(items: readonly Item[], sort: TopListSort<Item>) => readonly Item[];
+export declare const limitTopListItems: <Item extends TopListItem>(items: readonly Item[], limit: number | undefined) => readonly Item[];

package/dist/components/TopList/TopList.utils.js

@@ -0,0 +1,16 @@
+//#region packages/components/src/components/TopList/TopList.utils.ts
+var sortTopListItems = (items, sort) => {
+	const sortedItems = [...items];
+	if (sort === "none") return sortedItems;
+	if (typeof sort === "function") return sortedItems.sort(sort);
+	if (sort === "ascending") return sortedItems.sort((left, right) => left.value - right.value);
+	return sortedItems.sort((left, right) => right.value - left.value);
+};
+var limitTopListItems = (items, limit) => {
+	if (limit == null || !Number.isFinite(limit)) return items;
+	return items.slice(0, Math.max(0, Math.floor(limit)));
+};
+//#endregion
+export { limitTopListItems, sortTopListItems };
+
+//# sourceMappingURL=TopList.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopList.utils.js","names":[],"sources":["../../../src/components/TopList/TopList.utils.ts"],"sourcesContent":["import type { TopListItem, TopListSort } from './TopList.types';\n\nexport const sortTopListItems = <Item extends TopListItem>(\n  items: readonly Item[],\n  sort: TopListSort<Item>\n): readonly Item[] => {\n  const sortedItems = [...items];\n  if (sort === 'none') return sortedItems;\n\n  if (typeof sort === 'function') return sortedItems.sort(sort);\n  if (sort === 'ascending') {\n    return sortedItems.sort((left, right) => left.value - right.value);\n  }\n\n  return sortedItems.sort((left, right) => right.value - left.value);\n};\n\nexport const limitTopListItems = <Item extends TopListItem>(\n  items: readonly Item[],\n  limit: number | undefined\n): readonly Item[] => {\n  if (limit == null || !Number.isFinite(limit)) return items;\n  return items.slice(0, Math.max(0, Math.floor(limit)));\n};\n"],"mappings":";AAEA,IAAa,oBACX,OACA,SACoB;CACpB,MAAM,cAAc,CAAC,GAAG,KAAK;CAC7B,IAAI,SAAS,QAAQ,OAAO;CAE5B,IAAI,OAAO,SAAS,YAAY,OAAO,YAAY,KAAK,IAAI;CAC5D,IAAI,SAAS,aACX,OAAO,YAAY,MAAM,MAAM,UAAU,KAAK,QAAQ,MAAM,KAAK;CAGnE,OAAO,YAAY,MAAM,MAAM,UAAU,MAAM,QAAQ,KAAK,KAAK;AACnE;AAEA,IAAa,qBACX,OACA,UACoB;CACpB,IAAI,SAAS,QAAQ,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO;CACrD,OAAO,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC;AACtD"}

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

@@ -0,0 +1,2 @@
+export { TopList } from './TopList.js';
+export type { TopListItem, TopListProps, TopListSort } from './TopList.types.js';

package/dist/components/TopList/index.js

@@ -0,0 +1,2 @@
+import { TopList } from "./TopList.js";
+export { TopList };

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

@@ -0,0 +1,5 @@
+import type { ReactElement, Ref } from 'react';
+import type { TypeaheadProps } from './Typeahead.types.js';
+export declare const Typeahead: <TOption = string>(props: TypeaheadProps<TOption> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement<unknown>;

package/dist/components/Typeahead/Typeahead.js

@@ -0,0 +1,305 @@
+import { defaultOptionLabel, defaultOptionValue, getTypeaheadCreateState, getTypeaheadDisplayInputValue, getTypeaheadListItems, getTypeaheadSelectedSummary, isActiveOptionSelected, isTypeaheadOption } from "./Typeahead.utils.js";
+import { TypeaheadView } from "./TypeaheadView.js";
+import { useTypeaheadDomSync } from "./useTypeaheadDomSync.js";
+import { useTypeaheadUncontrolledInput } from "./useTypeaheadUncontrolledInput.js";
+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) {
+	const generatedId = useId();
+	const resolvedInputId = inputId ?? generatedId;
+	const listId = `${resolvedInputId}-listbox`;
+	const selectedSummaryId = `${resolvedInputId}-selected-summary`;
+	const commandLabel = ariaLabel ?? placeholder;
+	const inputAriaLabel = ariaLabel ?? (inputId ? void 0 : placeholder);
+	const internalInputRef = useRef(null);
+	const listRef = useRef(null);
+	const popoverContentRef = useRef(null);
+	const [open, setOpenState] = useState(false);
+	const [uncontrolledInputValue, setUncontrolledInputValue] = useState("");
+	const setOpen = useCallback((nextOpen) => {
+		if (!disabled || !nextOpen) setOpenState(nextOpen);
+	}, [disabled]);
+	useEffect(() => {
+		if (disabled) setOpenState(false);
+		if (autoFocus) requestAnimationFrame(() => internalInputRef.current?.focus());
+	}, [autoFocus, disabled]);
+	const inputValue = controlledInputValue ?? uncontrolledInputValue;
+	const getLabel = useCallback((option) => getOptionLabel ? getOptionLabel(option) : defaultOptionLabel(option), [getOptionLabel]);
+	const getValue = useCallback((option) => getOptionValue ? getOptionValue(option) : defaultOptionValue(option), [getOptionValue]);
+	const selectedValues = useMemo(() => {
+		if (multiple) return Array.isArray(value) ? value : [];
+		return value == null ? [] : [value];
+	}, [multiple, value]);
+	const selectedKeys = useMemo(() => new Set(selectedValues.map((selected) => getValue(selected))), [getValue, selectedValues]);
+	const setInputValue = useCallback((nextValue) => {
+		if (controlledInputValue === void 0) setUncontrolledInputValue(nextValue);
+		onInputChange?.(nextValue);
+	}, [controlledInputValue, onInputChange]);
+	useTypeaheadUncontrolledInput({
+		clearOnBlur,
+		controlledInputValue,
+		freeSolo,
+		getLabel,
+		multiple,
+		open,
+		setUncontrolledInputValue,
+		value
+	});
+	const visibleItems = getTypeaheadListItems({
+		options,
+		selectedValues,
+		inputValue,
+		getLabel,
+		getValue,
+		filterOptions,
+		maxVisibleOptions,
+		includeSelectedValues: multiple
+	});
+	const optionIsDisabled = useCallback((item) => {
+		if (item.source === "selected") return false;
+		const option = item.option;
+		return getOptionDisabled?.(option) ?? (isTypeaheadOption(option) ? !!option.disabled : false);
+	}, [getOptionDisabled]);
+	const { customCreateInputValue, showCreateOption, showFreeSoloCreateOption, trimmedInputValue } = getTypeaheadCreateState(inputValue, options, selectedValues, getLabel, freeSolo, !!onCreateNew);
+	const hasPopupContent = visibleItems.length > 0 || showCreateOption || emptyState != null || listFooter != null || !hideEmptyList;
+	const popupOpen = open && hasPopupContent;
+	const focusInput = useCallback(() => {
+		requestAnimationFrame(() => internalInputRef.current?.focus());
+	}, []);
+	const emitChange = useCallback((next) => onChange(next), [onChange]);
+	const selectValue = useCallback((selected) => {
+		if (disabled) return;
+		if (multiple) {
+			const selectedKey = getValue(selected);
+			const nextValue = selectedKeys.has(selectedKey) ? selectedValues.filter((item) => getValue(item) !== selectedKey) : [...selectedValues, selected];
+			emitChange(nextValue);
+			setInputValue("");
+			if (disableCloseOnSelect) focusInput();
+			else setOpen(false);
+			return;
+		}
+		emitChange(selected);
+		setInputValue(displaySelectedValueWhenInputEmpty ? "" : getLabel(selected));
+		setOpen(false);
+	}, [
+		disableCloseOnSelect,
+		disabled,
+		emitChange,
+		focusInput,
+		getLabel,
+		getValue,
+		displaySelectedValueWhenInputEmpty,
+		multiple,
+		selectedKeys,
+		selectedValues,
+		setInputValue,
+		setOpen
+	]);
+	const createFreeSoloValue = useCallback(() => {
+		if (!showFreeSoloCreateOption) return;
+		selectValue(trimmedInputValue);
+	}, [
+		selectValue,
+		showFreeSoloCreateOption,
+		trimmedInputValue
+	]);
+	const createCustomValue = useCallback(() => {
+		if (!onCreateNew) return;
+		onCreateNew(customCreateInputValue);
+		setOpen(false);
+	}, [
+		customCreateInputValue,
+		onCreateNew,
+		setOpen
+	]);
+	const removeAtIndex = useCallback((index) => {
+		if (!multiple || disabled || index < 0) return;
+		emitChange(selectedValues.filter((_, i) => i !== index));
+		focusInput();
+	}, [
+		disabled,
+		emitChange,
+		focusInput,
+		multiple,
+		selectedValues
+	]);
+	const clearValue = useCallback(() => {
+		if (disabled || disableClearable) return;
+		if (multiple) emitChange([]);
+		else emitChange(null);
+		setInputValue("");
+		setOpen(false);
+		focusInput();
+	}, [
+		disableClearable,
+		disabled,
+		emitChange,
+		focusInput,
+		multiple,
+		setInputValue,
+		setOpen
+	]);
+	const handleInputValueChange = useCallback((nextValue) => {
+		if (disabled) return;
+		if (clearValueOnInputClear && !multiple && nextValue.length === 0 && selectedValues.length > 0) emitChange(null);
+		setInputValue(nextValue);
+		setOpen(true);
+	}, [
+		clearValueOnInputClear,
+		disabled,
+		emitChange,
+		multiple,
+		selectedValues.length,
+		setInputValue,
+		setOpen
+	]);
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		if (event.key === "Backspace" && multiple && inputValue.length === 0) {
+			removeAtIndex(selectedValues.length - 1);
+			return;
+		}
+		if (event.key === "Enter" && multiple && freeSolo && popupOpen && isActiveOptionSelected(listRef.current, selectedValues, getValue)) {
+			event.preventDefault();
+			if (showFreeSoloCreateOption) createFreeSoloValue();
+			else setInputValue("");
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "Enter") {
+			if (!open && hasPopupContent) {
+				event.preventDefault();
+				setOpen(true);
+			}
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			if (popupOpen) event.preventDefault();
+			setOpen(false);
+		}
+	}, [
+		createFreeSoloValue,
+		disabled,
+		freeSolo,
+		getValue,
+		hasPopupContent,
+		inputValue.length,
+		multiple,
+		onKeyDown,
+		open,
+		popupOpen,
+		removeAtIndex,
+		selectedValues,
+		setInputValue,
+		setOpen,
+		showFreeSoloCreateOption
+	]);
+	const handleBlur = useCallback((event) => {
+		onBlur?.(event);
+		const nextTarget = event.relatedTarget;
+		if (!nextTarget || !event.currentTarget.contains(nextTarget) && !popoverContentRef.current?.contains(nextTarget)) setOpen(false);
+	}, [onBlur, setOpen]);
+	const getTagProps = useCallback(({ index }) => ({
+		key: `${getValue(selectedValues[index])}-${index}`,
+		tabIndex: -1,
+		"data-tag-index": index,
+		onDelete: () => removeAtIndex(index)
+	}), [
+		getValue,
+		removeAtIndex,
+		selectedValues
+	]);
+	const hasValue = selectedValues.length > 0;
+	const showClearButton = !disabled && !disableClearable && (hasValue || !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({
+		autoComplete,
+		commandLabel,
+		inputAriaLabel,
+		inputRef: internalInputRef,
+		inputValue,
+		isError,
+		listId,
+		listRef,
+		multiple,
+		open: popupOpen,
+		resolvedInputId,
+		selectedSummaryId
+	});
+	return /* @__PURE__ */ jsx(TypeaheadView, {
+		root: {
+			ref,
+			props: rest,
+			handleBlur,
+			dataTestId,
+			className
+		},
+		state: {
+			size,
+			disabled,
+			isError,
+			multiple,
+			open: popupOpen,
+			setOpen
+		},
+		ids: {
+			commandLabel,
+			resolvedInputId,
+			listId,
+			selectedSummaryId,
+			inputAriaLabel
+		},
+		input: {
+			value: displayInputValue,
+			onValueChange: handleInputValueChange,
+			onKeyDown: handleKeyDown,
+			placeholder,
+			leftDecorator,
+			showPlaceholderWithValues,
+			autoFocus,
+			autoComplete,
+			setNode: setInputNode,
+			focus: focusInput
+		},
+		selection: {
+			selectedValues,
+			selectedKeys,
+			getTagProps,
+			renderTags,
+			getLabel,
+			getValue,
+			showClearButton,
+			clearValue,
+			forcePopupIcon,
+			selectedSummary
+		},
+		list: {
+			ref: listRef,
+			items: visibleItems,
+			emptyText,
+			emptyState,
+			listFooter,
+			hideEmptyList,
+			optionIsDisabled,
+			selectValue,
+			renderOption
+		},
+		createOption: {
+			show: showCreateOption,
+			inputValue: onCreateNew ? customCreateInputValue : trimmedInputValue,
+			label: createNewLabel?.(customCreateInputValue),
+			onCreate: onCreateNew ? createCustomValue : createFreeSoloValue
+		},
+		popoverContentRef
+	});
+}
+var Typeahead = forwardRef(TypeaheadInner);
+//#endregion
+export { Typeahead };
+
+//# sourceMappingURL=Typeahead.js.map

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

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