@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/Common/SelectStyles.tsx

@@ -0,0 +1,126 @@
+import { Select } from "@base-ui/react/select";
+import styled from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+
+export const Field = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space[200]};
+`;
+
+export const SelectLabel = styled(Select.Label)`
+  font-size: ${({ theme }) => theme.typography[200].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const SelectTrigger = styled(Select.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space[300]};
+  padding: ${({ theme }) => `${theme.space[300]}`};
+  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;
+  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] {
+    ${focusRing}
+  }
+
+  &[data-popup-open] [data-chevron] {
+    transform: rotate(-180deg);
+  }
+`;
+
+export const SelectValue = styled(Select.Value)`
+  min-width: 0;
+  overflow: hidden;
+`;
+
+export const SelectIcon = styled(Select.Icon)`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.icon.base};
+  flex-shrink: 0;
+`;
+
+export const SelectGroup = styled(Select.Group)`
+  display: block;
+`;
+
+export const SelectGroupLabel = styled(Select.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 SelectSeparator = styled(Select.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+
+export const SelectPositioner = styled(Select.Positioner)`
+  width: var(--anchor-width);
+  z-index: 7;
+`;
+
+export const SelectPopup = styled(Select.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.low};
+  outline: none;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+
+  &[data-open] {
+    animation: select-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: select-popup-out 100ms ease-in;
+  }
+
+  @keyframes select-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes select-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;

package/src/v3/Common/VirtualizedComboboxList.tsx

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import ComboboxItem from "./ComboboxItem";
+import {
+  ComboboxGroupHeaderItem,
+  ComboboxGroupHeaderCheckbox,
+  ComboboxSelectAllItem,
+} from "./ComboboxStyles";
+import type { DataWithId } from "./types";
+
+export const ITEM_HEIGHT = 32;
+
+interface GroupHeaderSentinel {
+  __groupHeader: true;
+  groupName: string;
+}
+
+interface SelectAllSentinel {
+  __selectAll: true;
+}
+
+export function isGroupHeaderSentinel(v: unknown): v is GroupHeaderSentinel {
+  return typeof v === "object" && v !== null && "__groupHeader" in v;
+}
+
+export function isSelectAllSentinel(v: unknown): v is SelectAllSentinel {
+  return typeof v === "object" && v !== null && "__selectAll" in v;
+}
+
+export type FlatSentinelRow<T> = T | GroupHeaderSentinel | SelectAllSentinel;
+
+interface VirtualizedComboboxListProps<T extends DataWithId> {
+  open: boolean;
+  virtualizerRef: React.RefObject<ReturnType<
+    typeof useVirtualizer<HTMLDivElement, Element>
+  > | null>;
+  value: T | T[] | null;
+  groups: Array<{ value: string; items: T[] }> | null;
+  data: T[];
+  itemToString: (item: T) => string;
+  inputType: "icon" | "radio" | "checkbox" | "none";
+  renderItem?: (item: T) => React.ReactNode;
+  renderGroupHeading?: (label: string) => React.ReactNode;
+}
+
+export default function VirtualizedComboboxList<T extends DataWithId>({
+  open,
+  virtualizerRef,
+  value,
+  groups,
+  data,
+  itemToString,
+  inputType,
+  renderItem,
+  renderGroupHeading,
+}: VirtualizedComboboxListProps<T>) {
+  type Row = FlatSentinelRow<T>;
+
+  const filteredItems = Combobox.useFilteredItems<Row>();
+  const scrollElementRef = React.useRef<HTMLDivElement | null>(null);
+
+  const virtualizer = useVirtualizer({
+    enabled: open,
+    count: filteredItems.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 20,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingStart: 4,
+    scrollPaddingEnd: 4,
+  });
+
+  React.useImperativeHandle(virtualizerRef, () => virtualizer);
+
+  const handleScrollRef = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      scrollElementRef.current = el;
+      if (el) virtualizer.measure();
+    },
+    [virtualizer]
+  );
+
+  if (!filteredItems.length) return null;
+
+  const selectedArray = Array.isArray(value)
+    ? value
+    : value != null
+    ? [value]
+    : [];
+
+  const totalSize = virtualizer.getTotalSize();
+
+  return (
+    <div
+      role="presentation"
+      ref={handleScrollRef}
+      style={{
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain",
+      }}
+    >
+      <div
+        role="presentation"
+        style={{ position: "relative", width: "100%", height: totalSize }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const row = filteredItems[virtualItem.index];
+          if (!row) return null;
+
+          const baseStyle: React.CSSProperties = {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${virtualItem.start}px)`,
+            boxSizing: "border-box",
+          };
+
+          if (isSelectAllSentinel(row)) {
+            const selectedCount = selectedArray.length;
+            const totalCount = data.length;
+            const state =
+              selectedCount === 0
+                ? "none"
+                : selectedCount === totalCount
+                ? "all"
+                : "partial";
+            return (
+              <ComboboxSelectAllItem
+                key={virtualItem.key}
+                index={virtualItem.index}
+                data-index={virtualItem.index}
+                value={row}
+                style={baseStyle}
+                ref={virtualizer.measureElement}
+              >
+                <ComboboxGroupHeaderCheckbox $state={state} id="__selectAll" />
+                Select all
+              </ComboboxSelectAllItem>
+            );
+          }
+
+          if (isGroupHeaderSentinel(row)) {
+            const group = groups?.find((g) => g.value === row.groupName);
+            const groupItems = group?.items ?? [];
+            const selectedCount = groupItems.filter((item) =>
+              selectedArray.some((s) => s.id === item.id)
+            ).length;
+            const state =
+              selectedCount === 0
+                ? "none"
+                : selectedCount === groupItems.length
+                ? "all"
+                : "partial";
+            return (
+              <ComboboxGroupHeaderItem
+                key={virtualItem.key}
+                index={virtualItem.index}
+                data-index={virtualItem.index}
+                value={row}
+                style={baseStyle}
+                ref={virtualizer.measureElement}
+              >
+                <ComboboxGroupHeaderCheckbox
+                  $state={state}
+                  id={`__header-${row.groupName}`}
+                />
+                {renderGroupHeading
+                  ? renderGroupHeading(row.groupName)
+                  : row.groupName}
+              </ComboboxGroupHeaderItem>
+            );
+          }
+
+          const item = row as T;
+          return (
+            <ComboboxItem
+              key={virtualItem.key}
+              index={virtualItem.index}
+              data-index={virtualItem.index}
+              value={item}
+              itemId={String(item.id)}
+              label={itemToString(item)}
+              inputType={inputType}
+              renderItem={
+                renderItem ? () => renderItem(item) : () => itemToString(item)
+              }
+              style={baseStyle}
+              ref={virtualizer.measureElement}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/v3/Common/groupItems.ts

@@ -0,0 +1,12 @@
+export function groupItems<T>(
+  data: T[],
+  groupBy: (item: T) => string
+): Array<{ value: string; items: T[] }> {
+  const map = new Map<string, T[]>();
+  for (const item of data) {
+    const key = groupBy(item);
+    if (!map.has(key)) map.set(key, []);
+    map.get(key)!.push(item);
+  }
+  return Array.from(map.entries()).map(([value, items]) => ({ value, items }));
+}

package/src/v3/Common/types.ts

@@ -0,0 +1,3 @@
+export interface DataWithId {
+  id: string | number;
+}

package/src/v3/ModalStories.stories.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { TokenInput } from "@sproutsocial/seeds-react-token-input";
+import {
+  Modal as ModalV1,
+  ModalV2,
+  ModalBody,
+  ModalFooter,
+} from "@sproutsocial/seeds-react-modal";
+import SingleSelect from "./SingleSelect";
+import MultiSelect from "./MultiSelect";
+import SingleCombobox from "./SingleCombobox";
+import MultiCombobox from "./MultiCombobox";
+import SingleSearchableSelect from "./SingleSearchableSelect";
+import MultiSearchableSelect from "./MultiSearchableSelect";
+import { books, itemToString } from "./storyData";
+
+// ─── Shared content ───────────────────────────────────────────────────────────
+
+function AllComponents() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <FormField label="Input`">
+        {({ id }) => (
+          <Input
+            id={id}
+            name="input"
+            value="Some Value"
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+      <FormField label="Token Input">
+        {({ id }) => (
+          <TokenInput
+            id={id}
+            name="token-input"
+            tokens={[{ id: "token", value: "Token" }]}
+            value="Some Value"
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+      <FormField label="Token Input2">
+        {({ id }) => (
+          <TokenInput
+            id={id}
+            name="token-input"
+            tokens={[]}
+            value="Some Value"
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+      <FormField label="Single Select">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+      <FormField label="Multi Select">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books"
+          />
+        )}
+      </FormField>
+      <FormField label="Single Combobox">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+      <FormField label="Multi Combobox">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+      <FormField label="Single Searchable Select">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+      <FormField label="Multi Searchable Select">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  );
+}
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+const meta: Meta = {
+  title: "Really Under Development/V3/In Modal",
+};
+
+export default meta;
+type Story = StoryObj;
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const V1Modal: Story = {
+  name: "V1 Modal",
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (
+      <>
+        <Button appearance="primary" onClick={() => setIsOpen(true)}>
+          Open V1 Modal
+        </Button>
+        <ModalV1
+          appElementSelector="#root"
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          closeButtonLabel="Close"
+          label="V1 Modal"
+        >
+          <ModalV1.Header title="" subtitle="" bordered>
+            V1 modal
+          </ModalV1.Header>
+          <ModalV1.Content>
+            <AllComponents />
+          </ModalV1.Content>
+          <ModalV1.Footer>Footer</ModalV1.Footer>
+        </ModalV1>
+      </>
+    );
+  },
+};
+
+export const V2Modal: Story = {
+  name: "V2 Modal",
+  render: () => (
+    <>
+      <ModalV2
+        title="Pick some books"
+        modalTrigger={<Button appearance="primary">Open V2 Modal</Button>}
+        closeButtonAriaLabel="Close"
+      >
+        <ModalBody>
+          <AllComponents />
+        </ModalBody>
+        <ModalFooter cancelButton={<Button>Cancel</Button>} />
+      </ModalV2>
+      <AllComponents />
+    </>
+  ),
+};