@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/src/v2/Select/MultiSelect.tsx

@@ -1,417 +0,0 @@
-import { useState, useMemo } from "react";
-import { useSelect, useMultipleSelection } from "downshift";
-import type { ReactNode } from "react";
-import { Label } from "@sproutsocial/seeds-react-label";
-// This will eventually be imported from seeds-react-popout
-import { Popout } from "../Common-V2";
-import {
-  isGroupHeading,
-  isToggleItem,
-  menuAnimationConfig,
-  groupItemsWithHeadings,
-  useHighlightedIndex,
-  createItemToStringForDownshift,
-  ComboboxContent,
-  SelectToggleButton,
-} from "../Common-V2";
-import {
-  type DataWithId,
-  type GroupedItem,
-  type ToggleItem,
-  type GroupHeading,
-  type BaseMultiSelectProps,
-} from "../Common-V2";
-
-function defaultReducer(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-
-  switch (type) {
-    case useSelect.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:
-      // For keyboard Enter/Space on menu items, keep menu open if an item is being selected
-      if (changes.selectedItem && changes.isOpen === false) {
-        return {
-          ...changes,
-          isOpen: true, // keep the menu open after keyboard selection.
-          highlightedIndex: 0, // with the first option highlighted.
-        };
-      }
-      return changes;
-  }
-}
-
-export interface MultiSelectProps<T extends DataWithId>
-  extends BaseMultiSelectProps<T> {
-  renderSelections?: (items: T[]) => ReactNode;
-  triggerButtonProps?: any;
-  shouldOverflow?: boolean;
-}
-
-export function MultiSelect<T extends DataWithId>({
-  id,
-  data,
-  selectedItemIds: controlledSelectedItemIds,
-  isOpen: controlledIsOpen,
-  itemToKey = (item: T) => item?.id,
-  itemToString,
-  renderSelections,
-  renderItem,
-  groupBy,
-  renderGroupHeading,
-  isVirtualized = false,
-  estimatedItemHeight,
-  showSelectedItems = false,
-  selectHeadings = false,
-  selectAllItem,
-  placeholder,
-  onSelectedItemIdsChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  triggerButtonProps,
-  menuProps,
-  inputType = "checkbox",
-  shouldOverflow,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: MultiSelectProps<T>) {
-  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 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 updateIsOpen = (newIsOpen: boolean) => {
-    if (!isIsOpenControlled) {
-      setUncontrolledIsOpen(newIsOpen);
-    }
-    onIsOpenChange?.(newIsOpen);
-  };
-
-  // For Select, we show all items (no filtering)
-  // Filter out selected items if showSelectedItems is false
-  const filteredData = useMemo<T[]>(() => {
-    if (showSelectedItems) {
-      return data;
-    }
-    return data.filter((item) => !selectedItems.includes(item));
-  }, [data, selectedItems, showSelectedItems]);
-
-  const items = useMemo<GroupedItem<T>[]>(() => {
-    let groupedItems: GroupedItem<T>[];
-
-    if (groupBy) {
-      // Group first, then add selectAllItem at the beginning
-      groupedItems = groupItemsWithHeadings(filteredData, groupBy, data, true);
-    } else {
-      groupedItems = filteredData;
-    }
-
-    // Add selectAllItem at the beginning if provided
-    if (selectAllItem) {
-      return [selectAllItem, ...groupedItems];
-    }
-
-    return groupedItems;
-  }, [filteredData, groupBy, data, selectAllItem, selectHeadings]);
-
-  // 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 itemsForSelect = 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 selectProps = useSelect<T | ToggleItem | GroupHeading>({
-    toggleButtonId: id,
-    items: itemsForSelect,
-    itemToString: itemToStringForDownshift,
-    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
-    selectedItem: null,
-    isOpen,
-    stateReducer,
-    // Could maybe let devs override this too?
-    onStateChange({ type, selectedItem: newSelectedItem, isOpen: newIsOpen }) {
-      // Handle isOpen changes for any state change type
-      if (newIsOpen !== undefined) {
-        updateIsOpen(newIsOpen);
-      }
-
-      // Handle item selection for both click and keyboard (Enter/Space) interactions
-      // When Enter/Space is pressed on a highlighted item, useSelect sets selectedItem
-      // We detect selection when selectedItem is set and menu is/was open
-      if (newSelectedItem && newSelectedItem !== null) {
-        // Check if this is a selection event (click or keyboard) and menu is open
-        const isSelectionEvent =
-          type === useSelect.stateChangeTypes.ItemClick ||
-          type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
-
-        if (isSelectionEvent) {
-          // 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]);
-            }
-          }
-        }
-      }
-    },
-  });
-
-  const {
-    isOpen: selectIsOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    highlightedIndex: selectHighlightedIndex,
-    getItemProps,
-  } = selectProps;
-
-  // Map the highlighted index from select (which only knows about items) to the full items array (which includes headings)
-  const highlightedIndex = useHighlightedIndex(
-    items,
-    itemsForSelect,
-    selectHighlightedIndex,
-    !!groupBy,
-    selectHeadings ?? false
-  );
-
-  const buttonText = renderSelections
-    ? renderSelections(selectedItems)
-    : selectedItems.length > 0
-    ? selectedItems.map((item) => itemToString(item)).join(", ")
-    : placeholder;
-
-  const toggleButtonIdProps = getToggleButtonProps();
-  // Downshift adds aria-labelledby by default, which can conflict with our Label usage
-  toggleButtonIdProps["aria-labelledby"] = undefined;
-  if (!selectIsOpen) {
-    // 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
-    toggleButtonIdProps["aria-controls"] = undefined;
-  }
-
-  return (
-    <Popout
-      open={selectIsOpen}
-      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}
-      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: () => {
-                  // This will be handled by the selection logic in onStateChange
-                  // We need to trigger the selection manually
-                  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 itemsForSelect using itemToKey for safer comparison
-            const itemIndex = itemsForSelect.findIndex((selectItem) => {
-              if (isGroupHeading(selectItem) || isToggleItem(selectItem)) {
-                return false;
-              }
-              return itemToKey(selectItem as T) === itemToKey(dataItem);
-            });
-            if (itemIndex === -1) {
-              return {};
-            }
-            return getItemProps({ item: dataItem, index: itemIndex });
-          }}
-          selectedItems={selectedItems}
-          highlightedIndex={highlightedIndex ?? -1}
-          renderItem={renderItem}
-          renderGroupHeading={renderGroupHeading}
-          itemToKey={itemToKey}
-          itemToString={itemToString}
-          inputType={inputType}
-          selectHeadings={selectHeadings}
-          onHeadingClick={handleHeadingClick}
-          groupBy={groupBy}
-          allData={data}
-          selectAllItem={selectAllItem}
-          isVirtualized={isVirtualized}
-          estimatedItemHeight={estimatedItemHeight}
-          {...menuProps}
-        />
-      }
-    >
-      <SelectToggleButton
-        {...toggleButtonIdProps}
-        {...triggerButtonProps}
-        isOpen={selectIsOpen}
-        shouldOverflow={shouldOverflow}
-      >
-        {buttonText}
-      </SelectToggleButton>
-    </Popout>
-  );
-}