@crewlethq/ui 0.17.1 → 0.18.0

package/dist/ShareDialog-YZ4F37MW.css

@@ -0,0 +1,146 @@
+/*
+ * Three blocks under the title: who to add and at what role, who has access,
+ * and what the whole company may do. Each row of the audience is the badge,
+ * the name over its second line, and the controls at the inline end; the note
+ * and a refusal run the full width under it, so a long sentence never pushes
+ * the controls out of line with the rows above and below.
+ */
+
+.crewlet-share-dialog__add {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__heading {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-share-dialog__audience {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-share-dialog__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--spacing-3);
+  padding: var(--spacing-2) 0;
+}
+
+.crewlet-share-dialog__who {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-share-dialog__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-share-dialog__you,
+.crewlet-share-dialog__detail {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-share-dialog__detail {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-share-dialog__controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-share-dialog__role,
+.crewlet-share-dialog__saving {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-share-dialog__saving {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-share-dialog__note,
+.crewlet-share-dialog__refusal {
+  grid-column: 2 / -1;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-share-dialog__note {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-share-dialog__refusal {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-share-dialog__refusal:empty {
+  display: none;
+}
+
+.crewlet-share-dialog__company {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__company-text {
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.crewlet-share-dialog__link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__link-note {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* Under the phone breakpoint the row's controls go under the name, so a
+   role select and a remove control never squeeze the name to an ellipsis. */
+@media (width < 640px) {
+  .crewlet-share-dialog__row {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .crewlet-share-dialog__controls {
+    grid-column: 2 / -1;
+    justify-content: flex-start;
+  }
+
+  .crewlet-share-dialog__add {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

package/dist/SheetGrid/SheetGrid.d.ts

@@ -0,0 +1,78 @@
+/**
+ * An editable, virtualised data grid: the native sheet of a `sheet` artifact,
+ * and the grid the artifact kit draws for a page's `<crewlet-sheet>`.
+ *
+ * KEYBOARD FIRST, with a spreadsheet's keys: the arrows move, Enter or F2
+ * edits, Escape cancels, Tab and Shift+Tab move across, Space toggles a
+ * checkbox, typing on a cell starts an edit with that character, Mod+C and
+ * Mod+V copy and paste ranges as tab-separated values, Delete clears, Mod+Z
+ * and Mod+Shift+Z ask the host to undo and redo the reader's own edits, and
+ * Mod+Alt+H opens a cell's history. The grid is ONE TAB STOP (the ARIA grid
+ * pattern): Tab at a row's edge leaves it rather than wrapping.
+ *
+ * HONEST INSTANT EDITS (D23). The reader's value is the host's to draw: the
+ * grid asks for an edit through `onEdit`, the host draws the value at once and
+ * lists the field in the row's `pending` until the engine confirms it, which
+ * the grid draws as Saving (a dashed underline, and the word in the cell's
+ * description and the sync strip). A refusal reverts the value in the host's
+ * data and arrives in the row's `refused`, said on the cell. What is drawn
+ * solid is what the engine holds.
+ *
+ * CONFLICTS ARE SAID, NEVER LOCKED. A remote write that lands on the cell
+ * being edited keeps the editor open and names the writer: "Maya changed this
+ * to 6.8 while you were editing. Keep yours or use Maya's." No cell is ever
+ * locked; presence makes contention visible instead.
+ *
+ * VIRTUALISED: only the rows in view (and the active one) are in the
+ * document, so ten thousand rows cost what forty do. `aria-rowcount` and each
+ * row's `aria-rowindex` tell assistive technology how many there are and
+ * where it is.
+ */
+import { type PresenceLabels } from '../PresenceModel/index.js';
+import { type SheetCellPresence, type SheetColumn, type SheetEdit, type SheetLabels, type SheetPerson, type SheetRow, type SheetSort, type SheetSyncState } from '../SheetModel/index.js';
+/** `edit` takes edits; `read` draws the same grid with every cell read only. */
+export type SheetGridMode = 'edit' | 'read';
+/** The cell a reader is on, by row id and field: what a host publishes as presence focus. */
+export interface SheetCellRef {
+    rowId: string;
+    field: string;
+}
+export interface SheetGridProps {
+    /** The grid's accessible name: the sheet's title. */
+    label: string;
+    columns: readonly SheetColumn[];
+    rows: readonly SheetRow[];
+    /** The people person cells name and offer. */
+    people?: readonly SheetPerson[] | undefined;
+    mode?: SheetGridMode | undefined;
+    /** Every edit the reader makes: one cell, a paste, a cleared range. The host writes them as one batch. */
+    onEdit?: ((edits: readonly SheetEdit[]) => void) | undefined;
+    /** Shows the Add row control. */
+    onAddRow?: (() => void) | undefined;
+    /** Shows the per-cell history control on the active cell, and takes Mod+Alt+H. */
+    onShowHistory?: ((cell: SheetCellRef) => void) | undefined;
+    /** The cell the reader is on, or null when the grid has no active data cell: a host's presence focus. */
+    onActiveCellChange?: ((cell: SheetCellRef | null) => void) | undefined;
+    /** The cell the reader is editing, or null: a host's presence `editing`. */
+    onEditingChange?: ((cell: SheetCellRef | null) => void) | undefined;
+    onUndo?: (() => void) | undefined;
+    onRedo?: (() => void) | undefined;
+    /** Opens a URL cell's link, for a host that routes links through an interstitial. */
+    onOpenLink?: ((url: string) => void) | undefined;
+    /** Collaborators on cells (D22). */
+    presence?: readonly SheetCellPresence[] | undefined;
+    /** The order drawn. With `onSortChange` the headers sort. */
+    sort?: SheetSort | null | undefined;
+    onSortChange?: ((sort: SheetSort | null) => void) | undefined;
+    /** Where the host's writes stand, for the sync strip. No strip without it. */
+    sync?: SheetSyncState | undefined;
+    onRetry?: (() => void) | undefined;
+    /** The scroller's height in px. Without it the grid takes the height its container gives it. */
+    height?: number | undefined;
+    /** A BCP 47 tag for numbers and dates; the reader's own locale when absent. */
+    locale?: string | undefined;
+    className?: string | undefined;
+    labels?: Partial<SheetLabels> | undefined;
+    presenceLabels?: Partial<PresenceLabels> | undefined;
+}
+export declare function SheetGrid({ label, columns: declared, rows: given, people, mode, onEdit, onAddRow, onShowHistory, onActiveCellChange, onEditingChange, onUndo, onRedo, onOpenLink, presence, sort, onSortChange, sync, onRetry, height, locale, className, labels: labelOverrides, presenceLabels: presenceOverrides, }: SheetGridProps): import("react").JSX.Element;

package/dist/SheetGrid/cells.d.ts

@@ -0,0 +1,117 @@
+/**
+ * The display and editor halves of every column type.
+ *
+ * `CellDisplay` draws a value; `CellEditor` edits one and hands the result
+ * back with the way the editing ended (Enter moves down, Tab across). The grid
+ * draws both inside its cells and keeps the keyboard; `SheetCell` and the
+ * named cells below draw them alone, as a field in a form.
+ *
+ * Every rule about a value (how it is written, what it parses to, why it is
+ * refused) is the sheet model's, so the grid, a form and the artifact kit
+ * agree on every one of them.
+ */
+import { type SheetColumn, type SheetColumnType, type SheetLabels, type SheetOption, type SheetPerson, type SheetValue, type SheetValueContext } from '../SheetModel/index.js';
+export interface CellDisplayProps {
+    column: SheetColumn;
+    value: SheetValue;
+    context: SheetValueContext;
+    /** Opens a URL cell's link; the anchor's own navigation when absent. */
+    onOpenLink?: ((url: string) => void) | undefined;
+}
+/**
+ * A value as a reader sees it. What the eye reads and what a screen reader
+ * reads are the same words: a checkbox and a rating, which draw no words,
+ * carry them hidden.
+ */
+export declare function CellDisplay({ column, value, context, onOpenLink }: CellDisplayProps): import("react").JSX.Element;
+/** How an edit ended: where the active cell goes next, or nowhere. */
+export type CellMove = 'down' | 'up' | 'right' | 'left' | null;
+/** A remote write that landed on the cell being edited. */
+export interface CellConflict {
+    writer: string;
+    /** The remote value, written for a reader. */
+    value: string;
+    onKeepMine: () => void;
+    onUseTheirs: () => void;
+}
+export interface CellEditorProps {
+    column: SheetColumn;
+    value: SheetValue;
+    context: SheetValueContext;
+    /** The character that started the edit, which replaces the value (a text) or filters the list (an option). */
+    seed?: string | undefined;
+    /** The editor's accessible name: the column, and the row when there is one. */
+    label: string;
+    /** Hands back a value the model accepted, and where to go next. */
+    onCommit: (value: SheetValue, move: CellMove) => void;
+    onCancel: () => void;
+    /** Which way the list or the long text panel opens from the cell. */
+    side?: 'below' | 'above' | undefined;
+    conflict?: CellConflict | null | undefined;
+}
+/** Whether a type is edited through `CellEditor` at all: a checkbox is toggled instead. */
+export declare const hasEditor: (type: SheetColumnType) => boolean;
+/** Whether a typed character starts an edit of this type: a line or a list takes it, a checkbox ignores it. */
+export declare const takesTyping: (type: SheetColumnType) => boolean;
+/**
+ * The editor for one cell. It owns its draft and its own keys (Enter, Tab,
+ * Escape, the arrows inside a list) and nothing else: where the active cell
+ * goes after an edit is the grid's.
+ */
+export declare function CellEditor(props: CellEditorProps): import("react").JSX.Element;
+export interface SheetCellProps {
+    /** The column's name, and the cell's accessible name. */
+    label: string;
+    type: SheetColumnType;
+    /** The value as the datastore holds it; normalised to the type. */
+    value: unknown;
+    /** Makes the cell editable. Called with each accepted value. */
+    onChange?: ((value: SheetValue) => void) | undefined;
+    readOnly?: boolean | undefined;
+    /** Select, multi-select and status choices. */
+    options?: readonly SheetOption[] | undefined;
+    /** The people a person cell may name, and how a stored value is drawn. */
+    people?: readonly SheetPerson[] | undefined;
+    /** Every other column setting: precision, bounds, number style, time, length. */
+    column?: Partial<Omit<SheetColumn, 'type' | 'label' | 'field' | 'options'>> | undefined;
+    /** Drawn as Saving until the host confirms (D23). */
+    pending?: boolean | undefined;
+    /** Why the host refused the last edit, said on the cell. */
+    refused?: string | undefined;
+    locale?: string | undefined;
+    className?: string | undefined;
+    labels?: Partial<SheetLabels> | undefined;
+}
+/**
+ * One cell outside a grid: a field in a form, a row opened as a card on a
+ * phone. It draws the same display and the same editor a grid cell does.
+ *
+ * A checkbox is a real checkbox control, toggled by a press or Space. Every
+ * other type is a button that names its column and says its value, and opens
+ * the editor in place; Enter or Tab in the editor saves, Escape puts it back.
+ */
+export declare function SheetCell({ label, type, value: raw, onChange, readOnly, options, people, column: settings, pending, refused, locale, className, labels: overrides, }: SheetCellProps): import("react").JSX.Element;
+type NamedCellProps = Omit<SheetCellProps, 'type'>;
+/** A checkbox cell on its own. */
+export declare const CheckboxCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A single-line text cell on its own. */
+export declare const TextCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A long text cell on its own: its editor is a panel with a text area. */
+export declare const LongTextCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A number cell on its own. */
+export declare const NumberCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A select cell on its own: one option, drawn as a chip. */
+export declare const SelectCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A multi-select cell on its own: options drawn as chips. */
+export declare const MultiSelectCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A person cell on its own: a person or an agent, drawn with their badge. */
+export declare const PersonCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A status cell on its own: an option drawn as a state word with its dot. */
+export declare const StatusCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A date cell on its own. */
+export declare const DateCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A URL cell on its own. */
+export declare const UrlCell: (props: NamedCellProps) => import("react").JSX.Element;
+/** A rating cell on its own: stars from one to the column's maximum. */
+export declare const RatingCell: (props: NamedCellProps) => import("react").JSX.Element;
+export {};

package/dist/SheetGrid/index.d.ts

@@ -0,0 +1,5 @@
+import './SheetGrid.css';
+export { SheetGrid } from './SheetGrid.js';
+export type { SheetCellRef, SheetGridMode, SheetGridProps } from './SheetGrid.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, StatusCell, TextCell, UrlCell, } from './cells.js';
+export type { CellConflict, CellDisplayProps, CellEditorProps, CellMove, SheetCellProps } from './cells.js';

package/dist/SheetGrid/index.js

@@ -0,0 +1,18 @@
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-FYXRWBJJ.js';
+import '../chunk-GFV4LJHH.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-CENOOTAV.js';
+import '../chunk-3BYIWOTV.js';
+import '../chunk-I6POAB4V.js';
+import '../chunk-PPAQFGS2.js';
+import '../chunk-YYZRLLLY.js';
+import '../chunk-S35G6PNC.js';
+import '../chunk-QWOPX2MN.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';