@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/src/v2/Common-V2/ComboboxContent.tsx

@@ -1,457 +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 } from "./MenuItem";
-import { MenuHeading } from "./MenuHeading";
-import { MenuGroup } from "./MenuGroup";
-import { groupItems, isGroupHeading, isToggleItem } from "./utils";
-import type { DataWithId, GroupedItem, ToggleItem } from "./types";
-import type { InputType } from "../../MenuItem/MenuItemTypes";
-
-// These types could use some cleanup
-// The normal, virutalized, and grouped content all have slightly different props
-interface ComboboxContentProps<T extends DataWithId>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  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;
-  placeholderItem?: ToggleItem;
-  estimatedItemHeight?: number;
-}
-
-export const VirtualizedComboboxContent = <T extends DataWithId>({
-  items,
-  getMenuProps,
-  getItemProps,
-  selectedItems,
-  highlightedIndex,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  inputType,
-  selectHeadings = false,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-  estimatedItemHeight = 35,
-  ...rest
-}: ComboboxContentProps<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) ? 40 : estimatedItemHeight;
-    },
-  });
-
-  useEffect(() => {
-    if (
-      highlightedIndex !== undefined &&
-      highlightedIndex !== null &&
-      highlightedIndex >= 0
-    ) {
-      rowVirtualizer.scrollToIndex(highlightedIndex);
-    }
-  }, [highlightedIndex, rowVirtualizer]);
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-
-  const menuProps = getMenuProps(
-    { ref: containerRef },
-    { suppressRefError: true }
-  );
-  return (
-    <div {...menuProps} {...rest} style={{ overflowY: "auto", ...rest.style }}>
-      {!hasItems && EmptyState ? (
-        <div style={{ padding: "16px" }}>{EmptyState}</div>
-      ) : (
-        <StyledMenuContent
-          style={{
-            height: `${rowVirtualizer.getTotalSize()}px`,
-            position: "relative",
-            overflow: "hidden",
-          }}
-        >
-          <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
-                    ref={rowVirtualizer.measureElement}
-                    key={virtualItem.key}
-                    {...headingItemProps}
-                    $highlighted={highlightedIndex === virtualItem.index}
-                    label={item.label}
-                    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
-                    ref={rowVirtualizer.measureElement}
-                    key={virtualItem.key}
-                    inputType={inputType}
-                    selected={isItemSelected}
-                    id={toggleItem.id}
-                    {...getItemProps({ index: virtualItem.index })}
-                    style={{
-                      width: "100%",
-                    }}
-                    $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}
-                  ref={rowVirtualizer.measureElement}
-                >
-                  {renderItem(dataItem)}
-                </MenuItem>
-              );
-            })}
-          </div>
-        </StyledMenuContent>
-      )}
-    </div>
-  );
-};
-
-export const NormalComboboxContent = <T extends DataWithId>({
-  items,
-  getMenuProps,
-  getItemProps,
-  selectedItems,
-  highlightedIndex,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  inputType,
-  selectHeadings = false,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-  ...rest
-}: ComboboxContentProps<T>) => {
-  // Check if there are any actual items (not just headings)
-  const hasItems = items.some((item) => !isGroupHeading(item));
-
-  const menuProps = getMenuProps({}, { suppressRefError: true });
-
-  return (
-    <div {...menuProps} {...rest}>
-      {!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);
-                }
-              };
-
-              // This should be renamed MenuHeadingItem, it is always selectable
-              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>
-  );
-};
-
-export const GroupedComboboxContent = <T extends DataWithId>({
-  items,
-  getMenuProps,
-  getItemProps,
-  highlightedIndex,
-  selectedItems,
-  renderItem,
-  renderGroupHeading,
-  EmptyState,
-  itemToKey,
-  itemToString,
-  inputType,
-  onHeadingClick,
-  groupBy,
-  allData,
-  selectAllItem,
-  placeholderItem,
-  ...rest
-}: ComboboxContentProps<T>) => {
-  // Check if there are any actual items (not just headings)
-  const hasItems = items.some((item) => !isGroupHeading(item));
-
-  const menuProps = getMenuProps({}, { suppressRefError: true });
-
-  const groupedItems = groupItems(
-    items as T[],
-    groupBy as (item: T) => string,
-    allData
-  );
-  // If we have a placeholder item, we need to account for it in the item indexing
-  let actualItemIndex = placeholderItem ? 1 : 0;
-  return (
-    <div {...menuProps} {...rest}>
-      {!hasItems && EmptyState ? (
-        <div style={{ padding: "16px" }}>{EmptyState}</div>
-      ) : (
-        <StyledMenuContent style={{ position: "relative" }}>
-          {placeholderItem && (
-            <MenuItem
-              key="placeholder-item"
-              {...getItemProps({ index: 0 })}
-              $highlighted={highlightedIndex === 0}
-              $active={false}
-              inputType={inputType}
-              selected={selectedItems.length === 0}
-              id={placeholderItem.id}
-              data-item-index={0}
-            >
-              {placeholderItem.label}
-            </MenuItem>
-          )}
-          {Array.from(groupedItems.keys()).map((group, groupIndex) => {
-            return (
-              <MenuGroup
-                id={`menu-group-${group}`}
-                key={groupIndex}
-                title={renderGroupHeading ? renderGroupHeading(group) : group}
-              >
-                {groupedItems.get(group)?.map((item) => {
-                  const isItemSelected = selectedItems.includes(item);
-                  const itemIndex = actualItemIndex;
-                  actualItemIndex += 1;
-                  return (
-                    <MenuItem
-                      key={itemIndex}
-                      {...getItemProps({ index: itemIndex })}
-                      $highlighted={highlightedIndex === itemIndex}
-                      $active={false}
-                      inputType={inputType}
-                      selected={isItemSelected}
-                      id={itemToKey(item)}
-                      data-item-index={itemIndex}
-                    >
-                      {renderItem(item)}
-                    </MenuItem>
-                  );
-                })}
-              </MenuGroup>
-            );
-          })}
-        </StyledMenuContent>
-      )}
-    </div>
-  );
-};
-
-// Combobox content is not rendered until the menu is open
-// The menus should be updated to only add aria-controls to the menu when it is open
-// Otherwise they should override it to undefined
-export const ComboboxContent = <T extends DataWithId>({
-  isVirtualized = false,
-  groupBy,
-  selectHeadings = false,
-  ...props
-}: ComboboxContentProps<T> & { isVirtualized?: boolean }) => {
-  if (isVirtualized) {
-    return (
-      <VirtualizedComboboxContent
-        groupBy={groupBy}
-        selectHeadings={selectHeadings}
-        {...props}
-      />
-    );
-  }
-  if (groupBy && !selectHeadings) {
-    return (
-      <GroupedComboboxContent
-        groupBy={groupBy}
-        selectHeadings={selectHeadings}
-        {...props}
-      />
-    );
-  }
-
-  return (
-    <NormalComboboxContent
-      selectHeadings={selectHeadings}
-      groupBy={groupBy}
-      {...props}
-    />
-  );
-};

package/src/v2/Common-V2/MenuGroup.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import type { MenuItemProps } from "./MenuItem";
-import type { TypeMenuGroupProps } from "./MenuGroupTypes";
-import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
-
-/**
- * @link https://seeds.sproutsocial.com/components/seeds-react-menu/#menugroup
- *
- * @description MenuGroup is used to group lists of {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItems}.
- *
- * @example
- * <ActionMenu>
- *   <MenuContent>
- *     <MenuGroup title="Group 1" id="1">
- *       <MenuItem>Item 1</MenuItem>
- *     </MenuGroup>
- *     <MenuGroup title="Group 2" id="2">
- *       <MenuItem>Item 2</MenuItem>
- *     </MenuGroup>
- *   </MenuContent>
- * </ActionMenu>
- *
- * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menuitem MenuItem}
- * @see {@link https://seeds.sproutsocial.com/components/seeds-react-menu/#menucontent MenuContent}
- */
-
-const MenuGroup = ({
-  titleAs = "h3",
-  children,
-  title,
-  color,
-  id,
-  ...rest
-}: TypeMenuGroupProps) => {
-  // Generate a unique ID for the title
-  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
-
-  return (
-    <StyledMenuGroup
-      role="group"
-      id={id}
-      aria-labelledby={title ? titleId : undefined}
-      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-      // @ts-expect-error Copy Pasted from original MenuGroup
-      color={color}
-      {...rest}
-    >
-      {title && (
-        <StyledTitle role="heading" as={titleAs} id={titleId}>
-          {title}
-        </StyledTitle>
-      )}
-      <StyledMenuGroupUl>{children}</StyledMenuGroupUl>
-    </StyledMenuGroup>
-  );
-};
-
-MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
-
-export { MenuGroup };

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

@@ -1,30 +0,0 @@
-import type {
-  TypeBorderSystemProps,
-  TypeColorSystemProps,
-  TypeFlexboxSystemProps,
-  TypeGridSystemProps,
-  TypeLayoutSystemProps,
-  TypePositionSystemProps,
-  TypeSpaceSystemProps,
-  TypeTypographySystemProps,
-} from "@sproutsocial/seeds-react-system-props";
-
-export interface TypeMenuGroupStyledProps
-  extends TypeBorderSystemProps,
-    TypeColorSystemProps,
-    TypeFlexboxSystemProps,
-    TypeGridSystemProps,
-    TypeLayoutSystemProps,
-    TypePositionSystemProps,
-    TypeSpaceSystemProps,
-    TypeTypographySystemProps {}
-
-export interface TypeStyledMenuGroupProps extends TypeMenuGroupStyledProps {}
-export interface TypeMenuGroupProps
-  extends TypeStyledMenuGroupProps,
-    Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
-  id: string;
-  title?: string;
-  titleAs?: string | React.ComponentType<any>;
-  children: React.ReactNode;
-}

package/src/v2/Common-V2/MenuHeading.tsx

@@ -1,83 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-import { MenuItem } from "./MenuItem";
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-
-export interface MenuHeadingProps {
-  label: string;
-  renderGroupHeading?: (label: string) => string;
-  virtualizedStyles?: {
-    position: "absolute";
-    top: number;
-    left: number;
-    width: string;
-    height: string;
-    transform: string;
-  };
-  style?: CSSProperties;
-  selectable?: boolean;
-  $highlighted?: boolean;
-  selected?: boolean;
-  id?: string | number;
-  onClick?: () => void;
-  [key: string]: any; // For spreading getItemProps and other props
-}
-
-interface TypeMenuHeaderContainerProps {
-  $leftAction?: boolean;
-}
-
-export const MenuHeaderContainer = styled(Box)<TypeMenuHeaderContainerProps>`
-  border-color: ${({ theme }) => theme.colors.container.border.base};
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.space[350]} ${({ theme }) => theme.space[400]};
-`;
-
-export const MenuHeading = ({
-  label,
-  renderGroupHeading,
-  style,
-  selectable = false,
-  $highlighted = false,
-  selected = false,
-  id,
-  onClick,
-  ...props
-}: MenuHeadingProps) => {
-  const combinedStyle: CSSProperties = {
-    fontWeight: "bold",
-    ...style,
-  };
-
-  if (selectable) {
-    return (
-      <MenuItem
-        style={combinedStyle}
-        $highlighted={$highlighted}
-        $active={false}
-        inputType="checkbox"
-        selected={selected}
-        id={id}
-        onClick={onClick}
-        {...props}
-      >
-        {renderGroupHeading ? renderGroupHeading(label) : label}
-      </MenuItem>
-    );
-  }
-
-  return (
-    <MenuHeaderContainer
-      style={combinedStyle}
-      role="option"
-      aria-disabled={true}
-      aria-selected={false}
-    >
-      {renderGroupHeading ? renderGroupHeading(label) : label}
-    </MenuHeaderContainer>
-  );
-};