ish-ui 1.3.9 → 1.4.0

package/dist/model/Fields.d.ts

@@ -32,9 +32,9 @@ export interface MenuTag<T> {
     queryPrefix?: string;
     indeterminate?: boolean;
 }
-export interface FieldInputProps {
+export interface FieldInputProps<T = any> {
     checked?: boolean | undefined;
-    value: any;
+    value: T;
     name: string;
     onBlur: EventOrValueHandler<FocusEvent<any>>;
     onChange: EventOrValueHandler<ChangeEvent<any>>;

package/dist/tagsInput/TagInputList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FieldInputProps, FieldMetaProps, TagLike, TagsFieldProps } from '../model';
-declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant, hideColor, trackCarretPosition }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
+declare function TagInputList<T extends TagLike, IP extends FieldInputProps<TagLike['id'][]>, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant, hideColor, trackCarretPosition }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
 export default TagInputList;

package/dist/tagsInput/TagInputList.js

@@ -110,8 +110,9 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
     const tagMenuNode = useRef(undefined);
     const menuTags = useMemo(() => (tags && input.value ? getMenuTags(tags.filter(t => allowParentSelect || t.childrenCount > 0), input.value) : []), [tags, input.value, allowParentSelect]);
     const allMenuTags = useMemo(() => getAllMenuTags(menuTags), [menuTags]);
+    const normalizedValue = useMemo(() => { var _a; return ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.filter(id => allMenuTags.some(t => t.tagBody.id === id))) || []; }, [input.value, allMenuTags]);
     const onTagAdd = (tag) => {
-        const updated = [...input.value];
+        const updated = [...normalizedValue];
         const index = updated.findIndex(id => id === tag.tagBody.id);
         if (index !== -1) {
             updated.splice(index, 1);
@@ -189,7 +190,7 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
     return (React.createElement("div", { className: className, id: input.name },
         React.createElement("div", { className: cx('relative', {
                 'pointer-events-none': disabled
-            }) }, React.createElement(Autocomplete, { value: (input === null || input === void 0 ? void 0 : input.value) || [], multiple: true, open: menuIsOpen, options: filteredOptions, onBlur: exit, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, slots: {
+            }) }, React.createElement(Autocomplete, { value: normalizedValue, multiple: true, open: menuIsOpen, options: filteredOptions, onBlur: exit, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, slots: {
                 popper: inputValue || !trackCarretPosition ? undefined : popperAdapter,
                 listbox: inputValue ? undefined : listboxAdapter
             }, classes: {
@@ -224,12 +225,15 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
                             color: textColors.dark
                         }
                     } })));
-            }), renderInput: (_a) => { var _b; var { slotProps: { input: InputProps, htmlInput: inputProps } } = _a, params = __rest(_a, ["slotProps"]); return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, name: input.name, value: input.value, error: meta.error, invalid: meta === null || meta === void 0 ? void 0 : meta.invalid, label: label, warning: warning, disabled: disabled, fieldClasses: fieldClasses, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: ((_b = input === null || input === void 0 ? void 0 : input.value) === null || _b === void 0 ? void 0 : _b.length) ? '' : placeholder, editIcon: editIcon === undefined ? React.createElement(Edit, { className: classes.expandIcon }) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus, classes: {
-                        underline: fieldClasses.underline,
-                        input: cx(disabled && classes.readonly, fieldClasses.text),
-                    }, inputProps: Object.assign(Object.assign({}, inputProps), { ref: ref => {
-                            inputProps.ref.current = ref;
-                            inputNode.current = ref;
-                        }, className: cx(inputProps.className, fieldClasses.text, 'mr-auto') }) }) }))); }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
+            }), renderInput: (_a) => {
+                var { slotProps: { input: InputProps, htmlInput: inputProps } } = _a, params = __rest(_a, ["slotProps"]);
+                return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { value: inputValue, variant: variant, name: input.name, error: meta.error, invalid: meta === null || meta === void 0 ? void 0 : meta.invalid, label: label, warning: warning, disabled: disabled, fieldClasses: fieldClasses, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: normalizedValue.length ? '' : placeholder, editIcon: editIcon === undefined ? React.createElement(Edit, { className: classes.expandIcon }) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus, classes: {
+                            underline: fieldClasses.underline,
+                            input: cx(disabled && classes.readonly, fieldClasses.text),
+                        }, inputProps: Object.assign(Object.assign({}, inputProps), { ref: ref => {
+                                inputProps.ref.current = ref;
+                                inputNode.current = ref;
+                            }, className: cx(inputProps.className, fieldClasses.text, 'mr-auto') }) }) })));
+            }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
 }
 export default TagInputList;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.3.9",
+  "version": "1.4.0",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {