@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/SingleCombobox.tsx

@@ -0,0 +1,304 @@
+import * as React from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useSeedsPortalContainer } from "./SeedsPortal";
+import ComboboxItem from "./Common/ComboboxItem";
+import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
+import type { DataWithId } from "./Common/types";
+import { groupItems } from "./Common/groupItems";
+import { Field } from "./Common/SelectStyles";
+import {
+  ComboboxInputGroup,
+  ComboboxInput,
+  ComboboxActionButtons,
+  ComboboxClear,
+  ComboboxTrigger,
+  ComboboxPositioner,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+} from "./Common/ComboboxStyles";
+import { ClearIcon, StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface SingleComboboxBaseProps {
+  id?: string;
+  placeholder?: string;
+  emptyText?: string;
+}
+
+interface SingleComboboxDataBaseProps<T extends DataWithId>
+  extends SingleComboboxBaseProps {
+  data: T[];
+  itemToString: (item: T | null) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  inputType?: "icon" | "radio" | "checkbox" | "none";
+  selectedItemId?: T["id"] | null;
+  defaultSelectedItemId?: T["id"] | null;
+  onSelectedItemIdChange?: (id: T["id"] | null) => void;
+  children?: never;
+}
+
+interface SingleComboboxDataProps<T extends DataWithId>
+  extends SingleComboboxDataBaseProps<T> {
+  isVirtualized?: false;
+  groupBy?: (item: T) => string;
+  renderGroupHeading?: (label: string) => React.ReactNode;
+}
+
+interface SingleComboboxVirtualizedProps<T extends DataWithId>
+  extends SingleComboboxDataBaseProps<T> {
+  isVirtualized: true;
+  groupBy?: never;
+  renderGroupHeading?: never;
+}
+
+interface SingleComboboxChildrenProps extends SingleComboboxBaseProps {
+  children: React.ReactNode;
+  selectedItemId?: string | number | null;
+  defaultSelectedItemId?: string | number | null;
+  onSelectedItemIdChange?: (id: string | number | null) => void;
+  data?: never;
+  itemToString?: never;
+  renderItem?: never;
+  inputType?: never;
+  groupBy?: never;
+  renderGroupHeading?: never;
+  isVirtualized?: never;
+}
+
+export type SingleComboboxProps<T extends DataWithId> =
+  | SingleComboboxDataProps<T>
+  | SingleComboboxVirtualizedProps<T>
+  | SingleComboboxChildrenProps;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function SingleCombobox<T extends DataWithId>(
+  props: SingleComboboxProps<T>
+) {
+  const {
+    id,
+    placeholder = "Search...",
+    emptyText = "No results found.",
+  } = props;
+
+  const isChildrenMode = "children" in props && props.children != null;
+
+  type DataProps =
+    | SingleComboboxDataProps<T>
+    | SingleComboboxVirtualizedProps<T>;
+
+  const data = isChildrenMode ? ([] as T[]) : (props as DataProps).data;
+  const itemToString = isChildrenMode
+    ? (_item: T | null) => ""
+    : (props as DataProps).itemToString;
+  const renderItem = isChildrenMode
+    ? undefined
+    : (props as DataProps).renderItem;
+  const inputType = isChildrenMode
+    ? "icon"
+    : (props as DataProps).inputType ?? "icon";
+  const isVirtualized = isChildrenMode
+    ? false
+    : (props as DataProps).isVirtualized ?? false;
+  const groupBy = isChildrenMode
+    ? undefined
+    : isVirtualized
+    ? undefined
+    : (props as SingleComboboxDataProps<T>).groupBy;
+  const renderGroupHeading = isChildrenMode
+    ? undefined
+    : isVirtualized
+    ? undefined
+    : (props as SingleComboboxDataProps<T>).renderGroupHeading;
+  const children = isChildrenMode
+    ? (props as SingleComboboxChildrenProps).children
+    : undefined;
+
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const [open, setOpen] = React.useState(false);
+  const virtualizerRef = React.useRef<ReturnType<
+    typeof useVirtualizer<HTMLDivElement, Element>
+  > | null>(null);
+
+  const isControlled = selectedItemId !== undefined;
+
+  const idToItem = React.useCallback(
+    (id: T["id"] | null | undefined): T | null => {
+      if (id == null) return null;
+      return data.find((d) => String(d.id) === String(id)) ?? null;
+    },
+    [data]
+  );
+
+  const [internalValue, setInternalValue] = React.useState<T | null>(() =>
+    idToItem(defaultSelectedItemId as T["id"] | null)
+  );
+
+  const value = isControlled
+    ? idToItem(selectedItemId as T["id"] | null)
+    : internalValue;
+
+  function handleValueChange(newItem: T | null) {
+    if (!isControlled) {
+      setInternalValue(newItem);
+    }
+    if (onSelectedItemIdChange) {
+      onSelectedItemIdChange(newItem ? newItem.id : null);
+    }
+  }
+
+  const groups = React.useMemo(
+    () => (groupBy ? groupItems(data, groupBy) : null),
+    [data, groupBy]
+  );
+
+  return (
+    <Field>
+      <div ref={containerRef} style={{ position: "relative" }} />
+      <Combobox.Root
+        id={id}
+        value={value}
+        onValueChange={handleValueChange}
+        itemToStringLabel={itemToString}
+        isItemEqualToValue={(a, b) => a != null && b != null && a.id === b.id}
+        items={
+          isVirtualized ? data : groups ?? (isChildrenMode ? undefined : data)
+        }
+        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
+        }
+      >
+        <ComboboxInputGroup>
+          <ComboboxInput placeholder={placeholder} id={id} />
+          <ComboboxActionButtons>
+            <ComboboxClear aria-label="Clear selection">
+              <ClearIcon />
+            </ComboboxClear>
+            <ComboboxTrigger aria-label="Open popup">
+              <StyledChevron $isOpen={open}>
+                <ChevronIcon />
+              </StyledChevron>
+            </ComboboxTrigger>
+          </ComboboxActionButtons>
+        </ComboboxInputGroup>
+
+        <Combobox.Portal container={portalContainer}>
+          <ComboboxPositioner sideOffset={4}>
+            <ComboboxPopup
+              style={
+                isVirtualized
+                  ? { display: "flex", flexDirection: "column" }
+                  : undefined
+              }
+            >
+              <ComboboxEmpty>{emptyText}</ComboboxEmpty>
+              <ComboboxList
+                style={
+                  isVirtualized
+                    ? {
+                        padding: 0,
+                        flex: 1,
+                        minHeight: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                      }
+                    : undefined
+                }
+              >
+                {isVirtualized ? (
+                  <VirtualizedComboboxList
+                    open={open}
+                    virtualizerRef={virtualizerRef}
+                    value={value}
+                    groups={groups}
+                    data={data}
+                    itemToString={itemToString}
+                    inputType={inputType}
+                    renderItem={renderItem}
+                    renderGroupHeading={renderGroupHeading}
+                  />
+                ) : children ? (
+                  children
+                ) : 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)
+                      }
+                    />
+                  )
+                )}
+              </ComboboxList>
+            </ComboboxPopup>
+          </ComboboxPositioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </Field>
+  );
+}

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -0,0 +1,239 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import SingleSearchableSelect from "./SingleSearchableSelect";
+import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+
+const meta: Meta<typeof SingleSearchableSelect> = {
+  title: "Really Under Development/V3/Single Searchable Select",
+  component: SingleSearchableSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleSearchableSelect>;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderItem: Story = {
+  name: "Custom render item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  name: "Grouped",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const DefaultSelected: Story = {
+  name: "Default selected",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            defaultSelectedItemId="book-3"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  name: "Controlled",
+  render: () => {
+    const [selectedId, setSelectedId] = React.useState<string | null>("book-1");
+    const selected = books.find((b) => b.id === selectedId);
+    return (
+      <div
+        style={{
+          width: "300px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <FormField label="Pick a book">
+          {({ id }) => (
+            <SingleSearchableSelect
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              renderItem={renderItem}
+              placeholder="Select a book"
+              searchPlaceholder="Search books..."
+              selectedItemId={selectedId}
+              onSelectedItemIdChange={(id: string | null) => setSelectedId(id)}
+            />
+          )}
+        </FormField>
+        <div style={{ fontSize: 13 }}>
+          Selected: <strong>{selected?.title ?? "none"}</strong>
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button onClick={() => setSelectedId(null)}>Clear</button>
+          <button onClick={() => setSelectedId("book-5")}>Select 1984</button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CustomSelection: Story = {
+  name: "Custom renderSelection",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            renderSelection={(item) => (
+              <span>
+                <span style={{ fontWeight: "bold" }}>{item.title}</span>
+                <span
+                  style={{ fontSize: "11px", color: "#888", marginLeft: "6px" }}
+                >
+                  by {item.author}
+                </span>
+              </span>
+            )}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Virtualized: Story = {
+  name: "Virtualized",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            isVirtualized
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  name: "Loading",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={[]}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            isLoading
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const LoadingWithToggle: Story = {
+  name: "Loading (toggle)",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(true);
+    const data = isLoading ? [] : books;
+    return (
+      <div
+        style={{
+          width: "300px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <FormField label="Pick a book">
+          {({ id }) => (
+            <SingleSearchableSelect
+              id={id}
+              data={data}
+              itemToString={itemToString}
+              placeholder="Select a book"
+              searchPlaceholder="Search books..."
+              isLoading={isLoading}
+            />
+          )}
+        </FormField>
+        <button onClick={() => setIsLoading((v) => !v)}>
+          {isLoading ? "Finish loading" : "Set loading"}
+        </button>
+      </div>
+    );
+  },
+};