ish-ui 1.0.14 → 1.0.16

package/dist/tagsInput/AddTagMenu.js

@@ -1,36 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,29 +0,0 @@
-/*
- * 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

@@ -1,4 +0,0 @@
-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

@@ -1,273 +0,0 @@
-/*
- * 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/material/ClickAwayListener';
-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

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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