Browse docs
Browse docs
A thin, gating-aware override of MUI's Box. Every native Box prop — component, sx, display, the spacing shorthands — is forwarded unchanged, so it drops in wherever a plain MUI Box is used. 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 Box.
A plain MUI Box — sx styling, the polymorphic component prop, spacing shorthands — with access / visibleWhen gating added.
<Box
component="section"
sx={{ p: 3, borderRadius: 2, border: '1px solid', borderColor: 'divider', bgcolor: 'action.hover' }}
>
<Typography variant="subtitle2">Panel</Typography>
<Typography variant="body2" color="text.secondary">A plain MUI Box, with access / visibleWhen gating.</Typography>
</Box>Styling, the polymorphic component prop and spacing shorthands all work as they do on MUI's Box — this wrapper only adds gating.
Current role — switch it and watch the panel appear / disappear:
Visible only to roles that may read billing.
// Wrapped in an <RbacProvider>. For a role without 'read' on 'billing',
// onUnauthorized: 'hide' removes the whole region.
<Box access={{ action: 'read', resource: 'billing', onUnauthorized: 'hide' }} sx={{ p: 2 }}>
<Typography variant="subtitle2">Billing</Typography>
</Box>Wrap any region in a Box with an access requirement to hide or dim it based on the current user. onUnauthorized: 'hide' removes the whole subtree; 'disable' / 'readonly' render it dimmed and non-interactive (a container has no intrinsic disabled state). Resolved against the nearest RbacProvider.
import { Box } from '@dashforge/ui';
// Just a styled box
<Box sx={{ p: 2, borderRadius: 2, bgcolor: 'action.hover' }}>…</Box>
// Hidden unless the user may read the billing resource
<Box access={{ resource: 'billing', action: 'read', onUnauthorized: 'hide' }}>
<Invoice />
</Box>
// Revealed reactively inside a <DashForm>
<Box visibleWhen={(engine) => !!engine.getValue('hasCompany')}>
<CompanyFields />
</Box>Box accepts all MUI Box props (component, sx, display, m/p spacing shorthands, …), forwarded unchanged. It adds:
| Prop | Type | Default | Description |
|---|---|---|---|
access | AccessRequirement | — | RBAC gate for the whole region. hide → not rendered; disable / readonly → dimmed + aria-disabled. Resolved against the nearest RbacProvider. |
visibleWhen | (engine: Engine) => boolean | — | Reactive visibility predicate against the form engine. Renders only when it returns true. No-op outside a <DashForm>. |
sx | SxProps<Theme> | — | MUI style override on the root. Merged after the dimmed treatment, so it can override it. |
...rest | MuiBoxProps | — | Every native MUI Box prop, forwarded to the underlying element. |
import Box from '@mui/material/Box' for import { Box } from '@dashforge/ui' — identical behavior until you add access / visibleWhen.TextField): hide removes, disable / readonly dim. The dim treatment is opacity: 0.6 + pointer-events: none on the subtree, plus aria-disabled.RbacProvider mounted, access resolves to fully-visible (with a dev warning) rather than hiding your UI.