@sproutsocial/seeds-react-menu 1.11.1 → 1.11.3

package/src/v3/MultiSelect.tsx

@@ -42,6 +42,7 @@ const Placeholder = styled.div`
 interface MultiSelectBaseProps {
   id?: string;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 interface MultiSelectDataProps<T extends DataWithId>
@@ -79,234 +80,13 @@ interface MultiSelectChildrenProps extends MultiSelectBaseProps {
   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>
-) {
+export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   const { id, placeholder = "Select..." } = props;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -396,6 +176,7 @@ export default function MultiSelect<T extends DataWithId>(
         items={items}
         value={value}
         onValueChange={handleValueChange}
+        disabled={props.disabled}
         id={id}
       >
         <SelectTrigger>
@@ -457,6 +238,7 @@ export default function MultiSelect<T extends DataWithId>(
                               key={item.id}
                               value={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               hidden={
                                 removeSelectedItems &&
@@ -476,6 +258,7 @@ export default function MultiSelect<T extends DataWithId>(
                         key={item.id}
                         value={String(item.id)}
                         label={itemToString(item)}
+                        disabled={item.disabled}
                         inputType={inputType}
                         hidden={
                           removeSelectedItems && value.includes(String(item.id))

package/src/v3/SingleCombobox.stories.tsx

@@ -1,8 +1,14 @@
 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";
+import { SingleCombobox } from "./SingleCombobox";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleCombobox> = {
   title: "Really Under Development/V3/Single Combobox",
@@ -148,6 +154,24 @@ export const Controlled: Story = {
   },
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (

package/src/v3/SingleCombobox.tsx

@@ -29,6 +29,7 @@ interface SingleComboboxBaseProps {
   id?: string;
   placeholder?: string;
   emptyText?: string;
+  disabled?: boolean;
 }
 
 interface SingleComboboxDataBaseProps<T extends DataWithId>
@@ -78,7 +79,7 @@ export type SingleComboboxProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function SingleCombobox<T extends DataWithId>(
+export function SingleCombobox<T extends DataWithId>(
   props: SingleComboboxProps<T>
 ) {
   const {
@@ -175,6 +176,7 @@ export default function SingleCombobox<T extends DataWithId>(
           isVirtualized ? data : groups ?? (isChildrenMode ? undefined : data)
         }
         virtualized={isVirtualized}
+        disabled={props.disabled}
         open={open}
         onOpenChange={setOpen}
         onItemHighlighted={
@@ -265,6 +267,7 @@ export default function SingleCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -285,6 +288,7 @@ export default function SingleCombobox<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -1,8 +1,14 @@
 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";
+import { SingleSearchableSelect } from "./SingleSearchableSelect";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleSearchableSelect> = {
   title: "Really Under Development/V3/Single Searchable Select",
@@ -163,6 +169,45 @@ export const CustomSelection: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const IncludePlaceholderItem: Story = {
+  name: "Include placeholder item",
+  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..."
+            includePlaceholderItem
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (

package/src/v3/SingleSearchableSelect.tsx

@@ -29,10 +29,12 @@ import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
 interface SingleSearchableSelectBaseProps {
   id?: string;
   placeholder?: string;
+  includePlaceholderItem?: boolean;
   searchPlaceholder?: string;
   emptyText?: string;
   isLoading?: boolean;
   loadingText?: string;
+  disabled?: boolean;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -85,12 +87,13 @@ export type SingleSearchableSelectProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function SingleSearchableSelect<T extends DataWithId>(
+export function SingleSearchableSelect<T extends DataWithId>(
   props: SingleSearchableSelectProps<T>
 ) {
   const {
     id,
     placeholder = "Select...",
+    includePlaceholderItem,
     searchPlaceholder = "Search...",
     emptyText = "No results found.",
     isLoading = false,
@@ -179,6 +182,7 @@ export default function SingleSearchableSelect<T extends DataWithId>(
       <Combobox.Root
         id={id}
         value={value}
+        disabled={props.disabled}
         onValueChange={handleValueChange}
         itemToStringLabel={itemToString}
         isItemEqualToValue={(a, b) => a != null && b != null && a.id === b.id}
@@ -282,6 +286,7 @@ export default function SingleSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -296,18 +301,31 @@ export default function SingleSearchableSelect<T extends DataWithId>(
                     </React.Fragment>
                   )
                 ) : (
-                  (item: T) => (
-                    <ComboboxItem
-                      key={item.id}
-                      value={item}
-                      itemId={String(item.id)}
-                      label={itemToString(item)}
-                      inputType={inputType}
-                      renderItem={
-                        renderItem ? () => renderItem(item) : undefined
-                      }
-                    />
-                  )
+                  <>
+                    {includePlaceholderItem && (
+                      <ComboboxItem
+                        key="placeholder"
+                        value={null as unknown as T}
+                        itemId="placeholder"
+                        label={placeholder}
+                      />
+                    )}
+                    <Combobox.Collection>
+                      {(item: T) => (
+                        <ComboboxItem
+                          key={item.id}
+                          value={item}
+                          itemId={String(item.id)}
+                          label={itemToString(item)}
+                          disabled={item.disabled}
+                          inputType={inputType}
+                          renderItem={
+                            renderItem ? () => renderItem(item) : undefined
+                          }
+                        />
+                      )}
+                    </Combobox.Collection>
+                  </>
                 )}
               </SearchableSelectList>
             </SearchableSelectPopup>

package/src/v3/SingleSelect.stories.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import SingleSelect from "./SingleSelect";
+import { SingleSelect } from "./SingleSelect";
 import SelectItem from "./Common/SelectItem";
 import SelectGroup from "./Common/SelectGroup";
-import { books, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleSelect> = {
   title: "Really Under Development/V3/Single Select",
@@ -32,6 +37,25 @@ export const Basic: Story = {
   ),
 };
 
+export const Disabled: Story = {
+  name: "Disabled",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            disabled
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const IncludePlaceholderItem: Story = {
   name: "Include placeholder item",
   render: () => (
@@ -198,6 +222,24 @@ export const CustomSelection: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -38,6 +38,7 @@ interface SingleSelectBaseProps {
   id?: string;
   placeholder?: string;
   includePlaceholderItem?: boolean;
+  disabled?: boolean;
 }
 
 interface SingleSelectDataProps<T extends DataWithId>
@@ -75,7 +76,7 @@ export type SingleSelectProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function SingleSelect<T extends DataWithId>(
+export function SingleSelect<T extends DataWithId>(
   props: SingleSelectProps<T>
 ) {
   const { id, placeholder, includePlaceholderItem } = props;
@@ -161,6 +162,7 @@ export default function SingleSelect<T extends DataWithId>(
       <Select.Root
         items={items}
         value={value}
+        disabled={props.disabled}
         onValueChange={handleValueChange}
         id={id}
       >
@@ -197,6 +199,7 @@ export default function SingleSelect<T extends DataWithId>(
                             key={item.id}
                             value={String(item.id)}
                             label={itemToString(item)}
+                            disabled={item.disabled}
                             inputType={inputType}
                             renderItem={
                               renderItem
@@ -210,7 +213,6 @@ export default function SingleSelect<T extends DataWithId>(
                     </React.Fragment>
                   ))
                 ) : (
-                  // TODO: need to add a placeholder item when includePlaceholderItem is true
                   <>
                     {includePlaceholderItem && (
                       <SelectItem
@@ -224,6 +226,7 @@ export default function SingleSelect<T extends DataWithId>(
                         key={item.id}
                         value={String(item.id)}
                         label={itemToString(item)}
+                        disabled={item.disabled}
                         inputType={inputType}
                         renderItem={
                           renderItem

package/src/v3/storyData.tsx

@@ -105,6 +105,11 @@ const generateBooks = (count: number): Book[] => {
 
 export const largeBookSet = generateBooks(1000);
 
+export const booksWithDisabled: Book[] = books.map((book) => ({
+  ...book,
+  disabled: book.id === "book-3" || book.id === "book-7",
+}));
+
 export const itemToString = (item: Book | null) => item?.title ?? "";
 
 export const renderItem = (item: Book) => (