@sproutsocial/seeds-react-menu 1.11.2 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.2",
+  "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,7 @@ function ComboboxItemInner<T>(
       data-index={dataIndex}
       style={style}
       ref={ref}
+      disabled={disabled}
       data-qa-menu-item={label}
     >
       {inputType === "radio" ? (

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,6 +66,7 @@ interface SelectItemProps {
 export default function SelectItem({
   value,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   hidden,
@@ -72,6 +74,7 @@ export default function SelectItem({
   return (
     <StyledItem
       value={value}
+      disabled={disabled}
       style={hidden ? { display: "none" } : undefined}
       data-qa-menu-item={label}
     >

package/src/v3/Common/types.ts

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

package/src/v3/MultiCombobox.stories.tsx

@@ -2,7 +2,13 @@ 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 {
+  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

@@ -343,6 +343,7 @@ export 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)
@@ -525,6 +526,7 @@ export function MultiCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -545,6 +547,7 @@ export 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

@@ -2,7 +2,13 @@ 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 {
+  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

@@ -342,6 +342,7 @@ export 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)
@@ -508,6 +509,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -528,6 +530,7 @@ export 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

@@ -4,7 +4,12 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 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",
@@ -223,6 +228,24 @@ export const CustomSelection: Story = {
 //   ),
 // };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const RemoveSelectedItems: Story = {
   name: "Remove selected items",
   render: () => (

package/src/v3/MultiSelect.tsx

@@ -238,6 +238,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
                               key={item.id}
                               value={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               hidden={
                                 removeSelectedItems &&
@@ -257,6 +258,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
                         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

@@ -2,7 +2,13 @@ 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 {
+  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

@@ -267,6 +267,7 @@ export function SingleCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -287,6 +288,7 @@ export 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

@@ -2,7 +2,13 @@ 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 {
+  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,6 +29,7 @@ import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
 interface SingleSearchableSelectBaseProps {
   id?: string;
   placeholder?: string;
+  includePlaceholderItem?: boolean;
   searchPlaceholder?: string;
   emptyText?: string;
   isLoading?: boolean;
@@ -92,6 +93,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
   const {
     id,
     placeholder = "Select...",
+    includePlaceholderItem,
     searchPlaceholder = "Search...",
     emptyText = "No results found.",
     isLoading = false,
@@ -284,6 +286,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -298,18 +301,31 @@ export 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

@@ -4,7 +4,12 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 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",
@@ -217,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

@@ -199,6 +199,7 @@ export function SingleSelect<T extends DataWithId>(
                             key={item.id}
                             value={String(item.id)}
                             label={itemToString(item)}
+                            disabled={item.disabled}
                             inputType={inputType}
                             renderItem={
                               renderItem
@@ -212,7 +213,6 @@ export function SingleSelect<T extends DataWithId>(
                     </React.Fragment>
                   ))
                 ) : (
-                  // TODO: need to add a placeholder item when includePlaceholderItem is true
                   <>
                     {includePlaceholderItem && (
                       <SelectItem
@@ -226,6 +226,7 @@ export 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) => (