Stack

A thin, gating-aware override of MUI's Stack. Every native Stack prop — direction, spacing, divider, useFlexGap, sx — is forwarded unchanged (alignment lives in sx, e.g. sx={{ alignItems: 'center' }}). On top of that it adds the same two gating props the Dashforge form components carry: access (RBAC) and visibleWhen (form-engine reactive).

With neither prop set, it behaves exactly like MUI's Stack.

Examples

Basic

// vertical (default)
<Stack spacing={1}>
  <Item>One</Item>
  <Item>Two</Item>
</Stack>

// horizontal with a divider
<Stack direction="row" spacing={2} divider={<Divider orientation="vertical" flexItem />}>
  <Item>One</Item>
  <Item>Two</Item>
</Stack>

direction, spacing and divider behave as they do on MUI's Stack — this wrapper only adds gating.

Access-gated toolbar

// For a role without 'edit' on 'order', onUnauthorized: 'disable'
// dims the toolbar and blocks pointer events.
<Stack direction="row" spacing={1} access={{ action: 'edit', resource: 'order', onUnauthorized: 'disable' }}>
  <Button>Approve</Button>
  <Button variant="outlined">Reject</Button>
</Stack>

Wrap a row of actions in a Stack with an access requirement. onUnauthorized: 'disable' dims the whole row and blocks pointer events for users who lack the permission; 'hide' removes it entirely.

Quick Start

import { Stack } from '@dashforge/ui';

// Horizontal, spaced, with a divider
<Stack direction="row" spacing={2} divider={<Divider orientation="vertical" flexItem />}>
  <A /> <B /> <C />
</Stack>

// A toolbar only editors can use
<Stack direction="row" spacing={1} access={{ resource: 'order', action: 'edit', onUnauthorized: 'disable' }}>
  <Button>Approve</Button>
  <Button variant="outlined">Reject</Button>
</Stack>

// Revealed reactively inside a <DashForm>
<Stack visibleWhen={(engine) => engine.getValue('mode') === 'advanced'}>
  <AdvancedControls />
</Stack>

API

Stack accepts all MUI Stack props (direction, spacing, divider, useFlexGap, …; alignment via sx), forwarded unchanged. It adds:

Notes

• Drop-in. Swap import Stack from '@mui/material/Stack' for import { Stack } from '@dashforge/ui' — identical behavior until you add access / visibleWhen.
• Gating semantics match the form components: hide removes, disable / readonly dim (opacity: 0.6 + pointer-events: none, plus aria-disabled).
• Fails safe. With no RbacProvider mounted, access resolves to fully-visible (with a dev warning).