WorkspaceSwitcher

WorkspaceSwitcher abre um painel identificado com os workspaces disponíveis. Defina href quando trocar de tenant levar a outra URL, inclusive rotas que combinam tenant e ambiente. Cada workspace com href vira um link nativo que pode ser copiado ou aberto em outra aba. Sem href, vira botão; use onChange para atualizar current no estado da aplicação.

Exemplos

Workspace atual controlado

Passe current com onChange quando a aplicação controlar o workspace atual. Sem current, o primeiro workspace é exibido.

Ação de criar

onCreate adiciona um botão separado. createLabel nomeia a ação. Use defaultOpen apenas em demonstrações visuais.

Tradução e navegação

labels complementa os textos padrão em inglês. Defina listLabel, placeholder e a função members(count) com a flexão de singular e plural do seu idioma. createLabel continua sendo uma prop separada.

tsx

<WorkspaceSwitcher
  current="acme"
  workspaces={[
    { id: 'acme', name: 'Acme', members: 1, href: '/acme/producao' },
    { id: 'studio', name: 'Studio', members: 3, href: '/studio/homologacao' },
  ]}
  labels={{
    listLabel: 'Espaços de trabalho',
    placeholder: 'Escolha um espaço',
    members: (count) => `${count} membro${count === 1 ? '' : 's'}`,
  }}
  createLabel="Criar espaço"
/>

No Alpine, a aplicação fornece os textos visíveis e as URLs. Use <a href="..." class="lyra-wssw__item" data-id="..." x-bind="option"> para navegar, ou <button type="button" ...> para selecionar. Botões emitem lyra:change com o data-id; links navegam normalmente. Marque o item atual com aria-current="true" e atualize o texto do gatilho quando o estado mudar. Substitua os atributos antigos role="listbox", role="option", aria-selected e aria-haspopup="listbox" pelo padrão de painel mostrado abaixo.

Migração: @lyra-ds/react não renderiza mais role="listbox", role="option" nem aria-selected; o painel agora usa ids -popover e os itens são botões ou links marcados com aria-current. Atualize testes, CSS e scripts que selecionam itens por esses roles para usar .lyra-wssw__item[data-id] e .lyra-wssw__pop, e leia o item atual em aria-current. O Alpine ainda aceita o markup legado, mas ele está deprecado.

Acessibilidade

O gatilho é um botão com aria-expanded e aria-controls; o painel é um role="group" identificado por um rótulo visível. Cada destino mantém a semântica nativa de link ou botão. Enter, Espaço e setas abrem o painel e focam o workspace atual. As setas, Home e End movem o foco entre workspaces; Escape devolve o foco ao gatilho. Tab segue a ordem nativa, incluindo o botão de criar quando existir. O painel abre para cima se faltar espaço abaixo.

API e código

Nome	Tipo	Obrigatória	Descrição
`workspaces`	`Workspace[]`	—	Workspaces available for selection.
`current`	`string`	—	Identifier of the current workspace. Defaults to the first workspace.
`onChange`	`(id: string, workspace: Workspace) => void`	—	Called when a workspace is selected.
`onCreate`	`() => void`	—	When present, shows a create-workspace action in the popover.
`createLabel`	`string`	—	Create-action label. Default `"Create workspace"`.
`labels`	`WorkspaceSwitcherLabels`	—	Translatable text merged over English defaults.
`defaultOpen`	`boolean`	—	Whether the popover starts open. Useful for demos.

x-data="lyraWorkspaceSwitcher({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultOpen`	`boolean`	—	Whether the workspace disclosure starts open. Default: `false`.

html

<div id="workspace-switcher" class="lyra-wssw" x-data="lyraWorkspaceSwitcher()">
  <button class="lyra-wssw__trigger" type="button" aria-controls="workspace-list" x-bind="trigger">
    Atlas
  </button>
  <div
    id="workspace-list"
    class="lyra-wssw__pop"
    role="group"
    aria-labelledby="workspace-label"
    style="display: none"
    x-bind="popover"
  >
    <span id="workspace-label" class="lyra-wssw__pop-label">Espaços de trabalho</span>
    <a
      class="lyra-wssw__item"
      href="/atlas/producao"
      data-id="atlas"
      aria-current="true"
      x-bind="option"
      >Atlas</a
    >
    <a class="lyra-wssw__item" href="/studio/homologacao" data-id="studio" x-bind="option"
      >Studio</a
    >
  </div>
</div>

<lyra:workspace-switcher> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraWorkspaceSwitcher() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`workspaces`	`[]`	—	—
`current`	`null`	—	—
`create`	`false`	—	—
`createLabel`	`'Create workspace'`	—	—
`createId`	`'create'`	—	—
`defaultOpen`	`false`	—	—

blade

<lyra:workspace-switcher
    current="acme"
    create
    create-label="Create workspace"
    :workspaces="[
        ['id' => 'acme', 'name' => 'Acme Inc.', 'plan' => 'Pro', 'members' => 24],
        ['id' => 'lyra', 'name' => 'Lyra Design', 'plan' => 'Starter', 'members' => 6],
    ]"
/>