Share Dialog

File sharing with permissions and link configuration

SaaSFile Management

Overview

ShareDialog provides a tabbed sharing interface for files. The "Share Links" tab lets users create and revoke shareable URLs with configurable access modes and expiration. The "People" tab manages user-level permissions with grant, update, and revoke controls. The PermissionsPanel sub-component displays the list of users with access.

Usage

import { ShareDialog } from "@leanicon/web-builder-library/saas";

<ShareDialog
  open={open}
  onOpenChange={setOpen}
  file={{
    id: "file-1",
    name: "report.pdf",
    mimeType: "application/pdf",
    size: 2500000,
    status: "approved",
    folderId: null,
    createdAt: "2024-01-15T10:00:00Z",
    updatedAt: "2024-01-15T10:00:00Z",
    createdBy: { id: "user-1", name: "John Doe", email: "[email protected]" },
  }}
  shareLinks={[]}
  permissions={[]}
  onCreateShareLink={async (config) => console.log("Create:", config)}
  onRevokeShareLink={async (id) => console.log("Revoke:", id)}
  onGrantPermission={async (config) => console.log("Grant:", config)}
  onUpdatePermission={async (id, level) => console.log("Update:", id, level)}
  onRevokePermission={async (id) => console.log("Revoke:", id)}
  onSearchUsers={async (query) => []}
/>;

Variants

Permissions Panel - Default

Live preview unavailable — the code sample is below.

Note: ShareDialog renders as a modal overlay. The variants below show its sub-components inline.

Permissions Panel - With Users

Who has access

Owner
JS
Edit

Permissions Panel (Dark)

Who has access

Owner
BW
View

Empty Permissions

No one has been granted access yet.