@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/SearchableSelect/SearchableSelect.tsx

@@ -1,395 +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, 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,
-  onPointerDownOutside,
-  onInteractOutside,
-  popoutPlacement,
-}: 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}
-      side={popoutPlacement}
-      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();
-      }}
-      onPointerDownOutside={onPointerDownOutside}
-      onInteractOutside={onInteractOutside}
-      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

@@ -1,12 +0,0 @@
-// 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";