@startsimpli/ui 0.4.86 → 0.4.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.86",
+  "version": "0.4.87",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/navigation/__tests__/entity-switcher.test.tsx

@@ -43,6 +43,20 @@ describe('EntitySwitcher — trigger', () => {
     expect(trigger).toHaveAttribute('aria-controls', listbox.id)
   })
 
+  it('takes an explicit accessible name for the trigger', () => {
+    // `combobox` is not a name-from-content role, so the trigger's visible
+    // "Acme Robotics" does NOT name it — without this prop it has no accessible
+    // name at all. startsim-768w.21.4 needs one (OrgSwitcher's caption is
+    // aria-hidden), and it has to carry the label AND the current entity.
+    setup()
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-label')
+
+    setup({ triggerAriaLabel: 'Organization: Acme Robotics' })
+    expect(
+      screen.getAllByRole('combobox', { name: 'Organization: Acme Robotics' })
+    ).toHaveLength(1)
+  })
+
   it('takes a triggerClassName override so it can sit on a dark rail', () => {
     setup({ triggerClassName: 'my-dark-trigger' })
     expect(screen.getByRole('combobox')).toHaveClass('my-dark-trigger')

package/src/components/navigation/entity-switcher.tsx

@@ -58,6 +58,14 @@ export interface EntitySwitcherProps {
   triggerPlaceholder?: string
   /** Set false to drop the filter input (short lists). */
   searchable?: boolean
+  /**
+   * Accessible name for the trigger. Left unset, the trigger is named by its
+   * own content — the current item's label — which reads correctly when the
+   * surrounding chrome already says WHAT is being switched (the sidebar rail).
+   * Set it when the control has to name itself, e.g. a switcher dropped into a
+   * settings page whose visible caption is `aria-hidden` (see OrgSwitcher).
+   */
+  triggerAriaLabel?: string
   /** Override the trigger chrome — e.g. to sit on a light surface. */
   triggerClassName?: string
   /** Override the popover panel chrome (width, padding, colours). */
@@ -79,6 +87,7 @@ export function EntitySwitcher({
   emptyLabel = 'No matches',
   triggerPlaceholder = 'Select…',
   searchable = true,
+  triggerAriaLabel,
   triggerClassName,
   contentClassName,
   disabled,
@@ -179,6 +188,7 @@ export function EntitySwitcher({
           aria-expanded={open}
           aria-controls={listboxId}
           aria-haspopup="listbox"
+          aria-label={triggerAriaLabel}
           disabled={disabled}
           className={cn(
             'flex w-full items-center justify-between gap-2 rounded-md border border-white/15 bg-white/5 px-3 py-2',

package/src/components/team/OrgSwitcher.tsx

@@ -4,12 +4,20 @@
  * OrgSwitcher — pick between Companies the current user belongs to. Useful
  * for accounts that ended up multi-company via cross-domain invitations.
  *
- * Native <select> for now. The classNames-slot API stays the same when we
- * upgrade to a dropdown menu. startsim-o7s.
+ * A thin adapter over the shared <EntitySwitcher> (startsim-768w.21.4): it maps
+ * `CompanyLite` -> `EntitySwitcherItem` and hands the chosen id back. The
+ * native <select> this used to render (startsim-o7s, "for now") is gone, so
+ * packages/ui ships ONE switcher implementation rather than two.
+ *
+ * The public props and `classNames` slots are unchanged — `select` now styles
+ * the combobox trigger that replaced the <select>, and its defaults are
+ * semantic tokens tuned for the LIGHT surfaces this renders on, where
+ * EntitySwitcher's own translucent-over-dark rail defaults would wash out.
  */
 
 import * as React from 'react'
 import type { CompanyLite } from './types'
+import { EntitySwitcher, type EntitySwitcherItem } from '../navigation/entity-switcher'
 import {
   ORG_SWITCHER_DEFAULTS,
   type OrgSwitcherClassNames,
@@ -34,9 +42,20 @@ export function OrgSwitcher({
   classNames,
 }: OrgSwitcherProps) {
   const cls = { ...ORG_SWITCHER_DEFAULTS, ...(classNames ?? {}) }
-  // If the caller hasn't pinned currentCompanyId, fall back to the first
-  // entry so the <select>'s value matches an option (otherwise React warns).
-  const value = currentCompanyId ?? companies[0]?.id ?? ''
+
+  const items = React.useMemo<EntitySwitcherItem[]>(
+    // The slug rides along as the sublabel so it is searchable too — two
+    // companies can share a display name, their slugs cannot.
+    () => companies.map((c) => ({ id: c.id, label: c.name, sublabel: c.slug || undefined })),
+    [companies]
+  )
+
+  // If the caller hasn't pinned currentCompanyId, fall back to the first entry
+  // so the control always names a real company — as the <select> did, where a
+  // value matching no option made React warn — rather than falling through to
+  // a "Select…" placeholder for a list it is already scoped to.
+  const currentId = currentCompanyId ?? companies[0]?.id ?? null
+  const currentName = companies.find((c) => c.id === currentId)?.name
 
   if (companies.length === 0) return null
 
@@ -47,22 +66,22 @@ export function OrgSwitcher({
           {label}
         </span>
       )}
-      <label className="sr-only" htmlFor="org-switcher-select">
-        {label}
-      </label>
-      <select
-        id="org-switcher-select"
-        value={value}
-        onChange={(e) => onSwitch(e.target.value)}
-        className={cls.select}
-        aria-label={label}
-      >
-        {companies.map((c) => (
-          <option key={c.id} value={c.id}>
-            {c.name}
-          </option>
-        ))}
-      </select>
+      <EntitySwitcher
+        items={items}
+        currentId={currentId}
+        // onSwitch may be async; the <select>'s onChange ignored the promise too.
+        onSelect={(id) => {
+          void onSwitch(id)
+        }}
+        // Stands in for the sr-only <label htmlFor> + aria-label the <select>
+        // carried. The trigger is a button, so a bare `aria-label={label}`
+        // would suppress the company name it renders — the accessible name
+        // has to carry both parts.
+        triggerAriaLabel={currentName ? `${label}: ${currentName}` : label}
+        triggerPlaceholder={`Select ${label.toLowerCase()}…`}
+        triggerClassName={cls.select}
+        contentClassName={cls.content}
+      />
     </span>
   )
 }

package/src/components/team/__tests__/team-components.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, act } from '@testing-library/react'
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import {
   MembersTable,
   RoleSelector,
@@ -370,20 +371,41 @@ describe('LeaveTeamDialog', () => {
 
 // ---------- OrgSwitcher ----------------------------------------------------
 
+/**
+ * Since startsim-768w.21.4 OrgSwitcher is a thin adapter over the shared
+ * <EntitySwitcher>: the control is a combobox trigger + popover listbox, not a
+ * native <select>, so the assertions read the current company off the trigger
+ * and pick from role=option instead of setting `select.value`. The public props
+ * and classNames slots are unchanged, and every behaviour the <select> version
+ * had is still pinned below.
+ */
 describe('OrgSwitcher', () => {
   const companies: CompanyLite[] = [
     { id: 'c1', slug: 'acme', name: 'Acme' },
     { id: 'c2', slug: 'beta', name: 'Beta' },
   ]
 
-  it('renders an option per company + fires onSwitch on change', () => {
+  it('renders an option per company + fires onSwitch on pick', async () => {
+    const user = userEvent.setup()
     const onSwitch = jest.fn()
-    render(
+    const { container } = render(
       <OrgSwitcher companies={companies} currentCompanyId="c1" onSwitch={onSwitch} />
     )
-    const select = screen.getByRole('combobox') as HTMLSelectElement
-    expect(select.value).toBe('c1')
-    fireEvent.change(select, { target: { value: 'c2' } })
+
+    // One switcher in packages/ui, not two: no native <select> is left.
+    expect(container.querySelector('select')).toBeNull()
+
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveTextContent('Acme')
+
+    await user.click(trigger)
+    expect(await screen.findAllByRole('option')).toHaveLength(2)
+    expect(screen.getByRole('option', { name: /Acme/ })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+
+    await user.click(screen.getByRole('option', { name: /Beta/ }))
     expect(onSwitch).toHaveBeenCalledWith('c2')
   })
 
@@ -393,4 +415,100 @@ describe('OrgSwitcher', () => {
     )
     expect(container.firstChild).toBeNull()
   })
+
+  it('falls back to the first company when currentCompanyId is not pinned', () => {
+    render(<OrgSwitcher companies={companies} onSwitch={() => {}} />)
+    // Never a bare "Select organization…" placeholder for a list it is already
+    // scoped to — the <select> pinned its value the same way.
+    expect(screen.getByRole('combobox')).toHaveTextContent('Acme')
+  })
+
+  it('names the trigger with the label AND the current company', () => {
+    render(
+      <OrgSwitcher companies={companies} currentCompanyId="c2" onSwitch={() => {}} />
+    )
+    // Replaces the sr-only <label> + aria-label the <select> had. A button
+    // named only "Organization" would hide which org is in scope.
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Organization: Beta'
+    )
+    expect(
+      screen.getByRole('combobox', { name: /organization: beta/i })
+    ).toBeInTheDocument()
+  })
+
+  it('hides the visible caption with hideLabel but keeps the accessible name', () => {
+    const { rerender } = render(
+      <OrgSwitcher companies={companies} currentCompanyId="c1" onSwitch={() => {}} />
+    )
+    expect(screen.getByText('Organization')).toBeInTheDocument()
+
+    rerender(
+      <OrgSwitcher
+        companies={companies}
+        currentCompanyId="c1"
+        onSwitch={() => {}}
+        hideLabel
+      />
+    )
+    expect(screen.queryByText('Organization')).not.toBeInTheDocument()
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Organization: Acme'
+    )
+  })
+
+  it('honours a custom label everywhere it surfaces', () => {
+    render(
+      <OrgSwitcher
+        companies={companies}
+        currentCompanyId="c1"
+        onSwitch={() => {}}
+        label="Workspace"
+      />
+    )
+    expect(screen.getByText('Workspace')).toBeInTheDocument()
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Workspace: Acme'
+    )
+  })
+
+  it('routes the classNames slots at the label and the trigger', () => {
+    render(
+      <OrgSwitcher
+        companies={companies}
+        currentCompanyId="c1"
+        onSwitch={() => {}}
+        classNames={{ label: 'my-label', select: 'my-trigger' }}
+      />
+    )
+    expect(screen.getByText('Organization')).toHaveClass('my-label')
+    expect(screen.getByRole('combobox')).toHaveClass('my-trigger')
+  })
+
+  it('filters companies by name or slug — the upgrade the <select> could not do', async () => {
+    const user = userEvent.setup()
+    render(
+      <OrgSwitcher companies={companies} currentCompanyId="c1" onSwitch={() => {}} />
+    )
+    await user.click(screen.getByRole('combobox'))
+    // "beta" is Beta's slug as well as its name; either way it is the only hit.
+    await user.type(await screen.findByRole('textbox'), 'BET')
+
+    await waitFor(() => expect(screen.getAllByRole('option')).toHaveLength(1))
+    expect(screen.getByRole('option')).toHaveTextContent('Beta')
+  })
+
+  it('tolerates an async onSwitch', async () => {
+    const user = userEvent.setup()
+    const onSwitch = jest.fn().mockResolvedValue(undefined)
+    render(
+      <OrgSwitcher companies={companies} currentCompanyId="c1" onSwitch={onSwitch} />
+    )
+    await user.click(screen.getByRole('combobox'))
+    await user.click(await screen.findByRole('option', { name: /Beta/ }))
+    expect(onSwitch).toHaveBeenCalledWith('c2')
+  })
 })

package/src/components/team/org-switcher-default-class-names.ts

@@ -3,12 +3,30 @@
 export interface OrgSwitcherClassNames {
   root?: string
   label?: string
+  /**
+   * The switcher control itself. Named `select` since startsim-o7s, when it
+   * WAS a native `<select>`; startsim-768w.21.4 swapped the implementation for
+   * the shared `<EntitySwitcher>` and this slot now styles its combobox
+   * trigger. The name is kept so existing overrides keep landing on the same
+   * visual element.
+   */
   select?: string
+  /**
+   * The popover panel that replaced the browser's native dropdown
+   * (startsim-768w.21.4) — width/padding/colour of the list surface.
+   */
+  content?: string
 }
 
 export const ORG_SWITCHER_DEFAULTS: Required<OrgSwitcherClassNames> = {
   root: 'inline-flex items-center gap-2',
   label: 'text-xs font-medium uppercase tracking-wide text-muted-foreground',
+  // EntitySwitcher's own trigger defaults are translucent-over-dark, tuned for
+  // the `bg-gray-900` sidebar rail. OrgSwitcher renders on LIGHT surfaces
+  // (settings pages, headers), so each of those has to be overridden with a
+  // semantic token — including the `hover:` / `focus-visible:` variants, which
+  // tailwind-merge cannot fold into an unprefixed override.
   select:
-    'rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring',
+    'w-auto min-w-44 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring',
+  content: 'w-64',
 }