@linzjs/step-ag-grid 21.3.0 → 22.0.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/GridTheme.scss +4 -0
- package/dist/src/lui/TextAreaInput.d.ts +0 -1
- package/dist/src/react-menu3/components/FocusableItem.d.ts +1 -1
- package/dist/src/react-menu3/components/MenuItem.d.ts +1 -1
- package/dist/src/react-menu3/components/SubMenu.d.ts +1 -1
- package/dist/src/react-menu3/utils/withHovering.d.ts +1 -1
- package/dist/step-ag-grid.cjs.js +8 -64
- package/dist/step-ag-grid.cjs.js.map +1 -1
- package/dist/step-ag-grid.esm.js +29 -84
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +32 -33
- package/src/components/Grid.tsx +10 -8
- package/src/components/GridCell.tsx +1 -1
- package/src/components/PostSortRowsHook.ts +2 -2
- package/src/lui/TextAreaInput.tsx +3 -8
- package/src/react-menu3/utils/withHovering.tsx +15 -8
- package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx +18 -15
- package/src/styles/GridTheme.scss +4 -0
package/dist/GridTheme.scss
CHANGED
|
@@ -67,6 +67,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
|
|
|
67
67
|
}
|
|
68
68
|
// fix alignment of cell content when grabber is present
|
|
69
69
|
.ag-header-cell-comp-wrapper {
|
|
70
|
+
justify-content: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.ag-header-select-draggable .ag-header-cell-comp-wrapper {
|
|
70
74
|
justify-content: end;
|
|
71
75
|
}
|
|
72
76
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { InputHTMLAttributes, ReactElement } from "react";
|
|
2
|
-
export declare const useGenerateOrDefaultId: (idFromProps?: string) => string;
|
|
3
2
|
export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
|
|
4
3
|
value: string;
|
|
5
4
|
label?: ReactElement | string;
|
|
@@ -6,4 +6,4 @@ export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
|
|
|
6
6
|
children: (ref: LegacyRef<any>) => ReactElement;
|
|
7
7
|
}
|
|
8
8
|
export declare const FocusableItemFr: ({ className, disabled, children, isHovering, menuItemRef, externalRef, ...restProps }: FocusableItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare const FocusableItem: import("react").ForwardRefExoticComponent<Omit<FocusableItemProps, "ref"> & import("react").RefAttributes<
|
|
9
|
+
export declare const FocusableItem: import("react").ForwardRefExoticComponent<Omit<FocusableItemProps, "ref"> & import("react").RefAttributes<any>>;
|
|
@@ -55,4 +55,4 @@ export interface MenuItemProps extends Omit<BaseProps<MenuItemModifiers>, "onCli
|
|
|
55
55
|
*/
|
|
56
56
|
children?: RenderProp<MenuItemModifiers>;
|
|
57
57
|
}
|
|
58
|
-
export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps & withHoveringResultProps, "ref"> & import("react").RefAttributes<
|
|
58
|
+
export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps & withHoveringResultProps, "ref"> & import("react").RefAttributes<any>>;
|
|
@@ -106,5 +106,5 @@ export interface SubMenuProps extends BaseMenuProps, Hoverable, UncontrolledMenu
|
|
|
106
106
|
openTrigger?: "none" | "clickOnly";
|
|
107
107
|
}
|
|
108
108
|
export declare const SubMenuFr: ({ "aria-label": ariaLabel, className, disabled, direction, label, openTrigger, onMenuChange, isHovering, instanceRef, menuItemRef, itemProps, ...restProps }: SubMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
109
|
-
export declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<SubMenuProps, "ref"> & import("react").RefAttributes<
|
|
109
|
+
export declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<SubMenuProps, "ref"> & import("react").RefAttributes<any>>;
|
|
110
110
|
export {};
|
|
@@ -4,4 +4,4 @@ export interface withHoveringResultProps {
|
|
|
4
4
|
externalRef?: MutableRefObject<any>;
|
|
5
5
|
menuItemRef?: MutableRefObject<HTMLLIElement>;
|
|
6
6
|
}
|
|
7
|
-
export declare const withHovering: <T
|
|
7
|
+
export declare const withHovering: <X extends Record<string, any>, T extends PropsWithRef<X>>(name: string, WrappedComponent: (props: T) => ReactElement) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<T> & import("react").RefAttributes<any>>;
|
package/dist/step-ag-grid.cjs.js
CHANGED
|
@@ -336,9 +336,9 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
|
|
|
336
336
|
}
|
|
337
337
|
const newSortOrder = JSON.stringify(copyCurrentSortSettings());
|
|
338
338
|
let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
|
|
339
|
-
const quickFilter = api.
|
|
339
|
+
const quickFilter = api.getQuickFilter();
|
|
340
340
|
if (previousQuickFilter.current != quickFilter) {
|
|
341
|
-
previousQuickFilter.current = quickFilter;
|
|
341
|
+
previousQuickFilter.current = quickFilter ?? "";
|
|
342
342
|
sortOrderChanged = true;
|
|
343
343
|
}
|
|
344
344
|
if (lodashEs.isEmpty(previousRowSortIndex)) {
|
|
@@ -660,7 +660,7 @@ const withHovering = (name, WrappedComponent) => {
|
|
|
660
660
|
const Component = React.memo(WrappedComponent);
|
|
661
661
|
const WithHovering = React.forwardRef((props, ref) => {
|
|
662
662
|
const menuItemRef = React.useRef(null);
|
|
663
|
-
return (jsxRuntime.jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: React.useContext(HoverItemContext) === menuItemRef.current }));
|
|
663
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: React.useContext(HoverItemContext) === menuItemRef.current }) }));
|
|
664
664
|
});
|
|
665
665
|
WithHovering.displayName = `WithHovering(${name})`;
|
|
666
666
|
return WithHovering;
|
|
@@ -2541,6 +2541,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
|
|
|
2541
2541
|
exportable: false,
|
|
2542
2542
|
},
|
|
2543
2543
|
checkboxSelection: params.selectable,
|
|
2544
|
+
headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
|
|
2544
2545
|
headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
|
|
2545
2546
|
suppressHeaderKeyboardEvent: (e) => {
|
|
2546
2547
|
if (!params.selectable)
|
|
@@ -2813,7 +2814,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
|
|
|
2813
2814
|
// This is setting a ref in the GridContext so won't be triggering an update loop
|
|
2814
2815
|
setOnCellEditingComplete(params.onCellEditingComplete);
|
|
2815
2816
|
const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
|
|
2816
|
-
return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, {
|
|
2817
|
+
return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
|
|
2817
2818
|
setInitialContentSize();
|
|
2818
2819
|
}, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
|
|
2819
2820
|
let rowCount = 0;
|
|
@@ -2906,7 +2907,7 @@ const suppressCellKeyboardEvents = (e) => {
|
|
|
2906
2907
|
const exec = shortcutKeys[e.event.key];
|
|
2907
2908
|
if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
|
|
2908
2909
|
const editable = fnOrVar(e.colDef?.editable, e);
|
|
2909
|
-
return editable ? exec(e) ?? true : true;
|
|
2910
|
+
return editable ? (exec(e) ?? true) : true;
|
|
2910
2911
|
}
|
|
2911
2912
|
// It's important that aggrid doesn't trigger edit on enter
|
|
2912
2913
|
// as the incorrect selected rows will be returned
|
|
@@ -4250,65 +4251,9 @@ const GridFormPopoverMenu = (props) => {
|
|
|
4250
4251
|
}, children: jsxRuntime.jsx("div", { className: "subComponent", children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${item.label}_subcomponent`))] }, `${item.label}`))))) }) }));
|
|
4251
4252
|
};
|
|
4252
4253
|
|
|
4253
|
-
/**
|
|
4254
|
-
* Convert array of 16 byte values to UUID string format of the form:
|
|
4255
|
-
* XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
|
|
4256
|
-
*/
|
|
4257
|
-
var byteToHex = [];
|
|
4258
|
-
for (var i = 0; i < 256; ++i) {
|
|
4259
|
-
byteToHex.push((i + 0x100).toString(16).slice(1));
|
|
4260
|
-
}
|
|
4261
|
-
function unsafeStringify(arr, offset = 0) {
|
|
4262
|
-
// Note: Be careful editing this code! It's been tuned for performance
|
|
4263
|
-
// and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
|
|
4264
|
-
//
|
|
4265
|
-
// Note to future-self: No, you can't remove the `toLowerCase()` call.
|
|
4266
|
-
// REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
|
|
4267
|
-
return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
|
|
4268
|
-
}
|
|
4269
|
-
|
|
4270
|
-
// Unique ID creation requires a high quality random # generator. In the browser we therefore
|
|
4271
|
-
// require the crypto API and do not support built-in fallback to lower quality random number
|
|
4272
|
-
// generators (like Math.random()).
|
|
4273
|
-
|
|
4274
|
-
var getRandomValues;
|
|
4275
|
-
var rnds8 = new Uint8Array(16);
|
|
4276
|
-
function rng() {
|
|
4277
|
-
// lazy load so that environments that need to polyfill have a chance to do so
|
|
4278
|
-
if (!getRandomValues) {
|
|
4279
|
-
// getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
|
|
4280
|
-
getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
|
|
4281
|
-
if (!getRandomValues) {
|
|
4282
|
-
throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
|
|
4283
|
-
}
|
|
4284
|
-
}
|
|
4285
|
-
return getRandomValues(rnds8);
|
|
4286
|
-
}
|
|
4287
|
-
|
|
4288
|
-
var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
|
|
4289
|
-
var native = {
|
|
4290
|
-
randomUUID
|
|
4291
|
-
};
|
|
4292
|
-
|
|
4293
|
-
function v4(options, buf, offset) {
|
|
4294
|
-
if (native.randomUUID && !buf && !options) {
|
|
4295
|
-
return native.randomUUID();
|
|
4296
|
-
}
|
|
4297
|
-
options = options || {};
|
|
4298
|
-
var rnds = options.random || (options.rng || rng)();
|
|
4299
|
-
|
|
4300
|
-
// Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
|
|
4301
|
-
rnds[6] = rnds[6] & 0x0f | 0x40;
|
|
4302
|
-
rnds[8] = rnds[8] & 0x3f | 0x80;
|
|
4303
|
-
return unsafeStringify(rnds);
|
|
4304
|
-
}
|
|
4305
|
-
|
|
4306
|
-
const useGenerateOrDefaultId = (idFromProps) => {
|
|
4307
|
-
const [id] = React.useState(idFromProps ? idFromProps : v4());
|
|
4308
|
-
return id;
|
|
4309
|
-
};
|
|
4310
4254
|
const TextAreaInput = (props) => {
|
|
4311
|
-
const
|
|
4255
|
+
const reactId = React.useId();
|
|
4256
|
+
const id = props?.id ?? reactId;
|
|
4312
4257
|
return (jsxRuntime.jsxs("div", { className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className), children: [jsxRuntime.jsxs("label", { htmlFor: id, children: [props.mandatory != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-mandatory", children: "*" }), props.label != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-label", children: props.label }), jsxRuntime.jsx("div", { className: "LuiTextAreaInput-wrapper", children: jsxRuntime.jsx("textarea", { rows: 5, ...lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), id: id, value: props.value ?? "", spellCheck: true, onMouseEnter: (e) => {
|
|
4313
4258
|
if (document.activeElement != e.currentTarget) {
|
|
4314
4259
|
e.currentTarget.focus();
|
|
@@ -5401,7 +5346,6 @@ exports.sanitiseFileName = sanitiseFileName;
|
|
|
5401
5346
|
exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
|
|
5402
5347
|
exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;
|
|
5403
5348
|
exports.useDeferredPromise = useDeferredPromise;
|
|
5404
|
-
exports.useGenerateOrDefaultId = useGenerateOrDefaultId;
|
|
5405
5349
|
exports.useGridContext = useGridContext;
|
|
5406
5350
|
exports.useGridContextMenu = useGridContextMenu;
|
|
5407
5351
|
exports.useGridFilter = useGridFilter;
|