@gravitee/graphene-core 2.42.0-fix-improve-data-table.e563914 → 2.42.0-monaco-base.a5cd832
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/USAGE_GUIDE.md +0 -160
- package/dist/composed/CodeEditor/CodeEditor.d.ts +29 -0
- package/dist/composed/CodeEditor/CodeEditor.d.ts.map +1 -0
- package/dist/composed/CodeEditor/index.d.ts +6 -0
- package/dist/composed/CodeEditor/index.d.ts.map +1 -0
- package/dist/composed/CodeEditor/models/index.d.ts +13 -0
- package/dist/composed/CodeEditor/models/index.d.ts.map +1 -0
- package/dist/composed/CodeEditor/setupCodeEditor.d.ts +24 -0
- package/dist/composed/CodeEditor/setupCodeEditor.d.ts.map +1 -0
- package/dist/composed/CodeEditor/theme/buildTheme.d.ts +49 -0
- package/dist/composed/CodeEditor/theme/buildTheme.d.ts.map +1 -0
- package/dist/composed/DataTable/DataTable.d.ts +4 -33
- package/dist/composed/DataTable/DataTable.d.ts.map +1 -1
- package/dist/composed/DataTable/index.d.ts +1 -3
- package/dist/composed/DataTable/index.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6089 -6120
- package/dist/styles/globals.css +1 -1
- package/package.json +6 -2
- package/dist/composed/DataTable/cells.d.ts +0 -38
- package/dist/composed/DataTable/cells.d.ts.map +0 -1
- package/dist/composed/DataTableEmptyState/DataTableEmptyState.d.ts +0 -33
- package/dist/composed/DataTableEmptyState/DataTableEmptyState.d.ts.map +0 -1
- package/dist/composed/DataTableEmptyState/index.d.ts +0 -3
- package/dist/composed/DataTableEmptyState/index.d.ts.map +0 -1
- package/snippets/data-table-list-page.tsx +0 -316
package/USAGE_GUIDE.md
CHANGED
|
@@ -314,166 +314,6 @@ With `useLayoutConfig` (module federation), a nested page can set `contentVarian
|
|
|
314
314
|
useLayoutConfig({ contentVariant: 'full-bleed' }, []);
|
|
315
315
|
```
|
|
316
316
|
|
|
317
|
-
### Data table (entity list pages)
|
|
318
|
-
|
|
319
|
-
Use `DataTable` for any entity list — whether the data is fetched page-by-page from an API or loaded in full on the client. The component provides sorting, filtering, pagination, column visibility, row selection, and bulk actions through a composable slot API.
|
|
320
|
-
|
|
321
|
-
**To implement:** copy the snippet from `snippets/data-table-list-page.tsx` and replace the entity type, column definitions, and fetch function with your data. See Storybook **Patterns/Data Table → ApiList** for the full interactive example.
|
|
322
|
-
|
|
323
|
-
#### When to use DataTable vs raw Table
|
|
324
|
-
|
|
325
|
-
| Use `DataTable` | Use raw `Table` |
|
|
326
|
-
|---|---|
|
|
327
|
-
| Any list that could exceed 5 rows | Key-value detail panels |
|
|
328
|
-
| Needs sorting, filtering, or actions | Static configuration displays |
|
|
329
|
-
| Data from an API (server-side) | Inline form grids with <5 fixed rows |
|
|
330
|
-
| Static arrays with >10 items (client-side) | |
|
|
331
|
-
|
|
332
|
-
#### Server-side vs client-side
|
|
333
|
-
|
|
334
|
-
`DataTable` works in two modes:
|
|
335
|
-
|
|
336
|
-
| | Server-side (`serverSide` prop) | Client-side (default) |
|
|
337
|
-
|---|---|---|
|
|
338
|
-
| **When** | Data fetched page-by-page from an API | All data loaded at once |
|
|
339
|
-
| **Sorting** | Pass `sorting` + `onSortingChange`, refetch on change | Automatic (TanStack `getSortedRowModel`) |
|
|
340
|
-
| **Filtering** | Refetch with filter params | Automatic (TanStack `getFilteredRowModel`) |
|
|
341
|
-
| **Pagination** | Pass current page slice to `data` | Pass full array; TanStack paginates |
|
|
342
|
-
| **`data` prop** | Current page only (e.g. 10 rows) | Entire dataset |
|
|
343
|
-
|
|
344
|
-
**Never** mix modes: client-side sort on server-paginated data only sorts the visible page.
|
|
345
|
-
|
|
346
|
-
#### Pagination
|
|
347
|
-
|
|
348
|
-
- Default page size: **10** (standard lists), **25** (high-density: catalog).
|
|
349
|
-
- Page size options: `[10, 25, 50, 100]`.
|
|
350
|
-
- **Recommended:** Use the `pagination` prop for standard pagination (both server-side and client-side):
|
|
351
|
-
|
|
352
|
-
```tsx
|
|
353
|
-
<DataTable
|
|
354
|
-
pagination={{
|
|
355
|
-
page,
|
|
356
|
-
pageSize,
|
|
357
|
-
totalCount,
|
|
358
|
-
onPageChange: setPage,
|
|
359
|
-
onPageSizeChange: (size) => { setPageSize(size); setPage(1); },
|
|
360
|
-
pageSizeOptions: [10, 25, 50, 100],
|
|
361
|
-
}}
|
|
362
|
-
/>
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
- The `footer` slot is still available for custom content (rendered above pagination when both are set).
|
|
366
|
-
- Reset to page 1 when search/filter/sort criteria change.
|
|
367
|
-
- Works for both **server-side** (pass current page of data) and **client-side** (slice data yourself) pagination.
|
|
368
|
-
|
|
369
|
-
#### Search and filters
|
|
370
|
-
|
|
371
|
-
- Search and filters live in the DataTable `toolbar` slot.
|
|
372
|
-
- Search field: `h-8 w-64` consistent sizing. Debounce: **300ms** for server-side search.
|
|
373
|
-
- Use `FacetedFilter` for multi-select categorical filters.
|
|
374
|
-
- Show a "Reset" button when any filter is active.
|
|
375
|
-
|
|
376
|
-
#### Row navigation
|
|
377
|
-
|
|
378
|
-
Use **name-column-as-link**: the primary identifier column (always leftmost) is a clickable link with `font-medium hover:underline`. No full-row-click.
|
|
379
|
-
|
|
380
|
-
#### Actions column
|
|
381
|
-
|
|
382
|
-
- Always the rightmost column. `enableSorting: false`, `enableHiding: false`.
|
|
383
|
-
- Header: `<span className="sr-only">Actions</span>`.
|
|
384
|
-
- 1-2 actions: inline icon buttons (`variant="ghost"`, `size="icon-xs"`).
|
|
385
|
-
- 3+ actions: dropdown menu with **vertical** three-dot trigger (`MoreVerticalIcon`). Do not use `MoreHorizontalIcon` for table row actions; the horizontal variant is for toolbars and card headers. Destructive actions last with separator above.
|
|
386
|
-
|
|
387
|
-
#### Column ordering
|
|
388
|
-
|
|
389
|
-
1. Checkbox (if `selectionMode="multi"`) — auto-prepended
|
|
390
|
-
2. Name/primary identifier (link)
|
|
391
|
-
3. Status badge
|
|
392
|
-
4. Category/type badges
|
|
393
|
-
5. Dates (relative format)
|
|
394
|
-
6. Owner/actor
|
|
395
|
-
7. Actions (rightmost)
|
|
396
|
-
|
|
397
|
-
Target **4-7 visible columns**. More than 7 → enable column visibility and hide low-priority columns by default. Do NOT show raw entity IDs as visible columns.
|
|
398
|
-
|
|
399
|
-
#### Cell renderers
|
|
400
|
-
|
|
401
|
-
Import from `@gravitee/graphene-core/composed/DataTable` (or the main package):
|
|
402
|
-
|
|
403
|
-
| Renderer | Use for | Behavior |
|
|
404
|
-
|---|---|---|
|
|
405
|
-
| `DateCell` | Timestamps | Relative format ("2h ago") + full date tooltip |
|
|
406
|
-
| `BadgeCell` | Status/category | Truncation-safe badge with variant support |
|
|
407
|
-
| `MonoCell` | IDs, paths, tokens | Monospace, character-limit truncation + tooltip |
|
|
408
|
-
| `CopyableCell` | API keys, IDs | Mono text + copy button on hover |
|
|
409
|
-
| `TruncatedCell` | Long text | Max-width constraint + tooltip on overflow |
|
|
410
|
-
|
|
411
|
-
#### Empty states
|
|
412
|
-
|
|
413
|
-
Use `DataTableEmptyState` — it enforces the correct structure for both scenarios:
|
|
414
|
-
|
|
415
|
-
**`variant="first-use"`** — collection is genuinely empty (user has never created entities)
|
|
416
|
-
- Render **instead of** `DataTable` (no table chrome needed)
|
|
417
|
-
- Wrap in `<div className="rounded-lg border">` for containment
|
|
418
|
-
- Props: `icon`, `title`, `description`, `primaryAction`, optional `secondaryAction`, optional `children` for educational content (flow diagrams, feature pillars)
|
|
419
|
-
- Decision: `totalCount === 0 && !hasActiveFilters`
|
|
420
|
-
|
|
421
|
-
**`variant="no-results"`** — active filters/search returned zero matches
|
|
422
|
-
- Render **inside** `DataTable` as the `emptyMessage` prop (keep toolbar visible)
|
|
423
|
-
- Props: `icon` (use `SearchIcon`), `title`, `description`, `action` (e.g. "Clear filters")
|
|
424
|
-
- Decision: `filteredCount === 0 && hasActiveFilters`
|
|
425
|
-
|
|
426
|
-
```tsx
|
|
427
|
-
// Page-level decision pattern
|
|
428
|
-
{isFirstUse ? (
|
|
429
|
-
<div className="rounded-lg border">
|
|
430
|
-
<DataTableEmptyState variant="first-use" icon={<GlobeIcon />} title="No APIs yet" ... />
|
|
431
|
-
</div>
|
|
432
|
-
) : (
|
|
433
|
-
<DataTable
|
|
434
|
-
emptyMessage={<DataTableEmptyState variant="no-results" icon={<SearchIcon />} ... />}
|
|
435
|
-
...
|
|
436
|
-
/>
|
|
437
|
-
)}
|
|
438
|
-
```
|
|
439
|
-
|
|
440
|
-
See Storybook **Composed/DataTableEmptyState → Integration** for the full interactive example.
|
|
441
|
-
|
|
442
|
-
#### Header button coordination
|
|
443
|
-
|
|
444
|
-
Pages with a primary "Add Entity" button in the header follow one rule: **the header button only appears when data exists**. During first-use, the empty state owns the primary CTA.
|
|
445
|
-
|
|
446
|
-
| State | Header button | Content area |
|
|
447
|
-
|---|---|---|
|
|
448
|
-
| **First-use** (`totalCount === 0 && !hasFilters`) | Hidden | `DataTableEmptyState variant="first-use"` with primary CTA |
|
|
449
|
-
| **Has data** (`totalCount > 0`) | Primary `+ Add Entity` | DataTable |
|
|
450
|
-
| **No results** (filters active, zero matches) | Primary `+ Add Entity` | `DataTableEmptyState variant="no-results"` with "Clear filters" |
|
|
451
|
-
|
|
452
|
-
Both the header button and the empty state CTA trigger the same creation flow. No visual downgrade (both are primary variant buttons). No transition animation between states.
|
|
453
|
-
|
|
454
|
-
```tsx
|
|
455
|
-
<div className="flex items-center justify-between">
|
|
456
|
-
<div>
|
|
457
|
-
<h2 className="text-lg font-semibold">Entities</h2>
|
|
458
|
-
<p className="text-sm text-muted-foreground">Manage your entity catalog.</p>
|
|
459
|
-
</div>
|
|
460
|
-
{!isFirstUse && (
|
|
461
|
-
<Button size="sm"><PlusIcon /> Add entity</Button>
|
|
462
|
-
)}
|
|
463
|
-
</div>
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
#### Loading state
|
|
467
|
-
|
|
468
|
-
- Pass `skeletonCount={pageSize}` to prevent layout shift.
|
|
469
|
-
- `loadingDelay={200}` (default) prevents flash on fast responses.
|
|
470
|
-
|
|
471
|
-
#### `serverSide` prop
|
|
472
|
-
|
|
473
|
-
Set `serverSide` when data is fetched page-by-page from an API. It disables TanStack's built-in sort/filter/pagination models so you control everything via your fetch logic.
|
|
474
|
-
|
|
475
|
-
When `serverSide` is **not set** (default), pass the entire dataset to `data` and TanStack handles sorting and filtering automatically. For pagination, slice the array yourself and pass the current page via `data`, using the `pagination` prop to render controls.
|
|
476
|
-
|
|
477
317
|
### Context sidebar (resource detail pages)
|
|
478
318
|
|
|
479
319
|
Use `ContextSidebar` when a user **drills down from a list into a single resource** (API, Agent, Application…) that has multiple sub-sections. It provides secondary navigation scoped to that entity — set `viewMode: 'context'` on `AppLayout` and wire `ContextToggleButton` in the `leading` slot of `ContentHeader`.
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { EditorProps } from '@monaco-editor/react';
|
|
2
|
+
import { CodeEditorLanguage } from './models';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
export interface CodeEditorProps {
|
|
5
|
+
value?: string;
|
|
6
|
+
defaultValue?: string;
|
|
7
|
+
onChange?: (value: string | undefined) => void;
|
|
8
|
+
language?: CodeEditorLanguage;
|
|
9
|
+
/** Lock editing from the schema (read-only intent). */
|
|
10
|
+
readOnly?: boolean;
|
|
11
|
+
/** Lock editing from form state; also dims the editor. */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Explicit height of the editor container. Accepts a pixel number (`300`) or any CSS value
|
|
15
|
+
* (`"50vh"`, `"100%"`). When omitted, the container has no inline height — size it via
|
|
16
|
+
* `className` (`"h-64"`, `"h-full"`) or let a parent flex/grid item control it.
|
|
17
|
+
* Monaco requires a non-zero height to render; ensure one is always provided via one of
|
|
18
|
+
* these means.
|
|
19
|
+
*/
|
|
20
|
+
height?: number | string;
|
|
21
|
+
className?: string;
|
|
22
|
+
/** Advanced escape hatch — passes through to Monaco's construction options. */
|
|
23
|
+
options?: EditorProps['options'];
|
|
24
|
+
/** Advanced escape hatch — Monaco editor + namespace once mounted. */
|
|
25
|
+
onMount?: EditorProps['onMount'];
|
|
26
|
+
}
|
|
27
|
+
declare function CodeEditor({ value, defaultValue, onChange, language, readOnly, disabled, height, className, options, onMount, }: CodeEditorProps): React.JSX.Element;
|
|
28
|
+
export { CodeEditor };
|
|
29
|
+
//# sourceMappingURL=CodeEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/composed/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,WAAW,EAAU,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAoB,MAAM,UAAU,CAAC;AAIrE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,sEAAsE;IACtE,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AA6BD,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAsB,EACtB,QAAgB,EAChB,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,OAAO,EACP,OAAO,GACR,EAAE,eAAe,qBA0EjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { CodeEditor } from './CodeEditor';
|
|
2
|
+
export type { CodeEditorProps } from './CodeEditor';
|
|
3
|
+
export { setupCodeEditor } from './setupCodeEditor';
|
|
4
|
+
export type { SetupCodeEditorOptions } from './setupCodeEditor';
|
|
5
|
+
export type { CodeEditorLanguage } from './models';
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/CodeEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { EditorProps } from '@monaco-editor/react';
|
|
2
|
+
/**
|
|
3
|
+
* The Monaco standalone editor instance handed to `onMount`. Internal — deliberately kept out
|
|
4
|
+
* of the public barrel so no engine type leaks into the package surface.
|
|
5
|
+
*/
|
|
6
|
+
export type StandaloneEditor = Parameters<NonNullable<EditorProps['onMount']>>[0];
|
|
7
|
+
/**
|
|
8
|
+
* Languages with first-class support in the Graphene `CodeEditor`. The engine colors any
|
|
9
|
+
* built-in Monaco language id; this union curates the officially-supported set (and is what the
|
|
10
|
+
* JSON-schema integration maps onto in a later PR).
|
|
11
|
+
*/
|
|
12
|
+
export type CodeEditorLanguage = 'json' | 'yaml' | 'html' | 'markdown' | 'css' | 'plaintext' | 'javascript';
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composed/CodeEditor/models/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface SetupCodeEditorOptions {
|
|
2
|
+
/**
|
|
3
|
+
* URL under which the app serves Monaco's `vs` asset folder, e.g. `"/assets/monaco/vs"`.
|
|
4
|
+
* Must point at a copy of `node_modules/monaco-editor/min/vs` of the **same version** as the
|
|
5
|
+
* installed `monaco-editor`.
|
|
6
|
+
*/
|
|
7
|
+
baseUrl: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Point Monaco's loader at a self-hosted `vs` folder instead of the default jsdelivr CDN.
|
|
11
|
+
* Call once at app bootstrap, before the first `<CodeEditor>` mounts.
|
|
12
|
+
*
|
|
13
|
+
* Idempotent: Monaco's `loader.config` is a global singleton (first caller wins), so any
|
|
14
|
+
* subsequent call is ignored. Exposing this as an explicit init — rather than a hidden import
|
|
15
|
+
* side-effect — keeps the runtime-loading decision owned by the host app.
|
|
16
|
+
*/
|
|
17
|
+
export declare function setupCodeEditor({ baseUrl }: SetupCodeEditorOptions): void;
|
|
18
|
+
/**
|
|
19
|
+
* Whether {@link setupCodeEditor} has been called. `<CodeEditor>` reads this to emit a dev-only
|
|
20
|
+
* warning when it mounts without an explicit init — otherwise Monaco silently falls back to the
|
|
21
|
+
* CDN, which breaks under a strict CSP or offline.
|
|
22
|
+
*/
|
|
23
|
+
export declare function isCodeEditorConfigured(): boolean;
|
|
24
|
+
//# sourceMappingURL=setupCodeEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setupCodeEditor.d.ts","sourceRoot":"","sources":["../../../src/composed/CodeEditor/setupCodeEditor.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB;AAID;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,sBAAsB,GAAG,IAAI,CAIzE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export declare const THEME_NAME = "graphene";
|
|
2
|
+
export declare function buildTheme(): {
|
|
3
|
+
base: "vs-dark" | "vs";
|
|
4
|
+
inherit: boolean;
|
|
5
|
+
rules: ({
|
|
6
|
+
token: string;
|
|
7
|
+
foreground: string;
|
|
8
|
+
fontStyle?: undefined;
|
|
9
|
+
} | {
|
|
10
|
+
token: string;
|
|
11
|
+
foreground: string;
|
|
12
|
+
fontStyle: string;
|
|
13
|
+
})[];
|
|
14
|
+
colors: {
|
|
15
|
+
'editor.background': string;
|
|
16
|
+
'editor.foreground': string;
|
|
17
|
+
'editor.lineHighlightBackground': string;
|
|
18
|
+
'editor.lineHighlightBorder': string;
|
|
19
|
+
'editor.selectionBackground': string;
|
|
20
|
+
'editor.inactiveSelectionBackground': string;
|
|
21
|
+
'editorCursor.foreground': string;
|
|
22
|
+
'editorLineNumber.foreground': string;
|
|
23
|
+
'editorLineNumber.activeForeground': string;
|
|
24
|
+
'editorGutter.background': string;
|
|
25
|
+
'editorIndentGuide.background1': string;
|
|
26
|
+
'editorIndentGuide.activeBackground1': string;
|
|
27
|
+
'editorWidget.background': string;
|
|
28
|
+
'editorWidget.foreground': string;
|
|
29
|
+
'editorWidget.border': string;
|
|
30
|
+
'editorWidget.resizeBorder': string;
|
|
31
|
+
'widget.shadow': string;
|
|
32
|
+
'input.background': string;
|
|
33
|
+
'input.border': string;
|
|
34
|
+
'input.foreground': string;
|
|
35
|
+
'input.placeholderForeground': string;
|
|
36
|
+
'inputOption.activeBorder': string;
|
|
37
|
+
'inputOption.activeBackground': string;
|
|
38
|
+
'inputOption.activeForeground': string;
|
|
39
|
+
'button.background': string;
|
|
40
|
+
'button.foreground': string;
|
|
41
|
+
'editorSuggestWidget.background': string;
|
|
42
|
+
'editorSuggestWidget.border': string;
|
|
43
|
+
'editorSuggestWidget.selectedBackground': string;
|
|
44
|
+
'scrollbarSlider.background': string;
|
|
45
|
+
'scrollbarSlider.hoverBackground': string;
|
|
46
|
+
'scrollbarSlider.activeBackground': string;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=buildTheme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buildTheme.d.ts","sourceRoot":"","sources":["../../../../src/composed/CodeEditor/theme/buildTheme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,aAAa,CAAC;AA0BrC,wBAAgB,UAAU;UAmBe,SAAS,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDxD"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import { ColumnDef, OnChangeFn, SortingState, TableOptions } from '@tanstack/react-table';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
interface DataTablePaginationConfig {
|
|
4
|
-
readonly page: number;
|
|
5
|
-
readonly pageSize: number;
|
|
6
|
-
readonly totalCount: number;
|
|
7
|
-
readonly onPageChange: (page: number) => void;
|
|
8
|
-
readonly onPageSizeChange?: (pageSize: number) => void;
|
|
9
|
-
/** @default [10, 25, 50, 100] */
|
|
10
|
-
readonly pageSizeOptions?: number[];
|
|
11
|
-
}
|
|
12
3
|
interface DataTableProps<TData> {
|
|
13
4
|
readonly columns: ColumnDef<TData, unknown>[];
|
|
14
5
|
readonly data: TData[];
|
|
@@ -16,9 +7,8 @@ interface DataTableProps<TData> {
|
|
|
16
7
|
readonly onSelectionChange?: (rows: TData[]) => void;
|
|
17
8
|
/** Slot rendered next to column visibility toggle. Automatically disabled when no rows are selected. */
|
|
18
9
|
readonly bulkActions?: ReactNode;
|
|
19
|
-
/** Controlled sorting state.
|
|
10
|
+
/** Controlled sorting state. When set without `onSortingChange`, sorting becomes read-only. */
|
|
20
11
|
readonly sorting?: SortingState;
|
|
21
|
-
/** Called when the user clicks a sortable column header. Use to trigger a server re-fetch with the new sort params. */
|
|
22
12
|
readonly onSortingChange?: OnChangeFn<SortingState>;
|
|
23
13
|
readonly emptyMessage?: ReactNode;
|
|
24
14
|
readonly enableColumnVisibility?: boolean;
|
|
@@ -32,34 +22,15 @@ interface DataTableProps<TData> {
|
|
|
32
22
|
/** Number of skeleton rows shown during initial load. @default 5 */
|
|
33
23
|
readonly skeletonCount?: number;
|
|
34
24
|
readonly className?: string;
|
|
35
|
-
/** Accessible label for the table region. Falls back to a generic default for screen readers. */
|
|
36
|
-
readonly 'aria-label'?: string;
|
|
37
25
|
/** Toolbar area above the table (search, filters, etc.). */
|
|
38
26
|
readonly toolbar?: ReactNode;
|
|
39
|
-
/**
|
|
40
|
-
* Pagination config. When set, DataTable renders `DataTablePagination` in the footer.
|
|
41
|
-
* In `serverSide` mode, `totalCount` drives page count; in client-side mode it reflects `data.length`.
|
|
42
|
-
*/
|
|
43
|
-
readonly pagination?: DataTablePaginationConfig;
|
|
44
|
-
/** Custom footer content. Renders above pagination when both are set. Use `pagination` prop for standard pagination. */
|
|
45
27
|
readonly footer?: ReactNode;
|
|
46
|
-
/**
|
|
47
|
-
* Disables client-side sorting, filtering, and pagination. Use when `data` is fetched from a server.
|
|
48
|
-
*
|
|
49
|
-
* **Consumer responsibilities when `serverSide` is true:**
|
|
50
|
-
* - Pass `sorting` + `onSortingChange` to control sort state and re-fetch on change.
|
|
51
|
-
* - Pass `pagination` with server-provided `totalCount` and handle `onPageChange`/`onPageSizeChange` to re-fetch the correct page.
|
|
52
|
-
* - Pass pre-sorted, pre-filtered `data` for the current page only (not the full dataset).
|
|
53
|
-
* - Set `loading` to `true` while fetching so skeletons/overlay display correctly.
|
|
54
|
-
*
|
|
55
|
-
* DataTable still renders headers, selection, column visibility, and the pagination UI;
|
|
56
|
-
* it simply delegates the data-processing logic to the consumer's fetch layer.
|
|
57
|
-
*/
|
|
28
|
+
/** Disables client-side sorting/filtering/pagination. Use when data is fetched from a server. */
|
|
58
29
|
readonly serverSide?: boolean;
|
|
59
30
|
/** Escape hatch for advanced `@tanstack/react-table` options (e.g. `meta`, `initialState`). */
|
|
60
31
|
readonly tableOptions?: Partial<TableOptions<TData>>;
|
|
61
32
|
}
|
|
62
|
-
declare function DataTable<TData>({ columns: userColumns, data, selectionMode, onSelectionChange, bulkActions, sorting: sortingProp, onSortingChange: onSortingChangeProp, emptyMessage, enableColumnVisibility, enableColumnResizing, stickyHeader, loading: loadingProp, loadingDelay, skeletonCount, className,
|
|
33
|
+
declare function DataTable<TData>({ columns: userColumns, data, selectionMode, onSelectionChange, bulkActions, sorting: sortingProp, onSortingChange: onSortingChangeProp, emptyMessage, enableColumnVisibility, enableColumnResizing, stickyHeader, loading: loadingProp, loadingDelay, skeletonCount, className, toolbar, footer, serverSide, tableOptions, }: DataTableProps<TData>): import("react").JSX.Element;
|
|
63
34
|
export { DataTable };
|
|
64
|
-
export type {
|
|
35
|
+
export type { DataTableProps };
|
|
65
36
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,UAAU,EAGf,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,UAAU,EAGf,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;AAmB1F,UAAU,cAAc,CAAC,KAAK;IAC5B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACrD,wGAAwG;IACxG,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,+FAA+F;IAC/F,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACpD,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAC1C,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,yGAAyG;IACzG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,iGAAiG;IACjG,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,+FAA+F;IAC/F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD;AAqCD,iBAAS,SAAS,CAAC,KAAK,EAAE,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,aAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,eAAe,EAAE,mBAAmB,EACpC,YAA4B,EAC5B,sBAAsB,EACtB,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,YAAkB,EAClB,aAAiB,EACjB,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,EACV,YAAY,GACb,EAAE,cAAc,CAAC,KAAK,CAAC,+BAiMvB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
export { DataTable } from './DataTable';
|
|
2
|
-
export type {
|
|
2
|
+
export type { DataTableProps } from './DataTable';
|
|
3
3
|
export { DataTableColumnHeader } from './DataTableColumnHeader';
|
|
4
4
|
export type { DataTableColumnHeaderProps } from './DataTableColumnHeader';
|
|
5
5
|
export { DataTableViewOptions } from './DataTableViewOptions';
|
|
6
|
-
export { BadgeCell, CopyableCell, DateCell, MonoCell, TruncatedCell } from './cells';
|
|
7
|
-
export type { BadgeCellProps, CopyableCellProps, DateCellProps, MonoCellProps, TruncatedCellProps } from './cells';
|
|
8
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -51,11 +51,11 @@ export * from './composed/AppContextBar';
|
|
|
51
51
|
export * from './composed/AppLayout';
|
|
52
52
|
export * from './composed/AppSidebar';
|
|
53
53
|
export * from './composed/AppSwitcher';
|
|
54
|
+
export * from './composed/CodeEditor';
|
|
54
55
|
export * from './composed/ContentHeader';
|
|
55
56
|
export * from './composed/CopyableText';
|
|
56
57
|
export { buildLinearBreadcrumbs, type LinearBreadcrumbNavigate, type LinearBreadcrumbSegment, } from './lib/breadcrumbs/buildLinearBreadcrumbs';
|
|
57
58
|
export * from './composed/DataTable';
|
|
58
|
-
export * from './composed/DataTableEmptyState';
|
|
59
59
|
export * from './composed/DataTablePagination';
|
|
60
60
|
export * from './composed/DatePicker';
|
|
61
61
|
export * from './composed/FacetedFilter';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}
|