@kanunilabs/datagrid 1.9.1 → 1.9.3

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.
Files changed (44) hide show
  1. package/dist/datagrid.umd.js +8 -8
  2. package/dist/index.cjs +2 -2
  3. package/dist/index.d.cts +52 -4
  4. package/dist/index.d.ts +52 -4
  5. package/dist/index.js +2 -2
  6. package/dist/styles.css +411 -1
  7. package/dist/themes/all.css +108 -0
  8. package/dist/themes/amber.css +3 -0
  9. package/dist/themes/aubergine.css +3 -0
  10. package/dist/themes/azure.css +3 -0
  11. package/dist/themes/burgundy.css +3 -0
  12. package/dist/themes/charcoal.css +3 -0
  13. package/dist/themes/contrast-dark.css +3 -0
  14. package/dist/themes/contrast-light.css +3 -0
  15. package/dist/themes/coral.css +3 -0
  16. package/dist/themes/corporate.css +3 -0
  17. package/dist/themes/deep-sea.css +3 -0
  18. package/dist/themes/editorial.css +3 -0
  19. package/dist/themes/ember.css +3 -0
  20. package/dist/themes/emerald.css +3 -0
  21. package/dist/themes/forest.css +3 -0
  22. package/dist/themes/glacier.css +3 -0
  23. package/dist/themes/graphite.css +3 -0
  24. package/dist/themes/indigo-night.css +3 -0
  25. package/dist/themes/indigo.css +3 -0
  26. package/dist/themes/ivory.css +3 -0
  27. package/dist/themes/lagoon.css +3 -0
  28. package/dist/themes/linen.css +3 -0
  29. package/dist/themes/midnight.css +3 -0
  30. package/dist/themes/mist.css +3 -0
  31. package/dist/themes/monochrome.css +3 -0
  32. package/dist/themes/onyx.css +3 -0
  33. package/dist/themes/orchid.css +3 -0
  34. package/dist/themes/porcelain.css +3 -0
  35. package/dist/themes/rose.css +3 -0
  36. package/dist/themes/sandstone.css +3 -0
  37. package/dist/themes/slate-night.css +3 -0
  38. package/dist/themes/slate.css +3 -0
  39. package/dist/themes/steel.css +3 -0
  40. package/dist/themes/stone.css +3 -0
  41. package/dist/themes/taupe.css +3 -0
  42. package/dist/themes/teal.css +3 -0
  43. package/dist/themes/terminal.css +3 -0
  44. package/package.json +3 -3
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridRowData, DataGridController, GridDictionary, GridDataType, LookupItem, LookupMatchMode, RowKey, EditingEngineOptions, EditingEngine, RowChange, EditMode, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, GridThemeName, GridPaletteName, GridDensity, DescribeFilterOptions, CardViewOptions, StateStoringConfig, InferColumnsOptions } from '@kanunilabs/datagrid-core';
1
+ import { GridRowData, DataGridController, GridDictionary, GridDataType, LookupItem, LookupMatchMode, RowKey, EditingEngineOptions, EditingEngine, RowChange, EditMode, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, GridThemeName, GridPaletteName, GridDensity, DescribeFilterOptions, CardViewOptions, ToolbarOptions, PortalContainer, StateStoringConfig, InferColumnsOptions, RowStatusSource } from '@kanunilabs/datagrid-core';
2
2
  export { CustomFilterOperator, CustomFilterOperatorId, DENSITY_ROW_HEIGHT, DataGridController, FilterNode, GRID_COLOR_SCHEMES, GridColorScheme, GridColumnDef, GridDensity, GridPaletteName, GridRowData, GridTheme, GridThemeName, RowKey, RowNode, SortDescriptor, THEME_ROW_HEIGHT, isPackagedTheme, presetRowHeight } from '@kanunilabs/datagrid-core';
3
3
 
4
4
  /** What a header menu is opened against — the React shape, verbatim. */
@@ -780,8 +780,25 @@ interface CreateGridConfig<TRow = GridRowData> extends Omit<DataGridCoreConfig<T
780
780
  * a vanilla caller has no editor surfacing the `@deprecated` tag.
781
781
  */
782
782
  showRowCount?: boolean;
783
- /** Quick-search + CSV export bar above the grid. */
784
- toolbar?: boolean;
783
+ /**
784
+ * Quick-search + export bar above the grid. `true` shows all of it; an
785
+ * object picks the parts and sets the search box up — React's `toolbar`:
786
+ *
787
+ * toolbar: { export: false, search: { maxLength: 100, debounce: 300, validate } }
788
+ *
789
+ * Your own buttons: `toolbarItemsBefore` / `toolbarItemsAfter`, e.g. built
790
+ * with `toolbarButton()`.
791
+ */
792
+ toolbar?: boolean | ToolbarOptions;
793
+ /**
794
+ * Where the grid draws its popups (header filter, menus, date and lookup
795
+ * lists, dialogs, tooltips): an element, or a function returning one.
796
+ * Default `document.body`. Set it when the grid sits in a modal that makes
797
+ * the rest of the page ignore the pointer; pass the modal's content element
798
+ * (one without `overflow: hidden`). Popups stay in place even when the modal
799
+ * is moved with a CSS transform. Every popup carries `data-kanuni-portal`.
800
+ */
801
+ portalContainer?: PortalContainer;
785
802
  /** "Columns" button in the toolbar opening the visibility chooser. */
786
803
  toolbarColumnChooser?: boolean;
787
804
  /**
@@ -926,6 +943,12 @@ interface CreateGridConfig<TRow = GridRowData> extends Omit<DataGridCoreConfig<T
926
943
  enterpriseEdition?: boolean;
927
944
  /** Extra classes for a body cell (pending edit, range, fill preview…). */
928
945
  getCellClassName?: (ctx: CellSlotContext<TRow>) => string | undefined;
946
+ /**
947
+ * Where `rowStatus` reads the grid's own save status — the Enterprise
948
+ * wrapper's editing engine. With `editing` on here, the grid's own engine
949
+ * answers and this is not asked.
950
+ */
951
+ getRowStatusSource?: () => RowStatusSource | null;
929
952
  onCellPointerDown?: (ctx: CellSlotContext<TRow>, event: MouseEvent) => void;
930
953
  onCellPointerEnter?: (ctx: CellSlotContext<TRow>, event: MouseEvent) => void;
931
954
  onCellDoubleClick?: (ctx: CellSlotContext<TRow>) => void;
@@ -950,6 +973,26 @@ interface GridApi<TRow = GridRowData> {
950
973
  }
951
974
  declare function createGrid<TRow = GridRowData>(container: HTMLElement, config: CreateGridConfig<TRow>): GridApi<TRow>;
952
975
 
976
+ interface ToolbarButtonSpec {
977
+ /** The glyph: an element (e.g. an inline SVG) or SVG/HTML markup. */
978
+ icon: Element | string;
979
+ /** The button's name: its accessible name and the start of its tooltip. */
980
+ label: string;
981
+ /** Keyboard shortcut shown in the tooltip and as `aria-keyshortcuts`. */
982
+ shortcut?: string;
983
+ /** Set while the button cannot be used: clicks are ignored and this is the reason given. */
984
+ disabledReason?: string;
985
+ /** Show the label beside the icon. Default false (icon only). */
986
+ showLabel?: boolean;
987
+ onClick?: () => void;
988
+ /** `data-testid` on the button. */
989
+ testId?: string;
990
+ }
991
+ /** A button for the toolbar or status bar. Call `update()` to change it later. */
992
+ declare function toolbarButton(spec: ToolbarButtonSpec): HTMLButtonElement & {
993
+ update(next: Partial<ToolbarButtonSpec>): void;
994
+ };
995
+
953
996
  /**
954
997
  * Width that fits the header and every rendered cell of `columnId`.
955
998
  * Returns null when nothing could be measured (no such column on screen, or no
@@ -1004,8 +1047,13 @@ interface ConfirmDialogSpec {
1004
1047
  danger?: boolean;
1005
1048
  /** The enterprise wrapper's theme/dark classes, re-established here. */
1006
1049
  surfaceClass?: string;
1050
+ /**
1051
+ * An element inside the grid, so the dialog follows the grid's
1052
+ * `portalContainer` (core `portalContainerFor`). Default: <body>.
1053
+ */
1054
+ anchor?: Element;
1007
1055
  }
1008
1056
  /** Open the dialog; resolves the user's answer and removes itself. */
1009
1057
  declare function openConfirmDialog(spec: ConfirmDialogSpec): Promise<boolean>;
1010
1058
 
1011
- export { CHECKBOX_COLUMN_WIDTH, type CellEditingExtension, type CellEditingHelpers, type CellEditingLayer, type CellEditingOptions, type CellEditorSpec, type CellLookupEditorSpec, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type ConfirmDialogSpec, type CreateGridConfig, DETAIL_COLUMN_WIDTH, type DateEditorSpec, type EditFormField, type EditFormHandle, type EditFormSpec, type ExportKind, type GridApi, type GridMenuItem, type GridNotesConfig, type HeaderMenuContext, type HeaderMenuDeps, type NoteCellContext, PRINT_MAX_ROWS, type PrintLayoutOptions, ROW_DRAG_MIME, ROW_NUMBER_COLUMN_WIDTH, type RowDragConfig, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, type VanillaColumnDef, type VanillaEditorRenderContext, type VanillaFilterRenderApi, attachCellEditing, buildCellEditor, buildDateEditor, buildEditForm, buildHeaderMenu, createGrid, measureBestFitWidth, openConfirmDialog };
1059
+ export { CHECKBOX_COLUMN_WIDTH, type CellEditingExtension, type CellEditingHelpers, type CellEditingLayer, type CellEditingOptions, type CellEditorSpec, type CellLookupEditorSpec, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type ConfirmDialogSpec, type CreateGridConfig, DETAIL_COLUMN_WIDTH, type DateEditorSpec, type EditFormField, type EditFormHandle, type EditFormSpec, type ExportKind, type GridApi, type GridMenuItem, type GridNotesConfig, type HeaderMenuContext, type HeaderMenuDeps, type NoteCellContext, PRINT_MAX_ROWS, type PrintLayoutOptions, ROW_DRAG_MIME, ROW_NUMBER_COLUMN_WIDTH, type RowDragConfig, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, type ToolbarButtonSpec, type VanillaColumnDef, type VanillaEditorRenderContext, type VanillaFilterRenderApi, attachCellEditing, buildCellEditor, buildDateEditor, buildEditForm, buildHeaderMenu, createGrid, measureBestFitWidth, openConfirmDialog, toolbarButton };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { GridRowData, DataGridController, GridDictionary, GridDataType, LookupItem, LookupMatchMode, RowKey, EditingEngineOptions, EditingEngine, RowChange, EditMode, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, GridThemeName, GridPaletteName, GridDensity, DescribeFilterOptions, CardViewOptions, StateStoringConfig, InferColumnsOptions } from '@kanunilabs/datagrid-core';
1
+ import { GridRowData, DataGridController, GridDictionary, GridDataType, LookupItem, LookupMatchMode, RowKey, EditingEngineOptions, EditingEngine, RowChange, EditMode, RowNode, GridColumnDef, DataGridCoreConfig, FilterRenderContextBase, FilterNode, GridThemeName, GridPaletteName, GridDensity, DescribeFilterOptions, CardViewOptions, ToolbarOptions, PortalContainer, StateStoringConfig, InferColumnsOptions, RowStatusSource } from '@kanunilabs/datagrid-core';
2
2
  export { CustomFilterOperator, CustomFilterOperatorId, DENSITY_ROW_HEIGHT, DataGridController, FilterNode, GRID_COLOR_SCHEMES, GridColorScheme, GridColumnDef, GridDensity, GridPaletteName, GridRowData, GridTheme, GridThemeName, RowKey, RowNode, SortDescriptor, THEME_ROW_HEIGHT, isPackagedTheme, presetRowHeight } from '@kanunilabs/datagrid-core';
3
3
 
4
4
  /** What a header menu is opened against — the React shape, verbatim. */
@@ -780,8 +780,25 @@ interface CreateGridConfig<TRow = GridRowData> extends Omit<DataGridCoreConfig<T
780
780
  * a vanilla caller has no editor surfacing the `@deprecated` tag.
781
781
  */
782
782
  showRowCount?: boolean;
783
- /** Quick-search + CSV export bar above the grid. */
784
- toolbar?: boolean;
783
+ /**
784
+ * Quick-search + export bar above the grid. `true` shows all of it; an
785
+ * object picks the parts and sets the search box up — React's `toolbar`:
786
+ *
787
+ * toolbar: { export: false, search: { maxLength: 100, debounce: 300, validate } }
788
+ *
789
+ * Your own buttons: `toolbarItemsBefore` / `toolbarItemsAfter`, e.g. built
790
+ * with `toolbarButton()`.
791
+ */
792
+ toolbar?: boolean | ToolbarOptions;
793
+ /**
794
+ * Where the grid draws its popups (header filter, menus, date and lookup
795
+ * lists, dialogs, tooltips): an element, or a function returning one.
796
+ * Default `document.body`. Set it when the grid sits in a modal that makes
797
+ * the rest of the page ignore the pointer; pass the modal's content element
798
+ * (one without `overflow: hidden`). Popups stay in place even when the modal
799
+ * is moved with a CSS transform. Every popup carries `data-kanuni-portal`.
800
+ */
801
+ portalContainer?: PortalContainer;
785
802
  /** "Columns" button in the toolbar opening the visibility chooser. */
786
803
  toolbarColumnChooser?: boolean;
787
804
  /**
@@ -926,6 +943,12 @@ interface CreateGridConfig<TRow = GridRowData> extends Omit<DataGridCoreConfig<T
926
943
  enterpriseEdition?: boolean;
927
944
  /** Extra classes for a body cell (pending edit, range, fill preview…). */
928
945
  getCellClassName?: (ctx: CellSlotContext<TRow>) => string | undefined;
946
+ /**
947
+ * Where `rowStatus` reads the grid's own save status — the Enterprise
948
+ * wrapper's editing engine. With `editing` on here, the grid's own engine
949
+ * answers and this is not asked.
950
+ */
951
+ getRowStatusSource?: () => RowStatusSource | null;
929
952
  onCellPointerDown?: (ctx: CellSlotContext<TRow>, event: MouseEvent) => void;
930
953
  onCellPointerEnter?: (ctx: CellSlotContext<TRow>, event: MouseEvent) => void;
931
954
  onCellDoubleClick?: (ctx: CellSlotContext<TRow>) => void;
@@ -950,6 +973,26 @@ interface GridApi<TRow = GridRowData> {
950
973
  }
951
974
  declare function createGrid<TRow = GridRowData>(container: HTMLElement, config: CreateGridConfig<TRow>): GridApi<TRow>;
952
975
 
976
+ interface ToolbarButtonSpec {
977
+ /** The glyph: an element (e.g. an inline SVG) or SVG/HTML markup. */
978
+ icon: Element | string;
979
+ /** The button's name: its accessible name and the start of its tooltip. */
980
+ label: string;
981
+ /** Keyboard shortcut shown in the tooltip and as `aria-keyshortcuts`. */
982
+ shortcut?: string;
983
+ /** Set while the button cannot be used: clicks are ignored and this is the reason given. */
984
+ disabledReason?: string;
985
+ /** Show the label beside the icon. Default false (icon only). */
986
+ showLabel?: boolean;
987
+ onClick?: () => void;
988
+ /** `data-testid` on the button. */
989
+ testId?: string;
990
+ }
991
+ /** A button for the toolbar or status bar. Call `update()` to change it later. */
992
+ declare function toolbarButton(spec: ToolbarButtonSpec): HTMLButtonElement & {
993
+ update(next: Partial<ToolbarButtonSpec>): void;
994
+ };
995
+
953
996
  /**
954
997
  * Width that fits the header and every rendered cell of `columnId`.
955
998
  * Returns null when nothing could be measured (no such column on screen, or no
@@ -1004,8 +1047,13 @@ interface ConfirmDialogSpec {
1004
1047
  danger?: boolean;
1005
1048
  /** The enterprise wrapper's theme/dark classes, re-established here. */
1006
1049
  surfaceClass?: string;
1050
+ /**
1051
+ * An element inside the grid, so the dialog follows the grid's
1052
+ * `portalContainer` (core `portalContainerFor`). Default: <body>.
1053
+ */
1054
+ anchor?: Element;
1007
1055
  }
1008
1056
  /** Open the dialog; resolves the user's answer and removes itself. */
1009
1057
  declare function openConfirmDialog(spec: ConfirmDialogSpec): Promise<boolean>;
1010
1058
 
1011
- export { CHECKBOX_COLUMN_WIDTH, type CellEditingExtension, type CellEditingHelpers, type CellEditingLayer, type CellEditingOptions, type CellEditorSpec, type CellLookupEditorSpec, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type ConfirmDialogSpec, type CreateGridConfig, DETAIL_COLUMN_WIDTH, type DateEditorSpec, type EditFormField, type EditFormHandle, type EditFormSpec, type ExportKind, type GridApi, type GridMenuItem, type GridNotesConfig, type HeaderMenuContext, type HeaderMenuDeps, type NoteCellContext, PRINT_MAX_ROWS, type PrintLayoutOptions, ROW_DRAG_MIME, ROW_NUMBER_COLUMN_WIDTH, type RowDragConfig, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, type VanillaColumnDef, type VanillaEditorRenderContext, type VanillaFilterRenderApi, attachCellEditing, buildCellEditor, buildDateEditor, buildEditForm, buildHeaderMenu, createGrid, measureBestFitWidth, openConfirmDialog };
1059
+ export { CHECKBOX_COLUMN_WIDTH, type CellEditingExtension, type CellEditingHelpers, type CellEditingLayer, type CellEditingOptions, type CellEditorSpec, type CellLookupEditorSpec, type CellMenuOptions, type CellRenderContext, type CellSlotContext, type ConfirmDialogSpec, type CreateGridConfig, DETAIL_COLUMN_WIDTH, type DateEditorSpec, type EditFormField, type EditFormHandle, type EditFormSpec, type ExportKind, type GridApi, type GridMenuItem, type GridNotesConfig, type HeaderMenuContext, type HeaderMenuDeps, type NoteCellContext, PRINT_MAX_ROWS, type PrintLayoutOptions, ROW_DRAG_MIME, ROW_NUMBER_COLUMN_WIDTH, type RowDragConfig, type RowDragPayload, type RowDropEvent, type RowMenuContext, type RowReorderEvent, type RowTemplateContext, type ToolbarButtonSpec, type VanillaColumnDef, type VanillaEditorRenderContext, type VanillaFilterRenderApi, attachCellEditing, buildCellEditor, buildDateEditor, buildEditForm, buildHeaderMenu, createGrid, measureBestFitWidth, openConfirmDialog, toolbarButton };