@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/MultiSelect.tsx

@@ -0,0 +1,498 @@
+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,
+  SelectValue,
+  SelectIcon,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectSeparator,
+  SelectPositioner,
+  SelectPopup,
+} from "./Common/SelectStyles";
+import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const SelectionText = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+// The styles in here need cleaned up, but in MultiSearchableSelect are correct
+const Placeholder = styled.div`
+  color: ${({ theme }) => theme.colors.text.subtext};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: 16px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: 2px 8px 0px 0px;
+`;
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface MultiSelectBaseProps {
+  id?: string;
+  placeholder?: string;
+}
+
+interface MultiSelectDataProps<T extends DataWithId>
+  extends MultiSelectBaseProps {
+  data: T[];
+  itemToString: (item: T) => string;
+  renderItem?: (item: T) => React.ReactNode;
+  customRenderSelections?: (item: T) => string;
+  renderSelection?: (items: T[]) => React.ReactNode;
+  inputType?: "icon" | "radio" | "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;
+  removeSelectedItems?: boolean;
+  children?: never;
+}
+
+interface MultiSelectChildrenProps extends MultiSelectBaseProps {
+  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;
+  removeSelectedItems?: never;
+}
+
+/*
+'use client';
+import * as React from 'react';
+import { Combobox } from '@base-ui/react/combobox';
+
+export default function ExampleAsyncMultipleCombobox() {
+  const id = React.useId();
+
+  const [searchResults, setSearchResults] = React.useState<DirectoryUser[]>([]);
+  const [selectedValues, setSelectedValues] = React.useState<DirectoryUser[]>([]);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+  const [blockStartStatus, setBlockStartStatus] = React.useState(false);
+
+  const [isPending, startTransition] = React.useTransition();
+
+  const { contains } = Combobox.useFilter();
+
+  const abortControllerRef = React.useRef<AbortController | null>(null);
+  const selectedValuesRef = React.useRef<DirectoryUser[]>([]);
+
+  const trimmedSearchValue = searchValue.trim();
+
+  const items = React.useMemo(() => {
+    if (selectedValues.length === 0) {
+      return searchResults;
+    }
+
+    const merged = [...searchResults];
+
+    selectedValues.forEach((user) => {
+      if (!searchResults.some((result) => result.id === user.id)) {
+        merged.push(user);
+      }
+    });
+
+    return merged;
+  }, [searchResults, selectedValues]);
+
+  function getStatus() {
+    if (isPending) {
+      return (
+        <React.Fragment>
+          <span
+            aria-hidden
+            className="inline-block size-3 animate-[spin_0.75s_linear_infinite] rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
+          />
+          Searching…
+        </React.Fragment>
+      );
+    }
+
+    if (error) {
+      return error;
+    }
+
+    if (trimmedSearchValue === '' && !blockStartStatus) {
+      return selectedValues.length > 0 ? null : 'Start typing to search people…';
+    }
+
+    if (searchResults.length === 0 && !blockStartStatus) {
+      return `No matches for "${trimmedSearchValue}".`;
+    }
+
+    return null;
+  }
+
+  function getEmptyMessage() {
+    if (trimmedSearchValue === '' || isPending || searchResults.length > 0 || error) {
+      return null;
+    }
+
+    return 'Try a different search term.';
+  }
+
+  const status = getStatus();
+  const emptyMessage = getEmptyMessage();
+
+  return (
+    <Combobox.Root
+      items={items}
+      itemToStringLabel={(user: DirectoryUser) => user.name}
+      multiple
+      filter={null}
+      onOpenChangeComplete={(open) => {
+        if (!open) {
+          setSearchResults(selectedValuesRef.current);
+          setBlockStartStatus(false);
+        }
+      }}
+      onValueChange={(nextSelectedValues) => {
+        selectedValuesRef.current = nextSelectedValues;
+        setSelectedValues(nextSelectedValues);
+        setSearchValue('');
+        setError(null);
+
+        if (nextSelectedValues.length === 0) {
+          setSearchResults([]);
+          setBlockStartStatus(false);
+        } else {
+          setBlockStartStatus(true);
+        }
+      }}
+      onInputValueChange={(nextSearchValue, { reason }) => {
+        setSearchValue(nextSearchValue);
+
+        const controller = new AbortController();
+        abortControllerRef.current?.abort();
+        abortControllerRef.current = controller;
+
+        if (nextSearchValue === '') {
+          setSearchResults(selectedValuesRef.current);
+          setError(null);
+          setBlockStartStatus(false);
+          return;
+        }
+
+        if (reason === 'item-press') {
+          return;
+        }
+        startTransition(async () => {
+          setError(null);
+
+          const result = await searchUsers(nextSearchValue, contains);
+
+          if (controller.signal.aborted) {
+            return;
+          }
+
+          startTransition(() => {
+            setSearchResults(result.users);
+            setError(result.error);
+          });
+        });
+      }}
+    >
+      <div className="flex flex-col gap-1 text-sm text-gray-900">
+        <label className="inline-flex text-inherit font-bold" htmlFor={id}>
+          Assign reviewers
+        </label>
+        <Combobox.InputGroup className="relative flex min-h-10 w-[16rem] cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem]">
+          <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
+            <Combobox.Value>
+              {(value: DirectoryUser[]) => (
+                <React.Fragment>
+                  {value.map((user) => (
+                    <Combobox.Chip
+                      key={user.id}
+                      className="flex cursor-default items-center gap-1 rounded-md bg-gray-100 py-1 pl-2 pr-1 text-sm text-gray-900 outline-none focus-within:bg-blue-800 focus-within:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50"
+                      aria-label={user.name}
+                    >
+                      {user.name}
+                      <Combobox.ChipRemove
+                        className="inline-flex items-center justify-center rounded-md border-none bg-transparent p-[0.2rem] text-inherit hover:bg-gray-200"
+                        aria-label={`Remove ${user.name}`}
+                      >
+                        <XIcon />
+                      </Combobox.ChipRemove>
+                    </Combobox.Chip>
+                  ))}
+                  <Combobox.Input
+                    id={id}
+                    placeholder={value.length > 0 ? '' : 'e.g. Michael'}
+                    className="h-8 min-w-24 flex-1 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none placeholder:font-normal"
+                  />
+                </React.Fragment>
+              )}
+            </Combobox.Value>
+          </Combobox.Chips>
+        </Combobox.InputGroup>
+      </div>
+
+      <Combobox.Portal>
+        <Combobox.Positioner className="outline-none" sideOffset={4}>
+          <Combobox.Popup
+            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-[0_10px_15px_-3px_var(--color-gray-200),0_4px_6px_-4px_var(--color-gray-200)] outline outline-1 outline-gray-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-gray-300"
+            aria-busy={isPending || undefined}
+          >
+            <Combobox.Status>
+              {status ? (
+                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-gray-600">
+                  {status}
+                </div>
+              ) : null}
+            </Combobox.Status>
+            <Combobox.Empty>
+              {emptyMessage ? (
+                <div className="box-border px-4 py-2 text-sm leading-4 text-gray-600">
+                  {emptyMessage}
+                </div>
+              ) : null}
+            </Combobox.Empty>
+            <Combobox.List>
+              {(user: DirectoryUser) => (
+                <Combobox.Item
+                  key={user.id}
+                  value={user}
+                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
+                >
+                  <Combobox.ItemIndicator className="col-start-1 mt-1">
+                    <CheckIcon className="size-3" />
+                  </Combobox.ItemIndicator>
+                  <span className="col-start-2 flex flex-col gap-1">
+                    <span className="text-[0.95rem] font-bold">{user.name}</span>
+                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-gray-600">
+                      <span className="opacity-80">@{user.username}</span>
+                      <span>{user.title}</span>
+                    </span>
+                    <span className="text-xs text-gray-500">{user.email}</span>
+                  </span>
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Popup>
+        </Combobox.Positioner>
+      </Combobox.Portal>
+    </Combobox.Root>
+*/
+
+export type MultiSelectProps<T extends DataWithId> =
+  | MultiSelectDataProps<T>
+  | MultiSelectChildrenProps;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function MultiSelect<T extends DataWithId>(
+  props: MultiSelectProps<T>
+) {
+  const { id, placeholder = "Select..." } = props;
+
+  const isChildrenMode = "children" in props && props.children != null;
+
+  const data = isChildrenMode ? [] : (props as MultiSelectDataProps<T>).data;
+  const itemToString = isChildrenMode
+    ? () => ""
+    : (props as MultiSelectDataProps<T>).itemToString;
+  const renderItem = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).renderItem;
+  const customRenderSelections = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).customRenderSelections;
+  const maxSelections = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).maxSelections;
+  const renderSelection = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).renderSelection;
+  const removeSelectedItems = isChildrenMode
+    ? false
+    : (props as MultiSelectDataProps<T>).removeSelectedItems ?? false;
+  const inputType = isChildrenMode
+    ? "checkbox"
+    : removeSelectedItems
+    ? "none"
+    : (props as MultiSelectDataProps<T>).inputType ?? "checkbox";
+  const selectedItemIds = props.selectedItemIds;
+  const defaultSelectedItemIds = props.defaultSelectedItemIds;
+  const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
+  const groupBy = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).groupBy;
+  const renderGroupHeading = isChildrenMode
+    ? undefined
+    : (props as MultiSelectDataProps<T>).renderGroupHeading;
+  const children = isChildrenMode
+    ? (props as MultiSelectChildrenProps).children
+    : undefined;
+
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+
+  const isControlled = selectedItemIds !== undefined;
+
+  const [internalValue, setInternalValue] = React.useState<string[]>(
+    () => defaultSelectedItemIds?.map(String) ?? []
+  );
+
+  const value = isControlled ? selectedItemIds!.map(String) : internalValue;
+
+  const items = React.useMemo(
+    () =>
+      data.map((item) => ({
+        value: String(item.id),
+        label: itemToString(item),
+      })),
+    [data, itemToString]
+  );
+
+  const selectedItems = React.useMemo(
+    () =>
+      value
+        .map((v) => data.find((d) => String(d.id) === v))
+        .filter((d): d is T => d != null),
+    [data, value]
+  );
+
+  function handleValueChange(newValues: string[]) {
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+    if (onSelectedItemIdsChange) {
+      const ids = newValues.map((v) => {
+        const item = data.find((d) => String(d.id) === v);
+        return item ? item.id : v;
+      });
+      onSelectedItemIdsChange(ids as Array<T["id"]>);
+    }
+  }
+
+  return (
+    <Field>
+      <div ref={containerRef} style={{ position: "relative" }} />
+      <Select.Root
+        multiple
+        items={items}
+        value={value}
+        onValueChange={handleValueChange}
+        id={id}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            {() => {
+              if (renderSelection) return renderSelection(selectedItems);
+              if (selectedItems.length === 0)
+                return <Placeholder>{placeholder}</Placeholder>;
+
+              const visibleItems =
+                maxSelections != null
+                  ? selectedItems.slice(0, maxSelections)
+                  : selectedItems;
+              const overflowCount =
+                maxSelections != null && selectedItems.length > maxSelections
+                  ? selectedItems.length - maxSelections
+                  : 0;
+
+              const text = visibleItems
+                .map((item) =>
+                  customRenderSelections
+                    ? customRenderSelections(item)
+                    : itemToString(item)
+                )
+                .join(", ");
+
+              return (
+                <SelectionText>
+                  {text}
+                  {overflowCount > 0 ? `, +${overflowCount}` : ""}
+                </SelectionText>
+              );
+            }}
+          </SelectValue>
+          <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}
+                              hidden={
+                                removeSelectedItems &&
+                                value.includes(String(item.id))
+                              }
+                              renderItem={
+                                renderItem ? () => renderItem(item) : undefined
+                              }
+                            />
+                          ))}
+                        </SelectGroup>
+                        {index < arr.length - 1 && <SelectSeparator />}
+                      </React.Fragment>
+                    ))
+                  : data.map((item) => (
+                      <SelectItem
+                        key={item.id}
+                        value={String(item.id)}
+                        label={itemToString(item)}
+                        inputType={inputType}
+                        hidden={
+                          removeSelectedItems && value.includes(String(item.id))
+                        }
+                        renderItem={
+                          renderItem
+                            ? () => renderItem(item)
+                            : () => itemToString(item)
+                        }
+                      />
+                    ))}
+              </Select.List>
+              <Select.ScrollDownArrow />
+            </SelectPopup>
+          </SelectPositioner>
+        </Select.Portal>
+      </Select.Root>
+    </Field>
+  );
+}

package/src/v3/SeedsPortal.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
+
+/**
+ * Returns the portal container to use for Base UI's Select.Portal /
+ * Combobox.Portal. When inside a Modal V2 or Drawer (which set
+ * DisablePortalToBodyContext=true), returns a ref'd div rendered inline so
+ * the popup stays inside the Radix Dialog's focus/pointer boundary.
+ * Otherwise returns undefined, letting Base UI portal to document.body.
+ *
+ * Usage:
+ *   const { containerRef, portalContainer } = useSeedsPortalContainer();
+ *   <div ref={containerRef} style={{ position: "relative" }} />
+ *   <Select.Portal container={portalContainer}>...</Select.Portal>
+ */
+export function useSeedsPortalContainer() {
+  const disablePortalToBody = React.useContext(DisablePortalToBodyContext);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [portalContainer, setPortalContainer] = React.useState<
+    HTMLElement | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    if (disablePortalToBody && containerRef.current) {
+      // Portal to the Radix Dialog content element so the popup escapes the
+      // ModalBody scroll container while staying inside the Dialog boundary
+      // (required for Radix focus/pointer-events containment).
+      const dialogContent =
+        containerRef.current.closest<HTMLElement>("[role='dialog']");
+      setPortalContainer(dialogContent ?? containerRef.current);
+    }
+  }, [disablePortalToBody]);
+
+  return { containerRef, portalContainer, disablePortalToBody };
+}

package/src/v3/SingleCombobox.stories.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import SingleCombobox from "./SingleCombobox";
+import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+
+const meta: Meta<typeof SingleCombobox> = {
+  title: "Really Under Development/V3/Single Combobox",
+  component: SingleCombobox,
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleCombobox>;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderItem: Story = {
+  name: "Custom render item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Radio: Story = {
+  name: "Radio",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            inputType="radio"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  name: "Grouped",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="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 }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="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={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          width: "300px",
+        }}
+      >
+        <FormField label="Pick a book">
+          {({ id }) => (
+            <SingleCombobox
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              renderItem={renderItem}
+              placeholder="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 Virtualized: Story = {
+  name: "Virtualized",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            isVirtualized
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};