@linzjs/step-ag-grid 27.1.0 → 27.2.1
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/dist/src/components/gridForm/GridFormDropDown.d.ts +12 -10
- package/dist/src/components/gridPopoverEdit/GridPopoverEditDropDown.d.ts +1 -1
- package/dist/step-ag-grid.cjs +20 -15
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +20 -16
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/gridForm/GridFormDropDown.tsx +27 -26
- package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts +4 -4
- package/src/contexts/GridContextProvider.tsx +10 -4
- package/src/react-menu3/components/ControlledMenu.tsx +0 -1
- package/src/stories/grid/GridPopoverEditDropDown.stories.tsx +20 -18
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { GridBaseRow } from '../Grid';
|
|
3
3
|
import { CellEditorCommon } from '../GridCell';
|
|
4
|
-
export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow,
|
|
4
|
+
export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TOption> {
|
|
5
5
|
selectedRows: TData[];
|
|
6
6
|
selectedRowIds: TData['id'][];
|
|
7
|
-
value:
|
|
7
|
+
value: TOption;
|
|
8
8
|
subComponentValue?: any;
|
|
9
9
|
}
|
|
10
|
-
interface FinalSelectOption {
|
|
11
|
-
value:
|
|
10
|
+
interface FinalSelectOption<TOptionValue> {
|
|
11
|
+
value: TOptionValue;
|
|
12
12
|
label?: ReactElement | string;
|
|
13
13
|
disabled?: boolean | string;
|
|
14
14
|
subComponent?: (props: any, ref: any) => any;
|
|
15
15
|
}
|
|
16
|
+
export declare const primitiveToSelectOption: <T>(value: T) => SelectOption<T>;
|
|
16
17
|
export declare const MenuSeparatorString = "_____MENU_SEPARATOR_____";
|
|
17
18
|
export declare const MenuSeparator: Readonly<{
|
|
18
19
|
value: "_____MENU_SEPARATOR_____";
|
|
@@ -22,17 +23,18 @@ export declare const MenuHeaderItem: (title: string) => {
|
|
|
22
23
|
label: string;
|
|
23
24
|
value: string;
|
|
24
25
|
};
|
|
25
|
-
export type SelectOption =
|
|
26
|
-
export
|
|
26
|
+
export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
|
|
27
|
+
export type MaybePromise<T> = T | Promise<T>;
|
|
28
|
+
export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
|
|
27
29
|
className?: 'GridPopoverEditDropDown-containerSmall' | 'GridPopoverEditDropDown-containerMedium' | 'GridPopoverEditDropDown-containerLarge' | 'GridPopoverEditDropDown-containerUnlimited' | 'GridPopoverEditDropDown-containerAutoWidth' | string | undefined;
|
|
28
30
|
filtered?: 'local' | 'reload';
|
|
29
31
|
filterDefaultValue?: string;
|
|
30
32
|
filterPlaceholder?: string;
|
|
31
33
|
filterHelpText?: string;
|
|
32
34
|
noOptionsMessage?: string;
|
|
33
|
-
onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData,
|
|
34
|
-
onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData,
|
|
35
|
-
options:
|
|
35
|
+
onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
|
|
36
|
+
onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
|
|
37
|
+
options: FinalSelectOption<TOptionValue>[] | ((selectedRows: TData[], filter?: string) => MaybePromise<FinalSelectOption<TOptionValue>[] | undefined>) | undefined;
|
|
36
38
|
}
|
|
37
|
-
export declare const GridFormDropDown: <TData extends GridBaseRow,
|
|
39
|
+
export declare const GridFormDropDown: <TData extends GridBaseRow, TOptionValue>(props: GridFormDropDownProps<TData, TOptionValue>) => import("react/jsx-runtime").JSX.Element;
|
|
38
40
|
export {};
|
|
@@ -2,4 +2,4 @@ import { GridBaseRow } from '../Grid';
|
|
|
2
2
|
import { ColDefT, GenericCellEditorProps } from '../GridCell';
|
|
3
3
|
import { GridFormDropDownProps } from '../gridForm/GridFormDropDown';
|
|
4
4
|
import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
|
|
5
|
-
export declare const GridPopoverEditDropDown: <TData extends GridBaseRow, TValue = any>(colDef: GenericCellColDef<TData, TValue>, props: GenericCellEditorProps<GridFormDropDownProps<TData,
|
|
5
|
+
export declare const GridPopoverEditDropDown: <TData extends GridBaseRow, TValue = any, TOptionValue = any>(colDef: GenericCellColDef<TData, TValue>, props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>) => ColDefT<TData, TValue>;
|
package/dist/step-ag-grid.cjs
CHANGED
|
@@ -2161,7 +2161,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
|
|
|
2161
2161
|
block: menuContainerClass,
|
|
2162
2162
|
modifiers,
|
|
2163
2163
|
className,
|
|
2164
|
-
}), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose
|
|
2164
|
+
}), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose }) }) }) })) }));
|
|
2165
2165
|
if (portal === true && anchorRef?.current != null) {
|
|
2166
2166
|
if (hasParentClass('react-menu-inline-test', anchorRef.current)) {
|
|
2167
2167
|
portal = false;
|
|
@@ -3947,6 +3947,12 @@ const useGridPopoverHook = (props) => {
|
|
|
3947
3947
|
};
|
|
3948
3948
|
};
|
|
3949
3949
|
|
|
3950
|
+
const primitiveToSelectOption = (value) => {
|
|
3951
|
+
return {
|
|
3952
|
+
value: value,
|
|
3953
|
+
label: value ? String(value) : '',
|
|
3954
|
+
};
|
|
3955
|
+
};
|
|
3950
3956
|
const MenuSeparatorString = '_____MENU_SEPARATOR_____';
|
|
3951
3957
|
const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
|
|
3952
3958
|
const MenuHeaderString = '_____MENU_HEADER_____';
|
|
@@ -3995,14 +4001,7 @@ const GridFormDropDown = (props) => {
|
|
|
3995
4001
|
optionsConf = await optionsConf(selectedRows, filter);
|
|
3996
4002
|
}
|
|
3997
4003
|
if (optionsConf !== undefined) {
|
|
3998
|
-
|
|
3999
|
-
? {
|
|
4000
|
-
value: item,
|
|
4001
|
-
label: item,
|
|
4002
|
-
disabled: false,
|
|
4003
|
-
}
|
|
4004
|
-
: item);
|
|
4005
|
-
setOptions(optionsList);
|
|
4004
|
+
setOptions(optionsConf);
|
|
4006
4005
|
}
|
|
4007
4006
|
})();
|
|
4008
4007
|
}, [filter, options, props, selectedRows]);
|
|
@@ -4099,7 +4098,7 @@ const GridFormDropDown = (props) => {
|
|
|
4099
4098
|
}
|
|
4100
4099
|
}, onClick: (e) => {
|
|
4101
4100
|
e.keepOpen = !!item.subComponent;
|
|
4102
|
-
}, children: [item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`), item.subComponent ? '...' : ''] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
|
|
4101
|
+
}, children: [item.label ?? (item.value == null ? `<${String(item.value)}>` : `${String(item.value)}`), item.subComponent ? '...' : ''] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
|
|
4103
4102
|
context: { options },
|
|
4104
4103
|
data,
|
|
4105
4104
|
value: subSelectedValue,
|
|
@@ -5061,7 +5060,7 @@ const GridContextProvider = (props) => {
|
|
|
5061
5060
|
if (!noApiFn) {
|
|
5062
5061
|
noApiFn = (() => { });
|
|
5063
5062
|
}
|
|
5064
|
-
return gridApi ? hasApiFn(gridApi) : noApiFn();
|
|
5063
|
+
return gridApi && !gridApi.isDestroyed() ? hasApiFn(gridApi) : noApiFn();
|
|
5065
5064
|
}, [gridApi]);
|
|
5066
5065
|
/**
|
|
5067
5066
|
* Scroll row into view by Id.
|
|
@@ -5226,9 +5225,9 @@ const GridContextProvider = (props) => {
|
|
|
5226
5225
|
// as they will start to edit the cell before this stuff has a chance to run
|
|
5227
5226
|
colId &&
|
|
5228
5227
|
lodashEs.delay(() => {
|
|
5229
|
-
if (
|
|
5230
|
-
(
|
|
5231
|
-
!gridApi.
|
|
5228
|
+
if (!gridApi.isDestroyed() &&
|
|
5229
|
+
lodashEs.isEmpty(gridApi.getEditingCells()) &&
|
|
5230
|
+
(!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
|
|
5232
5231
|
gridApi.setFocusedCell(rowIndex, colId);
|
|
5233
5232
|
// It may be that the first cell is the selection cell, this doesn't exist as a colDef
|
|
5234
5233
|
// so instead, I just try and select it. If it doesn't exist selection will stay on the
|
|
@@ -5333,7 +5332,9 @@ const GridContextProvider = (props) => {
|
|
|
5333
5332
|
* Resize columns to fit container
|
|
5334
5333
|
*/
|
|
5335
5334
|
const sizeColumnsToFit = React.useCallback(() => {
|
|
5336
|
-
gridApi?.
|
|
5335
|
+
if (gridApi && !gridApi?.isDestroyed()) {
|
|
5336
|
+
gridApi.sizeColumnsToFit();
|
|
5337
|
+
}
|
|
5337
5338
|
}, [gridApi]);
|
|
5338
5339
|
const stopEditing = React.useCallback(() => {
|
|
5339
5340
|
if (!gridApi || gridApi.isDestroyed()) {
|
|
@@ -5480,6 +5481,9 @@ const GridContextProvider = (props) => {
|
|
|
5480
5481
|
// I've left them here just in case they are
|
|
5481
5482
|
// async processes need to refresh their own rows
|
|
5482
5483
|
// gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
|
|
5484
|
+
if (gridApi.isDestroyed()) {
|
|
5485
|
+
return ok;
|
|
5486
|
+
}
|
|
5483
5487
|
if (ok) {
|
|
5484
5488
|
const cell = gridApi.getFocusedCell();
|
|
5485
5489
|
if (cell && gridApi.getFocusedCell() == null) {
|
|
@@ -5888,6 +5892,7 @@ exports.hasParentClass = hasParentClass;
|
|
|
5888
5892
|
exports.isFloat = isFloat;
|
|
5889
5893
|
exports.isGridCellFiller = isGridCellFiller;
|
|
5890
5894
|
exports.isNotEmpty = isNotEmpty;
|
|
5895
|
+
exports.primitiveToSelectOption = primitiveToSelectOption;
|
|
5891
5896
|
exports.sanitiseFileName = sanitiseFileName;
|
|
5892
5897
|
exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
|
|
5893
5898
|
exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;
|