@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/Common/ComboboxStyles.tsx

@@ -0,0 +1,475 @@
+import { Combobox } from "@base-ui/react/combobox";
+import styled from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import Checkbox from "@sproutsocial/seeds-react-checkbox";
+
+export const ComboboxLabel = styled.label`
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const ComboboxInputGroup = styled(Combobox.InputGroup)`
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-within {
+    ${focusRing}
+  }
+`;
+
+export const ComboboxInput = styled(Combobox.Input)`
+  flex: 1;
+  min-width: 30px;
+  padding: ${({ theme }) => theme.space[300]};
+  border: none;
+  background: transparent;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+
+export const ComboboxTokenInput = styled(Combobox.Input)`
+  flex: 1;
+  min-width: 60px;
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]}
+    ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
+  border: none;
+  background: transparent;
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  line-height: ${({ theme }) => theme.typography[200].lineHeight};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+
+export const ComboboxActionButtons = styled.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  gap: ${({ theme }) => theme.space[100]};
+`;
+
+export const ComboboxClear = styled(Combobox.Clear)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.icon.base};
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.radii[300]};
+  padding: 0;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+
+  &[data-empty] {
+    display: none;
+  }
+`;
+
+export const ComboboxTrigger = styled(Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.icon.base};
+  cursor: default;
+  padding: 0;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+`;
+
+export const ComboboxPositioner = styled(Combobox.Positioner)`
+  width: var(--anchor-width);
+  z-index: 7;
+`;
+
+export const ComboboxPopup = styled(Combobox.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.medium};
+  outline: none;
+  width: 100%;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: 0;
+
+  &[data-open] {
+    animation: combobox-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: combobox-popup-out 100ms ease-in;
+  }
+
+  @keyframes combobox-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes combobox-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+
+export const ComboboxList = styled(Combobox.List)`
+  padding: ${({ theme }) => theme.space[200]};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+
+export const ComboboxStatus = styled(Combobox.Status)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.subtext};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+
+export const ComboboxEmpty = styled(Combobox.Empty)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.subtext};
+
+  &:empty {
+    padding: 0;
+  }
+`;
+
+export const ComboboxItem = styled(Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+
+  &[data-selected] {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const ComboboxItemIndicator = styled(Combobox.ItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: ${({ theme }) => theme.space[400]};
+  color: ${({ theme }) => theme.colors.text.body};
+  visibility: hidden;
+
+  &[data-selected] {
+    visibility: visible;
+  }
+`;
+
+export const ComboboxGroup = styled(Combobox.Group)`
+  display: block;
+`;
+
+export const ComboboxGroupLabel = styled(Combobox.GroupLabel)`
+  padding: ${({ theme }) =>
+    `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+
+export const ComboboxSeparator = styled.div`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+
+export const ComboboxGroupHeaderItem = styled(Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+  }
+`;
+
+export const ComboboxSelectAllItem = styled(Combobox.Item)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  margin-bottom: ${({ theme }) => theme.space[200]};
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+
+export function ComboboxGroupHeaderCheckbox({
+  $state,
+  id,
+}: {
+  $state: "none" | "partial" | "all";
+  id: string;
+}) {
+  return (
+    <Checkbox
+      id={id}
+      checked={$state === "all"}
+      indeterminate={$state === "partial"}
+      onChange={() => {}}
+      tabIndex={-1}
+    />
+  );
+}
+
+// Multi-select Token components
+export const ComboboxToken = styled(Combobox.Chips)`
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+`;
+
+export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  padding: ${({ theme }) =>
+    `${theme.space[200]} ${theme.space[300]} ${theme.space[200]} ${theme.space[200]}`};
+  gap: ${({ theme }) => theme.space[200]};
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-within {
+    ${focusRing}
+  }
+`;
+
+export const Token = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[200]};
+  padding: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  line-height: 1;
+  white-space: nowrap;
+  transition: all ${({ theme }) => theme.duration.fast}
+    ${({ theme }) => theme.easing.ease_inout};
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.shadows.low};
+    border-color: ${({ theme }) => theme.colors.container.border.base};
+  }
+`;
+
+export const TokenRemove = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+`;
+
+// Searchable select components
+
+export const SearchableSelectTrigger = styled(Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+  user-select: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${focusRing}
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;
+
+export const SearchableSelectTriggerIcon = styled(Combobox.Icon)`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.icon.base};
+  flex-shrink: 0;
+`;
+
+export const SearchableSelectPlaceholder = styled.span`
+  color: ${({ theme }) => theme.colors.text.subtext};
+  padding: ${({ theme }) => theme.space[200]} 0;
+`;
+
+export const SearchableSelectPopup = ComboboxPopup;
+
+export const SearchableSelectSearchContainer = styled.div`
+  padding: ${({ theme }) => theme.space[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  flex-shrink: 0;
+`;
+
+export const SearchableSelectInput = styled(Combobox.Input)`
+  width: 100%;
+  height: ${({ theme }) => theme.space[500]};
+  padding: 0 ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+  outline: none;
+  box-sizing: border-box;
+
+  &:focus {
+    ${focusRing}
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text.subtext};
+  }
+`;
+
+export const SearchableSelectList = styled(Combobox.List)`
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+  flex: 1;
+  min-height: 0;
+  &:empty {
+    padding: 0;
+  }
+`;
+
+export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 160px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
+  background: ${({ theme }) => theme.colors.form.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
+  gap: ${({ theme }) => theme.space[200]};
+  cursor: default;
+  text-align: left;
+  outline: none;
+  user-select: none;
+  transition: border-color ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in},
+    box-shadow ${({ theme }) => theme.duration.fast}
+      ${({ theme }) => theme.easing.ease_in};
+
+  &:focus-visible {
+    ${focusRing}
+  }
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.blue[600]};
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;

package/src/v3/Common/SelectGroup.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import {
+  SelectGroup as StyledGroup,
+  SelectGroupLabel,
+  SelectSeparator,
+} from "./SelectStyles";
+
+interface SelectGroupProps {
+  label: string;
+  children: React.ReactNode;
+  showSeparator?: boolean;
+}
+
+export default function SelectGroup({
+  label,
+  children,
+  showSeparator = false,
+}: SelectGroupProps) {
+  return (
+    <>
+      <StyledGroup>
+        <SelectGroupLabel>{label}</SelectGroupLabel>
+        {children}
+      </StyledGroup>
+      {showSeparator && <SelectSeparator />}
+    </>
+  );
+}

package/src/v3/Common/SelectIcons.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import styled from "styled-components";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+export interface StyledChevronProps {
+  $isOpen?: boolean;
+}
+
+export const StyledChevron = styled.div<StyledChevronProps>`
+  display: flex;
+  align-items: center;
+  transition: transform 0.15s;
+  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
+`;
+
+export function ChevronIcon() {
+  return <Icon name="chevron-down-outline" fixedWidth aria-hidden />;
+}
+
+export function ClearIcon() {
+  return <Icon name="circle-x-outline" fixedWidth aria-hidden size="mini" />;
+}
+
+export function CheckIcon() {
+  return <Icon name="check-outline" fixedWidth aria-hidden />;
+}

package/src/v3/Common/SelectItem.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { Select } from "@base-ui/react/select";
+import styled from "styled-components";
+import Radio from "@sproutsocial/seeds-react-radio";
+import Checkbox from "@sproutsocial/seeds-react-checkbox";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+export const StyledItem = styled(Select.Item)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text.body};
+  cursor: default;
+  outline: none;
+
+  &[data-highlighted] {
+    background: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+
+  &[data-selected] {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const StyledItemIndicator = styled(Select.ItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+  visibility: hidden;
+
+  &[data-selected] {
+    visibility: visible;
+  }
+`;
+
+export const StyledItemText = styled(Select.ItemText)``;
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function CheckIcon() {
+  return <Icon name="check-outline" fixedWidth aria-hidden />;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+interface SelectItemProps {
+  value: string | null;
+  label: string;
+  inputType?: "icon" | "radio" | "checkbox" | "none";
+  renderItem?: () => React.ReactNode;
+  hidden?: boolean;
+}
+
+export default function SelectItem({
+  value,
+  label,
+  inputType = "icon",
+  renderItem,
+  hidden,
+}: SelectItemProps) {
+  return (
+    <StyledItem value={value} style={hidden ? { display: "none" } : undefined}>
+      {inputType === "radio" ? (
+        <StyledItemIndicator
+          keepMounted
+          render={(_props, state) => (
+            <Radio
+              checked={state.selected}
+              onChange={() => {}}
+              tabIndex={-1}
+              id={`radio-${value}`}
+              name="select-item"
+            />
+          )}
+        />
+      ) : inputType === "checkbox" ? (
+        <StyledItemIndicator
+          keepMounted
+          render={(_props, state) => (
+            <Checkbox
+              checked={state.selected}
+              onChange={() => {}}
+              tabIndex={-1}
+              id={`checkbox-${value}`}
+              name="select-item"
+            />
+          )}
+        />
+      ) : inputType === "icon" ? (
+        <StyledItemIndicator keepMounted>
+          <CheckIcon />
+        </StyledItemIndicator>
+      ) : null}
+      <StyledItemText>{renderItem ? renderItem() : label}</StyledItemText>
+    </StyledItem>
+  );
+}