@sproutsocial/seeds-react-menu 1.11.1 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/v3/Common/ComboboxItem.tsx

@@ -11,6 +11,7 @@ interface ComboboxItemProps<T> {
   value: T;
   itemId: string;
   label: string;
+  disabled?: boolean;
   inputType?: "icon" | "radio" | "checkbox" | "none";
   renderItem?: () => React.ReactNode;
   index?: number;
@@ -23,6 +24,7 @@ function ComboboxItemInner<T>(
     value,
     itemId,
     label,
+    disabled,
     inputType = "icon",
     renderItem,
     index,
@@ -38,6 +40,8 @@ function ComboboxItemInner<T>(
       data-index={dataIndex}
       style={style}
       ref={ref}
+      disabled={disabled}
+      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

@@ -57,6 +57,7 @@ function CheckIcon() {
 interface SelectItemProps {
   value: string | null;
   label: string;
+  disabled?: boolean;
   inputType?: "icon" | "radio" | "checkbox" | "none";
   renderItem?: () => React.ReactNode;
   hidden?: boolean;
@@ -65,12 +66,18 @@ interface SelectItemProps {
 export default function SelectItem({
   value,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   hidden,
 }: SelectItemProps) {
   return (
-    <StyledItem value={value} style={hidden ? { display: "none" } : undefined}>
+    <StyledItem
+      value={value}
+      disabled={disabled}
+      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/Common/types.ts

@@ -1,3 +1,4 @@
 export interface DataWithId {
   id: string | number;
+  disabled?: boolean;
 }

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,8 +1,14 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import MultiCombobox from "./MultiCombobox";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import { MultiCombobox } from "./MultiCombobox";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {
   title: "Really Under Development/V3/Multi Combobox",
@@ -135,6 +141,24 @@ export const Controlled: Story = {
   },
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const SelectableHeadings: Story = {
   name: "Selectable headings",
   render: () => (

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 {
@@ -342,6 +343,7 @@ export default function MultiCombobox<T extends DataWithId>(
         value={item}
         itemId={String(item.id)}
         label={itemToString(item)}
+        disabled={item.disabled}
         inputType={inputType}
         renderItem={
           renderItem ? () => renderItem(item) : () => itemToString(item)
@@ -374,6 +376,7 @@ export default function MultiCombobox<T extends DataWithId>(
         id={id}
         virtualized={isVirtualized}
         open={open}
+        disabled={props.disabled}
         onOpenChange={setOpen}
         onItemHighlighted={
           isVirtualized
@@ -523,6 +526,7 @@ export default function MultiCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -543,6 +547,7 @@ export default function MultiCombobox<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/MultiSearchableSelect.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 MultiSearchableSelect from "./MultiSearchableSelect";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import { MultiSearchableSelect } from "./MultiSearchableSelect";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof MultiSearchableSelect> = {
   title: "Really Under Development/V3/Multi Searchable Select",
@@ -193,6 +199,25 @@ export const CustomRenderSelections: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const SelectableHeadings: Story = {
   name: "Selectable headings",
   render: () => (

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 {
@@ -341,6 +342,7 @@ export default function MultiSearchableSelect<T extends DataWithId>(
         value={item}
         itemId={String(item.id)}
         label={itemToString(item)}
+        disabled={item.disabled}
         inputType={inputType}
         renderItem={
           renderItem ? () => renderItem(item) : () => itemToString(item)
@@ -364,6 +366,7 @@ export default function MultiSearchableSelect<T extends DataWithId>(
         id={id}
         virtualized={isVirtualized}
         open={open}
+        disabled={props.disabled}
         onOpenChange={setOpen}
         onItemHighlighted={
           isVirtualized
@@ -506,6 +509,7 @@ export default function MultiSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -526,6 +530,7 @@ export default function MultiSearchableSelect<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/MultiSelect.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 MultiSelect from "./MultiSelect";
+import { MultiSelect } from "./MultiSelect";
 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 MultiSelect> = {
   title: "Really Under Development/V3/Multi Select",
@@ -169,53 +174,71 @@ 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",
+export const DisabledItems: Story = {
+  name: "Disabled items",
   render: () => (
     <div style={{ width: "300px" }}>
       <FormField label="Pick books">
         {({ id }) => (
           <MultiSelect
             id={id}
-            data={books}
+            data={booksWithDisabled}
             itemToString={itemToString}
-            renderItem={renderItem}
             placeholder="Select books..."
-            defaultSelectedItemIds={[
-              "book-1",
-              "book-2",
-              "book-3",
-              "book-4",
-              "book-5",
-            ]}
-            maxTokens={2}
           />
         )}
       </FormField>