@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/src/v2/SearchableSelect/SearchableSelect.tsx

@@ -0,0 +1,389 @@
+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, SelectToggleButton } from "../Common-V2";
+import {
+  VirtualizedAutocompleteContent,
+  NonVirtualizedAutocompleteContent,
+} from "./AutocompleteContent";
+import {
+  isGroupHeading,
+  isToggleItem,
+  menuAnimationConfig,
+  getFilteredItems,
+  groupItemsWithHeadings,
+  useHighlightedIndex,
+  createItemToStringForDownshift,
+} 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,
+        inputValue: "",
+        isOpen: false, // close the menu after selection for single select
+        highlightedIndex: 0, // reset highlight
+      };
+    default:
+      return changes;
+  }
+}
+
+export interface SearchableSelectProps<T extends DataWithId>
+  extends BaseSingleAutocompleteProps<T> {
+  name: string;
+  renderSelection?: (item: T | null) => ReactNode;
+  triggerButtonProps?: any;
+}
+
+export function SearchableSelect<T extends DataWithId>({
+  id,
+  data,
+  selectedItemId: controlledSelectedItemId,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item: T) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderSelection,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  EmptyState,
+  name,
+  placeholder,
+  placeholderItem,
+  onSelectedItemIdChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+}: SearchableSelectProps<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;
+
+  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 items = useMemo<GroupedItem<T>[]>(() => {
+    let groupedItems: GroupedItem<T>[];
+
+    if (groupBy) {
+      // Group first, then add placeholderItem at the beginning
+      groupedItems = groupItemsWithHeadings(filteredItems, groupBy, data);
+    } else {
+      groupedItems = filteredItems;
+    }
+
+    // Add placeholderItem at the beginning if provided
+    if (placeholderItem) {
+      return [placeholderItem, ...groupedItems];
+    }
+
+    return groupedItems;
+  }, [filteredItems, groupBy, placeholderItem, data]);
+
+  // 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) {
+            updateInputValue("");
+            // If placeholderItem is selected, set selectedItem to null
+            // Note: placeholderItem won't be in itemsForCombobox, so this check is for safety
+            if (
+              placeholderItem &&
+              isToggleItem(newSelectedItem) &&
+              newSelectedItem.id === placeholderItem.id
+            ) {
+              updateSelectedItem(null);
+            } else {
+              updateSelectedItem(newSelectedItem as T);
+            }
+          }
+          break;
+
+        case useCombobox.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          break;
+
+        default:
+          break;
+      }
+    },
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+  } = 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 buttonContent = renderSelection
+    ? renderSelection(selectedItem)
+    : selectedItem
+    ? itemToString(selectedItem)
+    : placeholder;
+
+  // Handle button click to toggle popout
+  const handleButtonClick = () => {
+    updateIsOpen(!comboboxIsOpen);
+  };
+
+  return (
+    <Popout
+      open={comboboxIsOpen}
+      onOpenChange={updateIsOpen}
+      animationConfig={menuAnimationConfig}
+      onOpenAutoFocus={(e) => {
+        // Prevent default auto-focus behavior - we'll focus the input manually
+        e.preventDefault();
+        // Focus the input when popout opens
+        const inputElement = document.querySelector(
+          `input[name="${name}"]`
+        ) as HTMLInputElement;
+        if (inputElement) {
+          setTimeout(() => {
+            inputElement.focus();
+          }, 0);
+        }
+      }}
+      onCloseAutoFocus={(e) => {
+        // Prevent default auto-focus behavior
+        e.preventDefault();
+      }}
+      content={
+        <div>
+          {/* Input inside the Popout */}
+          <div style={{ marginBottom: "8px" }}>
+            {(() => {
+              const inputProps = getInputProps();
+              const { ref, id, ...restProps } = inputProps as any;
+              return (
+                <Input
+                  id={id}
+                  name={name}
+                  inputProps={{
+                    autoComplete: "off",
+                    ...restProps,
+                  }}
+                  innerRef={ref}
+                  placeholder={placeholder}
+                />
+              );
+            })()}
+          </div>
+          {/* Menu inside the Popout */}
+          {isVirtualized ? (
+            <VirtualizedAutocompleteContent
+              items={items}
+              getMenuProps={getMenuProps}
+              getItemProps={(props: { index: number }) => {
+                // Only apply getItemProps to actual items, not headings or ToggleItems
+                const item = items[props.index];
+                if (isGroupHeading(item)) {
+                  return {};
+                }
+                if (isToggleItem(item)) {
+                  // Handle ToggleItem (placeholderItem) clicks manually
+                  return {
+                    onClick: () => {
+                      if (placeholderItem && item.id === placeholderItem.id) {
+                        updateSelectedItem(null);
+                      }
+                    },
+                  };
+                }
+                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="radio"
+            />
+          ) : (
+            <NonVirtualizedAutocompleteContent
+              items={items}
+              getMenuProps={getMenuProps}
+              getItemProps={(props: { index: number }) => {
+                // Only apply getItemProps to actual items, not headings or ToggleItems
+                const item = items[props.index];
+                if (isGroupHeading(item)) {
+                  return {};
+                }
+                if (isToggleItem(item)) {
+                  // Handle ToggleItem (placeholderItem) clicks manually
+                  return {
+                    onClick: () => {
+                      if (placeholderItem && item.id === placeholderItem.id) {
+                        updateSelectedItem(null);
+                      }
+                    },
+                  };
+                }
+                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="radio"
+            />
+          )}
+        </div>
+      }
+    >
+      <div>
+        <SelectToggleButton
+          onClick={handleButtonClick}
+          {...triggerButtonProps}
+          name={name}
+          isOpen={comboboxIsOpen}
+          type="button"
+        >
+          {buttonContent}
+        </SelectToggleButton>
+      </div>
+    </Popout>
+  );
+}

package/src/v2/SearchableSelect/index.ts

@@ -0,0 +1,12 @@
+// These are currently experimental components
+// These use the combobox pattern, but have a "dialog" popup.
+// The dialog content includes an inline autocomplete which is always open.
+// https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+// Still need to determine wether we should have
+// - The Root component be the "Combobox" and the popup be a dialog with another combobox inside
+// - Or the Root component simply be a "Dialog" with a combobox inside
+// currently it is the latter.
+export { SearchableSelect } from "./SearchableSelect";
+export type { SearchableSelectProps } from "./SearchableSelect";
+export { SearchableMultiSelect } from "./SearchableMultiSelect";
+export type { SearchableMultiSelectProps } from "./SearchableMultiSelect";