@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/files/cells/LabelMultiSelect.d.ts

@@ -0,0 +1,50 @@
+/** Max height of the chip container: whole chip rows that fit `rowHeight`, never half a row. */
+export declare function labelChipClampHeight(rowHeight: number): number;
+/** One label a document can carry. `color` is any CSS colour (the host derives it from the id). */
+export interface LabelOption {
+    id: string;
+    name: string;
+    color: string;
+}
+/** Every fixed string of the label picker. */
+export interface LabelMultiSelectLabels {
+    searchPlaceholder: string;
+    noLabels: string;
+    create: (name: string) => string;
+    editLabel: string;
+}
+export declare const DEFAULT_LABEL_MULTI_SELECT_LABELS: LabelMultiSelectLabels;
+export interface LabelMultiSelectViewProps {
+    options: LabelOption[];
+    /** Ids of the labels applied to the row. */
+    appliedIds: ReadonlySet<string>;
+    onToggle: (id: string) => void;
+    /** Create a label named `name` and apply it (the host decides what a non-member may do). */
+    onCreate: (name: string) => void;
+    /** Opens the label editor; omit to hide the per-option edit button. */
+    onEditLabels?: () => void;
+    /** The grid row height: clamps the chips to the rows that fully fit, with an ellipsis. */
+    rowHeight?: number;
+    labels?: Partial<LabelMultiSelectLabels>;
+}
+export interface LabelPickerListProps {
+    options: LabelOption[];
+    appliedIds: ReadonlySet<string>;
+    onToggle: (id: string) => void;
+    /** Create a label named `name`; omit to hide "Create ..." (the picker only toggles). */
+    onCreate?: (name: string) => void;
+    /** Opens the label editor; omit to hide the per-option edit button. */
+    onEditLabels?: () => void;
+    labels?: Partial<LabelMultiSelectLabels>;
+}
+/**
+ * Searchable list of labels with check boxes: type to filter, Enter (or the "Create ..." row)
+ * creates a label that does not exist yet. Used by the grid cell and the document form field.
+ */
+export declare function LabelPickerList({ options, appliedIds, onToggle, onCreate, onEditLabels, labels, }: LabelPickerListProps): import("react").JSX.Element;
+/**
+ * Labels column cell: applied labels as bordered chips; click (or Enter) opens a popover to
+ * toggle labels or type a new name and press Enter to create it. Empty cells show a pencil on
+ * hover, keyboard focus and touch.
+ */
+export declare const LabelMultiSelectView: import("react").NamedExoticComponent<LabelMultiSelectViewProps>;

package/dist/files/cells/RelatedDocsCell.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface RelatedDocsCellProps<T> {
+    parent?: T | null;
+    /** Attachments. */
+    attachments: T[];
+    duplicates: T[];
+    similar: T[];
+    /** Slot: the document pill for one related doc (the app supplies its entity chip). */
+    renderDoc: (doc: T) => ReactNode;
+    getKey: (doc: T) => string;
+    /** "Switch to": open the doc in the viewer. */
+    onSwitchTo: (doc: T) => void;
+    onDelete: (doc: T) => void;
+    onCompare: (doc: T) => void;
+    className?: string;
+}
+/**
+ * Grid cell for the "Related" column: compact icon + count badges (parent, attachments,
+ * duplicates, similar); clicking opens a popover grouping the related documents with an action
+ * per group (Switch to / Delete / Compare). Renders nothing when there are no relations.
+ */
+export declare function RelatedDocsCell<T>({ parent, attachments, duplicates, similar, renderDoc, getKey, onSwitchTo, onDelete, onCompare, className, }: RelatedDocsCellProps<T>): import("react").JSX.Element | null;

package/dist/files/cells/TagColumnParts.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export interface CheckboxCellProps {
+    isChecked: boolean;
+    /** Any CSS colour: the tag's colour. */
+    color: string;
+    isEditable: boolean;
+    /** Tooltip / accessible name, e.g. `Add "Urgent" tag`. */
+    title: string;
+    onToggle: () => void;
+}
+/** Checkbox-tag cell: a coloured box that toggles on click; inert for non-members. */
+export declare const CheckboxCell: import("react").NamedExoticComponent<CheckboxCellProps>;
+export interface TagColumnHeaderProps {
+    /** The column's filter button (host-supplied: it is grid-specific). */
+    filter: ReactNode;
+    /** The tag's name pill. */
+    label: ReactNode;
+    /** Current sort direction; null/undefined when unsorted. */
+    sort?: 'asc' | 'desc' | null;
+    isCentered?: boolean;
+    /** Sort on click; `additive` is true with Shift (multi-sort). */
+    onSort?: (additive: boolean) => void;
+}
+/**
+ * Header of a tag column: filter button on the LEFT of the name, sort indicator after it.
+ * The filter carries AG Grid's `.ag-header-icon` class (grid theme `order: 1`), so the label and
+ * indicator pin `order-2`.
+ */
+export declare const TagColumnHeader: import("react").NamedExoticComponent<TagColumnHeaderProps>;

package/dist/files/cells/index.d.ts

@@ -0,0 +1,6 @@
+export { FolderCell, FolderBreadcrumb, type FolderCellProps } from './FolderCell';
+export { RelatedDocsCell, type RelatedDocsCellProps } from './RelatedDocsCell';
+export { DocumentNameCellFrame, DocumentRowMenu, type DocumentNameCellFrameProps, type DocumentRowMenuProps, } from './DocumentNameCell';
+export { CellHoverIcon, HoverIconCell, type CellHoverIconKind, type HoverIconCellProps, } from './HoverIconCell';
+export { LabelMultiSelectView, LabelPickerList, labelChipClampHeight, DEFAULT_LABEL_MULTI_SELECT_LABELS, type LabelMultiSelectViewProps, type LabelPickerListProps, type LabelMultiSelectLabels, type LabelOption, } from './LabelMultiSelect';
+export { CheckboxCell, TagColumnHeader, type CheckboxCellProps, type TagColumnHeaderProps, } from './TagColumnParts';

package/dist/files/documentGridLayout.d.ts

@@ -0,0 +1,31 @@
+export type DocumentGridLayout = 'table' | 'tablet' | 'mobile-list' | 'modal';
+export interface DocumentGridPresets {
+    /** Saved-state ids per layout. Tablet, phone and modal keep their own so they never overwrite desktop state. */
+    gridIds: Record<DocumentGridLayout, string>;
+    /** Visible columns (applied when no saved state exists) per layout. */
+    visibleColumns: Record<DocumentGridLayout, string[]>;
+    /** Desktop row height; phones use `mobileRowHeight`. */
+    rowHeight: number;
+    mobileRowHeight?: number;
+    /** Modal grids are a fixed 50vh; everything else fills its container. */
+    modalHeight?: string;
+}
+export interface DocumentGridLayoutProps {
+    /** Remount key: switching layout must rebuild the grid so state from another layout never leaks. */
+    remountKey: string;
+    gridId: string;
+    initialVisibleColumns: string[];
+    rowHeight: number;
+    height: string;
+}
+/**
+ * Pick the layout for the current viewport/container: `isNarrow` = phone, `isTablet` = a table
+ * container too narrow for the full column set (a docked sidebar, iPad portrait).
+ */
+export declare function resolveDocumentGridLayout(isNarrow: boolean, isModal: boolean, isTablet?: boolean): DocumentGridLayout;
+/**
+ * Column/sizing preset for the documents grid: the props a host spreads onto its GridView so the
+ * table, the phone list and the modal each get their own state id, default columns and sizing.
+ * Column definitions (explicit `colId`s) and the ids themselves stay with the host.
+ */
+export declare function documentGridLayoutProps(layout: DocumentGridLayout, presets: DocumentGridPresets): DocumentGridLayoutProps;

package/dist/files/grid-test-ids.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Test-id hooks for AG Grid, which owns its row and cell DOM. AG Grid stamps every row with a
+ * `row-id` attribute and every cell with `col-id`; these helpers turn them into `data-testid`s
+ * a host chooses, so a custom UI keeps its own test-id scheme.
+ */
+export interface GridTestIdOptions<T> {
+    /** Test id of the row for `item` (set on the centre-column row element). */
+    getRowTestId?: (item: T) => string;
+    /** Test id of the cell in column `colId` of `item`. */
+    getCellTestId?: (colId: string, item: T) => string;
+}
+/** Stamp `data-testid`s onto the rows and cells under `root`. Idempotent. */
+export declare function applyGridTestIds<T>(root: ParentNode, itemsById: Map<string, T>, { getRowTestId, getCellTestId }: GridTestIdOptions<T>): void;
+/**
+ * Keep the ids applied as AG Grid creates and recycles rows (it virtualises). Returns the
+ * disconnect function.
+ */
+export declare function watchGridTestIds<T>(root: HTMLElement, getItemsById: () => Map<string, T>, options: GridTestIdOptions<T>): () => void;

package/dist/files/import/CalendarImportRow.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+/** Every fixed string of the calendar row. Pass a partial `labels` to translate or reword. */
+export interface CalendarImportLabels {
+    title: string;
+    description: string;
+    settings: string;
+    syncNow: string;
+}
+export declare const DEFAULT_CALENDAR_IMPORT_LABELS: CalendarImportLabels;
+export interface CalendarImportTestIds {
+    root: string;
+    settings: string;
+    syncNow: string;
+}
+export interface CalendarImportRowProps {
+    isSyncing?: boolean;
+    onSettings: () => void;
+    onSyncNow: () => void;
+    /** Dialogs owned by the host. */
+    children?: ReactNode;
+    labels?: Partial<CalendarImportLabels>;
+    /** Overrides for the test ids (defaults keep the current ids). */
+    testIds?: Partial<CalendarImportTestIds>;
+}
+/** Calendar sync row: what it is, plus Settings and Sync now. */
+export declare function CalendarImportRow({ isSyncing, onSettings, onSyncNow, children, labels, testIds, }: CalendarImportRowProps): import("react").JSX.Element;

package/dist/files/import/ImportParts.d.ts

@@ -0,0 +1,114 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '@arbidocs/react/ui';
+/** Every fixed string of the import parts. Pass a partial `labels` to translate or reword. */
+export interface ImportLabels {
+    stop: string;
+    stopping: string;
+    importNow: string;
+    settings: string;
+    importingOf: (processed: number, total: number, noun: string) => string;
+    importing: (processed: number, noun: string) => string;
+    foldersSelected: (count: number) => string;
+    folders: (names: string) => string;
+    moreFolders: (count: number) => string;
+    connect: string;
+    reconnect: string;
+    reconnecting: string;
+    disconnect: string;
+    disconnecting: string;
+    /** Shown under a family that needs re-consent; `reconnect` is rendered bold inside it. */
+    reconnectHint: (reconnectLabel: ReactNode) => ReactNode;
+}
+export declare const DEFAULT_IMPORT_LABELS: ImportLabels;
+/** Divided list of provider rows inside a family section. */
+export declare function ImportList({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface ImportRowProps {
+    /** Brand mark, already sized by the caller. */
+    logo: ReactNode;
+    name: ReactNode;
+    /** Right-aligned actions on the top line. */
+    actions?: ReactNode;
+    /** Detail rows below the top line (summary, progress, handoff, dialogs). */
+    children?: ReactNode;
+    testId?: string;
+    className?: string;
+}
+/** One provider row: logo + name + actions, with detail content beneath. */
+export declare function ImportRow({ logo, name, actions, children, testId, className }: ImportRowProps): import("react").JSX.Element;
+/** Muted explanatory text aligned under the provider name. */
+export declare function ImportHint({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+/** Compact CTA used on provider rows (Reconnect, Enable...). */
+export declare function ImportActionButton({ className, children, variant, ...props }: Omit<ComponentProps<typeof Button>, 'size'>): import("react").JSX.Element;
+export interface ImportRunActionsProps {
+    isRunning: boolean;
+    isStopping?: boolean;
+    /** A sync request is in flight. */
+    isBusy?: boolean;
+    importDisabled?: boolean;
+    importTitle?: string;
+    onImport: () => void;
+    onStop: () => void;
+    onSettings: () => void;
+    settingsLabel: string;
+    importButton?: {
+        testId?: string;
+    };
+    settingsButton?: {
+        testId?: string;
+    };
+    stopButton?: {
+        testId?: string;
+    };
+    labels?: Partial<ImportLabels>;
+}
+/** "Import now" + settings gear, or "Stop" while a run is active. */
+export declare function ImportRunActions({ isRunning, isStopping, isBusy, importDisabled, importTitle, onImport, onStop, onSettings, settingsLabel, importButton, settingsButton, stopButton, labels, }: ImportRunActionsProps): import("react").JSX.Element;
+export interface ImportSummaryProps {
+    /** Left column, under the name. */
+    children: ReactNode;
+    /** Right column (pending count, folders). */
+    aside?: ReactNode;
+    className?: string;
+}
+/** Two-column detail block under a provider row. */
+export declare function ImportSummary({ children, aside, className }: ImportSummaryProps): import("react").JSX.Element;
+/** Right-aligned muted aside of an `ImportSummary`. */
+export declare function ImportAside({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface ImportProgressProps {
+    processed: number;
+    total?: number | null;
+    /** Plural noun, e.g. "emails". */
+    noun: string;
+    testId?: string;
+    labels?: Partial<ImportLabels>;
+}
+/** Live run progress: bar when the total is known, plus a running count. */
+export declare function ImportProgress({ processed, total, noun, testId, labels }: ImportProgressProps): import("react").JSX.Element;
+export interface FolderSummaryProps {
+    /** One entry per selected folder; undefined when its name is not known (counted, never shown). */
+    names: (string | undefined)[];
+    testId?: string;
+    labels?: Partial<ImportLabels>;
+}
+/** The first few synced folder names, then "+N more" (all in the tooltip). */
+export declare function FolderSummary({ names, testId, labels }: FolderSummaryProps): import("react").JSX.Element;
+export type ImportFamilyActionKind = 'connect' | 'reconnect' | 'disconnect';
+export interface ImportFamilySectionProps {
+    label: string;
+    /** Connected account shown next to the label. */
+    identity?: string | null;
+    /** The single family action: Connect when disconnected, Reconnect when re-consent is due. */
+    action: ImportFamilyActionKind;
+    isActionPending?: boolean;
+    onAction: () => void;
+    testId?: string;
+    actionButton?: {
+        testId?: string;
+    };
+    children: ReactNode;
+    labels?: Partial<ImportLabels>;
+}
+/** A provider family (Microsoft / Google): header with one action, then its rows. */
+export declare function ImportFamilySection({ label, identity, action, isActionPending, onAction, testId, actionButton, children, labels, }: ImportFamilySectionProps): import("react").JSX.Element;
+/** Stack of family sections. */
+export declare function ImportPanel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/files/import/TaskSection.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+/** A distinct glyph + colour per processing status (active spins while busy). */
+declare const STATUS_ICONS: {
+    readonly active: {
+        readonly Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "text-blue-text";
+        readonly spin: true;
+    };
+    readonly queued: {
+        readonly Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "text-yellow-text";
+        readonly spin: false;
+    };
+    readonly failed: {
+        readonly Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "text-red-text";
+        readonly spin: false;
+    };
+    readonly skipped: {
+        readonly Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "text-muted-foreground";
+        readonly spin: false;
+    };
+    readonly completed: {
+        readonly Icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "text-green-text";
+        readonly spin: false;
+    };
+};
+export type TaskSectionStatus = keyof typeof STATUS_ICONS;
+export interface TaskSectionProps {
+    title: string;
+    count: number;
+    status: TaskSectionStatus;
+    /** Explanation of what the status means, shown on the heading tooltip. */
+    tooltip?: string;
+    headerAction?: ReactNode;
+    defaultExpanded?: boolean;
+    /** The task list; rendered only while the section has items and is expanded. */
+    children?: ReactNode;
+    testIds?: Partial<{
+        root: string;
+        toggle: string;
+    }>;
+}
+/**
+ * Collapsible processing-status section. Empty sections show a muted, inert heading;
+ * only sections with items expand.
+ */
+export declare function TaskSection({ title, count, status, tooltip, headerAction, defaultExpanded, children, testIds, }: TaskSectionProps): import("react").JSX.Element;
+export {};

package/dist/files/import/UrlInputDialogView.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+/** Every fixed string of the URL dialog. Pass a partial `labels` to translate or reword. */
+export interface UrlInputDialogLabels {
+    title: string;
+    description: string;
+    supports: string;
+    url: (position: number | null) => string;
+    placeholder: string;
+    removeUrl: (position: number) => string;
+    addAnother: string;
+    adding: string;
+    addDocuments: string;
+    mediaPreview: string;
+}
+export declare const DEFAULT_URL_INPUT_DIALOG_LABELS: UrlInputDialogLabels;
+export interface UrlInputDialogTestIds {
+    modal: string;
+    submitError: string;
+    submit: string;
+}
+export interface UrlInputDialogViewProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Trigger element (rendered `asChild`); omit for a controlled dialog opened elsewhere. */
+    trigger?: ReactNode;
+    /** Title content; defaults to `labels.title`. */
+    title?: ReactNode;
+    urls: string[];
+    /** Per-field error text ('' when valid). */
+    errors: string[];
+    onUrlChange: (index: number, value: string) => void;
+    onUrlPaste: (index: number, text: string) => void;
+    onAddUrl: () => void;
+    onRemoveUrl: (index: number) => void;
+    /** Rendered under a field, e.g. a media preview. */
+    renderPreview?: (url: string, index: number) => ReactNode;
+    submitError?: string | null;
+    isSubmitting?: boolean;
+    onSubmit: () => void;
+    labels?: Partial<UrlInputDialogLabels>;
+    /** Overrides for the test ids (defaults keep the current ids). */
+    testIds?: Partial<UrlInputDialogTestIds>;
+}
+/** "Add from the internet" dialog: one or more URL fields, inline errors, submit. */
+export declare function UrlInputDialogView({ open, onOpenChange, trigger, title, urls, errors, onUrlChange, onUrlPaste, onAddUrl, onRemoveUrl, renderPreview, submitError, isSubmitting, onSubmit, labels, testIds, }: UrlInputDialogViewProps): import("react").JSX.Element;
+export interface UrlDialogTitleProps {
+    /** Workspace mark, e.g. its icon. */
+    icon?: ReactNode;
+    workspaceName: string;
+    /** Wins over the default "Add from the internet". */
+    labels?: Partial<UrlInputDialogLabels>;
+}
+/** "<workspace> / Add from the internet" title. */
+export declare function UrlDialogTitle({ icon, workspaceName, labels }: UrlDialogTitleProps): import("react").JSX.Element;
+export interface MediaPreviewViewProps {
+    kind: 'youtube' | 'video' | 'audio';
+    /** Embed URL for youtube, media src otherwise. */
+    src: string;
+    testId?: string;
+    labels?: Partial<UrlInputDialogLabels>;
+}
+/** Inline media preview under a URL field. */
+export declare function MediaPreviewView({ kind, src, testId, labels }: MediaPreviewViewProps): import("react").JSX.Element;

package/dist/files/import/VendorLogo.d.ts

@@ -0,0 +1,15 @@
+/**
+ * VendorLogo
+ *
+ * Brand marks for mailbox and document connectors (Gmail, Outlook, OneDrive,
+ * Google Drive, SharePoint, Box, Dropbox, OneNote, Clio) rendered as inline SVG so
+ * they read as the real products rather than a generic glyph. Falls back to a plain
+ * mail icon for any other vendor. Used by the Import-from-emails shortcut and the
+ * connector provider rows.
+ */
+export declare function VendorLogo({ vendorKey, className, product, }: {
+    vendorKey: string;
+    className?: string;
+    /** Pick a specific product mark when a vendor spans several (e.g. Microsoft → OneDrive). */
+    product?: 'onedrive' | 'googledrive' | 'sharepoint' | 'box' | 'dropbox' | 'onenote' | 'clio';
+}): import("react").JSX.Element;

package/dist/files/import/index.d.ts

@@ -0,0 +1,5 @@
+export { FolderSummary, ImportActionButton, ImportAside, ImportFamilySection, ImportHint, ImportList, ImportPanel, ImportProgress, ImportRow, ImportRunActions, ImportSummary, DEFAULT_IMPORT_LABELS, type ImportLabels, type FolderSummaryProps, type ImportFamilyActionKind, type ImportFamilySectionProps, type ImportProgressProps, type ImportRowProps, type ImportRunActionsProps, type ImportSummaryProps, } from './ImportParts';
+export { CalendarImportRow, DEFAULT_CALENDAR_IMPORT_LABELS, type CalendarImportLabels, type CalendarImportRowProps, type CalendarImportTestIds, } from './CalendarImportRow';
+export { TaskSection, type TaskSectionProps, type TaskSectionStatus } from './TaskSection';
+export { MediaPreviewView, UrlDialogTitle, UrlInputDialogView, DEFAULT_URL_INPUT_DIALOG_LABELS, type UrlInputDialogLabels, type UrlInputDialogTestIds, type MediaPreviewViewProps, type UrlDialogTitleProps, type UrlInputDialogViewProps, } from './UrlInputDialogView';
+export { VendorLogo } from './VendorLogo';