@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/src/v2/SearchableSelect/SearchableMultiSelect.tsx

@@ -0,0 +1,521 @@
+import { useState, useMemo } from "react";
+import { useCombobox, useMultipleSelection } from "downshift";
+import type { ReactNode } from "react";
+import { Label } from "@sproutsocial/seeds-react-label";
+import { Input } from "@sproutsocial/seeds-react-input";
+// This will eventually be imported from seeds-react-popout
+import { Popout, SelectToggleButton } from "../Common-V2";
+import {
+  VirtualizedAutocompleteContent,
+  NonVirtualizedAutocompleteContent,
+} from "./AutocompleteContent";
+import {
+  isGroupHeading,
+  isToggleItem,
+  menuAnimationConfig,
+  getFilteredItems,
+  groupItemsWithHeadings,
+  useHighlightedIndex,
+  createItemToStringForDownshift,
+} from "../Common-V2";
+import {
+  type DataWithId,
+  type GroupedItem,
+  type ToggleItem,
+  type GroupHeading,
+  type BaseMultiAutocompleteProps,
+} from "../Common-V2";
+
+function defaultReducer(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+
+  switch (type) {
+    case useCombobox.stateChangeTypes.InputKeyDownEnter:
+    case useCombobox.stateChangeTypes.ItemClick:
+      // If the item is already selected, don't set highlighted index to 0
+      // We don't have access to selectedItems in the reducer
+      return {
+        ...changes,
+        isOpen: true, // keep the menu open after selection.
+        highlightedIndex: 0, // with the first option highlighted.
+      };
+    default:
+      return changes;
+  }
+}
+
+export interface SearchableMultiSelectProps<T extends DataWithId>
+  extends BaseMultiAutocompleteProps<T> {
+  renderSelections?: (items: T[]) => ReactNode;
+  name: string;
+  triggerButtonProps?: any;
+}
+
+export function SearchableMultiSelect<T extends DataWithId>({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item: T) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderSelections,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  EmptyState,
+  name,
+  placeholder,
+  onSelectedItemIdsChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+}: SearchableMultiSelectProps<T>) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] =
+    useState<string>("");
+  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] =
+    useState<T["id"][]>([]);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState<boolean>(false);
+
+  // Use controlled selectedItemIds if provided, otherwise use internal state
+  const isSelectedItemIdsControlled = controlledSelectedItemIds !== undefined;
+  const selectedItemIds = isSelectedItemIdsControlled
+    ? controlledSelectedItemIds
+    : uncontrolledSelectedItemIds;
+
+  // Convert selectedItemIds to selectedItems for internal use
+  const selectedItems = useMemo<T[]>(() => {
+    return data.filter((item) => selectedItemIds.includes(itemToKey(item)));
+  }, [selectedItemIds, data, itemToKey]);
+
+  // Use controlled inputValue if provided, otherwise use internal state
+  const isInputValueControlled = controlledInputValue !== undefined;
+  const inputValue = isInputValueControlled
+    ? controlledInputValue
+    : uncontrolledInputValue;
+
+  // Use controlled isOpen if provided, otherwise use internal state
+  const isIsOpenControlled = controlledIsOpen !== undefined;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+
+  const updateSelectedItems = (newSelectedItems: T[]) => {
+    const newSelectedItemIds = newSelectedItems.map((item) => itemToKey(item));
+    if (!isSelectedItemIdsControlled) {
+      setUncontrolledSelectedItemIds(newSelectedItemIds);
+    }
+    onSelectedItemIdsChange?.(newSelectedItemIds);
+  };
+
+  const updateInputValue = (newInputValue: string) => {
+    if (!isInputValueControlled) {
+      setUncontrolledInputValue(newInputValue);
+    }
+    onInputValueChange?.(newInputValue);
+  };
+
+  const updateIsOpen = (newIsOpen: boolean) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+
+  // Use itemToSearchString if provided, otherwise fallback to itemToString
+  const searchStringFn =
+    itemToSearchString ?? ((item: T) => itemToString(item));
+
+  const filteredItems = useMemo<T[]>(
+    () =>
+      getFilteredItems(data, inputValue, searchStringFn, itemToString, {
+        selectedItems,
+        showSelectedItems,
+      }),
+    [
+      data,
+      selectedItems,
+      inputValue,
+      searchStringFn,
+      showSelectedItems,
+      itemToString,
+    ]
+  );
+
+  const items = useMemo<GroupedItem<T>[]>(() => {
+    let groupedItems: GroupedItem<T>[];
+
+    if (groupBy) {
+      // Group first, then add selectAllItem at the beginning
+      groupedItems = groupItemsWithHeadings(filteredItems, groupBy, data);
+    } else {
+      groupedItems = filteredItems;
+    }
+
+    // Add selectAllItem at the beginning if provided
+    if (selectAllItem) {
+      return [selectAllItem, ...groupedItems];
+    }
+
+    return groupedItems;
+  }, [filteredItems, groupBy, selectAllItem, data]);
+
+  // Handler for heading clicks - selects/deselects all items in a group
+  const handleHeadingClick = useMemo(() => {
+    if (!selectHeadings || !groupBy) {
+      return undefined;
+    }
+
+    return (groupLabel: string, allSelected: boolean) => {
+      // Find all items in this group from the full data array
+      const groupItems = data.filter((item) => groupBy(item) === groupLabel);
+
+      if (allSelected) {
+        // Deselect all items in the group
+        const newSelectedItems = selectedItems.filter(
+          (item) => !groupItems.includes(item)
+        );
+        updateSelectedItems(newSelectedItems);
+      } else {
+        // Select all items in the group (add them if not already selected)
+        const newSelectedItems = [...selectedItems];
+        for (const groupItem of groupItems) {
+          if (!newSelectedItems.includes(groupItem)) {
+            newSelectedItems.push(groupItem);
+          }
+        }
+        updateSelectedItems(newSelectedItems);
+      }
+    };
+  }, [selectHeadings, groupBy, data, selectedItems, updateSelectedItems]);
+
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } =
+    useMultipleSelection<T>({
+      selectedItems,
+      onStateChange({ selectedItems: newSelectedItems, type }) {
+        switch (type) {
+          case useMultipleSelection.stateChangeTypes
+            .SelectedItemKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+          case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+          case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+            if (newSelectedItems !== undefined) {
+              updateSelectedItems(newSelectedItems);
+            }
+            break;
+          default:
+            break;
+        }
+      },
+    });
+
+  // Filter out headings for downshift unless selectHeadings is true
+  const itemsForCombobox = useMemo<(T | ToggleItem | GroupHeading)[]>(() => {
+    if (selectHeadings) {
+      // Include all items (headings, toggle items, and data items)
+      return items;
+    }
+    return items.filter(
+      (item): item is T | ToggleItem => !isGroupHeading(item)
+    );
+  }, [items, selectHeadings]);
+
+  // Wrapper function to handle ToggleItem and GroupHeading separately
+  const itemToStringForDownshift = useMemo(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+
+  const comboboxProps = useCombobox<T | ToggleItem | GroupHeading>({
+    inputId: id,
+    items: itemsForCombobox,
+    itemToString: itemToStringForDownshift,
+    defaultHighlightedIndex: 0,
+    selectedItem: null,
+    inputValue,
+    isOpen,
+    stateReducer,
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen,
+    }) {
+      // Handle isOpen changes for any state change type
+      if (
+        newIsOpen !== undefined &&
+        type !== useCombobox.stateChangeTypes.InputBlur
+      ) {
+        updateIsOpen(newIsOpen);
+      }
+
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            // Handle selectAllItem selection
+            if (
+              selectAllItem &&
+              isToggleItem(newSelectedItem) &&
+              newSelectedItem.id === selectAllItem.id
+            ) {
+              // Check if all items are selected (excluding selectAllItem itself)
+              const allSelected =
+                data.length > 0 &&
+                data.every((item) => selectedItems.includes(item));
+              if (allSelected) {
+                // Deselect all items
+                updateSelectedItems([]);
+              } else {
+                // Select all items
+                updateSelectedItems([...data]);
+              }
+              updateInputValue("");
+            } else if (
+              selectHeadings &&
+              groupBy &&
+              isGroupHeading(newSelectedItem)
+            ) {
+              // Handle heading selection - select/deselect all items in the group
+              const groupLabel = newSelectedItem.label;
+              const groupItems = data.filter(
+                (item) => groupBy(item) === groupLabel
+              );
+              const allSelected =
+                groupItems.length > 0 &&
+                groupItems.every((item) => selectedItems.includes(item));
+
+              if (allSelected) {
+                // Deselect all items in the group
+                updateSelectedItems(
+                  selectedItems.filter((item) => !groupItems.includes(item))
+                );
+              } else {
+                // Select all items in the group
+                const newItems = [
+                  ...selectedItems.filter((item) => !groupItems.includes(item)),
+                  ...groupItems,
+                ];
+                updateSelectedItems(newItems);
+              }
+              updateInputValue("");
+            } else if (
+              !isGroupHeading(newSelectedItem) &&
+              !isToggleItem(newSelectedItem)
+            ) {
+              // Only handle regular data items
+              const itemIndex = selectedItems.findIndex(
+                (item) => itemToKey(item) === itemToKey(newSelectedItem as T)
+              );
+              if (itemIndex >= 0) {
+                updateSelectedItems(
+                  selectedItems.filter((_, index) => index !== itemIndex)
+                );
+              } else {
+                updateSelectedItems([...selectedItems, newSelectedItem as T]);
+              }
+              updateInputValue("");
+            }
+          }
+          break;
+
+        case useCombobox.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          break;
+
+        default:
+          break;
+      }
+    },
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+  } = comboboxProps;
+
+  // Map the highlighted index from combobox (which only knows about items) to the full items array (which includes headings)
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForCombobox,
+    comboboxHighlightedIndex,
+    !!groupBy,
+    selectHeadings ?? false
+  );
+
+  const buttonContent = renderSelections
+    ? renderSelections(selectedItems)
+    : selectedItems.length > 0
+    ? selectedItems.map((item) => itemToString(item)).join(", ")
+    : placeholder;
+
+  // Handle button click to toggle popout
+  const handleButtonClick = () => {
+    updateIsOpen(!comboboxIsOpen);
+  };
+
+  return (
+    <Popout
+      open={comboboxIsOpen}
+      onOpenChange={updateIsOpen}
+      animationConfig={menuAnimationConfig}
+      onOpenAutoFocus={(e) => {
+        // Prevent default auto-focus behavior - we'll focus the input manually
+        e.preventDefault();
+        // Focus the input when popout opens
+        const inputElement = document.querySelector(
+          `input[name="${name}"]`
+        ) as HTMLInputElement;
+        if (inputElement) {
+          setTimeout(() => {
+            inputElement.focus();
+          }, 0);
+        }
+      }}
+      onCloseAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      content={
+        <div>
+          {/* Input inside the Popout */}
+          <div style={{ marginBottom: "8px" }}>
+            {(() => {
+              const inputProps = getInputProps(
+                getDropdownProps({ preventKeyAction: isOpen })
+              );
+              const { ref, id, ...restProps } = inputProps as any;
+              return (
+                <Input
+                  id={id}
+                  name={name}
+                  inputProps={{
+                    ...restProps,
+                    autoComplete: "off", // Override with "off" to prevent browser autocomplete
+                  }}
+                  innerRef={ref}
+                  placeholder={placeholder}
+                />
+              );
+            })()}
+          </div>
+          {/* Menu inside the Popout */}
+          {isVirtualized ? (
+            <VirtualizedAutocompleteContent
+              items={items}
+              getMenuProps={getMenuProps}
+              getItemProps={(props: { index: number }) => {
+                // Only apply getItemProps to actual items, not headings or ToggleItems
+                const item = items[props.index];
+                if (isGroupHeading(item) && !selectHeadings) {
+                  return {};
+                }
+                if (isToggleItem(item)) {
+                  // Handle ToggleItem clicks manually
+                  return {
+                    onClick: () => {
+                      const allSelected =
+                        data.length > 0 &&
+                        data.every((item) => selectedItems.includes(item));
+                      if (allSelected) {
+                        updateSelectedItems([]);
+                      } else {
+                        updateSelectedItems([...data]);
+                      }
+                    },
+                  };
+                }
+                const dataItem = item as T;
+                // Find the index in itemsForCombobox
+                const itemIndex = itemsForCombobox.indexOf(dataItem);
+                if (itemIndex === -1) {
+                  return {};
+                }
+                return getItemProps({ item: dataItem, index: itemIndex });
+              }}
+              selectedItems={selectedItems}
+              highlightedIndex={highlightedIndex ?? -1}
+              renderItem={renderItem}
+              renderGroupHeading={renderGroupHeading}
+              EmptyState={EmptyState}
+              itemToKey={itemToKey}
+              itemToString={itemToString}
+              inputType="checkbox"
+              selectHeadings={selectHeadings}
+              onHeadingClick={handleHeadingClick}
+              groupBy={groupBy}
+              allData={data}
+              selectAllItem={selectAllItem}
+            />
+          ) : (
+            <NonVirtualizedAutocompleteContent
+              items={items}
+              getMenuProps={getMenuProps}
+              getItemProps={(props: { index: number }) => {
+                // Only apply getItemProps to actual items, not headings or ToggleItems
+                const item = items[props.index];
+                if (isGroupHeading(item) && !selectHeadings) {
+                  return {};
+                }
+                if (isToggleItem(item)) {
+                  // Handle ToggleItem clicks manually
+                  return {
+                    onClick: () => {
+                      const allSelected =
+                        data.length > 0 &&
+                        data.every((item) => selectedItems.includes(item));
+                      if (allSelected) {
+                        updateSelectedItems([]);
+                      } else {
+                        updateSelectedItems([...data]);
+                      }
+                    },
+                  };
+                }
+                const dataItem = item as T;
+                // Find the index in itemsForCombobox
+                const itemIndex = itemsForCombobox.indexOf(dataItem);
+                if (itemIndex === -1) {
+                  return {};
+                }
+                return getItemProps({ item: dataItem, index: itemIndex });
+              }}
+              selectedItems={selectedItems}
+              highlightedIndex={highlightedIndex ?? -1}
+              renderItem={renderItem}
+              renderGroupHeading={renderGroupHeading}
+              EmptyState={EmptyState}
+              itemToKey={itemToKey}
+              itemToString={itemToString}
+              inputType="checkbox"
+              selectHeadings={selectHeadings}
+              onHeadingClick={handleHeadingClick}
+              groupBy={groupBy}
+              allData={data}
+              selectAllItem={selectAllItem}
+            />
+          )}
+        </div>
+      }
+    >
+      <div>
+        <SelectToggleButton
+          onClick={handleButtonClick}
+          {...triggerButtonProps}
+          name={name}
+          isOpen={comboboxIsOpen}
+          type="button"
+        >
+          {buttonContent}
+        </SelectToggleButton>
+      </div>
+    </Popout>
+  );
+}