@sproutsocial/seeds-react-menu 1.7.2 → 1.7.5

package/src/v2/Select/MultiSelect.tsx

@@ -0,0 +1,404 @@
+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,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  placeholder,
+  onSelectedItemIdsChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+  menuProps,
+  inputType = "checkbox",
+  shouldOverflow,
+}: 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}
+      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: () => {
+                  // 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
+            const itemIndex = itemsForSelect.indexOf(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}
+          {...menuProps}
+        />
+      }
+    >
+      <SelectToggleButton
+        {...toggleButtonIdProps}
+        {...triggerButtonProps}
+        isOpen={selectIsOpen}
+        shouldOverflow={shouldOverflow}
+      >
+        {buttonText}
+      </SelectToggleButton>
+    </Popout>
+  );
+}