@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -1,487 +0,0 @@
-import { useState, useMemo, useRef } from "react";
-import { useCombobox, useMultipleSelection } from "downshift";
-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.InputBlur:
-      // Do not close the menu on blur from this event
-      // There is a very brief blur when clicking an item, even though the input seemingly does not lose focus
-      // Closing the menu is handled in the onBlur handler instead, which does not have this issue
-      return {
-        ...changes,
-        isOpen: true,
-      };
-    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-    case useCombobox.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: true, // keep the menu open after selection.
-        highlightedIndex: state.highlightedIndex, // preserve the current position so the list doesn't jump.
-      };
-    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,
-  estimatedItemHeight,
-  showSelectedItems = false,
-  selectHeadings = false,
-  selectAllItem,
-  EmptyState,
-  placeholder,
-  onSelectedItemIdsChange,
-  onInputValueChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  menuProps,
-  inputType = "checkbox",
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: MultiAutocompleteProps<T>) {
-  const mousedownInPopoverRef = useRef(false);
-
-  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 (!newIsOpen) {
-      updateInputValue("");
-    }
-    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: -1,
-    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]);
-              }
-            } 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);
-              }
-            } 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]);
-              }
-            }
-          }
-          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);
-    }
-    // Don't close if the blur was caused by a mousedown inside the popover (e.g. clicking the scrollbar)
-    // Re-focus the input so future blur events can still close the menu
-    if (mousedownInPopoverRef.current) {
-      mousedownInPopoverRef.current = false;
-      e.target.focus();
-      return;
-    }
-    // Need to figure why onblur is getting called when selecting select all item
-    updateIsOpen(false);
-  };
-
-  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}
-      side={popoutPlacement}
-      onOpenAutoFocus={(e) => {
-        // Prevent default auto-focus behavior
-        e.preventDefault();
-      }}
-      onCloseAutoFocus={(e) => {
-        // Prevent default auto-focus behavior
-        e.preventDefault();
-      }}
-      onPointerDownOutside={onPointerDownOutside}
-      onInteractOutside={onInteractOutside}
-      animationConfig={menuAnimationConfig}
-      onMouseDown={() => {
-        mousedownInPopoverRef.current = true;
-      }}
-      onMouseUp={() => {
-        mousedownInPopoverRef.current = false;
-      }}
-      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 by comparing keys
-            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}
-          estimatedItemHeight={estimatedItemHeight}
-          {...menuProps}
-        />
-      }
-    >
-      <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}
-        aria-controls={undefined}
-        aria-expanded={undefined}
-        aria-haspopup={undefined}
-        // @ts-expect-error Popout adds the type=button prop but TokenInput does not expect that
-        type={undefined}
-      />
-    </Popout>
-  );
-}