OrgSwitcher

import { OrgSwitcher } from '@hanzo/ui/product'

Types

export type OrgSwitcherProps = {
  /** The active-org contract (see `orgScope`). */
  scope: OrgScope
  /**
   * Lazy paged org list: 0-based page + server-pushed search → one page of
   * rows. A full page (=== pageSize) implies another. Omit when the caller
   * can only see its own org.
   */
  orgs?: (page: number, query: string) => Promise<Org[]>
  /** Rows per page the loader returns. Default 20. */
  pageSize?: number
  /**
   * The org the surface is scoped to, already resolved (display name + logo).
   * Omit and the trigger synthesizes it from the scope id alone — enough to name
   * the org, but it cannot know a logo. Pass it wherever the host already
   * resolves the org, so the switcher and the chrome's org mark agree.
   */
  current?: Org
  /** Create-org hook → the created org's id; omit to hide the affordance. */
  create?: (name: string) => Promise<string>
  /** Show the "All organizations" de-scope row (`scope.leaveOrg`). */
  picker?: boolean
  /**
   * Which way the panel opens. `up` for a switcher sitting in a bottom identity
   * bar, where a downward panel would open off the bottom of the viewport —
   * hanzo.app kept a whole local copy of this component for want of this one
   * prop.
   */
  direction?: 'down' | 'up'
  /**
   * Rows below the list, above the create/de-scope affordances — the surface's
   * own additions (a personal-workspace badge, a link into org settings). The
   * other half of what hanzo.app's local copy existed for.
   *
   * Given a function it receives `close`, so a row that acts IN PLACE — picking
   * a project rather than navigating away — can dismiss the sheet it was chosen
   * from. A row that navigates does not need it; a row that does not, does.
   */
  footer?: ReactNode | ((close: () => void) => ReactNode)
  /**
   * The second line of the trigger, when the caller scopes below the org — a
   * project, an environment. The console kept a whole local copy of this
   * component because its trigger has to say "Org / project" and this one could
   * only say the org; a caller that scopes deeper has to be able to name where
   * it is, or it grows a second control beside this one saying the other half.
   */
  sub?: string
  /**
   * The accessible name, when the control does more than switch organization
   * (a caller passing `sub` is also switching what `sub` names). Defaults to
   * "<org> · switch organization".
   */
  aria?: string
  /**
   * Whether the list can be searched. Defaults to "whenever there is a loader",
   * because a loader is what makes a list longer than the rows on screen.
   *
   * It is separate from the loader because the two answer different questions —
   * whether a list can be FETCHED, and whether searching it can change the
   * answer. The console fetches for everyone and offers the field only to a
   * platform admin, whose list is cross-tenant, server-paged and far longer than
   * one page; a customer has one org, and a field promising a list that does not
   * exist is worse than no field.
   */
  search?: boolean
  /** What to call the list, for a sheet that answers more than one question. */
  heading?: string
  /**
   * Render the trigger as the ANCHOR of its surface rather than one control
   * among several.
   *
   * A sidebar whose brand lockup is the first thing read wants a heavier
   * control than a bar that already carries a wordmark of its own. Both are
   * legitimate, so the component says both: this steps the mark and the label
   * UP THE SAME RAMP the default already stands on — `$4` → `$6` (design's
   * `--text-xl`), 30 → 36, 44 → 56 — rather than introducing a second scale.
   *
   * The alternative a host is left with otherwise is reaching into this
   * component's insides through `className` descendant selectors, which breaks
   * the moment the markup moves. A variation a surface legitimately needs
   * belongs in the component that owns the markup.
   */
  lead?: boolean
  /** `data-testid` on the trigger. */
  testId?: string
  /** Classes for the sheet — the host's own material (glass, elevation). */
  className?: string
  /** Inline style for the sheet — a host's stacking layer belongs here. */
  style?: CSSProperties
}

Exports