@linzjs/step-ag-grid 2.3.1 → 2.4.1

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

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

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

@@ -5,11 +5,13 @@ import { CellEditorCommon } from "../GridCell";
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
     selectedRows: RowType[];
     value: ValueType;
+    subComponentValue?: ValueType;
 }
 interface FinalSelectOption<ValueType> {
     value: ValueType;
     label?: JSX.Element | string;
     disabled?: boolean | string;
+    subComponent?: (props: any, ref: any) => any;
 }
 export declare const MenuSeparatorString = "_____MENU_SEPARATOR_____";
 export declare const MenuSeparator: Readonly<{

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface GridFormSubComponentTextInput {
+    setValue: (value: string) => void;
+    keyDown: (key: string) => void;
+    placeholder?: string;
+}
+export declare const GridFormSubComponentTextInput: ({ keyDown, placeholder, setValue }: GridFormSubComponentTextInput) => JSX.Element;

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

@@ -4,7 +4,7 @@ import { CellEditorCommon } from "../GridCell";
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
     placeholder?: string;
     required?: boolean;
-    maxlength?: number;
+    maxLength?: number;
     width?: string | number;
     validate?: (value: string) => string | null;
     onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;

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

@@ -5,7 +5,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
     placeholder?: string;
     units?: string;
     required?: boolean;
-    maxlength?: number;
+    maxLength?: number;
     width?: string | number;
     validate?: (value: string, data: RowType) => string | null;
     onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;

package/dist/src/contexts/GridSubComponentContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface GridSubComponentContextType {
+    value: any;
+    setValue: (value: string) => void;
+    setValid: (valid: boolean) => void;
+    triggerSave: () => Promise<void>;
+}
+export declare const GridSubComponentContext: import("react").Context<GridSubComponentContextType>;

package/dist/src/index.d.ts

@@ -23,6 +23,7 @@ export { GridPopoverEditDropDown } from "./components/gridPopoverEdit/GridPopove
 export { GridPopoverMessage } from "./components/gridPopoverEdit/GridPopoverMessage";
 export { GridPopoverTextArea } from "./components/gridPopoverEdit/GridPopoverTextArea";
 export { GridPopoverTextInput } from "./components/gridPopoverEdit/GridPopoverTextInput";
+export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSubComponentTextInput";
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoutMenu";

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

@@ -2838,7 +2838,8 @@ var GridFormDropDown = function (_props) {
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
-    var selectItemHandler = useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+    var _e = useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var field;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2852,7 +2853,7 @@ var GridFormDropDown = function (_props) {
                                         hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
                                         if (!hasChanged) return [3 /*break*/, 3];
                                         if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value })];
+                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
                                     case 1:
                                         _a.sent();
                                         return [3 /*break*/, 3];
@@ -2994,10 +2995,59 @@ var GridFormDropDown = function (_props) {
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
                         } })), 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, { children: "[Empty]" }), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () { return selectItemHandler(item.value); } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index)));
+                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label })) : filteredValues.includes(item.value) ? null : (jsx(Fragment$1, { children: !item.subComponent ? (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
+                                        selectItemHandler(item.value);
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                        return item.subComponent &&
+                                            item.subComponent({
+                                                setValue: function (value) {
+                                                    var localSubComponentValues = __spreadArray([], subComponentValues, true);
+                                                    var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
+                                                        var optionValue = _a.optionValue;
+                                                        return optionValue === item.value;
+                                                    });
+                                                    if (subComponentValueIndex !== -1) {
+                                                        localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                                                    }
+                                                    else {
+                                                        localSubComponentValues.push({
+                                                            subComponentValue: value,
+                                                            optionValue: item.value
+                                                        });
+                                                    }
+                                                    setSubComponentValues(localSubComponentValues);
+                                                },
+                                                keyDown: function (key) {
+                                                    var subComponentItem = subComponentValues.find(function (_a) {
+                                                        var optionValue = _a.optionValue;
+                                                        return optionValue === item.value;
+                                                    });
+                                                    if (key === "Enter" && subComponentItem) {
+                                                        selectItemHandler(item.value, subComponentItem.subComponentValue);
+                                                        ref.closeMenu();
+                                                    }
+                                                }
+                                            }, ref);
+                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }));
                         })] }) }))] }));
 };
 
+var GridSubComponentContext = createContext({
+    value: "GridSubComponentContext value no context",
+    setValue: function () {
+        console.error("GridSubComponentContext setValue no context");
+    },
+    setValid: function () {
+        console.error("GridSubComponentContext setValid no context");
+    },
+    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("GridSubComponentContext triggerSave no context");
+            return [2 /*return*/];
+        });
+    }); }
+});
+
 var GridFormMultiSelect = function (props) {
     var selectedRows = props.selectedRows;
     var initialiseValues = useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
@@ -3124,10 +3174,8 @@ var GridFormMultiSelect = function (props) {
                                             }
                                         }, onChange: function () {
                                             /*Do nothing, change handled by menuItem*/
-                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent &&
-                                            item.subComponent({
-                                                ref: ref,
+                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                        return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 value: subSelectedValues["".concat(item.value)],
                                                 setValue: function (value) {
                                                     subSelectedValues["".concat(item.value)] = value;
@@ -3137,7 +3185,7 @@ var GridFormMultiSelect = function (props) {
                                                     subComponentIsValid.current["".concat(item.value)] = valid;
                                                 },
                                                 triggerSave: triggerSave
-                                            });
+                                            } }, { children: jsx(item.subComponent, {}) })));
                                     } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                     }) }))] }) })));
 };
@@ -3513,8 +3561,8 @@ var GridFormTextArea = function (_props) {
         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.maxLength && value.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(value);
@@ -3560,8 +3608,8 @@ var GridFormTextInput = function (_props) {
         if (props.required && trimmedValue.length == 0) {
             return "Some text is required";
         }
-        if (props.maxlength && trimmedValue.length > props.maxlength) {
-            return "Text must be no longer than ".concat(props.maxlength, " characters");
+        if (props.maxLength && trimmedValue.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(trimmedValue, props.data);
@@ -3611,14 +3659,44 @@ var GridPopoverTextInput = function (colDef, params) {
     return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
+var GridFormSubComponentTextInput = function (_a) {
+    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue;
+    var placeholderText = placeholder || "Other...";
+    var _b = useState(""), inputValue = _b[0], setInputValue = _b[1];
+    return (jsx(Fragment$1, { children: jsx(TextInputFormatted, { value: inputValue, onChange: function (e) {
+                var value = e.target.value;
+                setValue(value);
+                setInputValue(value);
+            }, inputProps: {
+                onKeyDown: function (k) { return keyDown(k.key); },
+                placeholder: placeholderText,
+                onMouseEnter: function (e) {
+                    if (document.activeElement != e.currentTarget) {
+                        e.currentTarget.focus();
+                    }
+                }
+            } }) }));
+};
+
 var GridSubComponentTextArea = function (props) {
-    var value = props.value, setValue = props.setValue, setValid = props.setValid, triggerSave = props.triggerSave;
+    var _a = useContext(GridSubComponentContext), value = _a.value, setValue = _a.setValue, setValid = _a.setValid, triggerSave = _a.triggerSave;
+    // If is not initialised yet as it's just been created then set the default value
+    useEffect(function () {
+        if (value == null)
+            setValue(props.defaultValue);
+    }, [props.defaultValue, setValue, value]);
     var validate = useCallback(function (value) {
+        if (value == null)
+            return null;
+        // This can happen because subcomponent is invoked without type safety
+        if (typeof value !== "string") {
+            console.error("Value is not a string", 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.maxLength && value.length > props.maxLength) {
+            return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
             return props.validate(value);
@@ -3626,7 +3704,7 @@ var GridSubComponentTextArea = function (props) {
         return null;
     }, [props]);
     useEffect(function () {
-        setValid(validate(value) == null);
+        setValid(value != null && 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) {
@@ -3733,5 +3811,5 @@ var ActionButton = function (_a) {
                     _b) })) : (jsx(LuiIcon, { name: icon, alt: name, size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoutMenu, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoutMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map