ish-ui 1.3.9 → 1.4.1

package/dist/colorPicker/ColorPicker.js

@@ -108,54 +108,55 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
 }));
 // Gap between the anchor and the paper, leaving room for the arrow.
 const popperModifiers = [{ name: 'offset', options: { offset: [0, 12] } }];
-const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl }) => {
+const ColorPickerBase = React.memo(({ color, input: { onChange }, TransitionProps, setAnchorEl }) => {
     const { classes } = useStyles();
-    const [hueColor, setHueColor] = useState(color);
-    const [alfaColor, setAlfaColor] = useState(color);
+    // Single source of truth for all pickers; null until HuePicker has parsed the initial color
+    const [hsv, setHsv] = useState(null);
     const hueRef = useRef(undefined);
-    const onColorChange = useCallback(color => {
-        setHueColor({
-            h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
-        });
-        setAlfaColor(color.hsv);
+    // Alpha slider is used as a saturation slider, so saturation is passed as alpha
+    const hueColor = useMemo(() => (hsv ? Object.assign(Object.assign({}, hsv), { a: 1 }) : color), [hsv, color]);
+    const alfaColor = useMemo(() => (hsv ? {
+        h: hsv.h, s: 1, v: hsv.v, a: hsv.s
+    } : color), [hsv, color]);
+    const onHueChange = useCallback(color => {
+        setHsv(prev => (Object.assign(Object.assign({}, (prev || color.hsv)), { h: color.hsv.h })));
     }, []);
-    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);
+    const onAlfaChange = useCallback(color => {
+        setHsv(prev => (Object.assign(Object.assign({}, (prev || color.hsv)), { s: color.hsv.a })));
+    }, []);
+    const onMaterialChange = useCallback(color => {
+        setHsv({ h: color.hsv.h, s: color.hsv.s, v: color.hsv.v });
+    }, []);
+    const commitHex = (hex) => {
         if (hex) {
             onChange(hex.replace('#', ''));
         }
     };
+    // Slider pickers report their own (saturation-substituted) color, so take the resulting one from HuePicker
+    const onSliderChangeComplete = () => { var _a, _b; return commitHex((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex); };
+    const onMaterialChangeComplete = color => commitHex(color.hex);
     const handleClickAway = useCallback(() => {
         setAnchorEl(null);
     }, []);
-    useEffect(() => {
-        if (!hueColor && value) {
-            setHueColor('#' + value);
-        }
-    }, [value, hueColor]);
     useEffect(() => {
         var _a, _b;
         const hueHsv = (_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hsv;
-        if (!hueHsv) {
-            return;
+        if (hueHsv) {
+            setHsv({ h: hueHsv.h, s: hueHsv.s, v: hueHsv.v });
         }
-        setAlfaColor({
-            h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
-        });
-    }, [hueRef.current]);
+    }, []);
     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: onColorChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
-                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onColorChange, onChangeComplete: onChangeComplete }),
+                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onSliderChangeComplete, width: "168", className: classes.bottomOffset }),
+                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onSliderChangeComplete }),
                 React.createElement("div", { className: classes.material },
                     React.createElement(MaterialPicker, { styles: {
                             default: {
                                 material: { width: '100%', height: 'unset', padding: 0, fontFamily: 'inherit' }
                             }
-                        }, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete }))))));
+                        }, color: hueColor, onChange: onMaterialChange, onChangeComplete: onMaterialChangeComplete }))))));
 });
 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.9",
+  "version": "1.4.1",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {