@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/src/domain/Filters/FilterDropdown.tsx

@@ -0,0 +1,540 @@
+import {
+  useState,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+import { Switch } from "../../primitives/Switch";
+import { FilterPill, type FilterPillAppearance } from "./FilterPill";
+
+/** One selectable row at a leaf list. */
+export type FilterOption = {
+  value: string;
+  label: string;
+  icon?: ComponentType<{ className?: string }>;
+};
+
+export type FilterSelectionMode = "multi" | "single";
+
+/**
+ * Recursive submenu: options leaf, nested folders, or custom panel (e.g. date range).
+ */
+export type FilterSubmenuContent =
+  | {
+      type: "options";
+      /** Key into `selectedValuesBySelectionKey` / `onSelectOption` */
+      selectionKey: string;
+      /** `multi` (default) toggles; `single` is exclusive — still one check slot reserved. */
+      selectionMode?: FilterSelectionMode;
+      options: FilterOption[];
+    }
+  | {
+      type: "nested";
+      items: FilterNestedItem[];
+    }
+  | {
+      type: "custom";
+      render: () => ReactNode;
+    };
+
+export type FilterNestedItem = {
+  id: string;
+  label: string;
+  content: FilterSubmenuContent;
+};
+
+/** Left-column row that opens a (possibly nested) submenu panel. */
+export type FilterCategorySubmenuRow = {
+  kind?: "submenu";
+  id: string;
+  label: string;
+  content: FilterSubmenuContent;
+};
+
+/**
+ * Options rendered inline in the first panel (no chevron / second column).
+ * Mix with submenu rows for hybrid menus (e.g. Status submenu + Sort by flat).
+ */
+export type FilterCategoryInlineOptionsRow = {
+  kind: "inline-options";
+  id: string;
+  /** Small section header above the options (e.g. "Sort by"). */
+  title?: string;
+  selectionKey: string;
+  selectionMode?: FilterSelectionMode;
+  options: FilterOption[];
+};
+
+/** First-panel row: label + Switch (no right panel). */
+export type FilterCategoryToggleRow = {
+  kind: "toggle";
+  id: string;
+  label: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+export type FilterCategoryRow =
+  | FilterCategorySubmenuRow
+  | FilterCategoryInlineOptionsRow
+  | FilterCategoryToggleRow;
+
+function isToggleRow(row: FilterCategoryRow): row is FilterCategoryToggleRow {
+  return row.kind === "toggle";
+}
+
+function isInlineOptionsRow(
+  row: FilterCategoryRow,
+): row is FilterCategoryInlineOptionsRow {
+  return row.kind === "inline-options";
+}
+
+function isSubmenuRow(row: FilterCategoryRow): row is FilterCategorySubmenuRow {
+  return !isToggleRow(row) && !isInlineOptionsRow(row);
+}
+
+type ResolvedSubmenuView =
+  | { kind: "folders"; items: FilterNestedItem[]; trail: string[] }
+  | {
+      kind: "options";
+      selectionKey: string;
+      selectionMode: FilterSelectionMode;
+      options: FilterOption[];
+      trail: string[];
+    }
+  | { kind: "custom"; render: () => ReactNode; trail: string[] };
+
+/** Walk `path` (folder ids) from `content` to the current view. */
+export function resolveSubmenuView(
+  content: FilterSubmenuContent,
+  path: string[],
+): ResolvedSubmenuView {
+  if (content.type === "options") {
+    return {
+      kind: "options",
+      selectionKey: content.selectionKey,
+      selectionMode: content.selectionMode ?? "multi",
+      options: content.options,
+      trail: [],
+    };
+  }
+  if (content.type === "custom") {
+    return { kind: "custom", render: content.render, trail: [] };
+  }
+  if (path.length === 0) {
+    return { kind: "folders", items: content.items, trail: [] };
+  }
+  const [head, ...tail] = path;
+  const child = content.items.find((i) => i.id === head);
+  if (!child) {
+    return { kind: "folders", items: content.items, trail: [] };
+  }
+  if (child.content.type === "options") {
+    return {
+      kind: "options",
+      selectionKey: child.content.selectionKey,
+      selectionMode: child.content.selectionMode ?? "multi",
+      options: child.content.options,
+      trail: [child.label],
+    };
+  }
+  if (child.content.type === "custom") {
+    return {
+      kind: "custom",
+      render: child.content.render,
+      trail: [child.label],
+    };
+  }
+  if (tail.length === 0) {
+    return {
+      kind: "folders",
+      items: child.content.items,
+      trail: [child.label],
+    };
+  }
+  const inner = resolveSubmenuView(child.content, tail);
+  return {
+    ...inner,
+    trail: [child.label, ...inner.trail],
+  };
+}
+
+function CheckMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden
+      className={cn("size-4 shrink-0", className)}
+    >
+      <path
+        d="M3.5 8.5L6.5 11.5L12.5 4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Always reserves check width so the panel does not jump when selection moves. */
+function CheckSlot({ selected }: { selected: boolean }) {
+  return (
+    <CheckMark
+      className={cn(
+        "text-blue-600",
+        selected ? "visible" : "invisible",
+      )}
+    />
+  );
+}
+
+export type FilterDropdownProps = {
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  /**
+   * First panel rows — mix freely:
+   * submenu (chevron + second panel), inline-options (flat list), toggle (Switch).
+   */
+  categoryRows: FilterCategoryRow[];
+  selectedValuesBySelectionKey: Record<string, string[] | undefined>;
+  /**
+   * Fired when an option is activated. For `multi`, consumers typically toggle;
+   * for `single`, replace the selection with `[optionValue]`.
+   */
+  onSelectOption: (selectionKey: string, optionValue: string) => void;
+  onResetAll: () => void;
+  resetAllLabel?: string;
+  /** When false, hides the Reset all footer. Default true. */
+  showResetAll?: boolean;
+  activeFilterCount: number;
+  getOptionLabelStyle?: (
+    selectionKey: string,
+    optionValue: string,
+  ) => CSSProperties | undefined;
+  zIndexClass?: string;
+  /** Replace the default FilterPill trigger. */
+  trigger?: ReactNode;
+  /** Passed to the default FilterPill when `trigger` is omitted. */
+  triggerAppearance?: FilterPillAppearance;
+  /**
+   * Which side the options panel attaches to the category column.
+   * Carets stay on the right of category rows either way.
+   */
+  submenuSide?: "left" | "right";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+const scrollClass = "py-2 overflow-y-auto overscroll-y-contain flex-1 min-h-0";
+
+const rowClass =
+  "w-full flex items-center justify-between gap-4 px-4 py-2 text-left transition-colors hover:bg-grey-50";
+
+/**
+ * Filters trigger + popover. First panel supports hybrid rows: submenus,
+ * inline option lists, and Switch toggles. Submenus open a second column.
+ */
+export function FilterDropdown({
+  align = "start",
+  sideOffset = 4,
+  categoryRows,
+  selectedValuesBySelectionKey,
+  onSelectOption,
+  onResetAll,
+  resetAllLabel = "Reset all",
+  showResetAll = true,
+  activeFilterCount,
+  getOptionLabelStyle,
+  zIndexClass = "z-50",
+  trigger,
+  triggerAppearance = "filled",
+  submenuSide = "right",
+  open: openControlled,
+  onOpenChange,
+  className,
+}: FilterDropdownProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openControlled ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+
+  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null);
+  const [navPath, setNavPath] = useState<string[]>([]);
+
+  const activeSubmenuRow = categoryRows.find(
+    (r) => isSubmenuRow(r) && r.id === activeSubmenuId,
+  ) as FilterCategorySubmenuRow | undefined;
+
+  const view = activeSubmenuRow
+    ? resolveSubmenuView(activeSubmenuRow.content, navPath)
+    : null;
+
+  const showSubmenuPanel = Boolean(activeSubmenuRow && view);
+  const submenuOpensLeft = submenuSide === "left";
+
+  const resetNav = () => setNavPath([]);
+
+  const submenuPanelClass = cn(
+    "bg-background-primary max-h-[min(28rem,calc(100dvh-8rem))] min-w-[200px] max-w-[min(28rem,calc(100vw-2rem))] flex flex-col overflow-hidden border border-divider-primary shadow-raise1",
+    submenuOpensLeft
+      ? "rounded-l-lg rounded-r-none border-r-0"
+      : "rounded-r-lg rounded-l-none border-l-0",
+  );
+
+  const categoryPanelClass = cn(
+    "min-w-[180px] border border-divider-primary bg-background-primary shadow-raise1",
+    showSubmenuPanel
+      ? submenuOpensLeft
+        ? "rounded-r-lg rounded-l-none"
+        : "rounded-l-lg rounded-r-none"
+      : "rounded-lg",
+  );
+
+  const renderOptionButtons = (
+    selectionKey: string,
+    options: FilterOption[],
+  ) =>
+    options.map((option) => {
+      const selected =
+        selectedValuesBySelectionKey[selectionKey]?.includes(option.value) ??
+        false;
+      const Icon = option.icon;
+      const labelStyle = getOptionLabelStyle?.(selectionKey, option.value);
+      return (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onSelectOption(selectionKey, option.value)}
+          className={cn(rowClass, selected && "bg-grey-100")}
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            {Icon && <Icon className="h-4 w-4 shrink-0" />}
+            <span
+              className={cn(
+                "text-body",
+                labelStyle ? undefined : "text-display-on-light-primary",
+              )}
+              style={labelStyle}
+            >
+              {option.label}
+            </span>
+          </div>
+          <CheckSlot selected={selected} />
+        </button>
+      );
+    });
+
+  const categoryPanel = (
+    <div className={categoryPanelClass}>
+      <div className="py-2">
+        {categoryRows.map((row, index) => {
+          const prev = index > 0 ? categoryRows[index - 1] : null;
+          const showDividerBefore =
+            index > 0 &&
+            (isToggleRow(row) ||
+              (isInlineOptionsRow(row) && prev && isSubmenuRow(prev)) ||
+              (isSubmenuRow(row) && prev && !isSubmenuRow(prev)));
+
+          if (isToggleRow(row)) {
+            return (
+              <div key={row.id}>
+                {showDividerBefore && (
+                  <div className="my-2 border-t border-divider-primary" />
+                )}
+                <div className={cn(rowClass, "hover:bg-transparent")}>
+                  <span className="text-body text-display-on-light-primary">
+                    {row.label}
+                  </span>
+                  <Switch
+                    checked={row.checked}
+                    onChange={row.onCheckedChange}
+                  />
+                </div>
+              </div>
+            );
+          }
+
+          if (isInlineOptionsRow(row)) {
+            return (
+              <div key={row.id}>
+                {showDividerBefore && (
+                  <div className="my-2 border-t border-divider-primary" />
+                )}
+                {row.title ? (
+                  <div className="px-4 pb-1 pt-1 text-caption-2 text-display-on-light-secondary">
+                    {row.title}
+                  </div>
+                ) : null}
+                {row.options.length === 0 ? (
+                  <p className="px-4 py-2 text-body text-grey-500">No options</p>
+                ) : (
+                  renderOptionButtons(row.selectionKey, row.options)
+                )}
+              </div>
+            );
+          }
+
+          return (
+            <div key={row.id}>
+              {showDividerBefore && (
+                <div className="my-2 border-t border-divider-primary" />
+              )}
+              <button
+                type="button"
+                onClick={() => {
+                  if (activeSubmenuId === row.id) {
+                    setActiveSubmenuId(null);
+                    resetNav();
+                  } else {
+                    setActiveSubmenuId(row.id);
+                    resetNav();
+                  }
+                }}
+                className={cn(
+                  rowClass,
+                  activeSubmenuId === row.id && "bg-grey-50",
+                )}
+              >
+                <span className="text-body text-display-on-light-primary">
+                  {row.label}
+                </span>
+                <ChevronIcon
+                  direction="right"
+                  size="small"
+                  className={cn(
+                    "text-grey-400 transition-transform",
+                    activeSubmenuId === row.id && "rotate-90",
+                  )}
+                />
+              </button>
+            </div>
+          );
+        })}
+
+        {showResetAll && (
+          <div className="mt-2 border-t border-divider-primary pt-2">
+            <button
+              type="button"
+              onClick={onResetAll}
+              className={cn(rowClass)}
+            >
+              <span className="text-body text-display-on-light-primary">
+                {resetAllLabel}
+              </span>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  const submenuPanel =
+    showSubmenuPanel && view ? (
+      <div className={cn(submenuPanelClass, "flex flex-col")}>
+        {navPath.length > 0 && (
+          <div className="flex-shrink-0 border-b border-grey-100 px-2 py-1.5">
+            <button
+              type="button"
+              onClick={() => setNavPath((p) => p.slice(0, -1))}
+              className="flex w-full items-center gap-1 rounded-md px-2 py-1 text-left text-caption-2-em text-display-on-light-secondary hover:bg-grey-50"
+            >
+              <ChevronIcon
+                direction="left"
+                size="small"
+                className="shrink-0"
+              />
+              Back
+            </button>
+          </div>
+        )}
+        {view.trail.length > 0 && (
+          <div className="flex-shrink-0 truncate px-4 pb-1 pt-2 text-footnote text-grey-500">
+            {view.trail.join(" › ")}
+          </div>
+        )}
+        <div className={scrollClass}>
+          {view.kind === "folders" ? (
+            view.items.length === 0 ? (
+              <p className="px-4 py-2 text-body text-grey-500">No options</p>
+            ) : (
+              view.items.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => setNavPath((p) => [...p, item.id])}
+                  className={rowClass}
+                >
+                  <span className="text-body text-display-on-light-primary">
+                    {item.label}
+                  </span>
+                  <ChevronIcon
+                    direction="right"
+                    size="small"
+                    className="shrink-0 text-grey-400"
+                  />
+                </button>
+              ))
+            )
+          ) : view.kind === "custom" ? (
+            <div className="p-4">{view.render()}</div>
+          ) : view.options.length === 0 ? (
+            <p className="px-4 py-2 text-body text-grey-500">No options</p>
+          ) : (
+            renderOptionButtons(view.selectionKey, view.options)
+          )}
+        </div>
+      </div>
+    ) : null;
+
+  return (
+    <Popover.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setActiveSubmenuId(null);
+          setNavPath([]);
+        }
+      }}
+    >
+      <Popover.Trigger asChild>
+        {trigger ?? (
+          <FilterPill
+            activeFilterCount={activeFilterCount}
+            appearance={triggerAppearance}
+            className={className}
+          />
+        )}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            zIndexClass,
+            "w-auto border-0 bg-transparent p-0 shadow-none outline-none",
+          )}
+        >
+          <div className="flex items-start gap-0">
+            {submenuOpensLeft ? (
+              <>
+                {submenuPanel}
+                {categoryPanel}
+              </>
+            ) : (
+              <>
+                {categoryPanel}
+                {submenuPanel}
+              </>
+            )}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/domain/Filters/FilterPill.tsx

@@ -1,25 +1,74 @@
-import { cn } from "../../utils/cn";
-import { FiltersIcon } from "../../icons/generated";
-
-export type FilterPillIndicator = "on" | "off";
-
-export type FilterPillProps = {
-  indicator?: FilterPillIndicator;
-  className?: string;
-};
-
-export const FilterPill = ({ indicator = "off", className }: FilterPillProps) => (
-  <button
-    type="button"
-    aria-label="Filters"
-    className={cn(
-      "relative flex size-9 items-center justify-center rounded-full bg-background-secondary text-display-on-light-secondary transition-colors hover:text-display-on-light-primary",
-      className,
-    )}
-  >
-    <FiltersIcon size="small" />
-    {indicator === "on" && (
-      <span className="absolute right-1 top-1 size-2 rounded-full bg-blue-600" aria-hidden />
-    )}
-  </button>
-);
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+import { FiltersIcon } from "../../icons/generated";
+import { Badge } from "../../primitives/Badge";
+
+export type FilterPillAppearance = "filled" | "ghost";
+
+export type FilterPillProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  /** When > 0, shows the orange count badge. */
+  activeFilterCount?: number;
+  /**
+   * `filled` — grey idle / blue when active (Figma default).
+   * `ghost` — white idle and active; only hover changes surface color.
+   */
+  appearance?: FilterPillAppearance;
+};
+
+/**
+ * Filter trigger — Figma Filter Pill (6154:149608 / 6154:149599).
+ */
+export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
+  (
+    {
+      activeFilterCount = 0,
+      appearance = "filled",
+      className,
+      type = "button",
+      "aria-label": ariaLabel = "Filters",
+      ...props
+    },
+    ref,
+  ) => {
+    const active = activeFilterCount > 0;
+    const ghost = appearance === "ghost";
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        aria-label={ariaLabel}
+        aria-pressed={active}
+        className={cn(
+          "relative flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+          ghost
+            ? "bg-white text-display-on-light-secondary hover:bg-grey-50 hover:text-display-on-light-primary"
+            : active
+              ? "bg-accent-bg-light text-display-on-light-secondary hover:text-display-on-light-primary"
+              : "bg-background-secondary text-display-on-light-secondary hover:text-display-on-light-primary",
+          className,
+        )}
+        {...props}
+      >
+        <FiltersIcon size="small" />
+        {active && (
+          <Badge
+            color="orange"
+            type="icon"
+            className={cn(
+              "absolute -right-1 -top-2 border-2 text-display-on-light-primary",
+              ghost ? "border-white" : "border-background-primary",
+            )}
+          >
+            {activeFilterCount > 99 ? "99+" : activeFilterCount}
+          </Badge>
+        )}
+      </button>
+    );
+  },
+);
+
+FilterPill.displayName = "FilterPill";

package/src/domain/Filters/FilterPills.tsx

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn";
+import { FilteredPill, type FilteredPillProps } from "./FilteredPill";
+
+export type FilterPillsItem = {
+  key: string;
+  label: string;
+  onRemove: () => void;
+  removeAriaLabel?: string;
+  classNames?: FilteredPillProps["classNames"];
+};
+
+export type FilterPillsProps = {
+  chips: FilterPillsItem[];
+  className?: string;
+};
+
+/**
+ * Partner row for FilterDropdown — active filter pills.
+ * Always renders the row wrapper (even when empty) so sibling filter
+ * triggers can stay pinned with `ml-auto` / flex layouts.
+ */
+export const FilterPills = ({ chips, className }: FilterPillsProps) => (
+  <div className={cn("flex min-w-0 flex-wrap items-start gap-2", className)}>
+    {chips.map((chip) => (
+      <FilteredPill
+        key={chip.key}
+        label={chip.label}
+        onRemove={chip.onRemove}
+        removeAriaLabel={chip.removeAriaLabel}
+        classNames={chip.classNames}
+      />
+    ))}
+  </div>
+);