@sproutsocial/seeds-react-menu 1.7.2 → 1.7.6

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

@@ -0,0 +1,448 @@
+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;
+}
+
+export const VirtualizedComboboxContent = <T extends DataWithId>({
+  items,
+  getMenuProps,
+  getItemProps,
+  selectedItems,
+  highlightedIndex,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  inputType,
+  selectHeadings = false,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  ...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) ? 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} {...rest}>
+      {!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}
+                    {...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
+                    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}
+                >
+                  {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();
+
+  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();
+
+  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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,83 @@
+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>
+  );
+};