ish-ui 1.0.46 → 1.0.48

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -274,16 +274,16 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         return input.value || null;
     }, [input.value, multiple, selectValueMark, sortedItems]);
     const renderedPlaceholder = useMemo(() => {
-        const rendered = placeholder;
-        return multiple && inputValue.length ? null : rendered;
+        return multiple && inputValue.length ? null : placeholder;
     }, [multiple, placeholder, isEditing, inputValue]);
     const renderInput = useCallback((_a) => {
-        var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
-        return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: (isEditing ? searchValue : (typeof displayedValue === 'string' ? displayedValue : '')), error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
+        var { InputProps, inputProps } = _a, params = __rest(_a, ["InputProps", "inputProps"]);
+        const value = (isEditing ? searchValue : (typeof displayedValue === 'string' ? displayedValue : ''));
+        return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: value, error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
                 disableUnderline, classes: {
                     underline: fieldClasses.underline,
                     input: clsx(disabled && classes.readonly, fieldClasses.text),
-                }, inputProps: Object.assign(Object.assign({}, inputProps), { className: clsx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
+                }, inputProps: Object.assign(Object.assign({}, inputProps), { value: multiple ? inputProps.value : value, className: clsx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
                         inputProps.ref.current = ref;
                         inputNode.current = ref;
                         if (inputRef)
@@ -312,6 +312,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         input,
         labelAdornment,
         renderedPlaceholder,
+        renderValue,
         hideEditIcon,
         renderIcons,
         disableUnderline,

package/dist/model/Fields.d.ts

@@ -12,7 +12,7 @@ export type EventHandler<Event> = (event: Event, name?: string) => void;
 export interface EventOrValueHandler<Event> extends EventHandler<Event> {
     (value: any): void;
 }
-export interface TagLike {
+export interface TagLike extends Record<string, any> {
     id?: number;
     name?: string;
     color?: string;
@@ -235,6 +235,7 @@ export interface TagsFieldProps<T, IP, MP> extends EditInPlaceFieldProps<IP, MP>
     showConfirm?: ShowConfirmCaller;
     validateEntity?: string;
     allowParentSelect?: boolean;
+    hideColor?: boolean;
 }
 export interface FormFieldBaseProps {
     required?: boolean;

package/dist/tagsInput/AddTagMenu.d.ts

@@ -3,6 +3,7 @@ import { MenuTag, TagLike } from '../model';
 interface Props<T> {
     classes?: any;
     allowParentSelect?: boolean;
+    hideColor?: boolean;
     tags: MenuTag<T>[];
     handleAdd: (tag: MenuTag<T>) => void;
     activeTag: MenuTag<T>;

package/dist/tagsInput/AddTagMenu.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         borderRadius: '100%'
     }
 });
-function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
+function AddTagMenu({ classes, tags, hideColor, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
     const handleBack = () => {
         setActiveTag(prev => prev.parent);
     };
@@ -31,6 +31,6 @@ function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowPa
             React.createElement("span", { className: clsx('d-flex textSecondaryColor', classes.backContainer) },
                 React.createElement(KeyboardArrowLeft, { color: "inherit" }),
                 "Back"))),
-        (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect })))));
+        (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect, hideColor: hideColor })))));
 }
 export default withStyles(styles)(AddTagMenu);

package/dist/tagsInput/AddTagMenuItem.d.ts

@@ -6,6 +6,7 @@ interface Props<T> {
     handleAdd: (tag: MenuTag<T>) => void;
     tag: MenuTag<T>;
     allowParentSelect?: boolean;
+    hideColor?: boolean;
 }
-declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, allowParentSelect }: Props<T>): React.JSX.Element;
+declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }: Props<T>): React.JSX.Element;
 export default AddTagMenuItem;

package/dist/tagsInput/AddTagMenuItem.js

@@ -11,7 +11,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import Checkbox from '@mui/material/Checkbox';
 import MenuItem from '@mui/material/MenuItem';
 import { IconButton } from '@mui/material';
-function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSelect }) {
+function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }) {
     const openSubmenu = () => {
         setActiveTag(tag);
     };
@@ -20,7 +20,7 @@ function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSele
     };
     const hasChildren = Boolean(tag.children.length);
     return (React.createElement(MenuItem, { classes: { root: classes.listItem }, onClick: allowParentSelect ? null : (hasChildren ? openSubmenu : toggleChecked), disableRipple: allowParentSelect },
-        React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
+        !hideColor && React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
         React.createElement("span", { className: "mr-2 flex-fill" }, tag.tagBody.name),
         (allowParentSelect || !hasChildren) && React.createElement(Checkbox, { onClick: toggleChecked, classes: { root: 'smallIconButton' }, checked: tag.active }),
         hasChildren && React.createElement(IconButton, { size: "small", onClick: openSubmenu },

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 }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
+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 }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
 export default TagInputList;

package/dist/tagsInput/TagInputList.js

@@ -77,7 +77,7 @@ const getInputString = (tagIds, allTags) => ((tagIds === null || tagIds === void
         return (tag ? `${acc}#${tag.name} ` : acc);
     }, '')
     : '');
-function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant }) {
+function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant, hideColor }) {
     const [menuIsOpen, setMenuIsOpen] = useState(false);
     const [activeTag, setActiveTag] = useState(null);
     const [isEditing, setIsEditing] = useState(false);
@@ -93,9 +93,9 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
         if (!(arrayOfTags === null || arrayOfTags === void 0 ? void 0 : arrayOfTags.length))
             return '';
         return arrayOfTags.map((tag, index) => (React.createElement("span", { key: tag.id, className: clsx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '') },
-            React.createElement("div", { key: tag.id, className: clsx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
+            !hideColor && React.createElement("div", { key: tag.id, className: clsx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
             React.createElement("span", { className: "text-nowrap" }, `#${tag.name} `))));
-    }, [tags, input.value, inputValue]);
+    }, [tags, input.value, inputValue, hideColor]);
     const inputNode = useRef();
     const tagMenuNode = useRef();
     const menuTags = useMemo(() => (tags && input.value ? getMenuTags(tags.filter(t => t.childrenCount > 0), input.value.map(id => getFullTag(id, tags)).filter(t => t)) : []), [tags, input.value]);
@@ -236,7 +236,7 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
             React.createElement(ClickAwayListener, { onClickAway: onTagListBlur }, params.children)));
     }, [allMenuTags, inputValue, currentInputString, inputNode.current, tagMenuNode.current, input.value]);
     const listboxAdapter = useCallback(params => (React.createElement("div", { className: params.className, ref: tagMenuNode },
-        React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }))), [menuTags, activeTag, setActiveTag, onTagAdd]);
+        React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, hideColor: hideColor, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }))), [menuTags, activeTag, setActiveTag, onTagAdd, hideColor]);
     return (React.createElement("div", { className: className, id: input.name },
         React.createElement("div", { className: clsx('relative', {
                 'pointer-events-none': disabled

package/package.json

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