@linzjs/step-ag-grid 2.1.3 → 2.2.0

package/dist/index.js

@@ -2520,11 +2520,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$6 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
-styleInject(css_248z$6);
+var css_248z$7 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
+styleInject(css_248z$7);
 
-var css_248z$5 = ".GridLoadableCell-container{align-items:center;display:flex}";
-styleInject(css_248z$5);
+var css_248z$6 = ".GridLoadableCell-container{align-items:center;display:flex}";
+styleInject(css_248z$6);
 
 var GridLoadableCell = function (props) {
     if (props.isLoading) {
@@ -2746,11 +2746,11 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
-var css_248z$4 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
-styleInject(css_248z$4);
+var css_248z$5 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
+styleInject(css_248z$5);
 
-var css_248z$3 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
-styleInject(css_248z$3);
+var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
+styleInject(css_248z$4);
 
 /* global setTimeout, clearTimeout */
 
@@ -3122,8 +3122,8 @@ var GridPopoutEditMultiSelect = function (colDef, props) {
     return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
-var css_248z$2 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
-styleInject(css_248z$2);
+var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
+styleInject(css_248z$3);
 
 /** Menu configuration types **/
 var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
@@ -3286,11 +3286,11 @@ var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
     return dmsString;
 };
 
-var css_248z$1 = ".GridFormEditBearing-input{width:320px}";
-styleInject(css_248z$1);
+var css_248z$2 = ".GridFormEditBearing-input{width:320px}";
+styleInject(css_248z$2);
 
-var css_248z = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
-styleInject(css_248z);
+var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
+styleInject(css_248z$1);
 
 var TextInputFormatted = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
@@ -3592,6 +3592,98 @@ var GridSubComponentTextArea = function (props) {
     return (jsxRuntime.jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsxRuntime.jsx("textarea", { autoFocus: true, maxLength: 10000, spellCheck: true, className: "free-text-input", onChange: function (e) { return setValue(e.target.value); }, defaultValue: value }) })));
 };
 
+var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton .LuiIcon{margin:0 4px!important}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress{background-color:#e2f3f7!important;color:#007198!important;cursor:progress}.ActionButton-inProgress svg *{fill:#0000!important}";
+styleInject(css_248z);
+
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+var usePrevious = function (value) {
+    var ref = react.useRef();
+    react.useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+var useTimeoutHook = function () {
+    var timeout = react.useRef();
+    /**
+     * Clear any pending timeouts.
+     */
+    var clearTimeouts = function () {
+        if (timeout.current) {
+            var tc = timeout.current;
+            timeout.current = undefined;
+            clearTimeout(tc);
+        }
+    };
+    /**
+     * Call this when your action has completed.
+     */
+    var invoke = react.useCallback(function (fn, waitTimeMs) {
+        clearTimeouts();
+        timeout.current = setTimeout(fn, waitTimeMs);
+    }, []);
+    /**
+     * Clear timeout on loss of scope.
+     */
+    react.useEffect(function () {
+        return function () { return clearTimeouts(); };
+    }, []);
+    return invoke;
+};
+
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+var useStateDeferred = function (initialValue) {
+    var startTime = react.useRef(0);
+    var timeoutHook = useTimeoutHook();
+    var _a = react.useState(initialValue), value = _a[0], _setValue = _a[1];
+    var setValue = react.useCallback(function (newValue) {
+        startTime.current = Date.now();
+        _setValue(newValue);
+    }, []);
+    var setValueDeferred = react.useCallback(function (newValue, minimumWaitTimeMs) {
+        var waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
+        timeoutHook(function () { return _setValue(newValue); }, waitTimeMs);
+    }, [timeoutHook]);
+    return [value, setValue, setValueDeferred];
+};
+
+// Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
+var minimumInProgressTimeMs = 950;
+var ActionButton = function (_a) {
+    var _b;
+    var _c;
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, inProgress = _a.inProgress, className = _a.className, title = _a.title, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? "sm" : _d;
+    var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
+    var _e = useStateDeferred(!!inProgress), localInProgress = _e[0], setLocalInProgress = _e[1], setLocalInProgressDeferred = _e[2];
+    react.useEffect(function () {
+        if (inProgress == lastInProgress)
+            return;
+        inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
+    return (jsxRuntime.jsxs(lui.LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: onClick, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: (_b = {
+                        "data-testid": "loading-spinner",
+                        style: { padding: 0, margin: 0, paddingRight: 8 },
+                        role: "status"
+                    },
+                    _b["aria-label"] = "Loading",
+                    _b) })) : (jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: name, size: size })), jsxRuntime.jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+};
+
+exports.ActionButton = ActionButton;
 exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.FocusableItem = FocusableItem;