@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/dist/esm/v2/index.js

@@ -0,0 +1,2000 @@
+import {
+  MenuItemActionLeft,
+  MenuItemRow,
+  MenuItemText,
+  StyledMenuContent,
+  StyledMenuItem
+} from "../chunk-ROQATIB7.js";
+
+// src/v2/Select/SingleSelect.tsx
+import { useState as useState2, useMemo as useMemo3 } from "react";
+import { useSelect } from "downshift";
+import "@sproutsocial/seeds-react-label";
+
+// src/v2/Common-V2/utils.ts
+import "react";
+import { MOTION_DURATION_FAST } from "@sproutsocial/seeds-motion/unitless";
+import "@sproutsocial/seeds-react-popout";
+function isGroupHeading(item) {
+  return typeof item === "object" && item !== null && "type" in item && item.type === "heading";
+}
+function isToggleItem(item) {
+  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;
+}
+var menuPlacementOrigin = {
+  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 }
+};
+var menuAnimationConfig = {
+  // Turning off layout true. This seems to be what causes the crazy animations when searching.
+  // layout: true,
+  variants: {
+    initial: (custom = { placement: "bottom" }) => ({
+      ...menuPlacementOrigin[custom.placement],
+      scale: 0,
+      opacity: 0
+    }),
+    animate: (custom = { 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"
+};
+function getFilteredItems(data, inputValue, itemToSearchString, itemToString, options) {
+  const lowerCasedInputValue = inputValue.toLowerCase();
+  if (options?.selectedItem && itemToString(options?.selectedItem).toLowerCase() === lowerCasedInputValue) {
+    return data;
+  }
+  return data.filter(function filterItem(item) {
+    if (options?.selectedItems && !options.showSelectedItems && options.selectedItems.includes(item)) {
+      return false;
+    }
+    const searchString = itemToSearchString(item);
+    const searchableParts = searchString.split("|").map((part) => part.toLowerCase().trim());
+    return searchableParts.some((part) => part.includes(lowerCasedInputValue));
+  });
+}
+function groupItems(items, groupBy, allData) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ new Map();
+  }
+  const dataForOrder = allData || items;
+  const groupOrder = [];
+  const seenGroups = /* @__PURE__ */ new Set();
+  for (const item of dataForOrder) {
+    let groupKey = groupBy(item);
+    if (item.id === "clear-selection") {
+      continue;
+    }
+    if (!seenGroups.has(groupKey)) {
+      seenGroups.add(groupKey);
+      groupOrder.push(groupKey);
+    }
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    let groupKey = groupBy(item);
+    if (item.id === "clear-selection") {
+      continue;
+    }
+    if (!grouped.has(groupKey)) {
+      grouped.set(groupKey, []);
+    }
+    grouped.get(groupKey).push(item);
+  }
+  const sortedGrouped = /* @__PURE__ */ new Map();
+  for (const groupKey of groupOrder) {
+    const groupItems2 = grouped.get(groupKey);
+    if (groupItems2) {
+      sortedGrouped.set(groupKey, groupItems2);
+    }
+  }
+  return sortedGrouped;
+}
+function groupItemsWithHeadings(items, groupBy, allData, selectHeadings = false) {
+  if (items.length === 0) {
+    return [];
+  }
+  const grouped = groupItems(items, groupBy, allData);
+  const result = [];
+  for (const groupKey of grouped.keys()) {
+    const groupItems2 = grouped.get(groupKey);
+    if (groupItems2 && groupItems2.length > 0) {
+      if (selectHeadings) {
+        result.push({
+          id: `heading-${groupKey}`,
+          type: "heading",
+          label: groupKey
+        });
+      }
+      result.push(...groupItems2);
+    }
+  }
+  return result;
+}
+function createItemToStringForDownshift(itemToString) {
+  return (item) => {
+    if (!item) return "";
+    if (isToggleItem(item)) {
+      return item.label;
+    }
+    if (isGroupHeading(item)) {
+      return item.label;
+    }
+    return itemToString(item);
+  };
+}
+
+// src/v2/Common-V2/Popout.tsx
+import * as React2 from "react";
+import { motion } from "motion/react";
+import * as Popover from "@radix-ui/react-popover";
+import { MOTION_DURATION_FAST as MOTION_DURATION_FAST2 } from "@sproutsocial/seeds-motion/unitless";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultAnimationConfig = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: {
+    ease: "circOut",
+    type: "tween",
+    duration: MOTION_DURATION_FAST2
+  }
+};
+var 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;
+`;
+var 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]};
+`;
+function Popout({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  animationConfig = defaultAnimationConfig,
+  side = "bottom",
+  sideOffset = 8,
+  align = "center",
+  alignOffset = 0,
+  onOpenAutoFocus,
+  onEscapeKeyDown,
+  onCloseAutoFocus,
+  ...rest
+}) {
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen ?? false);
+  const handleOpenChange = React2.useCallback(
+    (newOpen) => {
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+  const isControlled = open !== void 0;
+  const popoverOpen = isControlled ? open : isOpen;
+  const popoverOnOpenChange = isControlled ? onOpenChange : handleOpenChange;
+  const radixRef = React2.useRef(null);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open: popoverOpen, onOpenChange: popoverOnOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { ref: radixRef, asChild: true, children }),
+    /* @__PURE__ */ jsx(Popover.Anchor, {}),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      StyledContent,
+      {
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        onOpenAutoFocus,
+        onEscapeKeyDown,
+        onCloseAutoFocus,
+        role: "presentation",
+        children: /* @__PURE__ */ jsx(StyledMotionDiv, { ...animationConfig, ...rest, children: content })
+      }
+    ) })
+  ] });
+}
+
+// src/v2/Common-V2/PopoutTypes.tsx
+import "react";
+
+// src/v2/Common-V2/SelectToggleButton.tsx
+import styled2, { css } from "styled-components";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import Button from "@sproutsocial/seeds-react-button";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledSelectToggleButton = styled2(
+  Button
+)`
+  border-color: ${(props) => props.theme.colors.form.border.base};
+  width: 100%;
+
+  ${(props) => props.invalid && css`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+    `}
+`;
+var StyledChevron = styled2.div`
+  margin-left: ${({ theme }) => theme.space[300]};
+
+  ${({ invalid }) => invalid && css`
+      color: ${(props) => props.theme.colors.icon.error};
+    `}
+`;
+var RotatingIcon = styled2(Icon)`
+  transition: transform 0.15s;
+
+  ${({ $isOpen }) => $isOpen && `
+    transform: rotate(-180deg);
+  `}
+`;
+var StyledInnerButton = styled2.div`
+  display: flex;
+  justify-content: space-between;
+`;
+var EllipsisContent = styled2.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var WrappedContent = styled2.div`
+  flex: 1;
+  width: 100%;
+  text-align: left;
+  text-wrap: auto;
+`;
+var SelectToggleButton = ({
+  children,
+  isOpen,
+  shouldOverflow,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ jsx2(StyledSelectToggleButton, { ...buttonProps, children: /* @__PURE__ */ jsxs2(StyledInnerButton, { children: [
+    shouldOverflow ? /* @__PURE__ */ jsx2(WrappedContent, { children }) : /* @__PURE__ */ jsx2(EllipsisContent, { children }),
+    /* @__PURE__ */ jsx2(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx2(
+      RotatingIcon,
+      {
+        name: "chevron-down-outline",
+        fixedWidth: true,
+        "aria-hidden": true,
+        $isOpen: isOpen
+      }
+    ) })
+  ] }) });
+};
+
+// src/v2/Common-V2/MenuItem.tsx
+import { useMemo } from "react";
+import { Icon as Icon2 } 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 { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SelectionIndicator = ({
+  id,
+  inputType = "icon",
+  "aria-labelledby": labeledBy,
+  selected
+}) => {
+  const { space: space2 } = useTheme();
+  const inputStub = (e) => {
+    e.stopPropagation();
+  };
+  switch (inputType) {
+    case "checkbox":
+      return /* @__PURE__ */ jsx3(
+        Checkbox,
+        {
+          tabIndex: -1,
+          onChange: () => {
+          },
+          checked: selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItem-${inputType}-${id}`
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ jsx3(
+        Switch,
+        {
+          tabIndex: -1,
+          onClick: inputStub,
+          checked: !!selected,
+          "aria-labelledby": labeledBy,
+          id: `MenuItem-${inputType}-${id}`
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx3(
+        Radio,
+        {
+          tabIndex: -1,
+          checked: selected,
+          id: `MenuItem-${inputType}-${id}`,
+          name: `MenuItem-${inputType}`,
+          "aria-labelledby": labeledBy
+        }
+      );
+    case "icon":
+      if (selected) {
+        return /* @__PURE__ */ jsx3(Icon2, { name: "check-solid", "aria-hidden": true, size: "small" });
+      } else {
+        return /* @__PURE__ */ jsx3(Box, { width: space2["400"] });
+      }
+    default:
+      return null;
+  }
+};
+var MenuItem = ({
+  children,
+  $highlighted = false,
+  $active = false,
+  inputType,
+  selected = false,
+  id,
+  style,
+  ...props
+}) => {
+  const labelId = useMemo(
+    () => id ? `menu-item-child-${id}` : `menu-item-child-${Math.random().toString(36).substr(2, 9)}`,
+    [id]
+  );
+  const content = inputType ? /* @__PURE__ */ jsxs3(MenuItemRow, { children: [
+    /* @__PURE__ */ jsx3(MenuItemActionLeft, { children: /* @__PURE__ */ jsx3(
+      SelectionIndicator,
+      {
+        id: String(id || ""),
+        "aria-labelledby": labelId,
+        inputType,
+        selected
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(MenuItemText, { id: labelId, children })
+  ] }) : children;
+  return /* @__PURE__ */ jsx3(
+    StyledMenuItem,
+    {
+      $highlighted,
+      $active,
+      $selected: selected,
+      style,
+      ...props,
+      children: content
+    }
+  );
+};
+
+// src/v2/Common-V2/MenuHeading.tsx
+import styled3 from "styled-components";
+import Box2 from "@sproutsocial/seeds-react-box";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MenuHeaderContainer = styled3(Box2)`
+  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]};
+`;
+var MenuHeading = ({
+  label,
+  renderGroupHeading,
+  style,
+  selectable = false,
+  $highlighted = false,
+  selected = false,
+  id,
+  onClick,
+  ...props
+}) => {
+  const combinedStyle = {
+    fontWeight: "bold",
+    ...style
+  };
+  if (selectable) {
+    return /* @__PURE__ */ jsx4(
+      MenuItem,
+      {
+        style: combinedStyle,
+        $highlighted,
+        $active: false,
+        inputType: "checkbox",
+        selected,
+        id,
+        onClick,
+        ...props,
+        children: renderGroupHeading ? renderGroupHeading(label) : label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    MenuHeaderContainer,
+    {
+      style: combinedStyle,
+      role: "option",
+      "aria-disabled": true,
+      "aria-selected": false,
+      children: renderGroupHeading ? renderGroupHeading(label) : label
+    }
+  );
+};
+
+// src/v2/Common-V2/MenuGroup.tsx
+import "react";
+
+// src/v2/Common-V2/styles.tsx
+import styled4 from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+import {
+  border,
+  layout,
+  position,
+  flexbox,
+  grid,
+  color,
+  space
+} from "styled-system";
+var StyledMenuGroup = styled4.li`
+  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}
+`;
+var StyledTitle = styled4(Text.SmallSubHeadline)`
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  margin: ${({ theme }) => theme.space[400]} ${({ theme }) => theme.space[400]}
+    0px ${({ theme }) => theme.space[400]};
+`;
+var StyledMenuGroupUl = styled4.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+// src/v2/Common-V2/MenuGroup.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var MenuGroup = ({
+  titleAs = "h3",
+  children,
+  title,
+  color: color2,
+  id,
+  ...rest
+}) => {
+  const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
+  return /* @__PURE__ */ jsxs4(
+    StyledMenuGroup,
+    {
+      role: "group",
+      id,
+      "aria-labelledby": title ? titleId : void 0,
+      color: color2,
+      ...rest,
+      children: [
+        title && /* @__PURE__ */ jsx5(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx5(StyledMenuGroupUl, { children })
+      ]
+    }
+  );
+};
+MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
+
+// src/v2/Common-V2/useHighlightedIndex.ts
+import { useMemo as useMemo2 } from "react";
+function useHighlightedIndex(items, itemsForDownshift, downshiftHighlightedIndex, hasGroups, selectHeadings) {
+  return useMemo2(() => {
+    if (downshiftHighlightedIndex === null || downshiftHighlightedIndex === void 0 || downshiftHighlightedIndex < 0) {
+      return null;
+    }
+    if (!hasGroups) {
+      return downshiftHighlightedIndex;
+    }
+    const highlightedItem = itemsForDownshift[downshiftHighlightedIndex];
+    if (!highlightedItem) {
+      return null;
+    }
+    if (selectHeadings) {
+      return items.findIndex((item) => item === highlightedItem);
+    } else {
+      return items.findIndex(
+        (item) => !isGroupHeading(item) && item === highlightedItem
+      );
+    }
+  }, [
+    items,
+    itemsForDownshift,
+    downshiftHighlightedIndex,
+    hasGroups,
+    selectHeadings
+  ]);
+}
+
+// src/v2/Common-V2/ComboboxContent.tsx
+import { useRef as useRef2, useEffect } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var VirtualizedComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  selectedItems,
+  highlightedIndex,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  inputType,
+  selectHeadings = false,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  ...rest
+}) => {
+  const containerRef = useRef2(null);
+  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 !== void 0 && highlightedIndex !== null && highlightedIndex >= 0) {
+      rowVirtualizer.scrollToIndex(highlightedIndex);
+    }
+  }, [highlightedIndex, rowVirtualizer]);
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const menuProps = getMenuProps({ ref: containerRef });
+  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsx6(
+    StyledMenuContent,
+    {
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
+          },
+          children: virtualItems.map((virtualItem) => {
+            const item = items[virtualItem.index];
+            if (isGroupHeading(item)) {
+              const groupItems2 = groupBy && allData ? allData.filter(
+                (dataItem2) => groupBy(dataItem2) === item.label
+              ) : [];
+              const allSelected = groupItems2.length > 0 && groupItems2.every(
+                (groupItem) => selectedItems.includes(groupItem)
+              );
+              const headingItemProps = selectHeadings ? getItemProps({ index: virtualItem.index }) : {};
+              const handleHeadingClick = (e) => {
+                headingItemProps.onClick?.(e);
+                if (onHeadingClick) {
+                  onHeadingClick(item.label, allSelected);
+                }
+              };
+              return /* @__PURE__ */ jsx6(
+                MenuHeading,
+                {
+                  ...headingItemProps,
+                  $highlighted: highlightedIndex === virtualItem.index,
+                  label: item.label,
+                  renderGroupHeading,
+                  selectable: selectHeadings,
+                  selected: allSelected,
+                  id: item.id,
+                  onClick: selectHeadings ? handleHeadingClick : void 0,
+                  style: {
+                    width: "100%"
+                  }
+                },
+                virtualItem.key
+              );
+            }
+            if (isToggleItem(item)) {
+              const toggleItem = item;
+              const isItemSelected2 = selectAllItem && toggleItem.id === selectAllItem.id ? allData && allData.length > 0 && allData.every((item2) => selectedItems.includes(item2)) : false;
+              return /* @__PURE__ */ jsx6(
+                MenuItem,
+                {
+                  inputType,
+                  selected: isItemSelected2,
+                  id: toggleItem.id,
+                  ...getItemProps({ index: virtualItem.index }),
+                  style: {
+                    width: "100%"
+                  },
+                  $highlighted: highlightedIndex === virtualItem.index,
+                  $active: false,
+                  children: toggleItem.label
+                },
+                virtualItem.key
+              );
+            }
+            const dataItem = item;
+            const isItemSelected = selectedItems.includes(dataItem);
+            return /* @__PURE__ */ jsx6(
+              MenuItem,
+              {
+                inputType,
+                selected: isItemSelected,
+                id: itemToKey(dataItem),
+                ...getItemProps({ index: virtualItem.index }),
+                style: {
+                  width: "100%"
+                },
+                $highlighted: highlightedIndex === virtualItem.index,
+                $active: false,
+                children: renderItem(dataItem)
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
+    }
+  ) });
+};
+var NormalComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  selectedItems,
+  highlightedIndex,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  inputType,
+  selectHeadings = false,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  ...rest
+}) => {
+  const hasItems = items.some((item) => !isGroupHeading(item));
+  const menuProps = getMenuProps();
+  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsx6(
+    StyledMenuContent,
+    {
+      style: {
+        position: "relative"
+      },
+      children: items.map((item, index) => {
+        if (isGroupHeading(item)) {
+          const groupItems2 = groupBy && allData ? allData.filter(
+            (dataItem2) => groupBy(dataItem2) === item.label
+          ) : [];
+          const allSelected = groupItems2.length > 0 && groupItems2.every(
+            (groupItem) => selectedItems.includes(groupItem)
+          );
+          const headingItemProps = selectHeadings ? getItemProps({ index }) : {};
+          const handleHeadingClick = (e) => {
+            headingItemProps.onClick?.(e);
+            if (onHeadingClick) {
+              onHeadingClick(item.label, allSelected);
+            }
+          };
+          return /* @__PURE__ */ jsx6(
+            MenuHeading,
+            {
+              ...headingItemProps,
+              $highlighted: highlightedIndex === index,
+              label: item.label,
+              renderGroupHeading,
+              selectable: selectHeadings,
+              selected: allSelected,
+              id: item.id,
+              onClick: selectHeadings ? handleHeadingClick : void 0
+            },
+            index
+          );
+        }
+        if (isToggleItem(item)) {
+          const toggleItem = item;
+          const isItemSelected2 = selectAllItem && toggleItem.id === selectAllItem.id ? allData && allData.length > 0 && allData.every((item2) => selectedItems.includes(item2)) : false;
+          return /* @__PURE__ */ jsx6(
+            MenuItem,
+            {
+              ...getItemProps({ index }),
+              $highlighted: highlightedIndex === index,
+              $active: false,
+              inputType,
+              selected: isItemSelected2,
+              id: toggleItem.id,
+              children: toggleItem.label
+            },
+            index
+          );
+        }
+        const dataItem = item;
+        const isItemSelected = selectedItems.includes(dataItem);
+        return /* @__PURE__ */ jsx6(
+          MenuItem,
+          {
+            ...getItemProps({ index }),
+            $highlighted: highlightedIndex === index,
+            $active: false,
+            inputType,
+            selected: isItemSelected,
+            id: itemToKey(dataItem),
+            children: renderItem(dataItem)
+          },
+          index
+        );
+      })
+    }
+  ) });
+};
+var GroupedComboboxContent = ({
+  items,
+  getMenuProps,
+  getItemProps,
+  highlightedIndex,
+  selectedItems,
+  renderItem,
+  renderGroupHeading,
+  EmptyState,
+  itemToKey,
+  itemToString,
+  inputType,
+  onHeadingClick,
+  groupBy,
+  allData,
+  selectAllItem,
+  placeholderItem,
+  ...rest
+}) => {
+  const hasItems = items.some((item) => !isGroupHeading(item));
+  const menuProps = getMenuProps();
+  const groupedItems = groupItems(
+    items,
+    groupBy,
+    allData
+  );
+  let actualItemIndex = placeholderItem ? 1 : 0;
+  return /* @__PURE__ */ jsx6("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ jsx6("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ jsxs5(StyledMenuContent, { style: { position: "relative" }, children: [
+    placeholderItem && /* @__PURE__ */ jsx6(
+      MenuItem,
+      {
+        ...getItemProps({ index: 0 }),
+        $highlighted: highlightedIndex === 0,
+        $active: false,
+        inputType,
+        selected: selectedItems.length === 0,
+        id: placeholderItem.id,
+        "data-item-index": 0,
+        children: placeholderItem.label
+      },
+      "placeholder-item"
+    ),
+    Array.from(groupedItems.keys()).map((group, groupIndex) => {
+      return /* @__PURE__ */ jsx6(
+        MenuGroup,
+        {
+          id: `menu-group-${group}`,
+          title: renderGroupHeading ? renderGroupHeading(group) : group,
+          children: groupedItems.get(group)?.map((item) => {
+            const isItemSelected = selectedItems.includes(item);
+            const itemIndex = actualItemIndex;
+            actualItemIndex += 1;
+            return /* @__PURE__ */ jsx6(
+              MenuItem,
+              {
+                ...getItemProps({ index: itemIndex }),
+                $highlighted: highlightedIndex === itemIndex,
+                $active: false,
+                inputType,
+                selected: isItemSelected,
+                id: itemToKey(item),
+                "data-item-index": itemIndex,
+                children: renderItem(item)
+              },
+              itemIndex
+            );
+          })
+        },
+        groupIndex
+      );
+    })
+  ] }) });
+};
+var ComboboxContent = ({
+  isVirtualized = false,
+  groupBy,
+  selectHeadings = false,
+  ...props
+}) => {
+  if (isVirtualized) {
+    return /* @__PURE__ */ jsx6(
+      VirtualizedComboboxContent,
+      {
+        groupBy,
+        selectHeadings,
+        ...props
+      }
+    );
+  }
+  if (groupBy && !selectHeadings) {
+    return /* @__PURE__ */ jsx6(
+      GroupedComboboxContent,
+      {
+        groupBy,
+        selectHeadings,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    NormalComboboxContent,
+    {
+      selectHeadings,
+      groupBy,
+      ...props
+    }
+  );
+};
+
+// src/v2/Select/SingleSelect.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+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;
+  }
+}
+function SingleSelect({
+  id,
+  data,
+  selectedItemId: controlledSelectedItemId,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSelection,
+  renderSelection,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  placeholder,
+  onSelectedItemIdChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer,
+  triggerButtonProps,
+  menuProps,
+  inputType = "icon",
+  removePlaceholderItem = false
+}) {
+  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState2(null);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState2(false);
+  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
+  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
+  const selectedItem = useMemo3(() => {
+    if (selectedItemId === null || selectedItemId === void 0) {
+      return null;
+    }
+    return data.find((item) => itemToKey(item) === selectedItemId) ?? null;
+  }, [selectedItemId, data, itemToKey]);
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItem = (newSelectedItem) => {
+    const newSelectedItemId = newSelectedItem ? itemToKey(newSelectedItem) : null;
+    if (!isSelectedItemIdControlled) {
+      setUncontrolledSelectedItemId(newSelectedItemId);
+    }
+    onSelectedItemIdChange?.(newSelectedItemId);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const items = useMemo3(() => {
+    let groupedItems;
+    const placeholderItem = {
+      id: "clear-selection",
+      label: placeholder
+    };
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(data, groupBy, data, true);
+    } else {
+      groupedItems = data;
+    }
+    if (!removePlaceholderItem) {
+      groupedItems = [placeholderItem, ...groupedItems];
+    }
+    return groupedItems;
+  }, [data, groupBy, placeholder]);
+  const itemsForSelect = useMemo3(() => {
+    return items.filter((item) => !isGroupHeading(item));
+  }, [items]);
+  const itemToStringForDownshift = useMemo3(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const selectProps = useSelect({
+    toggleButtonId: id,
+    items: itemsForSelect,
+    itemToString: itemToStringForDownshift,
+    // defaultHighlightedIndex: 0,
+    selectedItem,
+    isOpen,
+    stateReducer,
+    onStateChange({ type, selectedItem: newSelectedItem, isOpen: newIsOpen }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      const isSelectionEvent = type === useSelect.stateChangeTypes.ItemClick || type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
+      if (isSelectionEvent && newSelectedItem && newSelectedItem !== null) {
+        if (newSelectedItem.id === "clear-selection") {
+          updateSelectedItem(null);
+        } else {
+          updateSelectedItem(newSelectedItem);
+        }
+      }
+    }
+  });
+  const {
+    isOpen: selectIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex: selectHighlightedIndex,
+    getItemProps
+  } = selectProps;
+  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();
+  toggleButtonProps["aria-labelledby"] = void 0;
+  if (!selectIsOpen) {
+    toggleButtonProps["aria-controls"] = void 0;
+  }
+  return /* @__PURE__ */ jsx7(
+    Popout,
+    {
+      open: selectIsOpen,
+      onOpenChange: updateIsOpen,
+      animationConfig: menuAnimationConfig,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      content: /* @__PURE__ */ jsx7(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  if (item.id === "clear-selection") {
+                    updateSelectedItem(null);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForSelect.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems: selectedItem ? [selectedItem] : [],
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          itemToKey,
+          itemToString,
+          inputType,
+          isVirtualized,
+          groupBy,
+          selectHeadings: false,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ jsx7(
+        SelectToggleButton,
+        {
+          ...toggleButtonProps,
+          ...triggerButtonProps,
+          isOpen: selectIsOpen,
+          children: buttonContent
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Select/MultiSelect.tsx
+import { useState as useState3, useMemo as useMemo4 } from "react";
+import { useSelect as useSelect2, useMultipleSelection } from "downshift";
+import "@sproutsocial/seeds-react-label";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function defaultReducer2(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case useSelect2.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        // keep the menu open after selection.
+        highlightedIndex: 0
+        // with the first option highlighted.
+      };
+    default:
+      if (changes.selectedItem && changes.isOpen === false) {
+        return {
+          ...changes,
+          isOpen: true,
+          // keep the menu open after keyboard selection.
+          highlightedIndex: 0
+          // with the first option highlighted.
+        };
+      }
+      return changes;
+  }
+}
+function MultiSelect({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  renderSelections,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  placeholder,
+  onSelectedItemIdsChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer2,
+  triggerButtonProps,
+  menuProps,
+  inputType = "checkbox",
+  shouldOverflow
+}) {
+  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = useState3([]);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState3(false);
+  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
+  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
+  const selectedItems = useMemo4(() => {
+    return data.filter((item) => selectedItemIds.includes(itemToKey(item)));
+  }, [selectedItemIds, data, itemToKey]);
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItems = (newSelectedItems) => {
+    const newSelectedItemIds = newSelectedItems.map((item) => itemToKey(item));
+    if (!isSelectedItemIdsControlled) {
+      setUncontrolledSelectedItemIds(newSelectedItemIds);
+    }
+    onSelectedItemIdsChange?.(newSelectedItemIds);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const filteredData = useMemo4(() => {
+    if (showSelectedItems) {
+      return data;
+    }
+    return data.filter((item) => !selectedItems.includes(item));
+  }, [data, selectedItems, showSelectedItems]);
+  const items = useMemo4(() => {
+    let groupedItems;
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(filteredData, groupBy, data, true);
+    } else {
+      groupedItems = filteredData;
+    }
+    if (selectAllItem) {
+      return [selectAllItem, ...groupedItems];
+    }
+    return groupedItems;
+  }, [filteredData, groupBy, data, selectAllItem, selectHeadings]);
+  const handleHeadingClick = useMemo4(() => {
+    if (!selectHeadings || !groupBy) {
+      return void 0;
+    }
+    return (groupLabel, allSelected) => {
+      const groupItems2 = data.filter((item) => groupBy(item) === groupLabel);
+      if (allSelected) {
+        const newSelectedItems = selectedItems.filter(
+          (item) => !groupItems2.includes(item)
+        );
+        updateSelectedItems(newSelectedItems);
+      } else {
+        const newSelectedItems = [...selectedItems];
+        for (const groupItem of groupItems2) {
+          if (!newSelectedItems.includes(groupItem)) {
+            newSelectedItems.push(groupItem);
+          }
+        }
+        updateSelectedItems(newSelectedItems);
+      }
+    };
+  }, [selectHeadings, groupBy, data, selectedItems, updateSelectedItems]);
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          if (newSelectedItems !== void 0) {
+            updateSelectedItems(newSelectedItems);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const itemsForSelect = useMemo4(() => {
+    if (selectHeadings) {
+      return items;
+    }
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items, selectHeadings]);
+  const itemToStringForDownshift = useMemo4(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const selectProps = useSelect2({
+    toggleButtonId: id,
+    items: itemsForSelect,
+    itemToString: itemToStringForDownshift,
+    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
+    selectedItem: null,
+    isOpen,
+    stateReducer,
+    // Could maybe let devs override this too?
+    onStateChange({ type, selectedItem: newSelectedItem, isOpen: newIsOpen }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      if (newSelectedItem && newSelectedItem !== null) {
+        const isSelectionEvent = type === useSelect2.stateChangeTypes.ItemClick || type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
+        if (isSelectionEvent) {
+          if (selectAllItem && isToggleItem(newSelectedItem) && newSelectedItem.id === selectAllItem.id) {
+            const allSelected = data.length > 0 && data.every((item) => selectedItems.includes(item));
+            if (allSelected) {
+              updateSelectedItems([]);
+            } else {
+              updateSelectedItems([...data]);
+            }
+          } else if (selectHeadings && groupBy && isGroupHeading(newSelectedItem)) {
+            const groupLabel = newSelectedItem.label;
+            const groupItems2 = data.filter(
+              (item) => groupBy(item) === groupLabel
+            );
+            const allSelected = groupItems2.length > 0 && groupItems2.every((item) => selectedItems.includes(item));
+            if (allSelected) {
+              updateSelectedItems(
+                selectedItems.filter((item) => !groupItems2.includes(item))
+              );
+            } else {
+              const newItems = [
+                ...selectedItems.filter((item) => !groupItems2.includes(item)),
+                ...groupItems2
+              ];
+              updateSelectedItems(newItems);
+            }
+          } else if (!isGroupHeading(newSelectedItem) && !isToggleItem(newSelectedItem)) {
+            const itemIndex = selectedItems.findIndex(
+              (item) => itemToKey(item) === itemToKey(newSelectedItem)
+            );
+            if (itemIndex >= 0) {
+              updateSelectedItems(
+                selectedItems.filter((_, index) => index !== itemIndex)
+              );
+            } else {
+              updateSelectedItems([...selectedItems, newSelectedItem]);
+            }
+          }
+        }
+      }
+    }
+  });
+  const {
+    isOpen: selectIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex: selectHighlightedIndex,
+    getItemProps
+  } = selectProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForSelect,
+    selectHighlightedIndex,
+    !!groupBy,
+    selectHeadings ?? false
+  );
+  const buttonText = renderSelections ? renderSelections(selectedItems) : selectedItems.length > 0 ? selectedItems.map((item) => itemToString(item)).join(", ") : placeholder;
+  const toggleButtonIdProps = getToggleButtonProps();
+  toggleButtonIdProps["aria-labelledby"] = void 0;
+  if (!selectIsOpen) {
+    toggleButtonIdProps["aria-controls"] = void 0;
+  }
+  return /* @__PURE__ */ jsx8(
+    Popout,
+    {
+      open: selectIsOpen,
+      onOpenChange: updateIsOpen,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      animationConfig: menuAnimationConfig,
+      content: /* @__PURE__ */ jsx8(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  const allSelected = data.length > 0 && data.every((item2) => selectedItems.includes(item2));
+                  if (allSelected) {
+                    updateSelectedItems([]);
+                  } else {
+                    updateSelectedItems([...data]);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForSelect.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems,
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings,
+          onHeadingClick: handleHeadingClick,
+          groupBy,
+          allData: data,
+          selectAllItem,
+          isVirtualized,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ jsx8(
+        SelectToggleButton,
+        {
+          ...toggleButtonIdProps,
+          ...triggerButtonProps,
+          isOpen: selectIsOpen,
+          shouldOverflow,
+          children: buttonText
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Autocomplete/SingleAutocomplete.tsx
+import { useState as useState4, useMemo as useMemo5, useEffect as useEffect2 } from "react";
+import { useCombobox } from "downshift";
+import "@sproutsocial/seeds-react-label";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function defaultReducer3(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case useCombobox.stateChangeTypes.InputKeyDownEnter:
+    case useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: false,
+        // close the menu after selection for single select
+        highlightedIndex: 0
+        // reset highlight
+      };
+    default:
+      return changes;
+  }
+}
+function SingleAutocomplete({
+  id,
+  data,
+  selectedItemId: controlledSelectedItemId,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer3,
+  menuProps,
+  inputType = "icon",
+  includePlaceholderItem = false
+}) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState4("");
+  const [uncontrolledSelectedItemId, setUncontrolledSelectedItemId] = useState4(null);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState4(false);
+  const isSelectedItemIdControlled = controlledSelectedItemId !== void 0;
+  const selectedItemId = isSelectedItemIdControlled ? controlledSelectedItemId : uncontrolledSelectedItemId;
+  const selectedItem = useMemo5(() => {
+    if (selectedItemId === null || selectedItemId === void 0) {
+      return null;
+    }
+    return data.find((item) => itemToKey(item) === selectedItemId) ?? null;
+  }, [selectedItemId, data, itemToKey]);
+  const isInputValueControlled = controlledInputValue !== void 0;
+  const inputValue = isInputValueControlled ? controlledInputValue : uncontrolledInputValue;
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  useEffect2(() => {
+    if (selectedItem && !isOpen) {
+      const selectedItemString = itemToString(selectedItem);
+      if (!isInputValueControlled && uncontrolledInputValue !== selectedItemString) {
+        setUncontrolledInputValue(selectedItemString);
+      } else if (isInputValueControlled && inputValue !== selectedItemString) {
+        updateInputValue(selectedItemString);
+      }
+    }
+  }, [
+    selectedItem,
+    isOpen,
+    isInputValueControlled,
+    itemToString,
+    uncontrolledInputValue
+  ]);
+  const updateSelectedItem = (newSelectedItem) => {
+    const newSelectedItemId = newSelectedItem ? itemToKey(newSelectedItem) : null;
+    if (!isSelectedItemIdControlled) {
+      setUncontrolledSelectedItemId(newSelectedItemId);
+    }
+    onSelectedItemIdChange?.(newSelectedItemId);
+  };
+  const updateInputValue = (newInputValue) => {
+    if (!isInputValueControlled) {
+      setUncontrolledInputValue(newInputValue);
+    }
+    onInputValueChange?.(newInputValue);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const searchStringFn = itemToSearchString ?? ((item) => itemToString(item));
+  const filteredItems = useMemo5(
+    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
+      selectedItem
+    }),
+    [data, selectedItem, inputValue, searchStringFn, itemToString]
+  );
+  const placeholderItem = {
+    id: "clear-selection",
+    label: placeholder
+  };
+  const items = useMemo5(() => {
+    let groupedItems;
+    if (groupBy) {
+      groupedItems = groupItemsWithHeadings(
+        filteredItems,
+        groupBy,
+        data,
+        isVirtualized
+      );
+    } else {
+      groupedItems = filteredItems;
+    }
+    groupedItems = includePlaceholderItem ? [placeholderItem, ...groupedItems] : groupedItems;
+    return groupedItems;
+  }, [
+    filteredItems,
+    placeholder,
+    groupBy,
+    data,
+    includePlaceholderItem,
+    isVirtualized
+  ]);
+  const itemsForCombobox = useMemo5(() => {
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items]);
+  const itemToStringForDownshift = useMemo5(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const comboboxProps = useCombobox({
+    inputId: id,
+    items: itemsForCombobox,
+    itemToString: itemToStringForDownshift,
+    defaultHighlightedIndex: 0,
+    selectedItem,
+    inputValue,
+    isOpen,
+    stateReducer,
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen
+    }) {
+      if (newIsOpen !== void 0 && type !== useCombobox.stateChangeTypes.InputBlur) {
+        updateIsOpen(newIsOpen);
+      }
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            updateSelectedItem(newSelectedItem);
+            if (newSelectedItem.id === "clear-selection") {
+              updateInputValue("");
+              return;
+            }
+            updateInputValue(itemToString(newSelectedItem));
+          }
+          break;
+        case useCombobox.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          if (newInputValue === "" && selectedItem && !isInputValueControlled) {
+            updateSelectedItem(null);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+    selectedItem: comboboxSelectedItem
+  } = comboboxProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForCombobox,
+    comboboxHighlightedIndex,
+    !!groupBy,
+    false
+    // Single select components hardcode selectHeadings to false
+  );
+  const inputProps = getInputProps();
+  inputProps["aria-labelledby"] = void 0;
+  if (!comboboxIsOpen) {
+    inputProps["aria-controls"] = void 0;
+  }
+  const { ref, id: inputId, ...restProps } = inputProps;
+  const handleBlur = (e) => {
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+    updateIsOpen(false);
+  };
+  return /* @__PURE__ */ jsx9(
+    Popout,
+    {
+      open: comboboxIsOpen,
+      onOpenChange: updateIsOpen,
+      animationConfig: menuAnimationConfig,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      content: /* @__PURE__ */ jsx9(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            const dataItem = item;
+            const itemIndex = itemsForCombobox.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems: selectedItem ? [selectedItem] : [],
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          EmptyState,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings: false,
+          groupBy,
+          isVirtualized,
+          placeholderItem: includePlaceholderItem ? placeholderItem : void 0,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ jsx9(
+        Input,
+        {
+          id,
+          inputProps: {
+            ...restProps,
+            autoComplete: "off",
+            onBlur: handleBlur
+          },
+          innerRef: ref,
+          placeholder,
+          elemAfter: !includePlaceholderItem ? /* @__PURE__ */ jsx9(Input.ClearButton, {}) : void 0,
+          clearButtonLabel: "Clear selection",
+          onClear: () => {
+            updateSelectedItem(null);
+            updateInputValue("");
+          },
+          ...restProps,
+          onBlur: handleBlur
+        }
+      )
+    }
+  );
+}
+
+// src/v2/Autocomplete/MultiAutocomplete.tsx
+import { useState as useState5, useMemo as useMemo6 } from "react";
+import { useCombobox as useCombobox2, useMultipleSelection as useMultipleSelection2 } from "downshift";
+import "@sproutsocial/seeds-react-label";
+import { TokenInput } from "@sproutsocial/seeds-react-token-input";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function defaultReducer4(state, actionAndChanges) {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case useCombobox2.stateChangeTypes.InputKeyDownEnter:
+    case useCombobox2.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        // keep the menu open after selection.
+        highlightedIndex: 0
+        // with the first option highlighted.
+      };
+    default:
+      return changes;
+  }
+}
+function MultiAutocomplete({
+  id,
+  data,
+  selectedItemIds: controlledSelectedItemIds,
+  inputValue: controlledInputValue,
+  isOpen: controlledIsOpen,
+  itemToKey = (item) => item?.id,
+  itemToString,
+  itemToSearchString,
+  renderItem,
+  groupBy,
+  renderGroupHeading,
+  isVirtualized = false,
+  showSelectedItems = false,
+  selectHeadings = false,
+  selectAllItem,
+  EmptyState,
+  placeholder,
+  onSelectedItemIdsChange,
+  onInputValueChange,
+  onIsOpenChange,
+  stateReducer = defaultReducer4,
+  menuProps,
+  inputType = "checkbox"
+}) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState5("");
+  const [uncontrolledSelectedItemIds, setUncontrolledSelectedItemIds] = useState5([]);
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState5(false);
+  const isSelectedItemIdsControlled = controlledSelectedItemIds !== void 0;
+  const selectedItemIds = isSelectedItemIdsControlled ? controlledSelectedItemIds : uncontrolledSelectedItemIds;
+  const selectedItems = useMemo6(() => {
+    return data.filter((item) => selectedItemIds.includes(itemToKey(item)));
+  }, [selectedItemIds, data, itemToKey]);
+  const isInputValueControlled = controlledInputValue !== void 0;
+  const inputValue = isInputValueControlled ? controlledInputValue : uncontrolledInputValue;
+  const isIsOpenControlled = controlledIsOpen !== void 0;
+  const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
+  const updateSelectedItems = (newSelectedItems) => {
+    const newSelectedItemIds = newSelectedItems.map((item) => itemToKey(item));
+    if (!isSelectedItemIdsControlled) {
+      setUncontrolledSelectedItemIds(newSelectedItemIds);
+    }
+    onSelectedItemIdsChange?.(newSelectedItemIds);
+  };
+  const updateInputValue = (newInputValue) => {
+    if (!isInputValueControlled) {
+      setUncontrolledInputValue(newInputValue);
+    }
+    onInputValueChange?.(newInputValue);
+  };
+  const updateIsOpen = (newIsOpen) => {
+    if (!isIsOpenControlled) {
+      setUncontrolledIsOpen(newIsOpen);
+    }
+    onIsOpenChange?.(newIsOpen);
+  };
+  const searchStringFn = itemToSearchString ?? ((item) => itemToString(item));
+  const filteredItems = useMemo6(
+    () => getFilteredItems(data, inputValue, searchStringFn, itemToString, {
+      selectedItems,
+      showSelectedItems
+    }),
+    [data, selectedItems, inputValue, searchStringFn, showSelectedItems]
+  );
+  const items = useMemo6(() => {
+    let listItems;
+    if (groupBy) {
+      listItems = groupItemsWithHeadings(
+        filteredItems,
+        groupBy,
+        data,
+        selectHeadings
+      );
+    } else {
+      listItems = filteredItems;
+    }
+    if (selectAllItem) {
+      return [selectAllItem, ...listItems];
+    }
+    return listItems;
+  }, [filteredItems, groupBy, selectAllItem, selectHeadings, data]);
+  const handleHeadingClick = useMemo6(() => {
+    if (!selectHeadings || !groupBy) {
+      return void 0;
+    }
+    return (groupLabel, allSelected) => {
+      const groupItems2 = data.filter((item) => groupBy(item) === groupLabel);
+      if (allSelected) {
+        const newSelectedItems = selectedItems.filter(
+          (item) => !groupItems2.includes(item)
+        );
+        updateSelectedItems(newSelectedItems);
+      } else {
+        const newSelectedItems = [...selectedItems];
+        for (const groupItem of groupItems2) {
+          if (!newSelectedItems.includes(groupItem)) {
+            newSelectedItems.push(groupItem);
+          }
+        }
+        updateSelectedItems(newSelectedItems);
+      }
+    };
+  }, [selectHeadings, groupBy, data, selectedItems, updateSelectedItems]);
+  const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection2({
+    selectedItems,
+    onStateChange({ selectedItems: newSelectedItems, type }) {
+      switch (type) {
+        case useMultipleSelection2.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection2.stateChangeTypes.SelectedItemKeyDownDelete:
+        case useMultipleSelection2.stateChangeTypes.DropdownKeyDownBackspace:
+        case useMultipleSelection2.stateChangeTypes.FunctionRemoveSelectedItem:
+          if (newSelectedItems !== void 0) {
+            updateSelectedItems(newSelectedItems);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const itemsForCombobox = useMemo6(() => {
+    if (selectHeadings) {
+      return items;
+    }
+    return items.filter(
+      (item) => !isGroupHeading(item)
+    );
+  }, [items, selectHeadings]);
+  const itemToStringForDownshift = useMemo6(
+    () => createItemToStringForDownshift(itemToString),
+    [itemToString]
+  );
+  const comboboxProps = useCombobox2({
+    inputId: id,
+    items: itemsForCombobox,
+    itemToString: itemToStringForDownshift,
+    defaultHighlightedIndex: 0,
+    // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue,
+    isOpen,
+    stateReducer,
+    // Could maybe let devs override this too?
+    onStateChange({
+      inputValue: newInputValue,
+      type,
+      selectedItem: newSelectedItem,
+      isOpen: newIsOpen
+    }) {
+      if (newIsOpen !== void 0) {
+        updateIsOpen(newIsOpen);
+      }
+      switch (type) {
+        case useCombobox2.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox2.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            if (selectAllItem && isToggleItem(newSelectedItem) && newSelectedItem.id === selectAllItem.id) {
+              const allSelected = data.length > 0 && data.every((item) => selectedItems.includes(item));
+              if (allSelected) {
+                updateSelectedItems([]);
+              } else {
+                updateSelectedItems([...data]);
+              }
+              updateInputValue("");
+            } else if (selectHeadings && groupBy && isGroupHeading(newSelectedItem)) {
+              const groupLabel = newSelectedItem.label;
+              const groupItems2 = data.filter(
+                (item) => groupBy(item) === groupLabel
+              );
+              const allSelected = groupItems2.length > 0 && groupItems2.every((item) => selectedItems.includes(item));
+              if (allSelected) {
+                updateSelectedItems(
+                  selectedItems.filter((item) => !groupItems2.includes(item))
+                );
+              } else {
+                const newItems = [
+                  ...selectedItems.filter((item) => !groupItems2.includes(item)),
+                  ...groupItems2
+                ];
+                updateSelectedItems(newItems);
+              }
+              updateInputValue("");
+            } else if (!isGroupHeading(newSelectedItem) && !isToggleItem(newSelectedItem)) {
+              const itemIndex = selectedItems.findIndex(
+                (item) => itemToKey(item) === itemToKey(newSelectedItem)
+              );
+              if (itemIndex >= 0) {
+                updateSelectedItems(
+                  selectedItems.filter((_, index) => index !== itemIndex)
+                );
+              } else {
+                updateSelectedItems([...selectedItems, newSelectedItem]);
+              }
+              updateInputValue("");
+            }
+          }
+          break;
+        case useCombobox2.stateChangeTypes.InputChange:
+          updateInputValue(newInputValue ?? "");
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  const {
+    isOpen: comboboxIsOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex: comboboxHighlightedIndex,
+    getItemProps,
+    selectedItem
+  } = comboboxProps;
+  const highlightedIndex = useHighlightedIndex(
+    items,
+    itemsForCombobox,
+    comboboxHighlightedIndex,
+    !!groupBy,
+    selectHeadings ?? false
+  );
+  const inputProps = getInputProps({ preventKeyAction: isOpen });
+  inputProps["aria-labelledby"] = void 0;
+  if (!comboboxIsOpen) {
+    inputProps["aria-controls"] = void 0;
+  }
+  const handleBlur = (e) => {
+    if (inputProps.onBlur) {
+      inputProps.onBlur(e);
+    }
+  };
+  const inputPropsToSpread = { ...inputProps };
+  delete inputPropsToSpread.onBlur;
+  return /* @__PURE__ */ jsx10(
+    Popout,
+    {
+      open: comboboxIsOpen,
+      onOpenChange: updateIsOpen,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      animationConfig: menuAnimationConfig,
+      content: /* @__PURE__ */ jsx10(
+        ComboboxContent,
+        {
+          items,
+          getMenuProps,
+          getItemProps: (props) => {
+            const item = items[props.index];
+            if (isToggleItem(item)) {
+              return {
+                onClick: () => {
+                  const allSelected = data.length > 0 && data.every((item2) => selectedItems.includes(item2));
+                  if (allSelected) {
+                    updateSelectedItems([]);
+                  } else {
+                    updateSelectedItems([...data]);
+                  }
+                }
+              };
+            }
+            const dataItem = item;
+            const itemIndex = itemsForCombobox.indexOf(dataItem);
+            if (itemIndex === -1) {
+              return {};
+            }
+            return getItemProps({ item: dataItem, index: itemIndex });
+          },
+          selectedItems,
+          highlightedIndex: highlightedIndex ?? -1,
+          renderItem,
+          renderGroupHeading,
+          EmptyState,
+          itemToKey,
+          itemToString,
+          inputType,
+          selectHeadings,
+          onHeadingClick: handleHeadingClick,
+          groupBy,
+          allData: data,
+          selectAllItem,
+          isVirtualized,
+          ...menuProps
+        }
+      ),
+      children: /* @__PURE__ */ jsx10(
+        TokenInput,
+        {
+          placeholder,
+          inputProps: {
+            ...inputPropsToSpread,
+            autoComplete: "off"
+            // Override with "off" to prevent browser autocomplete
+          },
+          tokens: selectedItems.map((item) => ({
+            id: String(itemToKey(item)),
+            value: itemToString(item)
+          })),
+          onRemoveToken: (tokenId) => {
+            const itemToRemove = selectedItems.find(
+              (item) => String(itemToKey(item)) === tokenId
+            );
+            if (itemToRemove) {
+              removeSelectedItem(itemToRemove);
+            }
+          },
+          onClickToken: (e) => {
+            e.stopPropagation();
+          },
+          onBlur: handleBlur
+        }
+      )
+    }
+  );
+}
+export {
+  MultiAutocomplete,
+  MultiSelect,
+  SingleAutocomplete,
+  SingleSelect
+};
+//# sourceMappingURL=index.js.map