@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/SingleSearchableSelect.tsx

@@ -0,0 +1,319 @@
+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 {
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+  ComboboxPositioner,
+  ComboboxEmpty,
+  ComboboxStatus,
+  SearchableSelectTrigger,
+  SearchableSelectTriggerIcon,
+  SearchableSelectPlaceholder,
+  SearchableSelectPopup,
+  SearchableSelectSearchContainer,
+  SearchableSelectInput,
+  SearchableSelectList,
+} from "./Common/ComboboxStyles";
+import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface SingleSearchableSelectBaseProps {
+  id?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  isLoading?: boolean;
+  loadingText?: string;
+}
+
+interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
+  extends SingleSearchableSelectBaseProps {
+  data: T[];
+  itemToString: (item: T | null) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  renderSelection?: (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 SingleSearchableSelectDataProps<T extends DataWithId>
+  extends SingleSearchableSelectDataBaseProps<T> {
+  isVirtualized?: false;
+  groupBy?: (item: T) => string;
+  renderGroupHeading?: (label: string) => React.ReactNode;
+}
+
+interface SingleSearchableSelectVirtualizedProps<T extends DataWithId>
+  extends SingleSearchableSelectDataBaseProps<T> {
+  isVirtualized: true;
+  groupBy?: never;
+  renderGroupHeading?: never;
+}
+
+interface SingleSearchableSelectChildrenProps
+  extends SingleSearchableSelectBaseProps {
+  children: React.ReactNode;
+  selectedItemId?: string | number | null;
+  defaultSelectedItemId?: string | number | null;
+  onSelectedItemIdChange?: (id: string | number | null) => void;
+  data?: never;
+  itemToString?: never;
+  renderItem?: never;
+  renderSelection?: never;
+  inputType?: never;
+  groupBy?: never;
+  renderGroupHeading?: never;
+  isVirtualized?: never;
+}
+
+export type SingleSearchableSelectProps<T extends DataWithId> =
+  | SingleSearchableSelectDataProps<T>
+  | SingleSearchableSelectVirtualizedProps<T>
+  | SingleSearchableSelectChildrenProps;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function SingleSearchableSelect<T extends DataWithId>(
+  props: SingleSearchableSelectProps<T>
+) {
+  const {
+    id,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyText = "No results found.",
+    isLoading = false,
+    loadingText = "Loading...",
+  } = props;
+
+  const isChildrenMode = "children" in props && props.children != null;
+
+  type DataProps =
+    | SingleSearchableSelectDataProps<T>
+    | SingleSearchableSelectVirtualizedProps<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 renderSelection = isChildrenMode
+    ? undefined
+    : (props as DataProps).renderSelection;
+  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 SingleSearchableSelectDataProps<T>).groupBy;
+  const renderGroupHeading = isChildrenMode
+    ? undefined
+    : isVirtualized
+    ? undefined
+    : (props as SingleSearchableSelectDataProps<T>).renderGroupHeading;
+  const children = isChildrenMode
+    ? (props as SingleSearchableSelectChildrenProps).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
+        }
+      >
+        <SearchableSelectTrigger id={id}>
+          <SearchableSelectPlaceholder>
+            <Combobox.Value placeholder={placeholder}>
+              {value
+                ? renderSelection
+                  ? renderSelection(value)
+                  : itemToString(value)
+                : null}
+            </Combobox.Value>
+          </SearchableSelectPlaceholder>
+          <SearchableSelectTriggerIcon>
+            <StyledChevron data-chevron>
+              <ChevronIcon />
+            </StyledChevron>
+          </SearchableSelectTriggerIcon>
+        </SearchableSelectTrigger>
+
+        <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={null}
+                    data={data}
+                    itemToString={itemToString}
+                    inputType={inputType}
+                    renderItem={renderItem}
+                  />
+                ) : 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) : undefined
+                      }
+                    />
+                  )
+                )}
+              </SearchableSelectList>
+            </SearchableSelectPopup>
+          </ComboboxPositioner>
+        </Combobox.Portal>
+      </Combobox.Root>
+    </Field>
+  );
+}

package/src/v3/SingleSelect.stories.tsx

@@ -0,0 +1,227 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import SingleSelect from "./SingleSelect";
+import SelectItem from "./Common/SelectItem";
+import SelectGroup from "./Common/SelectGroup";
+import { books, itemToString, renderItem } from "./storyData";
+
+const meta: Meta<typeof SingleSelect> = {
+  title: "Really Under Development/V3/Single Select",
+  component: SingleSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleSelect>;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const IncludePlaceholderItem: Story = {
+  name: "Include placeholder item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            includePlaceholderItem
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderItem: Story = {
+  name: "Custom render item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Radio: Story = {
+  name: "Radio",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            inputType="radio"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  name: "Grouped",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            groupBy={(book) => book.author}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const DefaultSelected: Story = {
+  name: "Default selected",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            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={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          widows: "300px",
+        }}
+      >
+        <FormField label="Pick a book">
+          {({ id }) => (
+            <SingleSelect
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              renderItem={renderItem}
+              placeholder="Select a book"
+              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 }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select a book"
+            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 Children: Story = {
+  name: "Children API",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect id={id} placeholder="Select a book">
+            <SelectGroup label="Tolstoy" showSeparator>
+              <SelectItem value="book-2" label="War and Peace" />
+              <SelectItem value="book-9" label="Anna Karenina" />
+            </SelectGroup>
+            <SelectGroup label="Dostoevsky" showSeparator>
+              <SelectItem value="book-3" label="The Idiot" />
+              <SelectItem value="book-8" label="The Brothers Karamazov" />
+              <SelectItem value="book-10" label="Crime and Punishment" />
+            </SelectGroup>
+            <SelectGroup label="Other">
+              <SelectItem value="book-1" label="To Kill a Mockingbird" />
+              <SelectItem value="book-5" label="1984" />
+              <SelectItem value="book-7" label="Meditations" />
+            </SelectGroup>
+          </SingleSelect>
+        )}
+      </FormField>
+    </div>
+  ),
+};