@sproutsocial/seeds-react-menu 1.17.0 → 1.18.1

package/src/v2/Common-V2/utils.ts

@@ -1,238 +0,0 @@
-import React from "react";
-import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
-import { type EnumPlacements } from "@sproutsocial/seeds-react-popout";
-import type {
-  DataWithId,
-  GroupedItem,
-  GroupHeading,
-  ToggleItem,
-} from "./types";
-
-export function isGroupHeading<T>(item: GroupedItem<T>): item is GroupHeading {
-  return (
-    typeof item === "object" &&
-    item !== null &&
-    "type" in item &&
-    item.type === "heading"
-  );
-}
-
-export function isToggleItem<T>(
-  item: GroupedItem<T> | T | ToggleItem | null
-): item is ToggleItem {
-  return (
-    typeof item === "object" &&
-    item !== null &&
-    "label" in item &&
-    !("type" in item) &&
-    Object.keys(item).length === 2 && // ToggleItem only has id and label
-    "id" in item
-  );
-}
-
-export const menuPlacementOrigin: {
-  [key in EnumPlacements]?: { originX: number; originY: number };
-} = {
-  top: { originX: 0.5, originY: 1 },
-  ["top-start"]: { originX: 0, originY: 1 },
-  ["top-end"]: { originX: 1, originY: 1 },
-  bottom: { originX: 0.5, originY: 0 },
-  ["bottom-start"]: { originX: 0, originY: 0 },
-  ["bottom-end"]: { originX: 1, originY: 0 },
-  left: { originX: 1, originY: 0.5 },
-  ["left-start"]: { originX: 1, originY: 0 },
-  ["left-end"]: { originX: 1, originY: 1 },
-  right: { originX: 0, originY: 0.5 },
-  ["right-start"]: { originX: 0, originY: 0 },
-  ["right-end"]: { originX: 0, originY: 1 },
-};
-
-export const menuAnimationConfig = {
-  // Turning off layout true. This seems to be what causes the crazy animations when searching.
-  // layout: true,
-  variants: {
-    initial: (
-      custom: { placement: EnumPlacements } = { placement: "bottom" }
-    ) => ({
-      ...menuPlacementOrigin[custom.placement],
-      scale: 0,
-      opacity: 0,
-    }),
-    animate: (
-      custom: { placement: EnumPlacements } = { placement: "bottom" }
-    ) => ({
-      ...menuPlacementOrigin[custom.placement],
-      opacity: 1,
-      scale: 1,
-
-      transition: {
-        type: "tween",
-        duration: MOTION_DURATION_FAST,
-        ease: "circOut",
-      },
-    }),
-    exit: {
-      opacity: 0,
-      scale: 1,
-      transition: {
-        type: "tween",
-        duration: MOTION_DURATION_FAST,
-        ease: "circIn",
-      },
-    },
-  },
-  initial: "initial",
-  whileInView: "animate",
-  viewport: { once: true },
-  exit: "exit",
-};
-
-export function getFilteredItems<T extends DataWithId>(
-  data: T[],
-  inputValue: string,
-  itemToSearchString: (item: T) => string,
-  itemToString: (item: T) => string,
-  options?: {
-    selectedItems?: T[];
-    selectedItem?: T | null;
-    showSelectedItems?: boolean;
-  }
-) {
-  const lowerCasedInputValue = inputValue.toLowerCase();
-
-  // If the item string exactly matches the input value, return for all values
-  // This means an item was selected, and we should allow users to change easily
-  if (
-    options?.selectedItem &&
-    itemToString(options?.selectedItem).toLowerCase() === lowerCasedInputValue
-  ) {
-    return data;
-  }
-
-  return data.filter(function filterItem(item) {
-    // For multi-select: filter out selected items if showSelectedItems is false
-    if (
-      options?.selectedItems &&
-      !options.showSelectedItems &&
-      options.selectedItems.includes(item)
-    ) {
-      return false;
-    }
-
-    // Get the pipe-delimited search string for this item
-    const searchString = itemToSearchString(item);
-    // Split on '|' and check if any part matches the input value
-    const searchableParts = searchString
-      .split("|")
-      .map((part) => part.toLowerCase().trim());
-
-    return searchableParts.some((part) => part.includes(lowerCasedInputValue));
-  });
-}
-
-export function groupItems<T extends DataWithId>(
-  items: T[],
-  groupBy: (item: T) => string,
-  allData?: T[]
-): Map<string, T[]> {
-  if (items.length === 0) {
-    return new Map<string, T[]>();
-  }
-
-  // Determine group order from allData if provided, otherwise use items
-  const dataForOrder = allData || items;
-  const groupOrder: string[] = [];
-  const seenGroups = new Set<string>();
-
-  // First pass: determine group order from allData
-  for (const item of dataForOrder) {
-    let groupKey = groupBy(item);
-    if (item.id === "clear-selection") {
-      continue; // Skip placeholder item for group order
-    }
-
-    if (!seenGroups.has(groupKey)) {
-      seenGroups.add(groupKey);
-      groupOrder.push(groupKey);
-    }
-  }
-
-  // Group filtered items by the groupBy function
-  const grouped = new Map<string, T[]>();
-  for (const item of items) {
-    let groupKey = groupBy(item);
-    if (item.id === "clear-selection") {
-      continue; // Skip placeholder item for grouping
-    }
-
-    if (!grouped.has(groupKey)) {
-      grouped.set(groupKey, []);
-    }
-    grouped.get(groupKey)!.push(item);
-  }
-
-  // Sort the groups by the group order
-  const sortedGrouped = new Map<string, T[]>();
-  for (const groupKey of groupOrder) {
-    const groupItems = grouped.get(groupKey);
-    if (groupItems) {
-      sortedGrouped.set(groupKey, groupItems);
-    }
-  }
-
-  return sortedGrouped;
-}
-
-export function groupItemsWithHeadings<T extends DataWithId>(
-  items: T[],
-  groupBy: (item: T) => string,
-  allData?: T[],
-  selectHeadings = false
-): GroupedItem<T>[] {
-  if (items.length === 0) {
-    return [];
-  }
-
-  const grouped = groupItems(items, groupBy, allData);
-
-  // Create the result array with headings and items in the determined order
-  // Only include groups that have items in the filtered items
-  const result: GroupedItem<T>[] = [];
-  for (const groupKey of grouped.keys()) {
-    const groupItems = grouped.get(groupKey);
-    // Only include groups that have items in the filtered data
-    if (groupItems && groupItems.length > 0) {
-      // Add heading
-      if (selectHeadings) {
-        result.push({
-          id: `heading-${groupKey}`,
-          type: "heading",
-          label: groupKey,
-        });
-      }
-      // Add items in this group
-      result.push(...groupItems);
-    }
-  }
-
-  return result;
-}
-
-/**
- * Creates a wrapper function for itemToString that handles ToggleItem and GroupHeading separately.
- * These items are not selectable (only type T items can be selected), so they use their label property directly.
- */
-export function createItemToStringForDownshift<T extends DataWithId>(
-  itemToString: (item: T | null) => string
-) {
-  return (item: T | ToggleItem | GroupHeading | null): string => {
-    if (!item) return "";
-    if (isToggleItem(item)) {
-      return item.label;
-    }
-    if (isGroupHeading(item)) {
-      return item.label;
-    }
-    return itemToString(item);
-  };
-}

package/src/v2/SearchableSelect/AutocompleteContent.tsx

@@ -1,325 +0,0 @@
-import { useRef, useEffect } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import type { ReactNode, MouseEvent } from "react";
-import { StyledMenuContent } from "../../MenuContent/styles";
-import {
-  MenuItem,
-  MenuHeading,
-  isGroupHeading,
-  isToggleItem,
-  type DataWithId,
-  type GroupedItem,
-  type ToggleItem,
-} from "../Common-V2";
-import type { InputType } from "../../MenuItem/MenuItemTypes";
-
-interface AutocompleteContentProps<T extends DataWithId> {
-  items: GroupedItem<T>[];
-  getMenuProps: any;
-  getItemProps: any;
-  selectedItems: T[];
-  highlightedIndex: number;
-  renderItem: (item: T) => ReactNode;
-  renderGroupHeading?: (label: string) => string;
-  EmptyState?: ReactNode;
-  itemToKey: (item: T) => string | number;
-  itemToString: (item: T | null) => string;
-  inputType: InputType;
-  selectHeadings?: boolean;
-  onHeadingClick?: (groupLabel: string, allSelected: boolean) => void;
-  groupBy?: (item: T) => string;
-  allData?: T[];
-  selectAllItem?: ToggleItem;
-}
-
-export const VirtualizedAutocompleteContent = <T extends DataWithId>({
-  items,
-  getMenuProps,
-  getItemProps,
-  selectedItems,
-  highlightedIndex,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  itemToString,
-  inputType,
-  selectHeadings = false,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-}: AutocompleteContentProps<T>) => {
-  const containerRef = useRef(null);
-
-  // Check if there are any actual items (not just headings)
-  const hasItems = items.some((item) => !isGroupHeading(item));
-
-  const rowVirtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => containerRef.current,
-    estimateSize: (index) => {
-      const item = items[index];
-      return isGroupHeading(item) ? 30 : 35;
-    },
-  });
-
-  useEffect(() => {
-    if (
-      highlightedIndex !== undefined &&
-      highlightedIndex !== null &&
-      highlightedIndex >= 0
-    ) {
-      rowVirtualizer.scrollToIndex(highlightedIndex);
-    }
-  }, [highlightedIndex, rowVirtualizer]);
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-
-  const menuProps = getMenuProps({ ref: containerRef });
-  return (
-    <div {...menuProps} style={{ maxHeight: "400px", overflow: "auto" }}>
-      {!hasItems && EmptyState ? (
-        <div style={{ padding: "16px" }}>{EmptyState}</div>
-      ) : (
-        <StyledMenuContent
-          style={{
-            height: `${rowVirtualizer.getTotalSize()}px`,
-            position: "relative",
-          }}
-        >
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
-            }}
-          >
-            {virtualItems.map((virtualItem) => {
-              const item = items[virtualItem.index];
-
-              if (isGroupHeading(item)) {
-                // Find all items in this group from the full data array (if groupBy is provided)
-                const groupItems =
-                  groupBy && allData
-                    ? allData.filter(
-                        (dataItem) => groupBy(dataItem) === item.label
-                      )
-                    : [];
-
-                // Check if all items in the group are selected
-                const allSelected =
-                  groupItems.length > 0 &&
-                  groupItems.every((groupItem) =>
-                    selectedItems.includes(groupItem)
-                  );
-
-                const headingItemProps = selectHeadings
-                  ? getItemProps({ index: virtualItem.index })
-                  : {};
-                const handleHeadingClick = (e: MouseEvent) => {
-                  // Call Downshift's onClick if it exists
-                  headingItemProps.onClick?.(e);
-                  // Then call our custom handler
-                  if (onHeadingClick) {
-                    onHeadingClick(item.label, allSelected);
-                  }
-                };
-
-                return (
-                  <MenuHeading
-                    key={virtualItem.key}
-                    label={item.label}
-                    {...headingItemProps}
-                    $highlighted={highlightedIndex === virtualItem.index}
-                    renderGroupHeading={renderGroupHeading}
-                    selectable={selectHeadings}
-                    selected={allSelected}
-                    id={item.id}
-                    onClick={selectHeadings ? handleHeadingClick : undefined}
-                    style={{
-                      width: "100%",
-                    }}
-                  />
-                );
-              }
-
-              // Handle ToggleItem separately
-              if (isToggleItem(item)) {
-                const toggleItem = item as ToggleItem;
-                const isItemSelected =
-                  selectAllItem && toggleItem.id === selectAllItem.id
-                    ? allData &&
-                      allData.length > 0 &&
-                      allData.every((item) => selectedItems.includes(item))
-                    : false;
-
-                return (
-                  <MenuItem
-                    key={virtualItem.key}
-                    inputType={inputType}
-                    selected={isItemSelected}
-                    id={toggleItem.id}
-                    {...getItemProps({ index: virtualItem.index })}
-                    style={{
-                      width: "100%",
-                      /* height: `${virtualItem.size}px`,
-                    transform: `translateY(${virtualItem.start}px)`, */
-                    }}
-                    $highlighted={highlightedIndex === virtualItem.index}
-                    $active={false}
-                  >
-                    {toggleItem.label}
-                  </MenuItem>
-                );
-              }
-
-              const dataItem = item as T;
-              const isItemSelected = selectedItems.includes(dataItem);
-              return (
-                <MenuItem
-                  key={virtualItem.key}
-                  inputType={inputType}
-                  selected={isItemSelected}
-                  id={itemToKey(dataItem)}
-                  {...getItemProps({ index: virtualItem.index })}
-                  style={{
-                    width: "100%",
-                  }}
-                  $highlighted={highlightedIndex === virtualItem.index}
-                  $active={false}
-                >
-                  {renderItem(dataItem)}
-                </MenuItem>
-              );
-            })}
-          </div>
-        </StyledMenuContent>
-      )}
-    </div>
-  );
-};
-
-export const NonVirtualizedAutocompleteContent = <T extends DataWithId>({
-  items,
-  getMenuProps,
-  getItemProps,
-  selectedItems,
-  highlightedIndex,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  itemToString,
-  inputType,
-  selectHeadings = false,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-}: AutocompleteContentProps<T>) => {
-  // Check if there are any actual items (not just headings)
-  const hasItems = items.some((item) => !isGroupHeading(item));
-
-  const menuProps = getMenuProps();
-  return (
-    <div {...menuProps} style={{ maxHeight: "400px", overflow: "auto" }}>
-      {!hasItems && EmptyState ? (
-        <div style={{ padding: "16px" }}>{EmptyState}</div>
-      ) : (
-        <StyledMenuContent
-          style={{
-            position: "relative",
-          }}
-        >
-          {items.map((item, index) => {
-            if (isGroupHeading(item)) {
-              // Find all items in this group from the full data array (if groupBy is provided)
-              const groupItems =
-                groupBy && allData
-                  ? allData.filter(
-                      (dataItem) => groupBy(dataItem) === item.label
-                    )
-                  : [];
-
-              // Check if all items in the group are selected
-              const allSelected =
-                groupItems.length > 0 &&
-                groupItems.every((groupItem) =>
-                  selectedItems.includes(groupItem)
-                );
-
-              const headingItemProps = selectHeadings
-                ? getItemProps({ index })
-                : {};
-              const handleHeadingClick = (e: MouseEvent) => {
-                // Call Downshift's onClick if it exists
-                headingItemProps.onClick?.(e);
-                // Then call our custom handler
-                if (onHeadingClick) {
-                  onHeadingClick(item.label, allSelected);
-                }
-              };
-
-              return (
-                <MenuHeading
-                  key={index}
-                  {...headingItemProps}
-                  $highlighted={highlightedIndex === index}
-                  label={item.label}
-                  renderGroupHeading={renderGroupHeading}
-                  selectable={selectHeadings}
-                  selected={allSelected}
-                  id={item.id}
-                  onClick={selectHeadings ? handleHeadingClick : undefined}
-                />
-              );
-            }
-
-            // Handle ToggleItem separately
-            if (isToggleItem(item)) {
-              const toggleItem = item as ToggleItem;
-              const isItemSelected =
-                selectAllItem && toggleItem.id === selectAllItem.id
-                  ? allData &&
-                    allData.length > 0 &&
-                    allData.every((item) => selectedItems.includes(item))
-                  : false;
-              return (
-                <MenuItem
-                  key={index}
-                  {...getItemProps({ index })}
-                  $highlighted={highlightedIndex === index}
-                  $active={false}
-                  inputType={inputType}
-                  selected={isItemSelected}
-                  id={toggleItem.id}
-                >
-                  {toggleItem.label}
-                </MenuItem>
-              );
-            }
-
-            const dataItem = item as T;
-            const isItemSelected = selectedItems.includes(dataItem);
-            return (
-              <MenuItem
-                key={index}
-                {...getItemProps({ index })}
-                $highlighted={highlightedIndex === index}
-                $active={false}
-                inputType={inputType}
-                selected={isItemSelected}
-                id={itemToKey(dataItem)}
-              >
-                {renderItem(dataItem)}
-              </MenuItem>
-            );
-          })}
-        </StyledMenuContent>
-      )}
-    </div>
-  );
-};