@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

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

@@ -1,138 +0,0 @@
-import React, { useMemo } from "react";
-import type { ReactNode, CSSProperties } from "react";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
-import { Switch } from "@sproutsocial/seeds-react-switch";
-import { Radio } from "@sproutsocial/seeds-react-radio";
-import { useTheme } from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-import {
-  StyledMenuItem,
-  MenuItemActionLeft,
-  MenuItemRow,
-  MenuItemText,
-} from "../../MenuItem/styles";
-import type { InputType } from "../../MenuItem/MenuItemTypes";
-
-/**
- * SelectionIndicator - handles logic for appropriate rendering of inputs
- * @returns Checkbox | Icon | Radio | Switch
- */
-const SelectionIndicator = ({
-  id,
-  inputType = "icon",
-  "aria-labelledby": labeledBy,
-  selected,
-}: {
-  id: string;
-  "aria-labelledby": string;
-  selected: boolean;
-  inputType: InputType;
-}) => {
-  const { space } = useTheme();
-
-  const inputStub = (e: React.SyntheticEvent) => {
-    e.stopPropagation();
-  };
-
-  switch (inputType) {
-    case "checkbox":
-      return (
-        <Checkbox
-          tabIndex={-1}
-          onChange={() => {}}
-          checked={selected}
-          aria-labelledby={labeledBy}
-          id={`MenuItem-${inputType}-${id}`}
-        />
-      );
-    case "switch":
-      return (
-        <Switch
-          tabIndex={-1}
-          onClick={inputStub}
-          checked={!!selected}
-          aria-labelledby={labeledBy}
-          id={`MenuItem-${inputType}-${id}`}
-        />
-      );
-    case "radio":
-      return (
-        <Radio
-          tabIndex={-1}
-          checked={selected}
-          id={`MenuItem-${inputType}-${id}`}
-          name={`MenuItem-${inputType}`}
-          aria-labelledby={labeledBy}
-        />
-      );
-    case "icon":
-      if (selected) {
-        return <Icon name="check-solid" aria-hidden size="small" />;
-      } else {
-        return <Box width={space["400"]}></Box>;
-      }
-    default:
-      return null;
-  }
-};
-
-export interface MenuItemProps {
-  children: ReactNode;
-  $highlighted?: boolean;
-  $active?: boolean;
-  inputType?: InputType;
-  selected?: boolean;
-  id?: string | number;
-  style?: CSSProperties;
-  [key: string]: any; // For spreading getItemProps and other props
-}
-
-export const MenuItem = ({
-  children,
-  $highlighted = false,
-  $active = false,
-  inputType,
-  selected = false,
-  id,
-  style,
-  ...props
-}: MenuItemProps) => {
-  // Generate a label id for the menu item text
-  const labelId = useMemo(
-    () =>
-      id
-        ? `menu-item-child-${id}`
-        : `menu-item-child-${Math.random().toString(36).substr(2, 9)}`,
-    [id]
-  );
-
-  // If inputType is provided, wrap children with SelectionIndicator
-  const content = inputType ? (
-    <MenuItemRow>
-      <MenuItemActionLeft>
-        <SelectionIndicator
-          id={String(id || "")}
-          aria-labelledby={labelId}
-          inputType={inputType}
-          selected={selected}
-        />
-      </MenuItemActionLeft>
-      <MenuItemText id={labelId}>{children}</MenuItemText>
-    </MenuItemRow>
-  ) : (
-    children
-  );
-
-  return (
-    <StyledMenuItem
-      $highlighted={$highlighted}
-      $active={$active}
-      $selected={selected}
-      style={style}
-      {...props}
-    >
-      {content}
-    </StyledMenuItem>
-  );
-};

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

@@ -1,124 +0,0 @@
-import * as React from "react";
-import { AnimatePresence, motion } from "motion/react";
-import * as Popover from "@radix-ui/react-popover";
-import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
-import type { TypePopoutProps } from "./PopoutTypes";
-import styled from "styled-components";
-
-const defaultAnimationConfig = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  transition: {
-    ease: "circOut",
-    type: "tween",
-    duration: MOTION_DURATION_FAST,
-  },
-};
-
-const StyledContent = styled(Popover.Content)`
-  width: var(--radix-popover-trigger-width);
-  max-height: var(--radix-popover-content-available-height);
-  // This should be a prop on the Popout component
-  z-index: 7;
-`;
-
-const StyledMotionDiv = styled(motion.div)`
-  background-color: ${({ theme }) => theme.colors.container.background.base};
-  border: ${({ theme }) => theme.borders[500]};
-  border-color: ${({ theme }) => theme.colors.container.border.base};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  box-shadow: ${({ theme }) => theme.shadows.medium};
-  padding: ${({ theme }) => theme.space[400]};
-`;
-
-export function Popout({
-  children,
-  content,
-  open,
-  defaultOpen,
-  onOpenChange,
-  animationConfig = defaultAnimationConfig,
-  side = "bottom",
-  sideOffset = 8,
-  align = "center",
-  alignOffset = 0,
-  onOpenAutoFocus,
-  onEscapeKeyDown,
-  onCloseAutoFocus,
-  onPointerDownOutside,
-  onInteractOutside,
-  ...rest
-}: TypePopoutProps) {
-  const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);
-
-  const handleOpenChange = React.useCallback(
-    (newOpen: boolean) => {
-      setIsOpen(newOpen);
-      onOpenChange?.(newOpen);
-    },
-    [onOpenChange]
-  );
-
-  // Use controlled state if open prop is provided
-  const isControlled = open !== undefined;
-  const popoverOpen = isControlled ? open : isOpen;
-  const popoverOnOpenChange = isControlled ? onOpenChange : handleOpenChange;
-
-  // Handle ref forwarding for components that use innerRef instead of ref
-  // (e.g., seeds-react-button)
-  // Radix UI's asChild passes ref, but Button uses innerRef
-  const radixRef = React.useRef<HTMLButtonElement | null>(null);
-
-  // The popout needs its role and aria controls props to be overridden.
-  // This should not be treated like a dialog when used in a menu.
-  // The combobox itself needs aria-expanded and aria-controls
-  // We could also likely try to collapse the popout and downshift props by merging them and their onclick
-  // At the moment, if the popout content is the combobox the onclick gets overridden by the popout
-  return (
-    <Popover.Root open={popoverOpen} onOpenChange={popoverOnOpenChange}>
-      {/*
-        The Anchor provides the positioning reference for the popout content.
-        We can't rely on Popover.Trigger's ref for positioning because the children
-        (e.g. Input) are class components that don't support forwardRef — Radix's
-        asChild would connect the ref to the class instance rather than the DOM node.
-        The Anchor is absolutely positioned at the top or bottom edge of the wrapper
-        so the popout content appears correctly above or below the trigger.
-      */}
-      <div style={{ position: "relative" }}>
-        <Popover.Trigger ref={radixRef} asChild>
-          {children}
-        </Popover.Trigger>
-        <Popover.Anchor
-          style={{
-            position: "absolute",
-            top: side === "top" ? 0 : "100%",
-            left: 0,
-            right: 0,
-            height: "1px",
-          }}
-        />
-      </div>
-      <Popover.Portal>
-        <StyledContent
-          side={side}
-          sideOffset={sideOffset}
-          align={align}
-          alignOffset={alignOffset}
-          onOpenAutoFocus={onOpenAutoFocus}
-          onEscapeKeyDown={onEscapeKeyDown}
-          onCloseAutoFocus={onCloseAutoFocus}
-          onPointerDownOutside={onPointerDownOutside}
-          onInteractOutside={onInteractOutside}
-          // This only needs added to Popouts used in Menus
-          // those do not need the dialog role which radix applies automatically
-          role="presentation"
-        >
-          <StyledMotionDiv {...animationConfig} {...rest}>
-            {content}
-          </StyledMotionDiv>
-        </StyledContent>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}

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

@@ -1,109 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from "react";
-import type {
-  TypeSystemCommonProps,
-  TypeSystemLayoutProps,
-  TypeStyledComponentsCommonProps,
-} from "@sproutsocial/seeds-react-system-props";
-import type { HTMLMotionProps } from "motion/react";
-
-export interface TypePopoutProps
-  extends TypeStyledComponentsCommonProps,
-    TypeSystemCommonProps,
-    TypeSystemLayoutProps,
-    Omit<
-      React.ComponentPropsWithoutRef<"div">,
-      "color" | "children" | "content"
-    > {
-  /**
-   * The content that the popout should be attached to (renders in Popover.Trigger)
-   */
-  children: React.ReactElement<any>;
-
-  /**
-   * The content to be shown in the popout (renders in Popover.Content)
-   */
-  content: React.ReactNode;
-
-  /**
-   * Whether the popout is open (controlled)
-   */
-  open?: boolean;
-
-  /**
-   * Default open state (uncontrolled)
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Callback fired when the open state changes
-   */
-  onOpenChange?: (open: boolean) => void;
-
-  /**
-   * Used to override the default Popout animations.
-   * Any props that are valid for use on a Motion div can be passed here as an object.
-   * See https://motion.dev/docs/react-motion-component#props
-   */
-  animationConfig?: Omit<HTMLMotionProps<"div">, "children">;
-
-  /**
-   * The preferred side of the trigger to render against when open.
-   * @default "bottom"
-   */
-  side?: "top" | "right" | "bottom" | "left";
-
-  /**
-   * The distance in pixels from the trigger.
-   * @default 8
-   */
-  sideOffset?: number;
-
-  /**
-   * The preferred alignment against the trigger.
-   * @default "center"
-   */
-  align?: "start" | "center" | "end";
-
-  /**
-   * An offset in pixels from the "start" or "end" alignment options.
-   * @default 0
-   */
-  alignOffset?: number;
-
-  /**
-   * Event handler called when the popout content tries to auto-focus on open.
-   * Can be used to prevent the default auto-focus behavior or customize it.
-   * If not provided, defaults to allowing auto-focus on the content.
-   */
-  onOpenAutoFocus?: (event: Event) => void;
-
-  /**
-   * Event handler called when the Escape key is pressed while the popout is open.
-   * Can be used to prevent the default close behavior or customize it.
-   */
-  onEscapeKeyDown?: (event: KeyboardEvent) => void;
-
-  /**
-   * Event handler called when the popout tries to return focus to the trigger on close.
-   * Can be used to prevent the default focus return behavior or customize it.
-   */
-  onCloseAutoFocus?: (event: Event) => void;
-
-  /**
-   * Event handler called when a pointer down event occurs outside the popout content.
-   * Call `event.preventDefault()` to prevent the default dismiss behavior.
-   * Useful when the Popout is nested inside a Radix Dialog (e.g. ModalV2) to
-   * avoid conflicts between nested DismissableLayer instances.
-   */
-  onPointerDownOutside?: (
-    event: CustomEvent<{ originalEvent: PointerEvent }>
-  ) => void;
-
-  /**
-   * Event handler called when an interaction (pointer or focus) occurs outside
-   * the popout content. Call `event.preventDefault()` to prevent the popout
-   * from closing.
-   */
-  onInteractOutside?: (event: CustomEvent<{ originalEvent: Event }>) => void;
-}

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

@@ -1,99 +0,0 @@
-import styled, { css } from "styled-components";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import {
-  MenuToggleButton,
-  type TypeMenuToggleButtonProps,
-} from "../../MenuToggleButton";
-import Button from "@sproutsocial/seeds-react-button";
-
-export interface TypeSelectToggleButtonProps extends TypeMenuToggleButtonProps {
-  invalid?: boolean;
-  isOpen?: boolean;
-  shouldOverflow?: boolean;
-}
-
-// I don't think this needs to be a button.
-// Looking at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-// It appears that a div is acceptable.
-export const StyledSelectToggleButton = styled(
-  Button
-)<TypeSelectToggleButtonProps>`
-  border-color: ${(props) => props.theme.colors.form.border.base};
-  width: 100%;
-
-  ${(props) =>
-    props.invalid &&
-    css`
-      border-color: ${(props) => props.theme.colors.form.border.error};
-    `}
-`;
-
-export interface TypeStyledChevronProps {
-  $isOpen?: boolean;
-  invalid?: boolean;
-}
-
-const StyledChevron = styled.div<TypeStyledChevronProps>`
-  margin-left: ${({ theme }) => theme.space[300]};
-
-  ${({ invalid }) =>
-    invalid &&
-    css`
-      color: ${(props) => props.theme.colors.icon.error};
-    `}
-`;
-
-const RotatingIcon = styled(Icon)<{ $isOpen?: boolean }>`
-  transition: transform 0.15s;
-
-  ${({ $isOpen }) =>
-    $isOpen &&
-    `
-    transform: rotate(-180deg);
-  `}
-`;
-
-const StyledInnerButton = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const EllipsisContent = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const WrappedContent = styled.div`
-  flex: 1;
-  width: 100%;
-  text-align: left;
-  text-wrap: auto;
-`;
-
-export const SelectToggleButton = ({
-  children,
-  isOpen,
-  shouldOverflow,
-  ...buttonProps
-}: TypeSelectToggleButtonProps) => {
-  return (
-    <StyledSelectToggleButton {...buttonProps}>
-      <StyledInnerButton>
-        {shouldOverflow ? (
-          <WrappedContent>{children}</WrappedContent>
-        ) : (
-          <EllipsisContent>{children}</EllipsisContent>
-        )}
-        <StyledChevron $isOpen={isOpen} invalid={buttonProps.invalid}>
-          <RotatingIcon
-            name="chevron-down-outline"
-            fixedWidth
-            aria-hidden
-            $isOpen={isOpen}
-          />
-        </StyledChevron>
-      </StyledInnerButton>
-    </StyledSelectToggleButton>
-  );
-};

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

@@ -1,11 +0,0 @@
-export * from "./types";
-export * from "./utils";
-export * from "./Popout";
-export * from "./PopoutTypes";
-export * from "./SelectToggleButton";
-export * from "./MenuItem";
-export * from "./MenuHeading";
-export * from "./MenuGroup";
-export * from "./props";
-export * from "./useHighlightedIndex";
-export * from "./ComboboxContent";

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

@@ -1,84 +0,0 @@
-import type { ReactNode } from "react";
-import type { DataWithId, ToggleItem, GroupHeading } from "./types";
-
-/**
- * Base props common to all select/autocomplete components
- */
-export interface BaseSelectProps<T extends DataWithId> {
-  id: string;
-  data: T[];
-  isOpen?: boolean;
-  itemToKey?: (item: T) => string | number;
-  itemToString: (item: T | null) => string;
-  renderItem: (item: T) => ReactNode;
-  groupBy?: (item: T) => string;
-  renderGroupHeading?: (label: string) => string;
-  isVirtualized?: boolean;
-  estimatedItemHeight?: number;
-  placeholder: string;
-  onIsOpenChange?: (isOpen: boolean) => void;
-  stateReducer?: any;
-  menuProps?: React.HTMLAttributes<HTMLDivElement>;
-  onPointerDownOutside?: (
-    event: CustomEvent<{ originalEvent: PointerEvent }>
-  ) => void;
-  onInteractOutside?: (event: CustomEvent<{ originalEvent: Event }>) => void;
-  /**
-   * Controls which side the popout appears relative to the trigger.
-   * @default "bottom"
-   */
-  popoutPlacement?: "top" | "bottom";
-}
-/**
- * Props common to all single-select components
- */
-export interface BaseSingleSelectProps<T extends DataWithId>
-  extends BaseSelectProps<T> {
-  selectedItemId?: T["id"] | null;
-  onSelectedItemIdChange?: (itemId: T["id"] | null) => void;
-  placeholderItem?: ToggleItem;
-  inputType?: "radio" | "icon";
-  removePlaceholderItem?: boolean;
-}
-
-/**
- * Props common to all multi-select components
- */
-export interface BaseMultiSelectProps<T extends DataWithId>
-  extends BaseSelectProps<T> {
-  selectedItemIds?: T["id"][];
-  onSelectedItemIdsChange?: (itemIds: T["id"][]) => void;
-  showSelectedItems?: boolean;
-  selectHeadings?: boolean;
-  selectAllItem?: ToggleItem;
-  inputType?: "checkbox" | "icon";
-}
-
-/**
- * Props common to all autocomplete/searchable components
- */
-export interface BaseAutocompleteProps<T extends DataWithId>
-  extends BaseSelectProps<T> {
-  EmptyState: ReactNode;
-  inputValue?: string;
-  itemToSearchString?: (item: T) => string;
-  onInputValueChange?: (value: string) => void;
-}
-
-/**
- * Props for single-select autocomplete/searchable components
- */
-export interface BaseSingleAutocompleteProps<T extends DataWithId>
-  extends BaseSingleSelectProps<T>,
-    BaseAutocompleteProps<T> {
-  inputType?: "radio" | "icon";
-}
-
-/**
- * Props for multi-select autocomplete/searchable components
- */
-export interface BaseMultiAutocompleteProps<T extends DataWithId>
-  extends BaseMultiSelectProps<T>,
-    BaseAutocompleteProps<T> {
-  inputType?: "checkbox" | "icon";
-}

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

@@ -1,41 +0,0 @@
-import styled from "styled-components";
-import Text from "@sproutsocial/seeds-react-text";
-import {
-  border,
-  layout,
-  position,
-  flexbox,
-  grid,
-  color,
-  space,
-} from "styled-system";
-import type { TypeStyledMenuGroupProps } from "./MenuGroupTypes";
-
-export const StyledMenuGroup = styled.li<TypeStyledMenuGroupProps>`
-  font-family: ${({ theme }) => theme.fontFamily};
-  &:not(:last-child) {
-    border-bottom: 1px solid
-      ${({ theme }) => theme.colors.container.border.base};
-  }
-  list-style: none;
-  margin: 0;
-
-  ${border}
-  ${position}
-  ${color}
-  ${flexbox}
-  ${grid}
-  ${layout}
-  ${space}
-`;
-
-export const StyledTitle = styled(Text.SmallSubHeadline)`
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
-    0px ${({ theme }) => theme.space[400]};
-`;
-
-export const StyledMenuGroupUl = styled.ul`
-  margin: 0;
-  padding: 0;
-`;

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

@@ -1,16 +0,0 @@
-export interface DataWithId {
-  id: string | number;
-}
-
-export interface ToggleItem {
-  id: "select-all" | "clear-selection";
-  label: string;
-}
-
-export interface GroupHeading {
-  type: "heading";
-  id: string;
-  label: string;
-}
-
-export type GroupedItem<T> = T | GroupHeading | ToggleItem;

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

@@ -1,62 +0,0 @@
-import { useMemo } from "react";
-import { isGroupHeading } from "./utils";
-import type { GroupedItem, DataWithId } from "./types";
-
-/**
- * Hook to map the highlighted index from Downshift (which only knows about filtered items)
- * to the full items array (which includes headings).
- *
- * @param items - The full items array (includes headings, toggle items, and data items)
- * @param itemsForDownshift - The filtered items array passed to Downshift (may exclude headings)
- * @param downshiftHighlightedIndex - The highlighted index from Downshift
- * @param hasGroups - Whether groupBy is provided (determines if we need to map indices)
- * @param selectHeadings - Whether headings are selectable (affects how we map indices)
- * @returns The highlighted index in the full items array, or null if invalid
- */
-export function useHighlightedIndex<T extends DataWithId>(
-  items: GroupedItem<T>[],
-  itemsForDownshift: GroupedItem<T>[],
-  downshiftHighlightedIndex: number | null | undefined,
-  hasGroups: boolean,
-  selectHeadings: boolean
-): number | null {
-  return useMemo<number | null>(() => {
-    if (
-      downshiftHighlightedIndex === null ||
-      downshiftHighlightedIndex === undefined ||
-      downshiftHighlightedIndex < 0
-    ) {
-      return null;
-    }
-
-    // If no groups, the indices are the same
-    if (!hasGroups) {
-      return downshiftHighlightedIndex;
-    }
-
-    // Get the highlighted item from the downshift items array
-    const highlightedItem = itemsForDownshift[downshiftHighlightedIndex];
-    if (!highlightedItem) {
-      return null;
-    }
-
-    // Find the index of this item in the full items array
-    if (selectHeadings) {
-      // When headings are selectable, itemsForDownshift === items,
-      // so we can find the index directly in the items array
-      return items.findIndex((item) => item === highlightedItem);
-    } else {
-      // When headings are not selectable, itemsForDownshift excludes headings,
-      // so we need to find the item in the full items array, skipping headings
-      return items.findIndex(
-        (item) => !isGroupHeading(item) && item === highlightedItem
-      );
-    }
-  }, [
-    items,
-    itemsForDownshift,
-    downshiftHighlightedIndex,
-    hasGroups,
-    selectHeadings,
-  ]);
-}