@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/SearchableSelect/SearchableMultiSelect.tsx

@@ -1,527 +0,0 @@
-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,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: 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}
-      side={popoutPlacement}
-      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();
-      }}
-      onPointerDownOutside={onPointerDownOutside}
-      onInteractOutside={onInteractOutside}
-      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>
-  );
-}