ish-ui 1.2.8 → 1.3.0

package/dist/tagsInput/TagInputList.js

@@ -16,17 +16,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { InputAdornment, MenuItem, Select } from '@mui/material';
-import { ClickAwayListener } from '@mui/base';
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Chip } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Edit } from '@mui/icons-material';
+import { Edit, Tag } from '@mui/icons-material';
 import { useSelectStyles } from '../formFields';
 import AddTagMenu from './AddTagMenu';
 import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
 import { getAllMenuTags, getHighlightedPartLabel, getMenuTags, stubComponent } from '../utils';
-import getCaretCoordinates from '../utils/DOM/getCaretCoordinates';
 import { makeAppStyles } from '../styles';
+import { useAppTheme } from '../themes';
 const useStyles = makeAppStyles()((theme) => ({
     tagColorDotSmall: {
         width: theme.spacing(2),
@@ -44,19 +43,44 @@ const useStyles = makeAppStyles()((theme) => ({
     },
     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;
+// The menu is positioned against the text input, which the rendered Chips both
+// shorten and push along. Measuring while rendering reads the layout of the
+// previous commit -- before those Chips, and before the menu itself, are in the
+// DOM -- so the offsets are taken in a layout effect instead, once the real
+// geometry exists, and re-taken while tags are added and removed
+const TagMenuPopper = ({ inputRef, menuRef, children }) => {
+    const [position, setPosition] = useState(undefined);
+    const measure = useCallback(() => {
+        var _a;
+        var _b;
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const coords = inputEl.getBoundingClientRect();
+        const coordsLeft = coords.left - 32;
+        const fullWidth = coords.left + coords.width;
+        const menuWidth = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+        setPosition(menuWidth && coordsLeft > (fullWidth - menuWidth)
+            ? { right: 0 }
+            : { left: coordsLeft });
+    }, [inputRef, menuRef]);
+    // Layout effect, so the menu is placed in the same frame it appears in
+    useLayoutEffect(measure, [measure]);
+    useEffect(() => {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(measure);
+        // the input resizes as Chips come and go, the wrapper reflows when they wrap
+        // onto another line, and the menu's own width decides which side it hangs on
+        [inputRef.current, (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.parentElement, menuRef.current]
+            .forEach(node => node && observer.observe(node));
+        return () => observer.disconnect();
+    }, [measure, inputRef, menuRef]);
+    return (React.createElement("div", { id: "popper", 
+        // kept invisible rather than unmounted until measured, so that the menu
+        // can be measured at all, and never flashes at the pre Chip offset
+        style: Object.assign({ position: 'absolute', zIndex: 2, visibility: position ? undefined : 'hidden' }, position) }, children));
 };
 const getFullTag = (tagId, tags) => {
     let i = 0;
@@ -75,60 +99,18 @@ const getFullTag = (tagId, tags) => {
         ++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 = {}, editIcon, variant, hideColor }) {
     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: ownClasses, cx } = useStyles();
     const { classes: selectClasses } = useSelectStyles();
     const classes = Object.assign(Object.assign({}, ownClasses), selectClasses);
-    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: cx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '') },
-            !hideColor && React.createElement("div", { key: tag.id, className: cx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
-            React.createElement("span", { className: "text-nowrap" }, `#${tag.name} `))));
-    }, [tags, input.value, inputValue, hideColor]);
-    const inputNode = useRef();
-    const tagMenuNode = useRef();
-    const menuTags = useMemo(() => (tags && input.value ? getMenuTags(tags.filter(t => allowParentSelect || t.childrenCount > 0), input.value.map(id => getFullTag(id, tags)).filter(t => t)) : []), [tags, input.value, allowParentSelect]);
+    const inputNode = useRef(undefined);
+    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 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);
@@ -139,15 +121,11 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
             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
+    const filterOptions = item => !input.value.some(id => id === item.tagBody.id) && item.tagBody.name
         .toLowerCase()
         .trim()
-        .startsWith(currentInputString.toLowerCase().trim());
+        .startsWith(inputValue.toLowerCase().trim());
     const filterOptionsInner = options => options.filter(filterOptions);
     const filteredOptions = allMenuTags.filter(filterOptions);
     const getOptionText = (option, optionProps, label) => (React.createElement("div", Object.assign({}, optionProps),
@@ -158,126 +136,95 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
     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);
+        const highlightedLabel = getHighlightedPartLabel(label, inputValue);
         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);
+        setMenuIsOpen(true);
     };
     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);
+            input.onChange(value.map(v => typeof v === 'number' ? v : v.tagBody.id));
         }
-    };
-    useEffect(() => {
-        let inputString = getInputString(input.value, tags);
-        if (document.activeElement === inputNode.current && !endTagRegex.test(inputString)) {
-            inputString += ' #';
+        if (action === 'removeOption') {
+            input.onChange(value);
         }
-        setInputValue(inputString);
-    }, [input.value, tags]);
-    useEffect(() => {
-        setCurrentInputString(getCurrentInputString(inputValue, input.value || [], allMenuTags));
-    }, [inputValue, input.value, allMenuTags]);
+        setInputValue('');
+    };
     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]);
+    // The ref contents are deliberately not dependencies: this callback is the
+    // popper slot component, so a new identity remounts the menu and throws away
+    // the measured position. TagMenuPopper reads the refs after it has mounted
     const popperAdapter = useCallback(params => {
-        if (currentInputString || !inputNode.current) {
+        if (!params.open)
+            return;
+        if (inputValue || !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]);
+        return (React.createElement(TagMenuPopper, { inputRef: inputNode, menuRef: tagMenuNode }, params.children));
+    }, [inputValue]);
     const listboxAdapter = forwardRef((params, ref) => {
         const setRef = refToSet => {
             tagMenuNode.current = refToSet;
             ref = refToSet;
         };
-        return React.createElement("div", { ref: setRef },
+        // `params` (MUI's listbox props) are deliberately unused, so MUI's own
+        // blur-prevention mousedown handler has to be reinstated by hand
+        return React.createElement("div", { ref: setRef, onMouseDown: e => e.preventDefault() },
             React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, hideColor: hideColor, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }));
     });
+    const theme = useAppTheme();
     return (React.createElement("div", { className: className, id: input.name },
         React.createElement("div", { className: cx('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: cx(classes.listbox, fieldClasses.listbox),
-                    inputRoot: classes.inputWrapper,
-                    noOptions: 'd-none'
-                }, renderInput: (_a) => {
-                    var { InputProps, inputProps } = _a, params = __rest(_a, ["InputProps", "inputProps"]);
-                    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: placeholder, editIcon: editIcon === undefined ? React.createElement(Edit, null) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
-                            onBlur, 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;
-                                }, value: inputValue, className: cx(inputProps.className, fieldClasses.text) }) }), 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: cx('d-flex flex-wrap cursor-text', fieldClasses.text)
-                                }, endAdornment: React.createElement(InputAdornment, { position: "end", className: cx(classes.editIcon, 'invisible') },
-                                    React.createElement(Edit, { className: "test" })), IconComponent: stubComponent },
-                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder)))
-                            : null })));
-                }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
+            }) }, React.createElement(Autocomplete, { value: input.value, multiple: true, open: menuIsOpen, options: filteredOptions, onBlur: exit, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, slots: {
+                popper: inputValue ? undefined : popperAdapter,
+                listbox: inputValue ? undefined : listboxAdapter
+            }, classes: {
+                root: classes.root,
+                hasPopupIcon: classes.hasPopup,
+                hasClearIcon: classes.hasClear,
+                listbox: cx(classes.listbox, fieldClasses.listbox),
+                inputRoot: cx(classes.inputWrapper, classes.multiple),
+                noOptions: 'd-none'
+            }, renderValue: (tagValue, getItemProps) => tagValue.map((option, index) => {
+                const tagProps = __rest(getItemProps({ index }), []);
+                const menuTag = allMenuTags.find(t => t.tagBody.id === option);
+                const tagColors = theme.palette.augmentColor({
+                    color: { main: `#${menuTag.tagBody.color}` }
+                });
+                const textColors = theme.palette.augmentColor({
+                    color: { main: tagColors.contrastText }
+                });
+                return (React.createElement(Chip, Object.assign({}, tagProps, { icon: React.createElement(Tag, null), key: menuTag.tagBody.id, label: menuTag.tagBody.name, sx: {
+                        backgroundColor: tagColors.main,
+                        color: tagColors.contrastText,
+                        '& .MuiChip-icon, & .MuiChip-deleteIcon': {
+                            color: textColors.light
+                        },
+                        '& .MuiChip-deleteIcon:hover': {
+                            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 }))));
 }
 export default TagInputList;

package/dist/themes/ishTheme.js

@@ -7,8 +7,14 @@
  */
 import { alpha, createTheme, darken } from '@mui/material/styles';
 import { DarkThemeKey, DefaultThemeKey, HighcontrastThemeKey, MonochromeThemeKey, } from '../model';
-import createPalette from '@mui/material/styles/createPalette';
 import { grey, yellow } from '@mui/material/colors';
+/**
+ * MUI 9 no longer exports `createPalette` from any public entry point.
+ * `createTheme` resolves palette options into a full `Palette` the same way,
+ * which the override helpers below depend on — they read resolved values such
+ * as `palette.text.primary` that plain `PaletteOptions` does not carry.
+ */
+const createPalette = (palette) => createTheme({ palette: palette }).palette;
 const createOverrides = (palette) => ({
     components: {
         MuiButtonBase: {
@@ -133,8 +139,12 @@ const createOverrides = (palette) => ({
                         },
                     },
                 },
-                inputMultiline: {
-                    lineHeight: '1.5em'
+                // MUI 9 dropped the compound `inputMultiline` class key; the same
+                // element is now reached as the input inside a multiline root.
+                multiline: {
+                    '& .MuiInputBase-input': {
+                        lineHeight: '1.5em'
+                    }
                 }
             }
         },

package/dist/utils/DOM/index.d.ts

@@ -1,5 +1,4 @@
 export declare const countLines: (el: HTMLElement) => number;
 export declare const countWidth: (el: string, container: Element) => number;
-export * from './getCaretCoordinates';
 export * from './getOS';
 export * from './Links';

package/dist/utils/DOM/index.js

@@ -27,6 +27,5 @@ export const countWidth = (el, container) => {
     document.body.removeChild(testContainer);
     return width;
 };
-export * from './getCaretCoordinates';
 export * from './getOS';
 export * from './Links';

package/dist/utils/dates/formatTimezone.js

@@ -8,11 +8,11 @@
  * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  * See the GNU Affero General Public License for more details.
  */
-import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { fromZonedTime, toZonedTime } from 'date-fns-tz';
 export const appendTimezone = (date, timezone) => {
     let result = date;
     try {
-        result = utcToZonedTime(date, timezone);
+        result = toZonedTime(date, timezone);
     }
     catch (e) {
         // eslint-disable-next-line no-console
@@ -24,7 +24,7 @@ export const appendTimezone = (date, timezone) => {
 export const prependTimezone = (date, timezone) => {
     let result = date;
     try {
-        result = zonedTimeToUtc(date, timezone);
+        result = fromZonedTime(date, timezone);
     }
     catch (e) {
         // eslint-disable-next-line no-console

package/dist/utils/formatting/index.d.ts

@@ -1,6 +1,6 @@
 import { SelectItemDefault } from '../../model';
 export declare const getHighlightedPartLabel: (label: string, highlighted: string, options?: any) => any;
-export declare const sortDefaultSelectItems: (a: SelectItemDefault, b: SelectItemDefault) => 1 | -1;
+export declare const sortDefaultSelectItems: (a: SelectItemDefault, b: SelectItemDefault) => -1 | 1;
 export declare const mapSelectItems: (i: any) => SelectItemDefault;
 export declare const stringArrayToSelectItems: (arr: string[]) => SelectItemDefault[];
 export * from './PhoneMasks';

package/dist/utils/hooks/index.d.ts

@@ -1 +1,17 @@
+import { FocusEvent } from 'react';
 export declare const usePrevious: <T = any>(value: any, initial?: any) => T;
+/**
+ * Tracks focus for a whole widget instead of a single field.
+ *
+ * `focusout` bubbles, so one handler on the container sees focus leaving any
+ * descendant and `relatedTarget` says where it went. Focus moving between
+ * descendants — an input to a menu item, for instance — is not a leave, so
+ * popups rendered inside the container stay open on interaction and close
+ * only when focus really leaves (tab away, another field, click on the page).
+ *
+ * Spread the returned handler as `onBlur` on the element holding `containerRef`.
+ */
+export declare const useFocusWithin: <T extends HTMLElement = HTMLDivElement>(onFocusLeave: () => void) => {
+    containerRef: import("react").RefObject<T>;
+    onBlurWithin: (e: FocusEvent) => void;
+};

package/dist/utils/hooks/index.js

@@ -5,7 +5,7 @@
  *
  *  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 { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 export const usePrevious = (value, initial) => {
     const ref = useRef(initial);
     useEffect(() => {
@@ -13,3 +13,33 @@ export const usePrevious = (value, initial) => {
     }, [value]);
     return ref.current;
 };
+/**
+ * Tracks focus for a whole widget instead of a single field.
+ *
+ * `focusout` bubbles, so one handler on the container sees focus leaving any
+ * descendant and `relatedTarget` says where it went. Focus moving between
+ * descendants — an input to a menu item, for instance — is not a leave, so
+ * popups rendered inside the container stay open on interaction and close
+ * only when focus really leaves (tab away, another field, click on the page).
+ *
+ * Spread the returned handler as `onBlur` on the element holding `containerRef`.
+ */
+export const useFocusWithin = (onFocusLeave) => {
+    const containerRef = useRef(null);
+    const onFocusLeaveRef = useRef(onFocusLeave);
+    onFocusLeaveRef.current = onFocusLeave;
+    const onBlurWithin = useCallback((e) => {
+        var _a;
+        if (e.relatedTarget && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            return;
+        }
+        // relatedTarget is null whenever the next focus target isn't focusable
+        // (and in Safari for buttons), so re-check where focus actually landed
+        requestAnimationFrame(() => {
+            if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
+                onFocusLeaveRef.current();
+            }
+        });
+    }, []);
+    return { containerRef, onBlurWithin };
+};

package/dist/utils/tags/index.d.ts

@@ -1,3 +1,3 @@
 import { MenuTag, TagLike } from '../../model';
 export declare const getAllMenuTags: (tags: MenuTag<TagLike>[], res?: MenuTag<TagLike>[], path?: string) => MenuTag<TagLike>[];
-export declare const getMenuTags: (allTags: TagLike[], addedTags: TagLike[], prefix?: string, queryPrefix?: string, entity?: string, path?: string, parent?: MenuTag<TagLike>) => MenuTag<TagLike>[];
+export declare const getMenuTags: (allTags: TagLike[], addedTags: number[], prefix?: string, queryPrefix?: string, entity?: string, path?: string, parent?: MenuTag<TagLike>) => MenuTag<TagLike>[];

package/dist/utils/tags/index.js

@@ -18,7 +18,7 @@ export const getAllMenuTags = (tags, res, path = '') => {
     return result;
 };
 export const getMenuTags = (allTags, addedTags, prefix, queryPrefix, entity, path, parent) => allTags.map(t => {
-    const active = addedTags.find(i => i.id === t.id);
+    const active = addedTags.find(id => id === t.id);
     const tag = {
         active: Boolean(active),
         tagBody: t,