@linzjs/step-ag-grid 2.2.1 → 2.3.0

package/dist/src/components/GridSubComponentTextArea.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-export interface GridSubComponentTextAreaProps {
-    setValue: (value: string) => void;
+import { GridSubComponentProps } from "./gridForm/GridSubComponentProps";
+export interface GridSubComponentTextAreaProps extends GridSubComponentProps {
+    placeholder?: string;
+    required?: boolean;
+    maxlength?: number;
+    width?: string | number;
+    validate: (value: string) => string | null;
 }
 export declare const GridSubComponentTextArea: (props: GridSubComponentTextAreaProps) => JSX.Element;

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -22,7 +22,7 @@ export declare const MenuHeaderItem: (title: string) => {
 };
 export declare type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
 export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
-    className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | string | undefined;
+    className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | string | undefined;
     filtered?: "local" | "reload";
     filterPlaceholder?: string;
     onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;

package/dist/src/components/gridForm/GridFormMultiSelect.d.ts

@@ -5,20 +5,19 @@ import { CellEditorCommon } from "../GridCell";
 interface MultiFinalSelectOption<ValueType> {
     value: ValueType;
     label?: JSX.Element | string;
-    subComponent?: (props: any, ref: any) => any;
+    subComponent?: (props: any) => JSX.Element;
 }
 export declare type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
-export interface MultiSelectResult<RowType> {
-    selectedRows: RowType[];
-    values: Record<string, any>;
+export interface SelectedOptionResult<ValueType> extends MultiFinalSelectOption<ValueType> {
+    subValue: any;
 }
 export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
-    className?: "GridMultiSelect-containerSmall" | "GridMultiSelect-containerMedium" | "GridMultiSelect-containerLarge" | string | undefined;
+    className?: "GridMultiSelect-containerSmall" | "GridMultiSelect-containerMedium" | "GridMultiSelect-containerLarge" | "GridMultiSelect-containerUnlimited" | string | undefined;
     filtered?: boolean;
     filterPlaceholder?: string;
-    onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
+    onSave?: (selectedRows: RowType[], selectedOptions: SelectedOptionResult<ValueType>[]) => Promise<boolean>;
     options: MultiSelectOption<ValueType>[] | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
-    initialSelectedValues?: (selectedRows: RowType[]) => any[];
+    initialSelectedValues?: (selectedRows: RowType[]) => any[] | Record<string, any>;
 }
 export declare const GridFormMultiSelect: <RowType extends GridBaseRow, ValueType>(props: GridFormMultiSelectProps<RowType, ValueType>) => JSX.Element;
 export {};

package/dist/src/components/gridForm/GridSubComponentProps.d.ts

@@ -0,0 +1,6 @@
+export interface GridSubComponentProps {
+    value: string;
+    setValue: (value: string) => void;
+    setValid: (valid: boolean) => void;
+    triggerSave: () => Promise<void>;
+}

package/dist/src/lui/TextInputFormatted.d.ts

@@ -9,5 +9,6 @@ export interface LuiTextInputProps {
     value: string;
     placeholder?: string;
     formatted?: string;
+    onMouseEnter?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
 }
 export declare const TextInputFormatted: (props: LuiTextInputProps) => JSX.Element;

package/dist/step-ag-grid.esm.js

@@ -1,6 +1,6 @@
 import { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, isEmpty, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, fromPairs } from 'lodash-es';
+import { findIndex, isEmpty, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, pickBy, pick } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -2708,7 +2708,11 @@ var useGridPopoverHook = function (props) {
         });
     }); }, [props, stopEditing, propsRef]);
     var popoverWrapper = useCallback(function (children) {
-        return (jsx(Fragment$1, { children: anchorRef.current && (jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) { return triggerSave(event.reason).then(); }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content" }, { children: [saving && ( // This is the overlay that prevents editing when the editor is saving
+        return (jsx(Fragment$1, { children: anchorRef.current && (jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
+                    if (event.reason === "blur")
+                        return;
+                    triggerSave(event.reason).then();
+                }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content" }, { children: [saving && ( // This is the overlay that prevents editing when the editor is saving
                     jsx("div", { style: {
                             position: "absolute",
                             left: 0,
@@ -2996,27 +3000,39 @@ var GridFormDropDown = function (_props) {
 
 var GridFormMultiSelect = function (props) {
     var selectedRows = props.selectedRows;
-    var _a = useState(""), filter = _a[0], setFilter = _a[1];
-    var _b = useState([]), filteredValues = _b[0], setFilteredValues = _b[1];
+    var initialiseValues = useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
+    var subComponentIsValid = useRef({});
+    var _a = useState(initialiseValues && !Array.isArray(initialiseValues)
+        ? pickBy(initialiseValues, function (value) { return typeof value !== "boolean"; })
+        : {}), subSelectedValues = _a[0], setSubSelectedValues = _a[1];
+    var _b = useState(function () {
+        return initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [];
+    }), selectedValues = _b[0], setSelectedValues = _b[1];
+    var _c = useState(""), filter = _c[0], setFilter = _c[1];
+    var _d = useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
     var optionsInitialising = useRef(false);
-    var _c = useState(), options = _c[0], setOptions = _c[1];
-    var subSelectedValues = useRef({});
-    var _d = useState(function () {
-        return props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [];
-    }), selectedValues = _d[0], setSelectedValues = _d[1];
+    var _e = useState(), options = _e[0], setOptions = _e[1];
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var values;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var validations, notValid, selectedOptions, selectedResults;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    values = fromPairs(selectedValues.map(function (value) { var _a; return [value, (_a = subSelectedValues.current[value]) !== null && _a !== void 0 ? _a : true]; }));
                     if (!props.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, props.onSave({ selectedRows: selectedRows, values: values })];
-                case 1: return [2 /*return*/, _a.sent()];
+                    validations = pick(subComponentIsValid.current, selectedValues);
+                    notValid = Object.values(validations).some(function (v) { return !v; });
+                    if (notValid)
+                        return [2 /*return*/, false];
+                    selectedOptions = (_a = selectedValues.map(function (row) { return (options !== null && options !== void 0 ? options : []).find(function (opt) { return opt.value == row; }); })) !== null && _a !== void 0 ? _a : [];
+                    selectedResults = selectedOptions.map(function (selectedOption) {
+                        return (__assign(__assign({}, selectedOption), { subValue: subSelectedValues["".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)] }));
+                    });
+                    return [4 /*yield*/, props.onSave(selectedRows, selectedResults)];
+                case 1: return [2 /*return*/, _b.sent()];
                 case 2: return [2 /*return*/, true];
             }
         });
-    }); }, [props, selectedValues]);
+    }); }, [options, props, selectedValues, subSelectedValues]);
     // Load up options list if it's async function
     useEffect(function () {
         var _a;
@@ -3069,7 +3085,7 @@ var GridFormMultiSelect = function (props) {
         })
             .filter(function (r) { return r !== undefined; }));
     }, [props.filtered, filter, options]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    var _f = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxs(Fragment$1, { children: [options && props.filtered && (jsxs(Fragment$1, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3111,16 +3127,23 @@ var GridFormMultiSelect = function (props) {
                                         } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                         return item.subComponent &&
                                             item.subComponent({
+                                                ref: ref,
+                                                value: subSelectedValues["".concat(item.value)],
                                                 setValue: function (value) {
-                                                    subSelectedValues.current[item.value] = value;
-                                                }
-                                            }, ref);
+                                                    subSelectedValues["".concat(item.value)] = value;
+                                                    setSubSelectedValues(__assign({}, subSelectedValues));
+                                                },
+                                                setValid: function (valid) {
+                                                    subComponentIsValid.current["".concat(item.value)] = valid;
+                                                },
+                                                triggerSave: triggerSave
+                                            });
                                     } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                     }) }))] }) })));
 };
 
 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) }));
+    return GridCell(colDef, __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
 var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
@@ -3294,7 +3317,7 @@ var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#b
 styleInject(css_248z$1);
 
 var TextInputFormatted = function (props) {
-    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
+    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
 };
 
 var GridFormEditBearing = function (_props) {
@@ -3376,7 +3399,7 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
 };
 
 var GridPopoverEditDropDown = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
+    return GridCell(colDef, __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
             // Defaults to medium size container
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };
@@ -3404,7 +3427,7 @@ var GridFormMessage = function (_props) {
 };
 
 var GridPopoverMessage = function (colDef, props) {
-    return GridCell(__assign(__assign({ maxWidth: 140 }, colDef), { cellRendererParams: __assign({ singleClickEdit: true }, colDef.cellRendererParams) }), __assign({ editor: GridFormMessage }, props));
+    return GridCell(__assign(__assign({}, colDef), { cellRendererParams: __assign({ singleClickEdit: true }, colDef.cellRendererParams) }), __assign({ editor: GridFormMessage }, props));
 };
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -3525,9 +3548,7 @@ var GridFormTextArea = function (_props) {
     return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
 };
 
-var GridPopoverTextArea = function (colDef, params) {
-    return GridCell(__assign({ maxWidth: 260 }, colDef), __assign({ editor: GridFormTextArea }, params));
-};
+var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
 var GridFormTextInput = function (_props) {
     var _a;
@@ -3572,7 +3593,12 @@ var GridFormTextInput = function (_props) {
         });
     }); }, [invalid, value, initValue, props]);
     var _c = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _c.popoverWrapper, triggerSave = _c.triggerSave;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, inputProps: {
+    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, onMouseEnter: function (e) {
+                if (document.activeElement != e.currentTarget) {
+                    e.currentTarget.focus();
+                    e.currentTarget.selectionStart = e.currentTarget.value.length;
+                }
+            }, inputProps: {
                 style: { width: "100%" },
                 placeholder: props.placeholder,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -3582,15 +3608,38 @@ var GridFormTextInput = function (_props) {
 };
 
 var GridPopoverTextInput = function (colDef, params) {
-    return GridCell(__assign({ maxWidth: 140 }, colDef), __assign({ editor: GridFormTextInput }, params));
+    return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
 var GridSubComponentTextArea = function (props) {
-    var _a = useState(""), value = _a[0], setValue = _a[1];
+    var value = props.value, setValue = props.setValue, setValid = props.setValid, triggerSave = props.triggerSave;
+    var validate = useCallback(function (value) {
+        if (props.required && value.length === 0) {
+            return "Some text is required";
+        }
+        if (props.maxlength && value.length > props.maxlength) {
+            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        }
+        if (props.validate) {
+            return props.validate(value);
+        }
+        return null;
+    }, [props]);
     useEffect(function () {
-        props.setValue(value);
-    }, [props, value]);
-    return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx("textarea", { autoFocus: true, maxLength: 10000, spellCheck: true, className: "free-text-input", onChange: function (e) { return setValue(e.target.value); }, defaultValue: value }) })));
+        setValid(validate(value) == null);
+    }, [setValid, validate, value]);
+    return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx(TextInputFormatted, { className: "free-text-input", value: value, onMouseEnter: function (e) {
+                if (document.activeElement != e.currentTarget) {
+                    e.currentTarget.focus();
+                    e.currentTarget.selectionStart = e.currentTarget.value.length;
+                }
+            }, onChange: function (e) { return setValue(e.target.value); }, error: validate(value), inputProps: {
+                autoFocus: true,
+                placeholder: props.placeholder,
+                onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
+                }); }); }
+            } }) })));
 };
 
 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}";