@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -0,0 +1,453 @@
+import { useState, useMemo } from "react";
+import { useCombobox, useMultipleSelection } from "downshift";
+import { Label } from "@sproutsocial/seeds-react-label";
+import { TokenInput } from "@sproutsocial/seeds-react-token-input";
+// This will eventually be imported from seeds-react-popout
+import { Popout } from "../Common-V2";
+import {
+  isGroupHeading,
+  isToggleItem,
+  menuAnimationConfig,
+  getFilteredItems,
+  groupItemsWithHeadings,
+  useHighlightedIndex,
+  createItemToStringForDownshift,
+  ComboboxContent,
+} 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 MultiAutocompleteProps<T extends DataWithId>
+  extends BaseMultiAutocompleteProps<T> {}
+
+export function MultiAutocomplete<T extends DataWithId>({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item: T) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdsChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  menuProps,
+  inputType = "checkbox",
+}: MultiAutocompleteProps<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]
+  );
+
+  const items = useMemo<GroupedItem<T>[]>(() => {
+    let listItems: GroupedItem<T>[];
+
+    // If groupBy is provided and selectHeadings is true we need to add group heading items to the list
+    if (groupBy) {
+      // Group first, then add selectAllItem at the beginning
+      // If headings are not selectable we will just reorder the items
+      // If headings are selectable we will add them to the list
+      listItems = groupItemsWithHeadings(
+        filteredItems,
+        groupBy,
+        data,
+        selectHeadings
+      );
+    } else {
+      listItems = filteredItems;
+    }
+
+    // Add selectAllItem at the beginning if provided
+    if (selectAllItem) {
+      return [selectAllItem, ...listItems];
+    }
+
+    return listItems;
+  }, [filteredItems, groupBy, selectAllItem, selectHeadings, 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, // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue,
+    isOpen,
+    stateReducer,
+    // Could maybe let devs override this too?
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen,
+    }) {
+      // Handle isOpen changes for any state change type
+      if (newIsOpen !== undefined) {
+        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,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+    selectedItem,
+  } = 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 inputProps = getInputProps({ preventKeyAction: isOpen });
+  // Downshift adds aria-labelledby by default, which can conflict with our Label usage
+  inputProps["aria-labelledby"] = undefined;
+  if (!comboboxIsOpen) {
+    // Remove aria-controls when the menu is closed to avoid referencing a non-existent element
+    // @ts-expect-error downshift types require aria-controls even though it is not required
+    inputProps["aria-controls"] = undefined;
+  }
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Call any provided onBlur handler
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+  };
+
+  const inputPropsToSpread = { ...inputProps };
+  // Remove onBlur from inputProps
+  // The blur event needs added to the root of token input
+  delete inputPropsToSpread.onBlur;
+
+  return (
+    <Popout
+      open={comboboxIsOpen}
+      onOpenChange={updateIsOpen}
+      onOpenAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      onCloseAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      animationConfig={menuAnimationConfig}
+      content={
+        <ComboboxContent
+          items={items}
+          getMenuProps={getMenuProps}
+          getItemProps={(props: { index: number }) => {
+            // Only apply getItemProps to actual items, not headings or ToggleItems
+            const item = items[props.index];
+            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={inputType}
+          selectHeadings={selectHeadings}
+          onHeadingClick={handleHeadingClick}
+          groupBy={groupBy}
+          allData={data}
+          selectAllItem={selectAllItem}
+          isVirtualized={isVirtualized}
+          {...menuProps}
+        />
+      }
+    >
+      {/* @ts-expect-error onClick types to not match tokeninput */}
+      <TokenInput
+        placeholder={placeholder}
+        inputProps={{
+          ...inputPropsToSpread,
+          autoComplete: "off", // Override with "off" to prevent browser autocomplete
+        }}
+        tokens={selectedItems.map((item) => ({
+          id: String(itemToKey(item)),
+          value: itemToString(item),
+        }))}
+        onRemoveToken={(tokenId) => {
+          const itemToRemove = selectedItems.find(
+            (item) => String(itemToKey(item)) === tokenId
+          );
+          if (itemToRemove) {
+            removeSelectedItem(itemToRemove);
+          }
+        }}
+        onClickToken={(e) => {
+          e.stopPropagation();
+        }}
+        onBlur={handleBlur}
+      />
+    </Popout>
+  );
+}