ish-ui 1.3.8 → 1.4.0

package/dist/colorPicker/ColorPicker.js

@@ -113,16 +113,19 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
     const [hueColor, setHueColor] = useState(color);
     const [alfaColor, setAlfaColor] = useState(color);
     const hueRef = useRef(undefined);
-    const onHueChange = useCallback(color => {
-        setHueColor(color.hsv);
-        setAlfaColor(color.hsv);
-    }, []);
-    const onAlfaChange = useCallback(color => {
+    const onColorChange = useCallback(color => {
         setHueColor({
             h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
         });
         setAlfaColor(color.hsv);
     }, []);
+    const onChangeComplete = (color) => {
+        var _a, _b;
+        const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
+        if (hex) {
+            onChange(hex.replace('#', ''));
+        }
+    };
     const handleClickAway = useCallback(() => {
         setAnchorEl(null);
     }, []);
@@ -141,28 +144,18 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
             h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
         });
     }, [hueRef.current]);
-    const onMaterialChange = useCallback(color => {
-        setHueColor(color.hsv);
-    }, []);
-    const onChangeComplete = (color) => {
-        var _a, _b;
-        const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
-        if (hex) {
-            onChange(hex.replace('#', ''));
-        }
-    };
     return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
         React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
             React.createElement(Paper, { className: classes.paper },
                 React.createElement("span", { className: classes.arrow, "data-popper-arrow": true }),
-                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
-                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onChangeComplete }),
+                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
+                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onColorChange, onChangeComplete: onChangeComplete }),
                 React.createElement("div", { className: classes.material },
                     React.createElement(MaterialPicker, { styles: {
                             default: {
                                 material: { width: '100%', height: 'unset', padding: 0, fontFamily: 'inherit' }
                             }
-                        }, color: hueColor, onChange: onMaterialChange, onChangeComplete: onChangeComplete }))))));
+                        }, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete }))))));
 });
 const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
     const { classes, cx } = useStyles();

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.8",
+  "version": "1.4.0",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {