@sproutsocial/seeds-react-menu 1.7.2 → 1.7.5

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -0,0 +1,362 @@
+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,
+  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,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  menuProps,
+  inputType = "icon",
+  includePlaceholderItem = false,
+}: 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;
+
+  // TODO: This does not actually update the input value when the selected item changes externally
+  // Sync inputValue with selectedItem when selectedItem changes externally and inputValue is not controlled
+  useEffect(() => {
+    if (selectedItem && !isOpen) {
+      // Only update if menu is closed - when open, user might be typing
+      const selectedItemString = itemToString(selectedItem);
+      if (
+        !isInputValueControlled &&
+        uncontrolledInputValue !== selectedItemString
+      ) {
+        setUncontrolledInputValue(selectedItemString);
+      } else if (isInputValueControlled && inputValue !== selectedItemString) {
+        updateInputValue(selectedItemString);
+      }
+    }
+  }, [
+    selectedItem,
+    isOpen,
+    isInputValueControlled,
+    itemToString,
+    uncontrolledInputValue,
+  ]);
+
+  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 &&
+        type !== useCombobox.stateChangeTypes.InputBlur
+      ) {
+        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;
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Call any provided onBlur handler
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+    // Close the menu on blur
+    updateIsOpen(false);
+  };
+
+  return (
+    <Popout
+      open={comboboxIsOpen}
+      onOpenChange={updateIsOpen}
+      animationConfig={menuAnimationConfig}
+      onOpenAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      onCloseAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      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
+            const itemIndex = itemsForCombobox.indexOf(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}
+          placeholderItem={includePlaceholderItem ? placeholderItem : undefined}
+          {...menuProps}
+        />
+      }
+    >
+      <Input
+        id={id}
+        inputProps={{
+          ...restProps,
+          autoComplete: "off",
+          onBlur: handleBlur,
+        }}
+        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}
+        onBlur={handleBlur}
+      />
+    </Popout>
+  );
+}

package/src/v2/Autocomplete/index.ts

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