ish-ui 1.0.2

package/src/tagsInput/AddTagMenu.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import clsx from 'clsx';
+import withStyles from '@mui/styles/withStyles';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import MenuItem from '@mui/material/MenuItem';
+import List from '@mui/material/List';
+import AddTagMenuItem from './AddTagMenuItem';
+import { MenuTag, TagLike } from '@src/model';
+
+const styles = theme => ({
+  listItem: {
+    padding: theme.spacing(0, 0.5, 0, 2)
+  },
+  proceedIcon: {
+    marginTop: '2px'
+  },
+  backContainer: {
+    marginLeft: '-6px'
+  },
+  tagColorDotSmall: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    background: 'red',
+    borderRadius: '100%'
+  }
+});
+
+interface Props<T> {
+  classes?: any;
+  tags: MenuTag<T>[];
+  handleAdd: (tag: MenuTag<T>) => void;
+  activeTag: MenuTag<T>;
+  setActiveTag: (arg: (MenuTag<T> | ((prevState: MenuTag<T>) => MenuTag<T>))) => void;
+}
+
+function AddTagMenu<T extends TagLike>(
+  {
+    classes,
+    tags,
+    handleAdd,
+    activeTag,
+    setActiveTag
+  }: Props<T>
+) {
+  const handleBack = () => {
+    setActiveTag(prev => prev.parent);
+  };
+
+  return (
+    <List
+      className={classes.rootMenu}
+    >
+      {activeTag && (
+        <MenuItem onClick={handleBack} className={classes.listItem}>
+          <span className={clsx('d-flex textSecondaryColor', classes.backContainer)}>
+            <KeyboardArrowLeft color="inherit" />
+            Back
+          </span>
+        </MenuItem>
+      )}
+      {(activeTag ? activeTag.children : tags).map(t => (
+        <AddTagMenuItem
+          key={t.tagBody.id}
+          tag={t}
+          classes={classes}
+          setActiveTag={setActiveTag}
+          handleAdd={handleAdd}
+        />
+      ))}
+    </List>
+  );
+}
+
+export default withStyles(styles)(AddTagMenu);

package/src/tagsInput/AddTagMenuItem.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import Checkbox from '@mui/material/Checkbox';
+import MenuItem from '@mui/material/MenuItem';
+import { MenuTag, TagLike } from '@src/model';
+
+interface Props<T> {
+  classes: any;
+  setActiveTag: (tag: MenuTag<T>) => void;
+  handleAdd: (tag: MenuTag<T>) => void;
+  tag: MenuTag<T>;
+}
+
+function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd }: Props<T>) {
+  const openSubmenu = () => {
+    setActiveTag(tag);
+  };
+
+  const toggleChecked = () => {
+    handleAdd(tag);
+  };
+  
+  const hasChildren = Boolean(tag.children.length);
+
+  return (
+    <MenuItem
+      classes={{ root: classes.listItem }}
+      onClick={hasChildren ? openSubmenu : toggleChecked}
+    >
+      <div className={clsx(classes.tagColorDotSmall, 'mr-1')} style={{ background: '#' + tag.tagBody.color }} />
+      <span className="mr-2 flex-fill">{tag.tagBody.name}</span>
+      {hasChildren ? (
+        <KeyboardArrowRight className={clsx('d-flex textSecondaryColor', classes.proceedIcon)} />
+      ) : (
+        <Checkbox classes={{ root: 'smallIconButton' }} checked={tag.active} />
+      )}
+    </MenuItem>
+  );
+}
+
+export default AddTagMenuItem;

package/src/tagsInput/TagInputList.tsx

@@ -0,0 +1,428 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import React, {
+ useCallback, useEffect, useMemo, useRef, useState 
+} from 'react';
+import {
+  InputAdornment, MenuItem, Select
+} from '@mui/material';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import Autocomplete from '@mui/material/Autocomplete';
+import clsx from 'clsx';
+import { Edit } from '@mui/icons-material';
+import { selectStyles } from '@src/formFields';
+import AddTagMenu from './AddTagMenu';
+import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
+import { FieldInputProps, FieldMetaProps, MenuTag, TagLike, TagsFieldProps } from '@src/model';
+import { getAllMenuTags, getHighlightedPartLabel, getMenuTags } from '../utils';
+import { stubComponent } from '@src/utils/stubs';
+import getCaretCoordinates from '@src/utils/DOM/getCaretCoordinates';
+
+const styles = theme =>
+  createStyles({
+    inputEndAdornment: {
+      visibility: 'hidden',
+      display: 'flex',
+      color: theme.palette.primary.main,
+      alignItems: 'flex-end',
+      alignSelf: 'flex-end',
+      marginBottom: '4px',
+      opacity: 0.5
+    },
+    tagColorDotSmall: {
+      width: theme.spacing(2),
+      minWidth: theme.spacing(2),
+      height: theme.spacing(2),
+      minHeight: theme.spacing(2),
+      background: 'red',
+      borderRadius: '100%'
+    },
+    listbox: {
+      whiteSpace: 'break-spaces'
+    },
+    invalid: {}
+  });
+
+const endTagRegex = /#\s*[^\w\d]*$/;
+
+const getCurrentInputString = (input, formTagIds: number[] = [], allMenuTags: MenuTag<TagLike>[] = []) => {
+  let substr = input;
+
+  formTagIds?.forEach(id => {
+    const tag = allMenuTags.find(t => t.tagBody.id === id);
+    if (tag) {
+      substr = substr.replace('#' + tag.tagBody.name, '').trim();
+    }
+  });
+
+  if (substr) {
+    return substr.trim().replace(/#/g, '');
+  }
+
+  return substr;
+};
+
+const getFullTag = (tagId: number, tags: TagLike[]) => {
+  let i = 0;
+  let result;
+
+  while (i < tags.length) {
+    if (tagId === tags[i].id) {
+      return tags[i];
+    }
+
+    if (result) break;
+
+    if (tags[i].childTags.length) {
+      result = getFullTag(tagId, tags[i].childTags);
+      if (result) return result;
+    }
+
+    ++i;
+  }
+};
+
+const getInputString = (tagIds: number[], allTags: TagLike[]) => (tagIds?.length && allTags?.length
+  ? tagIds.reduce((acc, id) => {
+    const tag = getFullTag(id, allTags);
+    return (tag ? `${acc}#${tag.name} ` : acc);
+  }, '')
+  : '');
+
+function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({
+   input,
+   tags,
+   classes,
+   placeholder,
+   labelAdornment,
+   meta,
+   label = 'Tags',
+   disabled,
+   className,
+   warning,
+   fieldClasses = {}
+}: TagsFieldProps<T, IP, MP>) {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [activeTag, setActiveTag] = useState<MenuTag<TagLike>>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [currentInputString, setCurrentInputString] = useState('');
+
+  const InputValueForRender = useMemo(() => {
+    if (!inputValue || !tags || !tags.length) return '';
+
+    const arrayOfTags = input?.value?.length
+      && input.value.map(id => getFullTag(id, tags)).filter(t => t);
+
+    if (!arrayOfTags?.length) return '';
+
+    return arrayOfTags.map((tag: T, index) => (
+      <span key={tag.id} className={clsx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '')}>
+        <div key={tag.id} className={clsx(classes.tagColorDotSmall, 'mr-0-5')} style={{ background: '#' + tag.color }} />
+        <span className="text-nowrap">
+          {`#${tag.name} `}
+        </span>
+      </span>
+    ));
+  }, [tags, input.value, inputValue]);
+
+  const inputNode = useRef<any>();
+  const tagMenuNode = useRef<any>();
+
+  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]
+  );
+
+  const allMenuTags = useMemo(
+    () => getAllMenuTags(menuTags),
+    [menuTags]
+  );
+
+  const synchronizeTags = () => {
+    const inputString = getInputString(input.value, tags);
+
+    if (inputString.trim() === inputValue.replace(endTagRegex, '').trim()) {
+      return;
+    }
+
+    const updated = [];
+    const current = inputValue.split('#').filter(i => i).map(i => i.trim());
+
+    allMenuTags.forEach(t => {
+      if (!t.children.length) {
+        const index = current.findIndex(c => c === t.tagBody.name);
+        if (index !== -1) {
+          const addedTagsMatch = input.value.find(id => getFullTag(id, tags)?.name === t.tagBody.name);
+          if (addedTagsMatch && addedTagsMatch !== t.tagBody.id) {
+            return;
+          }
+          updated.push(t.tagBody.id);
+          current.splice(index, 1);
+        }
+      }
+    });
+
+    input.onChange(updated);
+    setInputValue(getInputString(updated, tags));
+  };
+
+  const onTagAdd = (tag: MenuTag<T>) => {
+    const updated = [...input.value];
+
+    const index = updated.findIndex(id => id === tag.tagBody.id);
+
+    if (index !== -1) {
+      updated.splice(index, 1);
+    } else {
+      updated.push(tag.tagBody.id);
+    }
+
+    input.onChange(updated);
+
+    setTimeout(() => {
+      inputNode?.current?.focus();
+    }, 100);
+  };
+
+  const filterOptions = item => !item.children.length && !input.value.some(id => id === item.tagBody.id) && item.tagBody.name
+    .toLowerCase()
+    .trim()
+    .startsWith(currentInputString.toLowerCase().trim());
+
+  const filterOptionsInner = options => options.filter(filterOptions);
+
+  const filteredOptions = allMenuTags.filter(filterOptions);
+
+  const getOptionText = (option, optionProps, label) => (
+    <div {...optionProps}>
+      {`${option.path ? option.path + ' /' : ''}`}
+      {' '}
+      {label}
+    </div>
+  );
+
+  const getOptionLabel = op => op.path;
+
+  const renderOption = (optionProps, option) => {
+    const label = option?.tagBody?.name;
+    const highlightedLabel = getHighlightedPartLabel(label, currentInputString);
+    return getOptionText(option, optionProps, highlightedLabel);
+  };
+
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+
+  const edit = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      inputNode?.current?.focus();
+    }, 50);
+  };
+
+  const exit = () => {
+    setMenuIsOpen(false);
+    setIsEditing(false);
+    setActiveTag(null);
+
+    if (endTagRegex.test(inputValue)) {
+      setTimeout(() => {
+        setInputValue(inputValue.replace(endTagRegex, '').trim());
+      }, 100);
+    }
+  };
+
+  const onFocus = () => {
+    setMenuIsOpen(true);
+    if (!endTagRegex.test(inputValue)) {
+      setInputValue(inputValue + ' #');
+    }
+  };
+
+  const onBlur = () => {
+    if (currentInputString) {
+      exit();
+      synchronizeTags();
+    }
+  };
+
+  const onTagListBlur = () => {
+    setTimeout(() => {
+      if (document.activeElement !== inputNode.current) {
+        exit();
+        synchronizeTags();
+      }
+    }, 60);
+  };
+
+  const handleChange = (e, value, action) => {
+    if (action === 'selectOption') {
+      onTagAdd(value);
+    }
+  };
+
+  useEffect(() => {
+    let inputString = getInputString(input.value, tags);
+
+    if (document.activeElement === inputNode.current && !endTagRegex.test(inputString)) {
+      inputString += ' #';
+    }
+
+    setInputValue(inputString);
+  }, [input.value, tags]);
+
+  useEffect(() => {
+    setCurrentInputString(getCurrentInputString(inputValue, input.value || [], allMenuTags));
+  }, [inputValue, input.value, allMenuTags]);
+
+  useEffect(() => {
+    if (meta.invalid && !isEditing) {
+      setIsEditing(true);
+    }
+  }, [meta.invalid]);
+
+  useEffect(() => {
+    if (activeTag) {
+      const activeUpdated = allMenuTags.find(t => t.tagBody.id === activeTag.tagBody.id);
+      if (activeUpdated) {
+        setActiveTag(activeUpdated);
+      }
+    }
+  }, [allMenuTags]);
+
+  const popperAdapter = useCallback(params => {
+    if (currentInputString || !inputNode.current) {
+      return <div {...params} />;
+    }
+
+    const coords = getCaretCoordinates(inputNode.current, inputValue.length);
+    const position = tagMenuNode.current
+    && coords.left > inputNode.current.clientWidth - tagMenuNode.current.clientWidth
+      ? { right: 0 }
+      : { left: coords.left };
+
+    return (
+      <div id="popper" style={{ ...position, position: 'absolute', zIndex: 2 }}>
+        <ClickAwayListener onClickAway={onTagListBlur}>
+          {params.children}
+        </ClickAwayListener>
+      </div>
+    );
+  }, [allMenuTags, inputValue, currentInputString, inputNode.current, tagMenuNode.current, input.value]);
+
+  const listboxAdapter = useCallback(params => (
+    <div className={params.className} ref={tagMenuNode}>
+      <AddTagMenu
+        tags={menuTags}
+        handleAdd={onTagAdd}
+        activeTag={activeTag}
+        setActiveTag={setActiveTag}
+      />
+    </div>
+  ), [menuTags, activeTag, setActiveTag, onTagAdd]);
+
+  return (
+    <div className={className} id={input.name}>
+      <div
+        className={clsx('relative', {
+          'pointer-events-none': disabled
+        })}
+      >
+        <Autocomplete
+          value={null}
+          open={menuIsOpen}
+          options={filteredOptions}
+          onChange={handleChange}
+          renderOption={renderOption}
+          filterOptions={filterOptionsInner}
+          getOptionLabel={getOptionLabel}
+          PopperComponent={currentInputString ? undefined : popperAdapter}
+          ListboxComponent={currentInputString ? undefined : listboxAdapter}
+          classes={{
+            root: classes.root,
+            hasPopupIcon: classes.hasPopup,
+            hasClearIcon: classes.hasClear,
+            listbox: clsx(classes.listbox, fieldClasses.listbox),
+            inputRoot: classes.inputWrapper,
+            noOptions: 'd-none'
+          }}
+          renderInput={({
+            InputLabelProps, InputProps, inputProps, ...params
+          }) => (
+            <EditInPlaceFieldBase
+              {...params}
+              name={input.name}
+              value={input.value}
+              error={meta.error}
+              invalid={meta?.invalid}
+              label={label}
+              warning={warning}
+              disabled={disabled}
+              fieldClasses={fieldClasses}
+              shrink={Boolean(label || input.value)}
+              labelAdornment={labelAdornment}
+              placeholder={placeholder || 'No value'}
+              editIcon={<Edit fontSize="inherit" />}
+              InputProps={{
+                ...InputProps,
+                onChange: handleInputChange,
+                onFocus,
+                onBlur,
+                inputProps: {
+                  ...inputProps,
+                  ref: ref => {
+                    (inputProps as any).ref.current = ref;
+                    inputNode.current = ref;
+                  },
+                  value: inputValue
+                },
+              }}
+              CustomInput={!isEditing
+                ? <Select
+                  inputRef={ref => {
+                    (inputProps as any).ref.current = ref?.node;
+                  }}
+                  onFocus={edit}
+                  value="stub"
+                  className={classes.inputWrapper}
+                  classes={{ select: 'd-flex flex-wrap cursor-text' }}
+                  endAdornment={
+                    <InputAdornment
+                      position="end"
+                      className={classes.inputEndAdornment}>
+                        <Edit />
+                      </InputAdornment>
+                  }
+                  IconComponent={stubComponent}
+                >
+                  <MenuItem value="stub">
+                    {InputValueForRender || <span className="placeholderContent">No value</span>}
+                  </MenuItem>
+                </Select>
+                : null}
+            />)
+          }
+          popupIcon={stubComponent()}
+          disableListWrap
+          openOnFocus
+        />
+      </div>
+    </div>
+  );
+}
+
+export default withStyles(theme => ({
+  ...selectStyles(theme),
+  ...styles(theme)
+}))(
+  TagInputList
+) as any;

package/src/tagsInput/index.ts

@@ -0,0 +1,4 @@
+
+export * from './AddTagMenuItem';
+export * from './AddTagMenu';
+export * from './TagInputList';