@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/Select/SingleSelect.tsx

@@ -1,285 +0,0 @@
-import { useState, useMemo } from "react";
-import { useSelect } 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 BaseSingleSelectProps,
-} from "../Common-V2";
-
-function defaultReducer(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-
-  switch (type) {
-    case useSelect.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: false, // close the menu after selection for single select
-        highlightedIndex: 0, // reset highlight
-      };
-    default:
-      return changes;
-  }
-}
-
-export interface SingleSelectProps<T extends DataWithId>
-  extends BaseSingleSelectProps<T> {
-  itemToSelection?: (item: T) => ReactNode;
-  renderSelection?: (item: T | null) => ReactNode;
-  triggerButtonProps?: any;
-}
-
-export function SingleSelect<T extends DataWithId>({
-  id,
-  data,
-  selectedItemId: controlledSelectedItemId,
-  isOpen: controlledIsOpen,
-  itemToKey = (item: T) => item?.id,
-  itemToString,
-  itemToSelection,
-  renderSelection,
-  renderItem,
-  groupBy,
-  renderGroupHeading,
-  isVirtualized = false,
-  estimatedItemHeight,
-  placeholder,
-  onSelectedItemIdChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  triggerButtonProps,
-  menuProps,
-  inputType = "icon",
-  removePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: SingleSelectProps<T>) {
-  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState<
-    T["id"] | null
-  >(null);
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState<boolean>(false);
-
-  // Use controlled selectedItemId if provided, otherwise use internal state
-  const isSelectedItemIdControlled = controlledSelectedItemId !== undefined;
-  const selectedItemId = isSelectedItemIdControlled
-    ? controlledSelectedItemId
-    : uncontrolledSelectedItemId;
-
-  // Convert selectedItemId to selectedItem for internal use
-  const selectedItem = useMemo<T | null>(() => {
-    if (selectedItemId === null || selectedItemId === undefined) {
-      return null;
-    }
-    return data.find((item) => itemToKey(item) === selectedItemId) ?? null;
-  }, [selectedItemId, data, itemToKey]);
-
-  // Use controlled isOpen if provided, otherwise use internal state
-  const isIsOpenControlled = controlledIsOpen !== undefined;
-  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
-
-  const updateSelectedItem = (newSelectedItem: T | null) => {
-    const newSelectedItemId = newSelectedItem
-      ? itemToKey(newSelectedItem)
-      : null;
-    if (!isSelectedItemIdControlled) {
-      setUncontrolledSelectedItemId(newSelectedItemId);
-    }
-    onSelectedItemIdChange?.(newSelectedItemId);
-  };
-
-  const updateIsOpen = (newIsOpen: boolean) => {
-    if (!isIsOpenControlled) {
-      setUncontrolledIsOpen(newIsOpen);
-    }
-    onIsOpenChange?.(newIsOpen);
-  };
-
-  // TODO: This could be made generic as a hook and used in other components
-  // For Select, we show all items (no filtering)
-  const items = useMemo<GroupedItem<T>[]>(() => {
-    let groupedItems: GroupedItem<T>[];
-
-    const placeholderItem: ToggleItem = {
-      id: "clear-selection",
-      label: placeholder,
-    };
-
-    if (groupBy) {
-      // Group first, then add placeholderItem at the beginning
-      groupedItems = groupItemsWithHeadings(data, groupBy, data, true);
-    } else {
-      groupedItems = data;
-    }
-    if (!removePlaceholderItem) {
-      groupedItems = [placeholderItem, ...groupedItems];
-    }
-
-    return groupedItems;
-  }, [data, groupBy, placeholder]);
-
-  // Filter out headings for downshift
-  const itemsForSelect = useMemo<(T | ToggleItem)[]>(() => {
-    // This is unnecessary for single select because we don't have group headings
-    return items.filter((item): item is T => !isGroupHeading(item));
-  }, [items]);
-
-  // Wrapper function to handle ToggleItem separately
-  const itemToStringForDownshift = useMemo(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-
-  const selectProps = useSelect<T | ToggleItem>({
-    toggleButtonId: id,
-    items: itemsForSelect,
-    itemToString: itemToStringForDownshift,
-    // defaultHighlightedIndex: 0,
-    selectedItem: selectedItem,
-    isOpen,
-    stateReducer,
-    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 changes and it's a user interaction
-      const isSelectionEvent =
-        type === useSelect.stateChangeTypes.ItemClick ||
-        type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
-
-      if (isSelectionEvent && newSelectedItem && newSelectedItem !== null) {
-        // If placeholderItem is selected, set selectedItem to null
-        // Note: placeholderItem won't be in itemsForSelect, so this check is for safety
-        if (newSelectedItem.id === "clear-selection") {
-          updateSelectedItem(null);
-        } else {
-          updateSelectedItem(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,
-    false // Single select components hardcode selectHeadings to false
-  );
-
-  const buttonContent = renderSelection
-    ? renderSelection(selectedItem)
-    : selectedItem
-    ? itemToSelection
-      ? itemToSelection(selectedItem)
-      : itemToString(selectedItem)
-    : placeholder;
-
-  const toggleButtonProps = getToggleButtonProps();
-  // Downshift adds aria-labelledby by default, which can conflict with our Label usage
-  toggleButtonProps["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
-    toggleButtonProps["aria-controls"] = undefined;
-  }
-
-  return (
-    <Popout
-      open={selectIsOpen}
-      onOpenChange={updateIsOpen}
-      side={popoutPlacement}
-      animationConfig={menuAnimationConfig}
-      onOpenAutoFocus={(e) => {
-        // Prevent default auto-focus behavior
-        e.preventDefault();
-      }}
-      onCloseAutoFocus={(e) => {
-        // Prevent default auto-focus behavior
-        e.preventDefault();
-      }}
-      onPointerDownOutside={onPointerDownOutside}
-      onInteractOutside={onInteractOutside}
-      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 (placeholderItem) clicks manually
-              return {
-                onClick: () => {
-                  if (item.id === "clear-selection") {
-                    updateSelectedItem(null);
-                  }
-                },
-              };
-            }
-            const dataItem = item as T;
-            // Find the index in itemsForSelect using itemToKey for safer comparison
-            const itemIndex = itemsForSelect.findIndex((selectItem) => {
-              if (isToggleItem(selectItem)) {
-                return false;
-              }
-              return itemToKey(selectItem as T) === itemToKey(dataItem);
-            });
-            if (itemIndex === -1) {
-              return {};
-            }
-            return getItemProps({ item: dataItem, index: itemIndex });
-          }}
-          selectedItems={selectedItem ? [selectedItem] : []}
-          highlightedIndex={highlightedIndex ?? -1}
-          renderItem={renderItem}
-          renderGroupHeading={renderGroupHeading}
-          itemToKey={itemToKey}
-          itemToString={itemToString}
-          inputType={inputType}
-          isVirtualized={isVirtualized}
-          estimatedItemHeight={estimatedItemHeight}
-          groupBy={groupBy}
-          selectHeadings={false}
-          {...menuProps}
-        />
-      }
-    >
-      <SelectToggleButton
-        {...toggleButtonProps}
-        {...triggerButtonProps}
-        isOpen={selectIsOpen}
-      >
-        {buttonContent}
-      </SelectToggleButton>
-    </Popout>
-  );
-}

package/src/v2/Select/index.ts

@@ -1,2 +0,0 @@
-export * from "./SingleSelect";
-export * from "./MultiSelect";

package/src/v2/index.ts

@@ -1,2 +0,0 @@
-export * from "./Select";
-export * from "./Autocomplete";