@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/MultiSearchableSelect.tsx

@@ -0,0 +1,545 @@
+import * as React from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
+import { useSeedsPortalContainer } from "./SeedsPortal";
+import ComboboxItem from "./Common/ComboboxItem";
+import type { DataWithId } from "./Common/types";
+import { groupItems } from "./Common/groupItems";
+import { Field } from "./Common/SelectStyles";
+import {
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+  ComboboxPositioner,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxGroupHeaderItem,
+  ComboboxGroupHeaderCheckbox,
+  ComboboxSelectAllItem,
+  SearchableSelectTokenTrigger,
+  SearchableSelectPlaceholder,
+  SearchableSelectTriggerIcon,
+  SearchableSelectPopup,
+  SearchableSelectSearchContainer,
+  SearchableSelectInput,
+  SearchableSelectList,
+} from "./Common/ComboboxStyles";
+import { ClearIcon, StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+import styled from "styled-components";
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const SelectionText = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+// ─── Sentinels ────────────────────────────────────────────────────────────────
+
+interface GroupHeaderSentinel {
+  __groupHeader: true;
+  groupName: string;
+}
+
+function makeGroupHeaderSentinel(groupName: string): GroupHeaderSentinel {
+  return { __groupHeader: true, groupName };
+}
+
+function isGroupHeaderSentinel(v: unknown): v is GroupHeaderSentinel {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+
+interface SelectAllSentinel {
+  __selectAll: true;
+}
+
+const SELECT_ALL_SENTINEL: SelectAllSentinel = { __selectAll: true };
+
+function isSelectAllSentinel(v: unknown): v is SelectAllSentinel {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface MultiSearchableSelectBaseProps {
+  id?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  isLoading?: boolean;
+  loadingText?: string;
+}
+
+interface MultiSearchableSelectDataProps<T extends DataWithId>
+  extends MultiSearchableSelectBaseProps {
+  data: T[];
+  itemToString: (item: T) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  customRenderSelections?: (item: T) => string;
+  renderSelection?: (items: T[]) => React.ReactNode;
+  inputType?: "icon" | "checkbox" | "none";
+  maxSelections?: number;
+  selectedItemIds?: Array<T["id"]>;
+  defaultSelectedItemIds?: Array<T["id"]>;
+  onSelectedItemIdsChange?: (ids: Array<T["id"]>) => void;
+  groupBy?: (item: T) => string;
+  renderGroupHeading?: (label: string) => React.ReactNode;
+  selectHeadings?: boolean;
+  selectAll?: boolean;
+  isVirtualized?: boolean;
+  removeSelectedItems?: boolean;
+  children?: never;
+}
+
+interface MultiSearchableSelectChildrenProps
+  extends MultiSearchableSelectBaseProps {
+  children: React.ReactNode;
+  selectedItemIds?: Array<string | number>;
+  defaultSelectedItemIds?: Array<string | number>;
+  onSelectedItemIdsChange?: (ids: Array<string | number>) => void;
+  data?: never;
+  itemToString?: never;
+  renderItem?: never;
+  customRenderSelections?: never;
+  renderSelection?: never;
+  inputType?: never;
+  maxSelections?: never;
+  groupBy?: never;
+  renderGroupHeading?: never;
+  selectHeadings?: never;
+  selectAll?: never;
+  isVirtualized?: never;
+  removeSelectedItems?: never;
+}
+
+export type MultiSearchableSelectProps<T extends DataWithId> =
+  | MultiSearchableSelectDataProps<T>
+  | MultiSearchableSelectChildrenProps;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function MultiSearchableSelect<T extends DataWithId>(
+  props: MultiSearchableSelectProps<T>
+) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading...",
+  } = props;
+
+  const isChildrenMode = "children" in props && props.children != null;
+
+  const data = isChildrenMode
+    ? ([] as T[])
+    : (props as MultiSearchableSelectDataProps<T>).data;
+  const itemToString = isChildrenMode
+    ? (_item: T) => ""
+    : (props as MultiSearchableSelectDataProps<T>).itemToString;
+  const renderItem = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).renderItem;
+  const customRenderSelections = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).customRenderSelections;
+  const maxSelections = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).maxSelections;
+  const renderSelection = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).renderSelection;
+  const removeSelectedItems = isChildrenMode
+    ? false
+    : (props as MultiSearchableSelectDataProps<T>).removeSelectedItems ?? false;
+  const inputType = isChildrenMode
+    ? "checkbox"
+    : removeSelectedItems
+    ? "none"
+    : (props as MultiSearchableSelectDataProps<T>).inputType ?? "checkbox";
+  const groupBy = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).groupBy;
+  const renderGroupHeading = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).renderGroupHeading;
+  const selectHeadings = isChildrenMode
+    ? false
+    : (props as MultiSearchableSelectDataProps<T>).selectHeadings ?? false;
+  const selectAll = isChildrenMode
+    ? false
+    : (props as MultiSearchableSelectDataProps<T>).selectAll ?? false;
+  const isVirtualized = isChildrenMode
+    ? false
+    : (props as MultiSearchableSelectDataProps<T>).isVirtualized ?? false;
+  const children = isChildrenMode
+    ? (props as MultiSearchableSelectChildrenProps).children
+    : undefined;
+
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React.useState(false);
+  const virtualizerRef = React.useRef<ReturnType<
+    typeof useVirtualizer<HTMLDivElement, Element>
+  > | null>(null);
+
+  const isControlled = selectedItemIds !== undefined;
+
+  const idsToItems = React.useCallback(
+    (ids: Array<T["id"]>): T[] =>
+      ids
+        .map((id) => data.find((d) => d.id === id))
+        .filter((d): d is T => d != null),
+    [data]
+  );
+
+  const [internalValue, setInternalValue] = React.useState<T[]>(() =>
+    defaultSelectedItemIds
+      ? idsToItems(defaultSelectedItemIds as Array<T["id"]>)
+      : []
+  );
+
+  const value = isControlled
+    ? idsToItems(selectedItemIds as Array<T["id"]>)
+    : internalValue;
+
+  const visibleData = React.useMemo(
+    () =>
+      removeSelectedItems
+        ? data.filter((item) => !value.some((v) => v.id === item.id))
+        : data,
+    [data, value, removeSelectedItems]
+  );
+
+  const groups = React.useMemo(
+    () => (groupBy ? groupItems(visibleData, groupBy) : null),
+    [visibleData, groupBy]
+  );
+
+  // ─── Sentinel flat list ───────────────────────────────────────────────────
+
+  type FlatRow = T | GroupHeaderSentinel | SelectAllSentinel;
+
+  const flatItems = React.useMemo<FlatRow[] | null>(() => {
+    if (!groups || (!selectHeadings && !selectAll)) return null;
+    const rows: FlatRow[] = [];
+    if (selectAll) rows.push(SELECT_ALL_SENTINEL);
+    for (const group of groups) {
+      rows.push(makeGroupHeaderSentinel(group.value));
+      rows.push(...group.items);
+    }
+    return rows;
+  }, [groups, selectHeadings, selectAll]);
+
+  function setSelectedItems(items: T[]) {
+    if (!isControlled) setInternalValue(items);
+    if (onSelectedItemIdsChange)
+      onSelectedItemIdsChange(items.map((item) => item.id));
+  }
+
+  function handleValueChange(next: FlatRow[]) {
+    const selectAllClicked = next.filter(isSelectAllSentinel);
+    const groupSentinels = next.filter(isGroupHeaderSentinel);
+    const realItems = next.filter(
+      (v): v is T => !isGroupHeaderSentinel(v) && !isSelectAllSentinel(v)
+    );
+
+    if (selectAllClicked.length > 0) {
+      const allSelected = data.every((d) =>
+        realItems.some((s) => s.id === d.id)
+      );
+      setSelectedItems(allSelected ? [] : [...data]);
+      return;
+    }
+
+    if (groupSentinels.length === 0) {
+      setSelectedItems(realItems);
+      return;
+    }
+
+    let updated = [...realItems];
+    for (const sentinel of groupSentinels) {
+      const group = groups?.find((g) => g.value === sentinel.groupName);
+      if (!group) continue;
+      const allSelected = group.items.every((item) =>
+        updated.some((s) => s.id === item.id)
+      );
+      if (allSelected) {
+        updated = updated.filter(
+          (s) => !group.items.some((item) => item.id === s.id)
+        );
+      } else {
+        const missing = group.items.filter(
+          (item) => !updated.some((s) => s.id === item.id)
+        );
+        updated = [...updated, ...missing];
+      }
+    }
+    setSelectedItems(updated);
+  }
+
+  function handleSimpleValueChange(newItems: T[]) {
+    setSelectedItems(newItems);
+  }
+
+  // ─── Render sentinel row ──────────────────────────────────────────────────
+
+  function renderSentinelRow(row: FlatRow) {
+    if (isSelectAllSentinel(row)) {
+      const totalCount = data.length;
+      const selectedCount = value.length;
+      const state: "none" | "partial" | "all" =
+        selectedCount === 0
+          ? "none"
+          : selectedCount === totalCount
+          ? "all"
+          : "partial";
+      return (
+        <ComboboxSelectAllItem key="__selectAll" value={row}>
+          <ComboboxGroupHeaderCheckbox $state={state} id="__selectAll" />
+          Select all
+        </ComboboxSelectAllItem>
+      );
+    }
+
+    if (isGroupHeaderSentinel(row)) {
+      const group = groups?.find((g) => g.value === row.groupName);
+      const groupItemsList = group?.items ?? [];
+      const selectedCount = groupItemsList.filter((item) =>
+        value.some((s) => s.id === item.id)
+      ).length;
+      const state: "none" | "partial" | "all" =
+        selectedCount === 0
+          ? "none"
+          : selectedCount === groupItemsList.length
+          ? "all"
+          : "partial";
+      return (
+        <ComboboxGroupHeaderItem key={`__header-${row.groupName}`} value={row}>
+          <ComboboxGroupHeaderCheckbox
+            $state={state}
+            id={`__header-${row.groupName}`}
+          />
+          {renderGroupHeading
+            ? renderGroupHeading(row.groupName)
+            : row.groupName}
+        </ComboboxGroupHeaderItem>
+      );
+    }
+
+    const item = row as T;
+    return (
+      <ComboboxItem
+        key={item.id}
+        value={item}
+        itemId={String(item.id)}
+        label={itemToString(item)}
+        inputType={inputType}
+        renderItem={
+          renderItem ? () => renderItem(item) : () => itemToString(item)
+        }
+      />
+    );
+  }
+
+  const rootItems =
+    flatItems ?? groups ?? (isChildrenMode ? undefined : visibleData);
+  const hasSentinels = selectAll || selectHeadings;
+  const rootValue = hasSentinels
+    ? ([...value] as FlatRow[])
+    : (value as unknown as T[]);
+
+  return (
+    <Field>
+      <div ref={containerRef} style={{ position: "relative" }} />
+      <Combobox.Root
+        multiple
+        id={id}
+        virtualized={isVirtualized}
+        open={open}
+        onOpenChange={setOpen}
+        onItemHighlighted={
+          isVirtualized
+            ? (item, { reason, index }) => {
+                const virt = virtualizerRef.current;
+                if (!item || !virt) return;
+                const isStart = index === 0;
+                const isEnd = index === virt.options.count - 1;
+                if (
+                  reason === "none" ||
+                  (reason === "keyboard" && (isStart || isEnd))
+                ) {
+                  queueMicrotask(() => {
+                    virt.scrollToIndex(index, {
+                      align: isEnd ? "start" : "end",
+                    });
+                  });
+                }
+              }
+            : undefined
+        }
+        value={rootValue}
+        onValueChange={
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (hasSentinels ? handleValueChange : handleSimpleValueChange) as any
+        }
+        itemToStringLabel={(item: FlatRow | null) => {
+          if (!item || isGroupHeaderSentinel(item) || isSelectAllSentinel(item))
+            return "";
+          return itemToString(item as T);
+        }}
+        isItemEqualToValue={(a: FlatRow, b: FlatRow) => {
+          if (isGroupHeaderSentinel(a) && isGroupHeaderSentinel(b))
+            return a.groupName === b.groupName;
+          if (isSelectAllSentinel(a) && isSelectAllSentinel(b)) return true;
+          if (
+            !isGroupHeaderSentinel(a) &&
+            !isSelectAllSentinel(a) &&
+            !isGroupHeaderSentinel(b) &&
+            !isSelectAllSentinel(b)
+          )
+            return (a as T).id === (b as T).id;
+          return false;
+        }}
+        items={rootItems}
+      >
+        <SearchableSelectTokenTrigger id={id}>
+          {renderSelection ? (
+            renderSelection(value)
+          ) : value.length > 0 ? (
+            (() => {
+              const visibleItems =
+                maxSelections != null ? value.slice(0, maxSelections) : value;
+              const overflowCount =
+                maxSelections != null && value.length > maxSelections
+                  ? value.length - maxSelections
+                  : 0;
+              const text = visibleItems
+                .map((item) =>
+                  customRenderSelections
+                    ? customRenderSelections(item)
+                    : itemToString(item)
+                )
+                .join(", ");
+              return (
+                <SelectionText>
+                  {text}
+                  {overflowCount > 0 ? `, +${overflowCount}` : ""}
+                </SelectionText>
+              );
+            })()
+          ) : (
+            <SearchableSelectPlaceholder>
+              {placeholder}
+            </SearchableSelectPlaceholder>
+          )}
+          <SearchableSelectTriggerIcon style={{ marginLeft: "auto" }}>
+            <StyledChevron data-chevron>
+              <ChevronIcon />
+            </StyledChevron>
+          </SearchableSelectTriggerIcon>
+        </SearchableSelectTokenTrigger>
+
+        <Combobox.Portal container={portalContainer}>
+          <ComboboxPositioner sideOffset={4}>
+            <SearchableSelectPopup
+              aria-busy={isLoading || undefined}
+              style={{ display: "flex", flexDirection: "column" }}
+            >
+              <SearchableSelectSearchContainer>
+                <SearchableSelectInput
+                  placeholder={searchPlaceholder}
+                  autoFocus
+                />
+              </SearchableSelectSearchContainer>
+              <ComboboxStatus>{isLoading ? loadingText : null}</ComboboxStatus>
+              <ComboboxEmpty>{isLoading ? null : emptyText}</ComboboxEmpty>
+              <SearchableSelectList
+                style={
+                  isVirtualized
+                    ? {
+                        padding: 0,
+                        flex: 1,
+                        minHeight: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                      }
+                    : undefined
+                }
+              >
+                {isVirtualized ? (
+                  <VirtualizedComboboxList
+                    open={open}
+                    virtualizerRef={virtualizerRef}
+                    value={value}
+                    groups={groups}
+                    data={visibleData}
+                    itemToString={itemToString}
+                    inputType={inputType}
+                    renderItem={renderItem}
+                    renderGroupHeading={renderGroupHeading}
+                  />
+                ) : children ? (
+                  children
+                ) : flatItems ? (
+                  (row: FlatRow) => renderSentinelRow(row)
+                ) : groups ? (
+                  (group: { value: string; items: T[] }, index: number) => (
+                    <React.Fragment key={group.value}>
+                      <ComboboxGroup items={group.items}>
+                        <ComboboxGroupLabel>
+                          {renderGroupHeading
+                            ? renderGroupHeading(group.value)
+                            : group.value}
+                        </ComboboxGroupLabel>
+                        <Combobox.Collection>
+                          {(item: T) => (
+                            <ComboboxItem
+                              key={item.id}
+                              value={item}
+                              itemId={String(item.id)}
+                              label={itemToString(item)}
+                              inputType={inputType}
+                              renderItem={
+                                renderItem
+                                  ? () => renderItem(item)
+                                  : () => itemToString(item)
+                              }
+                            />
+                          )}
+                        </Combobox.Collection>
+                      </ComboboxGroup>
+                      {index < groups.length - 1 && <ComboboxSeparator />}
+                    </React.Fragment>
+                  )
+                ) : (
+                  (item: T) => (
+                    <ComboboxItem
+                      key={item.id}
+                      value={item}
+                      itemId={String(item.id)}
+                      label={itemToString(item)}
+                      inputType={inputType}
+                      renderItem={
+                        renderItem
+                          ? () => renderItem(item)
+                          : () => itemToString(item)
+                      }
+                    />
+                  )
+                )}
+              </SearchableSelectList>
+            </SearchableSelectPopup>
+          </ComboboxPositioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </Field>
+  );
+}