@sproutsocial/seeds-react-menu 1.7.2 → 1.7.5

package/src/v2/Select/SingleSelect.tsx

@@ -0,0 +1,272 @@
+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,
+  placeholder,
+  onSelectedItemIdChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+  menuProps,
+  inputType = "icon",
+  removePlaceholderItem = false,
+}: 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}
+      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];
+            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
+            const itemIndex = itemsForSelect.indexOf(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}
+          groupBy={groupBy}
+          selectHeadings={false}
+          {...menuProps}
+        />
+      }
+    >
+      <SelectToggleButton
+        {...toggleButtonProps}
+        {...triggerButtonProps}
+        isOpen={selectIsOpen}
+      >
+        {buttonContent}
+      </SelectToggleButton>
+    </Popout>
+  );
+}

package/src/v2/Select/index.ts

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

package/src/v2/index.ts

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

package/tsup.config.ts

@@ -1,11 +1,20 @@
 import { defineConfig } from "tsup";
 
-export default defineConfig({
-  entry: ["src/index.ts"],
+export default defineConfig((options) => ({
+  entry: {
+    index: "src/index.ts",
+    "v2/index": "src/v2/index.ts",
+  },
   format: ["cjs", "esm"],
   clean: true,
   legacyOutput: true,
-  dts: false,
+  dts: options.dts,
   sourcemap: true,
-  external: ["react"],
-});
+  external: [
+    "react",
+    "styled-components",
+    "styled-system",
+    /^@sproutsocial\//, // All internal Seeds packages (monorepo optimization)
+  ],
+  metafile: options.metafile,
+}));