@linzjs/step-ag-grid 29.15.0 → 29.19.0
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/README.md +1 -1
- package/dist/index.css +27 -0
- package/dist/src/components/Grid.d.ts +3 -2
- package/dist/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts +2 -1
- package/dist/src/components/gridForm/GridFormInlineTextInput.d.ts +15 -0
- package/dist/src/components/gridForm/index.d.ts +1 -0
- package/dist/src/components/gridHook/useGridRangeSelection.d.ts +1 -1
- package/dist/src/components/gridPopoverEdit/GridInlineTextInput.d.ts +5 -0
- package/dist/src/components/gridPopoverEdit/index.d.ts +1 -0
- package/dist/src/contexts/GridContext.d.ts +1 -1
- package/dist/src/utils/__tests__/storybookTestUtil.ts +5 -1
- package/dist/step-ag-grid.cjs +233 -90
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +232 -91
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +14 -12
- package/src/components/Grid.tsx +33 -10
- package/src/components/GridPopoverHook.tsx +5 -2
- package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx +23 -4
- package/src/components/gridForm/GridFormInlineTextInput.tsx +119 -0
- package/src/components/gridForm/index.ts +1 -0
- package/src/components/gridHook/useGridContextMenu.tsx +3 -1
- package/src/components/gridHook/useGridCopy.ts +5 -2
- package/src/components/gridHook/useGridRangeSelection.ts +25 -4
- package/src/components/gridPopoverEdit/GridInlineTextInput.ts +13 -0
- package/src/components/gridPopoverEdit/index.ts +1 -0
- package/src/contexts/GridContext.tsx +6 -1
- package/src/contexts/GridContextProvider.tsx +30 -13
- package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx +52 -7
- package/src/stories/grid/GridInlineText.stories.tsx +185 -0
- package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx +3 -3
- package/src/styles/Grid.scss +5 -0
- package/src/styles/GridFormInlineTextInput.scss +23 -0
- package/src/styles/index.scss +1 -1
- package/src/utils/__tests__/storybookTestUtil.ts +5 -1
package/README.md
CHANGED
|
@@ -276,5 +276,5 @@ If your grid has a data-testid a global will be exposed in window with the helpe
|
|
|
276
276
|
This will throw an exception if the row id is not found.
|
|
277
277
|
|
|
278
278
|
```tsx
|
|
279
|
-
window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("
|
|
279
|
+
window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("1001")
|
|
280
280
|
```
|
package/dist/index.css
CHANGED
|
@@ -340,6 +340,11 @@
|
|
|
340
340
|
flex-direction: column;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
+
.Grid-hideSelectedRow div.ag-row::before {
|
|
344
|
+
content: "";
|
|
345
|
+
background-color: white !important;
|
|
346
|
+
}
|
|
347
|
+
|
|
343
348
|
.Grid-wrapper {
|
|
344
349
|
display: flex;
|
|
345
350
|
flex-direction: column;
|
|
@@ -636,3 +641,25 @@ div.ag-row div.ag-cell.rangeSelectBottom {
|
|
|
636
641
|
.MenuItem-icon {
|
|
637
642
|
margin-right: 8px;
|
|
638
643
|
}
|
|
644
|
+
|
|
645
|
+
.GridFormInlineTextInput {
|
|
646
|
+
height: 100%;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.GridFormInlineTextInput-error > input {
|
|
650
|
+
border: 2px solid red !important;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.GridFormInlineTextInput > input {
|
|
654
|
+
display: block;
|
|
655
|
+
left: 0;
|
|
656
|
+
top: 0;
|
|
657
|
+
right: 0;
|
|
658
|
+
bottom: 0;
|
|
659
|
+
position: absolute;
|
|
660
|
+
padding-left: 9px;
|
|
661
|
+
padding-right: 9px;
|
|
662
|
+
outline: 0;
|
|
663
|
+
border: 0;
|
|
664
|
+
font-family: "Open Sans", system-ui, sans-serif;
|
|
665
|
+
}
|
|
@@ -23,16 +23,17 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
|
|
|
23
23
|
enableClickSelection?: boolean;
|
|
24
24
|
enableRangeSelection?: boolean;
|
|
25
25
|
enableSelectionWithoutKeys?: boolean;
|
|
26
|
+
enableMultilineBulkEdit?: boolean;
|
|
26
27
|
externalSelectedIds?: TData['id'][];
|
|
27
28
|
externalSelectedItems?: TData[];
|
|
28
29
|
hideSelectColumn?: boolean;
|
|
30
|
+
hideSelectedRow?: boolean;
|
|
29
31
|
selectColumnPinned?: ColDef['pinned'];
|
|
30
32
|
selectable?: boolean;
|
|
31
33
|
setExternalSelectedIds?: (ids: TData['id'][]) => void;
|
|
32
34
|
setExternalSelectedItems?: (items: TData[]) => void;
|
|
33
35
|
onBulkEditingComplete?: () => Promise<void> | void;
|
|
34
36
|
singleClickEdit?: boolean;
|
|
35
|
-
stopEditingWhenCellsLoseFocus?: boolean;
|
|
36
37
|
contextMenu?: GridContextMenuComponent<TData>;
|
|
37
38
|
contextMenuSelectRow?: boolean;
|
|
38
39
|
onCellFocused?: (props: {
|
|
@@ -64,4 +65,4 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
|
|
|
64
65
|
/**
|
|
65
66
|
* Wrapper for AgGrid to add commonly used functionality.
|
|
66
67
|
*/
|
|
67
|
-
export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ theme, "data-testid": dataTestId, suppressReadOnlyStyle, defaultPostSort, rowData, rowHeight, rowSelection, sizeColumns, autoSelectFirstRow, enableRangeSelection, externalSelectedIds, externalSelectedItems, selectColumnPinned, selectable, setExternalSelectedIds, setExternalSelectedItems, singleClickEdit,
|
|
68
|
+
export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ theme, "data-testid": dataTestId, suppressReadOnlyStyle, defaultPostSort, rowData, rowHeight, rowSelection, sizeColumns, autoSelectFirstRow, enableRangeSelection, externalSelectedIds, externalSelectedItems, selectColumnPinned, selectable, setExternalSelectedIds, setExternalSelectedItems, singleClickEdit, enableMultilineBulkEdit, contextMenuSelectRow, contextMenu, onCellFocused: paramsOnCellFocused, onColumnMoved, suppressColumnVirtualization, maxInitialWidth, ...params }: GridProps<TData>) => ReactElement;
|
|
@@ -3,6 +3,7 @@ import type { IDoesFilterPassParams, IFilterComp, IFilterParams } from 'ag-grid-
|
|
|
3
3
|
export interface CheckboxMultiFilterParams extends IFilterParams {
|
|
4
4
|
labels?: Record<string, string>;
|
|
5
5
|
labelFormatter?: (value: string) => string;
|
|
6
|
+
customOrder?: string[];
|
|
6
7
|
}
|
|
7
8
|
export interface CheckboxMultiFilterModel {
|
|
8
9
|
values: string[];
|
|
@@ -28,4 +29,4 @@ export declare class GridFilterColumnsMultiSelect implements IFilterComp {
|
|
|
28
29
|
setModel(model: CheckboxMultiFilterModel | null): void;
|
|
29
30
|
destroy(): void;
|
|
30
31
|
}
|
|
31
|
-
export declare const createCheckboxMultiFilterParams: (labels?: Record<string, string>, labelFormatter?: (value: string) => string) => Partial<CheckboxMultiFilterParams>;
|
|
32
|
+
export declare const createCheckboxMultiFilterParams: (labels?: Record<string, string>, labelFormatter?: (value: string) => string, customOrder?: string[]) => Partial<CheckboxMultiFilterParams>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TextInputValidatorProps } from '../../utils/textValidator';
|
|
2
|
+
import { MaybePromise } from '../../utils/util';
|
|
3
|
+
import { CellEditorCommon } from '../GridCell';
|
|
4
|
+
import { GridBaseRow } from '../types';
|
|
5
|
+
export interface GridFormInlineTextInput<TData extends GridBaseRow> extends TextInputValidatorProps<TData>, CellEditorCommon {
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
units?: string;
|
|
8
|
+
onSave?: (props: {
|
|
9
|
+
selectedRows: TData[];
|
|
10
|
+
selectedRowIds: TData['id'][];
|
|
11
|
+
value: string;
|
|
12
|
+
}) => MaybePromise<boolean>;
|
|
13
|
+
helpText?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare const GridFormInlineTextInput: <TData extends GridBaseRow>(props: GridFormInlineTextInput<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { GenericCellEditorProps } from '../GridCell';
|
|
2
|
+
import { GridFormInlineTextInput } from '../gridForm/GridFormInlineTextInput';
|
|
3
|
+
import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
|
|
4
|
+
import { ColDefT, GridBaseRow } from '../types';
|
|
5
|
+
export declare const GridInlineTextInput: <TData extends GridBaseRow, TValue = any>(colDef: GenericCellColDef<TData, TValue>, params: GenericCellEditorProps<GridFormInlineTextInput<TData>>) => ColDefT<TData, TValue>;
|
|
@@ -20,7 +20,7 @@ export interface GridContextType<TData extends GridBaseRow> {
|
|
|
20
20
|
getColDef: (colId?: string) => ColDef | undefined;
|
|
21
21
|
getColumns: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => ColDefT<TData, any>[];
|
|
22
22
|
getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
|
|
23
|
-
setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => void;
|
|
23
|
+
setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, enableMultilineBulkEdit: boolean, dataTestId?: string) => void;
|
|
24
24
|
prePopupOps: () => void;
|
|
25
25
|
setQuickFilter: (quickFilter: string) => void;
|
|
26
26
|
editingCells: () => boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { sortBy } from 'lodash-es';
|
|
2
2
|
import { expect, userEvent, waitFor } from 'storybook/test';
|
|
3
3
|
|
|
4
|
-
import { findQuick, getAllQuick } from './testQuick';
|
|
4
|
+
import { findQuick, getAllQuick, queryAllQuick } from './testQuick';
|
|
5
5
|
|
|
6
6
|
export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
|
|
7
7
|
waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
|
|
@@ -22,6 +22,10 @@ export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement
|
|
|
22
22
|
await user.keyboard('{Enter}');
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
+
export const getNumberOfGridRows = (props?: { grid?: HTMLElement }): number => {
|
|
26
|
+
return queryAllQuick({ classes: '.ag-row' }, props?.grid).length;
|
|
27
|
+
};
|
|
28
|
+
|
|
25
29
|
export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
|
|
26
30
|
return sortBy(
|
|
27
31
|
getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),
|