@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/SingleSelect.tsx

@@ -0,0 +1,245 @@
+import * as React from "react";
+import { Select } from "@base-ui/react/select";
+import styled from "styled-components";
+import { useSeedsPortalContainer } from "./SeedsPortal";
+import SelectItem from "./Common/SelectItem";
+import type { DataWithId } from "./Common/types";
+import { groupItems } from "./Common/groupItems";
+import {
+  Field,
+  SelectTrigger,
+  SelectIcon,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectSeparator,
+  SelectPositioner,
+  SelectPopup,
+} from "./Common/SelectStyles";
+import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+
+// <Listbox(?!\.|B)
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const StyledValue = styled(Select.Value)`
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-placeholder] {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface SingleSelectBaseProps {
+  id?: string;
+  placeholder?: string;
+  includePlaceholderItem?: boolean;
+}
+
+interface SingleSelectDataProps<T extends DataWithId>
+  extends SingleSelectBaseProps {
+  data: T[];
+  itemToString: (item: T | null) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  inputType?: "icon" | "radio";
+  selectedItemId?: T["id"] | null;
+  defaultSelectedItemId?: T["id"] | null;
+  onSelectedItemIdChange?: (id: T["id"] | null) => void;
+  renderSelection?: (item: T) => React.ReactNode;
+  groupBy?: (item: T) => string;
+  renderGroupHeading?: (label: string) => React.ReactNode;
+  children?: never;
+}
+
+interface SingleSelectChildrenProps extends SingleSelectBaseProps {
+  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;
+  renderSelection?: never;
+  groupBy?: never;
+  renderGroupHeading?: never;
+}
+
+export type SingleSelectProps<T extends DataWithId> =
+  | SingleSelectDataProps<T>
+  | SingleSelectChildrenProps;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function SingleSelect<T extends DataWithId>(
+  props: SingleSelectProps<T>
+) {
+  const { id, placeholder, includePlaceholderItem } = props;
+
+  const isChildrenMode = "children" in props && props.children != null;
+
+  const selectedItemId = props.selectedItemId;
+  const defaultSelectedItemId = props.defaultSelectedItemId;
+  const onSelectedItemIdChange = props.onSelectedItemIdChange;
+
+  const data = isChildrenMode ? [] : (props as SingleSelectDataProps<T>).data;
+  const itemToString = isChildrenMode
+    ? () => ""
+    : (props as SingleSelectDataProps<T>).itemToString;
+  const renderItem = isChildrenMode
+    ? undefined
+    : (props as SingleSelectDataProps<T>).renderItem;
+  const inputType = isChildrenMode
+    ? "icon"
+    : (props as SingleSelectDataProps<T>).inputType ?? "icon";
+  const renderSelection = isChildrenMode
+    ? undefined
+    : (props as SingleSelectDataProps<T>).renderSelection;
+  const groupBy = isChildrenMode
+    ? undefined
+    : (props as SingleSelectDataProps<T>).groupBy;
+  const renderGroupHeading = isChildrenMode
+    ? undefined
+    : (props as SingleSelectDataProps<T>).renderGroupHeading;
+  const children = isChildrenMode
+    ? (props as SingleSelectChildrenProps).children
+    : undefined;
+
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  const items = React.useMemo(() => {
+    const dataItems = data.map((item) => ({
+      value: String(item.id),
+      label: itemToString(item),
+    }));
+    if (includePlaceholderItem) {
+      return [{ value: null, label: placeholder ?? "" }, ...dataItems];
+    }
+    return dataItems;
+  }, [data, itemToString, includePlaceholderItem, placeholder]);
+
+  const dataWithPlaceholder = includePlaceholderItem
+    ? [{ id: null, value: null, label: placeholder ?? "" }, ...data]
+    : data;
+
+  const isControlled = selectedItemId !== undefined;
+  const [internalValue, setInternalValue] = React.useState<string | null>(
+    defaultSelectedItemId != null ? String(defaultSelectedItemId) : null
+  );
+  const value = isControlled
+    ? selectedItemId != null
+      ? String(selectedItemId)
+      : null
+    : internalValue;
+
+  const selectedItem = React.useMemo(
+    () =>
+      value != null ? data.find((d) => String(d.id) === value) ?? null : null,
+    [data, value]
+  );
+
+  function handleValueChange(newValue: string | null) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (onSelectedItemIdChange) {
+      if (newValue == null) {
+        onSelectedItemIdChange(null);
+      } else {
+        const item = data.find((d) => String(d.id) === newValue);
+        onSelectedItemIdChange(item ? item.id : null);
+      }
+    }
+  }
+
+  return (
+    <Field>
+      <div ref={containerRef} style={{ position: "relative" }} />
+      <Select.Root
+        items={items}
+        value={value}
+        onValueChange={handleValueChange}
+        id={id}
+      >
+        <SelectTrigger>
+          <StyledValue placeholder={placeholder}>
+            {renderSelection && selectedItem
+              ? renderSelection(selectedItem)
+              : undefined}
+          </StyledValue>
+          <SelectIcon>
+            <StyledChevron data-chevron>
+              <ChevronIcon />
+            </StyledChevron>
+          </SelectIcon>
+        </SelectTrigger>
+        <Select.Portal container={portalContainer}>
+          <SelectPositioner sideOffset={8} alignItemWithTrigger={false}>
+            <SelectPopup>
+              <Select.ScrollUpArrow />
+              <Select.List>
+                {children ? (
+                  children
+                ) : groupBy ? (
+                  groupItems(data, groupBy).map((group, index, arr) => (
+                    <React.Fragment key={group.value}>
+                      <SelectGroup>
+                        <SelectGroupLabel>
+                          {renderGroupHeading
+                            ? renderGroupHeading(group.value)
+                            : group.value}
+                        </SelectGroupLabel>
+                        {group.items.map((item) => (
+                          <SelectItem
+                            key={item.id}
+                            value={String(item.id)}
+                            label={itemToString(item)}
+                            inputType={inputType}
+                            renderItem={
+                              renderItem
+                                ? () => renderItem(item)
+                                : () => itemToString(item)
+                            }
+                          />
+                        ))}
+                      </SelectGroup>
+                      {index < arr.length - 1 && <SelectSeparator />}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  // TODO: need to add a placeholder item when includePlaceholderItem is true
+                  <>
+                    {includePlaceholderItem && (
+                      <SelectItem
+                        key={"placeholder"}
+                        value={null}
+                        label={placeholder ?? ""}
+                      />
+                    )}
+                    {data.map((item) => (
+                      <SelectItem
+                        key={item.id}
+                        value={String(item.id)}
+                        label={itemToString(item)}
+                        inputType={inputType}
+                        renderItem={
+                          renderItem
+                            ? () => renderItem(item)
+                            : () => itemToString(item)
+                        }
+                      />
+                    ))}
+                  </>
+                )}
+              </Select.List>
+              <Select.ScrollDownArrow />
+            </SelectPopup>
+          </SelectPositioner>
+        </Select.Portal>
+      </Select.Root>
+    </Field>
+  );
+}

package/src/v3/index.ts

@@ -0,0 +1,7 @@
+export * from "./SingleSelect";
+export * from "./MultiSelect";
+export * from "./SingleCombobox";
+export * from "./MultiCombobox";
+export * from "./SingleSearchableSelect";
+export * from "./MultiSearchableSelect";
+export * from "./Common/ComboboxStyles";

package/src/v3/storyData.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+
+export interface Book {
+  id: string;
+  title: string;
+  author: string;
+}
+
+export const books: Book[] = [
+  { id: "book-1", title: "To Kill a Mockingbird", author: "Harper Lee" },
+  { id: "book-2", title: "War and Peace", author: "Lev Tolstoy" },
+  { id: "book-3", title: "The Idiot", author: "Fyodor Dostoevsky" },
+  { id: "book-4", title: "A Picture of Dorian Gray", author: "Oscar Wilde" },
+  { id: "book-5", title: "1984", author: "George Orwell" },
+  { id: "book-6", title: "Pride and Prejudice", author: "Jane Austen" },
+  { id: "book-7", title: "Meditations", author: "Marcus Aurelius" },
+  {
+    id: "book-8",
+    title: "The Brothers Karamazov",
+    author: "Fyodor Dostoevsky",
+  },
+  { id: "book-9", title: "Anna Karenina", author: "Lev Tolstoy" },
+  { id: "book-10", title: "Crime and Punishment", author: "Fyodor Dostoevsky" },
+];
+
+// Generate 1000 books for virtualization testing
+const generateBooks = (count: number): Book[] => {
+  const authors = [
+    "Harper Lee",
+    "Lev Tolstoy",
+    "Fyodor Dostoevsky",
+    "Oscar Wilde",
+    "George Orwell",
+    "Jane Austen",
+    "Marcus Aurelius",
+    "Ernest Hemingway",
+    "Virginia Woolf",
+    "James Joyce",
+    "Charles Dickens",
+    "Mark Twain",
+    "J.R.R. Tolkien",
+    "C.S. Lewis",
+    "Agatha Christie",
+    "Arthur Conan Doyle",
+    "J.K. Rowling",
+    "Stephen King",
+    "Isaac Asimov",
+    "Ray Bradbury",
+    "Aldous Huxley",
+    "Kurt Vonnegut",
+    "J.D. Salinger",
+    "Maya Angelou",
+    "Toni Morrison",
+    "Gabriel García Márquez",
+    "Milan Kundera",
+    "Umberto Eco",
+    "Haruki Murakami",
+    "Chimamanda Ngozi Adichie",
+  ];
+
+  const titleWords = [
+    "Adventures",
+    "Chronicles",
+    "Memories",
+    "Journey",
+    "Quest",
+    "Tales",
+    "Stories",
+    "Legends",
+    "Myths",
+    "Dreams",
+    "Visions",
+    "Revelations",
+    "Secrets",
+    "Mysteries",
+    "Shadows",
+    "Light",
+    "Darkness",
+    "Echoes",
+    "Whispers",
+    "Voices",
+    "Songs",
+    "Poems",
+  ];
+
+  const books: Book[] = [];
+  for (let i = 0; i < count; i++) {
+    const author = authors[i % authors.length];
+    const titleWord1 =
+      titleWords[Math.floor(Math.random() * titleWords.length)];
+    const titleWord2 =
+      titleWords[Math.floor(Math.random() * titleWords.length)];
+    const number = Math.floor(i / authors.length) + 1;
+    const title = `${titleWord1} of ${titleWord2} ${number}`;
+
+    books.push({
+      id: `book-${i + 1}`,
+      author,
+      title,
+    });
+  }
+
+  return books;
+};
+
+export const largeBookSet = generateBooks(1000);
+
+export const itemToString = (item: Book | null) => item?.title ?? "";
+
+export const renderItem = (item: Book) => (
+  <>
+    <span style={{ fontWeight: "bold" }}>{item.title}</span>
+    <span style={{ fontSize: "12px", color: "#666", marginLeft: "8px" }}>
+      by {item.author}
+    </span>
+  </>
+);

package/tsup.config.ts

@@ -4,6 +4,7 @@ export default defineConfig((options) => ({
   entry: {
     index: "src/index.ts",
     "v2/index": "src/v2/index.ts",
+    "v3/index": "src/v3/index.ts",
   },
   format: ["cjs", "esm"],
   clean: true,