@linzjs/step-ag-grid 7.5.0 → 7.5.2
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/index.js +6 -7
- package/dist/index.js.map +1 -1
- package/dist/src/components/Grid.d.ts +1 -1
- package/dist/src/lui/ActionButton.d.ts +3 -3
- package/dist/step-ag-grid.esm.js +6 -7
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Grid.tsx +2 -2
- package/src/components/gridForm/GridFormDropDown.tsx +2 -2
- package/src/lui/ActionButton.scss +20 -8
- package/src/lui/ActionButton.tsx +6 -10
- package/src/stories/components/ActionButton.stories.tsx +9 -1
- package/src/stories/grid/GridPopoutBearing.stories.tsx +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import "./ActionButton.scss";
|
|
2
|
+
import { CSSProperties } from "react";
|
|
3
3
|
import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
|
|
4
4
|
import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
|
|
5
5
|
export interface ActionButtonProps {
|
|
@@ -11,9 +11,9 @@ export interface ActionButtonProps {
|
|
|
11
11
|
dataTestId?: string;
|
|
12
12
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
|
|
13
13
|
iconPosition?: "left" | "right";
|
|
14
|
-
className?: "ActionButton-fill" | string;
|
|
14
|
+
className?: "ActionButton-fill" | "ActionButton-tight" | string;
|
|
15
15
|
onClick: () => Promise<void> | void;
|
|
16
16
|
level?: LuiButtonProps["level"];
|
|
17
|
-
style?:
|
|
17
|
+
style?: CSSProperties;
|
|
18
18
|
}
|
|
19
19
|
export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, style, className, title, onClick, size, iconPosition, level, "aria-label": ariaLabel, }: ActionButtonProps) => JSX.Element;
|
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -2815,7 +2815,7 @@ var Grid = function (params) {
|
|
|
2815
2815
|
sizeColumnsToFit();
|
|
2816
2816
|
}
|
|
2817
2817
|
}, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
|
|
2818
|
-
return (jsxs("div", __assign({ "data-testid": params
|
|
2818
|
+
return (jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
|
|
2819
2819
|
setInternalQuickFilter(event.target.value);
|
|
2820
2820
|
} }) }))), jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
|
|
2821
2821
|
};
|
|
@@ -3357,7 +3357,7 @@ var GridFormDropDown = function (props) {
|
|
|
3357
3357
|
return (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsx("input", { autoFocus: true, className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
|
|
3358
3358
|
} })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
|
|
3359
3359
|
var _a;
|
|
3360
|
-
return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [
|
|
3360
|
+
return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
|
|
3361
3361
|
if (item.subComponent) {
|
|
3362
3362
|
// toggle selection
|
|
3363
3363
|
setSelectedSubComponent(selectedSubComponent === item ? null : item);
|
|
@@ -3372,8 +3372,7 @@ var GridFormDropDown = function (props) {
|
|
|
3372
3372
|
: CloseReason.TAB_FORWARD
|
|
3373
3373
|
: CloseReason.CLICK).then();
|
|
3374
3374
|
}
|
|
3375
|
-
} }, { children: (
|
|
3376
|
-
(item.subComponent ? "..." : "") }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
|
|
3375
|
+
} }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
|
|
3377
3376
|
context: { options: options },
|
|
3378
3377
|
data: data,
|
|
3379
3378
|
value: subSelectedValue,
|
|
@@ -4335,7 +4334,7 @@ var GridFormSubComponentTextArea = function (props) {
|
|
|
4335
4334
|
return (jsx("div", __assign({ className: clsx("FreeTextInput", props.className) }, { children: jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder }) })));
|
|
4336
4335
|
};
|
|
4337
4336
|
|
|
4338
|
-
var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-minimal{padding-right:38px
|
|
4337
|
+
var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-minimal.lui-button-lg.lui-button-icon-right{padding-right:38px}.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon{margin:0 4px}.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight){padding:8px 5px}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight{padding:0}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right{background-color:#e2f3f7;color:#007198;cursor:progress}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right svg *{fill:#0000}.ActionButton-fill{justify-content:center;width:100%}";
|
|
4339
4338
|
styleInject(css_248z);
|
|
4340
4339
|
|
|
4341
4340
|
/**
|
|
@@ -4418,7 +4417,7 @@ var ActionButton = function (_a) {
|
|
|
4418
4417
|
inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
|
|
4419
4418
|
}, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
|
|
4420
4419
|
var buttonText = (jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_b = (localInProgress ? inProgressName : name)) !== null && _b !== void 0 ? _b : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] })));
|
|
4421
|
-
return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_c = title !== null && title !== void 0 ? title : ariaLabel) !== null && _c !== void 0 ? _c : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress", name != null && !(className === null || className === void 0 ? void 0 : className.includes("ActionButton-fill")) && "ActionButton-minimal"
|
|
4420
|
+
return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_c = title !== null && title !== void 0 ? title : ariaLabel) !== null && _c !== void 0 ? _c : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress", name != null && !(className === null || className === void 0 ? void 0 : className.includes("ActionButton-fill")) && "ActionButton-minimal", name == null && "ActionButton-iconOnly"), size: "lg", style: style, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
4422
4421
|
var promise, isPromise;
|
|
4423
4422
|
return __generator(this, function (_a) {
|
|
4424
4423
|
switch (_a.label) {
|
|
@@ -4449,7 +4448,7 @@ var ActionButton = function (_a) {
|
|
|
4449
4448
|
},
|
|
4450
4449
|
role: "status",
|
|
4451
4450
|
"aria-label": "Loading"
|
|
4452
|
-
} })) : (jsx(LuiIcon, { name: icon, alt: (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _d !== void 0 ? _d : "", size: size
|
|
4451
|
+
} })) : (jsx(LuiIcon, { name: icon, alt: (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _d !== void 0 ? _d : "", size: size })), iconPosition === "left" && buttonText] })));
|
|
4453
4452
|
};
|
|
4454
4453
|
|
|
4455
4454
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|