@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -1,366 +0,0 @@
-import { useState, useMemo, useEffect } from "react";
-import { useCombobox } 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 } from "../Common-V2";
-import {
-  isGroupHeading,
-  isToggleItem,
-  menuAnimationConfig,
-  getFilteredItems,
-  groupItemsWithHeadings,
-  useHighlightedIndex,
-  createItemToStringForDownshift,
-  ComboboxContent,
-} from "../Common-V2";
-import {
-  type DataWithId,
-  type GroupedItem,
-  type ToggleItem,
-  type BaseSingleAutocompleteProps,
-} from "../Common-V2";
-
-function defaultReducer(state, actionAndChanges) {
-  const { changes, type } = actionAndChanges;
-
-  switch (type) {
-    case useCombobox.stateChangeTypes.InputKeyDownEnter:
-    case useCombobox.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: false, // close the menu after selection for single select
-        highlightedIndex: 0, // reset highlight
-      };
-    default:
-      return changes;
-  }
-}
-
-export interface SingleAutocompleteProps<T extends DataWithId>
-  extends BaseSingleAutocompleteProps<T> {
-  includePlaceholderItem?: boolean;
-}
-
-export function SingleAutocomplete<T extends DataWithId>({
-  id,
-  data,
-  selectedItemId: controlledSelectedItemId,
-  inputValue: controlledInputValue,
-  isOpen: controlledIsOpen,
-  itemToKey = (item: T) => item?.id,
-  itemToString,
-  itemToSearchString,
-  renderItem,
-  groupBy,
-  renderGroupHeading,
-  isVirtualized = false,
-  estimatedItemHeight,
-  EmptyState,
-  placeholder,
-  onSelectedItemIdChange,
-  onInputValueChange,
-  onIsOpenChange,
-  stateReducer = defaultReducer,
-  menuProps,
-  inputType = "icon",
-  includePlaceholderItem = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: SingleAutocompleteProps<T>) {
-  const [uncontrolledInputValue, setUncontrolledInputValue] =
-    useState<string>("");
-  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 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;
-
-  // Sync inputValue with selectedItem when selectedItem changes externally and menu is closed
-  useEffect(() => {
-    if (selectedItem && !isOpen) {
-      // Only update if menu is closed - when open, user might be typing
-      const selectedItemString = itemToString(selectedItem);
-      if (!isInputValueControlled) {
-        // For uncontrolled input, update internal state
-        if (uncontrolledInputValue !== selectedItemString) {
-          setUncontrolledInputValue(selectedItemString);
-        }
-      } else {
-        // For controlled input, notify parent if value doesn't match
-        // Parent is responsible for updating the controlled inputValue
-        if (inputValue !== selectedItemString) {
-          onInputValueChange?.(selectedItemString);
-        }
-      }
-    }
-  }, [
-    selectedItem,
-    isOpen,
-    isInputValueControlled,
-    itemToString,
-    uncontrolledInputValue,
-    inputValue,
-    onInputValueChange,
-  ]);
-
-  const updateSelectedItem = (newSelectedItem: T | null) => {
-    const newSelectedItemId = newSelectedItem
-      ? itemToKey(newSelectedItem)
-      : null;
-    if (!isSelectedItemIdControlled) {
-      setUncontrolledSelectedItemId(newSelectedItemId);
-    }
-    onSelectedItemIdChange?.(newSelectedItemId);
-  };
-
-  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, {
-        selectedItem,
-      }),
-    [data, selectedItem, inputValue, searchStringFn, itemToString]
-  );
-
-  const placeholderItem: ToggleItem = {
-    id: "clear-selection",
-    label: placeholder,
-  };
-
-  const items = useMemo<GroupedItem<T>[]>(() => {
-    let groupedItems: GroupedItem<T>[];
-
-    if (groupBy) {
-      groupedItems = groupItemsWithHeadings(
-        filteredItems,
-        groupBy,
-        data,
-        isVirtualized
-      );
-    } else {
-      groupedItems = filteredItems;
-    }
-
-    // Add placeholder item at the start if needed
-    groupedItems = includePlaceholderItem
-      ? [placeholderItem, ...groupedItems]
-      : groupedItems;
-
-    return groupedItems;
-  }, [
-    filteredItems,
-    placeholder,
-    groupBy,
-    data,
-    includePlaceholderItem,
-    isVirtualized,
-  ]);
-
-  // Filter out headings for downshift
-  const itemsForCombobox = useMemo<(T | ToggleItem)[]>(() => {
-    return items.filter(
-      (item): item is T | ToggleItem => !isGroupHeading(item)
-    );
-  }, [items]);
-
-  // Wrapper function to handle ToggleItem separately
-  const itemToStringForDownshift = useMemo(
-    () => createItemToStringForDownshift(itemToString),
-    [itemToString]
-  );
-
-  const comboboxProps = useCombobox<T | ToggleItem>({
-    inputId: id,
-    items: itemsForCombobox,
-    itemToString: itemToStringForDownshift,
-    defaultHighlightedIndex: 0,
-    selectedItem: selectedItem,
-    inputValue,
-    isOpen,
-    stateReducer,
-    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) {
-            updateSelectedItem(newSelectedItem as T);
-            if (newSelectedItem.id === "clear-selection") {
-              // Clear input if placeholder item is selected
-              updateInputValue("");
-              return;
-            }
-            // Set input to selected item's string representation
-            updateInputValue(itemToString(newSelectedItem as T));
-          }
-          break;
-
-        case useCombobox.stateChangeTypes.InputChange:
-          updateInputValue(newInputValue ?? "");
-          if (newInputValue === "" && selectedItem && !isInputValueControlled) {
-            // If the input is cleared and a selected item is present, clear the selection
-            // This is to ensure that the input value is cleared when the selected item is cleared
-            updateSelectedItem(null);
-          }
-          break;
-
-        default:
-          break;
-      }
-    },
-  });
-  const {
-    isOpen: comboboxIsOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex: comboboxHighlightedIndex,
-    getItemProps,
-    selectedItem: comboboxSelectedItem,
-  } = 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,
-    false // Single select components hardcode selectHeadings to false
-  );
-
-  const inputProps = getInputProps();
-  // 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 { ref, id: inputId, ...restProps } = inputProps as any;
-
-  return (
-    <Popout
-      open={comboboxIsOpen}
-      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];
-            const dataItem = item as T;
-            // Find the index in itemsForCombobox using itemToKey for safer comparison
-            const itemIndex = itemsForCombobox.findIndex((comboboxItem) => {
-              if (isToggleItem(comboboxItem)) {
-                return false;
-              }
-              return itemToKey(comboboxItem as T) === itemToKey(dataItem);
-            });
-            if (itemIndex === -1) {
-              return {};
-            }
-            return getItemProps({ item: dataItem, index: itemIndex });
-          }}
-          selectedItems={selectedItem ? [selectedItem] : []}
-          highlightedIndex={highlightedIndex ?? -1}
-          renderItem={renderItem}
-          renderGroupHeading={renderGroupHeading}
-          EmptyState={EmptyState}
-          itemToKey={itemToKey}
-          itemToString={itemToString}
-          inputType={inputType}
-          selectHeadings={false}
-          groupBy={groupBy}
-          isVirtualized={isVirtualized}
-          estimatedItemHeight={estimatedItemHeight}
-          placeholderItem={includePlaceholderItem ? placeholderItem : undefined}
-          {...menuProps}
-        />
-      }
-    >
-      <Input
-        id={id}
-        inputProps={{
-          autoComplete: "off",
-        }}
-        innerRef={ref}
-        placeholder={placeholder}
-        elemAfter={!includePlaceholderItem ? <Input.ClearButton /> : undefined}
-        clearButtonLabel="Clear selection"
-        onClear={() => {
-          // Note, by default the input clear button re-focuses the input
-          // We don't want to do that, but that would require a breaking change to Input
-          updateSelectedItem(null);
-          updateInputValue("");
-        }}
-        {...restProps}
-      />
-    </Popout>
-  );
-}

package/src/v2/Autocomplete/index.ts

@@ -1,2 +0,0 @@
-export * from "./SingleAutocomplete";
-export * from "./MultiAutocomplete";