@sproutsocial/seeds-react-menu 1.11.0 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "@sproutsocial/seeds-react-icon": "^2.3.3",
     "@sproutsocial/seeds-react-input": "^1.5.12",
     "@sproutsocial/seeds-react-label": "^1.0.16",
-    "@sproutsocial/seeds-react-popout": "^2.4.33",
+    "@sproutsocial/seeds-react-popout": "^2.4.34",
     "@sproutsocial/seeds-react-radio": "^1.3.16",
     "@sproutsocial/seeds-react-switch": "^1.2.28",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
@@ -57,7 +57,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.15",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.16",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/Common/ComboboxItem.tsx

@@ -38,6 +38,7 @@ function ComboboxItemInner<T>(
       data-index={dataIndex}
       style={style}
       ref={ref}
+      data-qa-menu-item={label}
     >
       {inputType === "radio" ? (
         <ComboboxItemIndicator

package/src/v3/Common/ComboboxStyles.tsx

@@ -25,6 +25,11 @@ export const ComboboxInputGroup = styled(Combobox.InputGroup)`
   &:focus-within {
     ${focusRing}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 export const ComboboxInput = styled(Combobox.Input)`
@@ -41,6 +46,10 @@ export const ComboboxInput = styled(Combobox.Input)`
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 
 export const ComboboxTokenInput = styled(Combobox.Input)`
@@ -58,6 +67,10 @@ export const ComboboxTokenInput = styled(Combobox.Input)`
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.subtext};
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 
 export const ComboboxActionButtons = styled.div`
@@ -323,6 +336,11 @@ export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)`
   &:focus-within {
     ${focusRing}
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 export const Token = styled.span`
@@ -388,6 +406,11 @@ export const SearchableSelectTrigger = styled(Combobox.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 export const SearchableSelectTriggerIcon = styled(Combobox.Icon)`
@@ -472,4 +495,9 @@ export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;

package/src/v3/Common/SelectItem.tsx

@@ -70,7 +70,11 @@ export default function SelectItem({
   hidden,
 }: SelectItemProps) {
   return (
-    <StyledItem value={value} style={hidden ? { display: "none" } : undefined}>
+    <StyledItem
+      value={value}
+      style={hidden ? { display: "none" } : undefined}
+      data-qa-menu-item={label}
+    >
       {inputType === "radio" ? (
         <StyledItemIndicator
           keepMounted

package/src/v3/Common/SelectStyles.tsx

@@ -44,6 +44,11 @@ export const SelectTrigger = styled(Select.Trigger)`
   &[data-popup-open] [data-chevron] {
     transform: rotate(-180deg);
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 `;
 
 export const SelectValue = styled(Select.Value)`

package/src/v3/ModalStories.stories.tsx

@@ -10,12 +10,12 @@ import {
   ModalBody,
   ModalFooter,
 } from "@sproutsocial/seeds-react-modal";
-import SingleSelect from "./SingleSelect";
-import MultiSelect from "./MultiSelect";
-import SingleCombobox from "./SingleCombobox";
-import MultiCombobox from "./MultiCombobox";
-import SingleSearchableSelect from "./SingleSearchableSelect";
-import MultiSearchableSelect from "./MultiSearchableSelect";
+import { SingleSelect } from "./SingleSelect";
+import { MultiSelect } from "./MultiSelect";
+import { SingleCombobox } from "./SingleCombobox";
+import { MultiCombobox } from "./MultiCombobox";
+import { SingleSearchableSelect } from "./SingleSearchableSelect";
+import { MultiSearchableSelect } from "./MultiSearchableSelect";
 import { books, itemToString } from "./storyData";
 
 // ─── Shared content ───────────────────────────────────────────────────────────

package/src/v3/MultiCombobox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import MultiCombobox from "./MultiCombobox";
+import { MultiCombobox } from "./MultiCombobox";
 import { books, largeBookSet, itemToString, renderItem } from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {

package/src/v3/MultiCombobox.tsx

@@ -64,6 +64,7 @@ interface MultiComboboxBaseProps {
   emptyText?: string;
   isLoading?: boolean;
   loadingText?: string;
+  disabled?: boolean;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -115,7 +116,7 @@ export type MultiComboboxProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function MultiCombobox<T extends DataWithId>(
+export function MultiCombobox<T extends DataWithId>(
   props: MultiComboboxProps<T>
 ) {
   const {
@@ -374,6 +375,7 @@ export default function MultiCombobox<T extends DataWithId>(
         id={id}
         virtualized={isVirtualized}
         open={open}
+        disabled={props.disabled}
         onOpenChange={setOpen}
         onItemHighlighted={
           isVirtualized

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import MultiSearchableSelect from "./MultiSearchableSelect";
+import { MultiSearchableSelect } from "./MultiSearchableSelect";
 import { books, largeBookSet, itemToString, renderItem } from "./storyData";
 
 const meta: Meta<typeof MultiSearchableSelect> = {

package/src/v3/MultiSearchableSelect.tsx

@@ -71,6 +71,7 @@ interface MultiSearchableSelectBaseProps {
   emptyText?: string;
   isLoading?: boolean;
   loadingText?: string;
+  disabled?: boolean;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -121,7 +122,7 @@ export type MultiSearchableSelectProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function MultiSearchableSelect<T extends DataWithId>(
+export function MultiSearchableSelect<T extends DataWithId>(
   props: MultiSearchableSelectProps<T>
 ) {
   const {
@@ -364,6 +365,7 @@ export default function MultiSearchableSelect<T extends DataWithId>(
         id={id}
         virtualized={isVirtualized}
         open={open}
+        disabled={props.disabled}
         onOpenChange={setOpen}
         onItemHighlighted={
           isVirtualized

package/src/v3/MultiSelect.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import MultiSelect from "./MultiSelect";
+import { MultiSelect } from "./MultiSelect";
 import SelectItem from "./Common/SelectItem";
 import SelectGroup from "./Common/SelectGroup";
 import { books, itemToString, renderItem } from "./storyData";
@@ -169,59 +169,59 @@ export const CustomSelection: Story = {
   ),
 };
 
-export const CustomToken: Story = {
-  name: "Custom renderToken",
-  render: () => (
-    <div style={{ width: "300px" }}>
-      <FormField label="Pick books">
-        {({ id }) => (
-          <MultiSelect
-            id={id}
-            data={books}
-            itemToString={itemToString}
-            renderItem={renderItem}
-            placeholder="Select books..."
-            renderToken={(item) => (
-              <span>
-                {item.title}{" "}
-                <span style={{ fontSize: "11px", opacity: 0.7 }}>
-                  ({item.author})
-                </span>
-              </span>
-            )}
-          />
-        )}
-      </FormField>
-    </div>
-  ),
-};
+// export const CustomToken: Story = {
+//   name: "Custom renderToken",
+//   render: () => (
+//     <div style={{ width: "300px" }}>
+//       <FormField label="Pick books">
+//         {({ id }) => (
+//           <MultiSelect
+//             id={id}
+//             data={books}
+//             itemToString={itemToString}
+//             renderItem={renderItem}
+//             placeholder="Select books..."
+//             renderToken={(item) => (
+//               <span>
+//                 {item.title}{" "}
+//                 <span style={{ fontSize: "11px", opacity: 0.7 }}>
+//                   ({item.author})
+//                 </span>
+//               </span>
+//             )}
+//           />
+//         )}
+//       </FormField>
+//     </div>
+//   ),
+// };
 
-export const MaxTokens: Story = {
-  name: "Max tokens",
-  render: () => (
-    <div style={{ width: "300px" }}>
-      <FormField label="Pick books">
-        {({ id }) => (
-          <MultiSelect
-            id={id}
-            data={books}
-            itemToString={itemToString}
-            renderItem={renderItem}
-            placeholder="Select books..."
-            defaultSelectedItemIds={[
-              "book-1",
-              "book-2",
-              "book-3",
-              "book-4",
-              "book-5",
-            ]}
-            maxTokens={2}
-          />
-        )}
-      </FormField>
-    </div>
-  ),
-};
+// export const MaxTokens: Story = {
+//   name: "Max tokens",
+//   render: () => (
+//     <div style={{ width: "300px" }}>
+//       <FormField label="Pick books">
+//         {({ id }) => (
+//           <MultiSelect
+//             id={id}
+//             data={books}
+//             itemToString={itemToString}
+//             renderItem={renderItem}
+//             placeholder="Select books..."
+//             defaultSelectedItemIds={[
+//               "book-1",
+//               "book-2",
+//               "book-3",
+//               "book-4",
+//               "book-5",
+//             ]}
+//             maxTokens={2}
+//           />
+//         )}
+//       </FormField>
+//     </div>
+//   ),
+// };
 
 export const RemoveSelectedItems: Story = {
   name: "Remove selected items",

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>

package/src/v3/SingleCombobox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import SingleCombobox from "./SingleCombobox";
+import { SingleCombobox } from "./SingleCombobox";
 import { books, largeBookSet, itemToString, renderItem } from "./storyData";
 
 const meta: Meta<typeof SingleCombobox> = {

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={

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import SingleSearchableSelect from "./SingleSearchableSelect";
+import { SingleSearchableSelect } from "./SingleSearchableSelect";
 import { books, largeBookSet, itemToString, renderItem } from "./storyData";
 
 const meta: Meta<typeof SingleSearchableSelect> = {

package/src/v3/SingleSearchableSelect.tsx

@@ -33,6 +33,7 @@ interface SingleSearchableSelectBaseProps {
   emptyText?: string;
   isLoading?: boolean;
   loadingText?: string;
+  disabled?: boolean;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -85,7 +86,7 @@ export type SingleSearchableSelectProps<T extends DataWithId> =
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-export default function SingleSearchableSelect<T extends DataWithId>(
+export function SingleSearchableSelect<T extends DataWithId>(
   props: SingleSearchableSelectProps<T>
 ) {
   const {
@@ -179,6 +180,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}