ish-ui 1.0.19 → 1.0.21

package/dist/tagsInput/AddTagMenu.js

@@ -0,0 +1,36 @@
+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';
+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%'
+    }
+});
+function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
+    const handleBack = () => {
+        setActiveTag(prev => prev.parent);
+    };
+    return (React.createElement(List, { className: classes.rootMenu },
+        activeTag && (React.createElement(MenuItem, { onClick: handleBack, className: classes.listItem },
+            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 })))));
+}
+export default withStyles(styles)(AddTagMenu);

package/dist/tagsInput/AddTagMenuItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuTag, TagLike } from '../model';
+interface Props<T> {
+    classes: any;
+    setActiveTag: (tag: MenuTag<T>) => void;
+    handleAdd: (tag: MenuTag<T>) => void;
+    tag: MenuTag<T>;
+    allowParentSelect?: boolean;
+}
+declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, allowParentSelect }: Props<T>): React.JSX.Element;
+export default AddTagMenuItem;

package/dist/tagsInput/AddTagMenuItem.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { IconButton } from '@mui/material';
+function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSelect }) {
+    const openSubmenu = () => {
+        setActiveTag(tag);
+    };
+    const toggleChecked = () => {
+        handleAdd(tag);
+    };
+    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 } }),
+        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 },
+            React.createElement(KeyboardArrowRight, { className: clsx('d-flex textSecondaryColor', classes.proceedIcon) }))));
+}
+export default AddTagMenuItem;

package/dist/tagsInput/TagInputList.d.ts

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

package/dist/tagsInput/TagInputList.js

@@ -0,0 +1,273 @@
+/*
+ * 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.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { InputAdornment, MenuItem, Select } from '@mui/material';
+import { ClickAwayListener } from '@mui/base';
+import Autocomplete from '@mui/material/Autocomplete';
+import clsx from 'clsx';
+import { Edit } from '@mui/icons-material';
+import { selectStyles } from '../formFields';
+import AddTagMenu from './AddTagMenu';
+import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
+import { getAllMenuTags, getHighlightedPartLabel, getMenuTags } from '../utils';
+import { stubComponent } from '../utils/stubs';
+import getCaretCoordinates from '../utils/DOM/getCaretCoordinates';
+import { makeAppStyles } from '../styles';
+const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, selectStyles(theme)), { 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 = [], allMenuTags = []) => {
+    let substr = input;
+    formTagIds === null || formTagIds === void 0 ? void 0 : 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, tags) => {
+    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, allTags) => ((tagIds === null || tagIds === void 0 ? void 0 : tagIds.length) && (allTags === null || allTags === void 0 ? void 0 : allTags.length)
+    ? tagIds.reduce((acc, id) => {
+        const tag = getFullTag(id, allTags);
+        return (tag ? `${acc}#${tag.name} ` : acc);
+    }, '')
+    : '');
+function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {} }) {
+    const [menuIsOpen, setMenuIsOpen] = useState(false);
+    const [activeTag, setActiveTag] = useState(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [currentInputString, setCurrentInputString] = useState('');
+    const classes = useStyles();
+    const InputValueForRender = useMemo(() => {
+        var _a;
+        if (!inputValue || !tags || !tags.length)
+            return '';
+        const arrayOfTags = ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.length)
+            && input.value.map(id => getFullTag(id, tags)).filter(t => t);
+        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 } }),
+            React.createElement("span", { className: "text-nowrap" }, `#${tag.name} `))));
+    }, [tags, input.value, inputValue]);
+    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]);
+    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 => { var _a; return ((_a = getFullTag(id, tags)) === null || _a === void 0 ? void 0 : _a.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) => {
+        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(() => {
+            var _a;
+            (_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.current) === null || _a === void 0 ? void 0 : _a.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) => (React.createElement("div", Object.assign({}, optionProps),
+        `${option.path ? option.path + ' /' : ''}`,
+        ' ',
+        label));
+    const getOptionLabel = op => op.path;
+    const renderOption = (optionProps, option) => {
+        var _a;
+        const label = (_a = option === null || option === void 0 ? void 0 : option.tagBody) === null || _a === void 0 ? void 0 : _a.name;
+        const highlightedLabel = getHighlightedPartLabel(label, currentInputString);
+        return getOptionText(option, optionProps, highlightedLabel);
+    };
+    const handleInputChange = e => {
+        setInputValue(e.target.value);
+    };
+    const edit = () => {
+        setIsEditing(true);
+        setTimeout(() => {
+            var _a;
+            (_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.current) === null || _a === void 0 ? void 0 : _a.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 React.createElement("div", Object.assign({}, 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 (React.createElement("div", { id: "popper", style: Object.assign(Object.assign({}, position), { position: 'absolute', zIndex: 2 }) },
+            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]);
+    return (React.createElement("div", { className: className, id: input.name },
+        React.createElement("div", { className: clsx('relative', {
+                'pointer-events-none': disabled
+            }) },
+            React.createElement(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: (_a) => {
+                    var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
+                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { 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: placeholder || 'No value', editIcon: React.createElement(Edit, { fontSize: "inherit" }), InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
+                            onBlur, inputProps: Object.assign(Object.assign({}, inputProps), { ref: ref => {
+                                    inputProps.ref.current = ref;
+                                    inputNode.current = ref;
+                                }, value: inputValue }) }), CustomInput: !isEditing
+                            ? React.createElement(Select, { inputRef: ref => {
+                                    inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
+                                }, onFocus: edit, value: "stub", className: classes.inputWrapper, classes: { select: 'd-flex flex-wrap cursor-text' }, endAdornment: React.createElement(InputAdornment, { position: "end", className: classes.inputEndAdornment },
+                                    React.createElement(Edit, null)), IconComponent: stubComponent },
+                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder || 'No value')))
+                            : null })));
+                }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
+}
+export default TagInputList;

package/dist/tagsInput/index.d.ts

@@ -0,0 +1,6 @@
+export * from './AddTagMenuItem';
+export * from './AddTagMenu';
+export * from './TagInputList';
+export { default as AddTagMenuItem } from './AddTagMenuItem';
+export { default as AddTagMenu } from './AddTagMenu';
+export { default as TagInputList } from './TagInputList';

package/dist/tagsInput/index.js

@@ -0,0 +1,6 @@
+export * from './AddTagMenuItem';
+export * from './AddTagMenu';
+export * from './TagInputList';
+export { default as AddTagMenuItem } from './AddTagMenuItem';
+export { default as AddTagMenu } from './AddTagMenu';
+export { default as TagInputList } from './TagInputList';

package/dist/themes/appTheme.d.ts

@@ -0,0 +1,4 @@
+import { ThemeValues, AppTheme } from '../model';
+export declare const theme: {
+    [K in ThemeValues]: Partial<AppTheme>;
+};