@homecode/ui 5.11.0 → 5.13.0

package/dist/esm/src/components/FormattedText/FormattedText.js

@@ -80,7 +80,7 @@ function applyInjectors(text, injectors) {
 }
 function FormattedText({ text, className, onButtonClick, }) {
     const injectLines = (content) => {
-        const matches = content.match(/\n---\n/);
+        const matches = content.match(/(^|\n)---[ \t]*(?:\n|$)/);
         if (!matches)
             return null;
         return {
@@ -204,9 +204,17 @@ function FormattedText({ text, className, onButtonClick, }) {
             length: matches[0].length,
         };
     };
-    const injectButtons = (content) => {
-        if (!onButtonClick)
+    const injectBreaks = (content) => {
+        const index = content.indexOf('\n');
+        if (index < 0)
             return null;
+        return {
+            elem: jsx("br", {}),
+            index,
+            length: 1,
+        };
+    };
+    const injectButtons = (content) => {
         const matches = content.match(/\[(.*?):(.*?)\|([^\]]+)\]/);
         if (!matches)
             return null;
@@ -216,7 +224,9 @@ function FormattedText({ text, className, onButtonClick, }) {
             .split('|');
         const [varName, value] = data.split(':');
         return {
-            elem: (jsx(Button, { variant: "default", size: "s", round: true, onClick: () => onButtonClick({ text: label, [varName]: value }), children: label })),
+            elem: (jsx(Button, { variant: "default", size: "s", round: true, onClick: onButtonClick
+                    ? () => onButtonClick({ text: label, [varName]: value })
+                    : undefined, children: label })),
             index: matches.index,
             length: matches[0].length,
         };
@@ -260,10 +270,10 @@ function FormattedText({ text, className, onButtonClick, }) {
         };
     };
     const injectTables = (content) => {
-        const withSep = content.match(/(\n|^)(\|[^\n]+\|\s*\n)(\|[\s:-]+(?:\|[\s:-]+)*\|\s*\n)((?:\|[^\n]+\|\s*\n?)+)/);
+        const withSep = content.match(/(\n|^)(\|[^\n]+\|[ \t]*\n)(\|[\t :-]+(?:\|[\t :-]+)*\|[ \t]*\n)((?:\|[^\n]+\|[ \t]*\n?)+)/);
         const withoutSep = withSep
             ? null
-            : content.match(/(\n|^)(\|[^\n]+\|\s*\n)((?:\|[^\n]+\|\s*\n?)+)/);
+            : content.match(/(\n|^)(\|[^\n]+\|[ \t]*\n)((?:\|[^\n]+\|[ \t]*\n?)+)/);
         const matches = withSep || withoutSep;
         if (!matches)
             return null;
@@ -317,6 +327,7 @@ function FormattedText({ text, className, onButtonClick, }) {
             injectBullet,
             injectNumbered,
             injectButtons,
+            injectBreaks,
         ]) }));
 }
 

package/dist/esm/src/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useMemo, useEffect, createElement } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, createElement } from 'react';
 import cn from 'classnames';
 import { Label } from '../Label/Label.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
@@ -16,6 +16,38 @@ const TEXTAREA_SCROLL_TOP_OFFSET = {
     m: 40,
     l: 50,
 };
+function isNativeTextField(el) {
+    return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement;
+}
+function resolveNativeTextField(el) {
+    if (isNativeTextField(el))
+        return el;
+    if (el instanceof Element) {
+        const nested = el.querySelector('input, textarea');
+        if (isNativeTextField(nested))
+            return nested;
+    }
+    return null;
+}
+function selectContentEditable(el) {
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function selectAllOnElement(el) {
+    const field = resolveNativeTextField(el);
+    if (field && typeof field.select === 'function') {
+        field.select();
+        return;
+    }
+    if (el instanceof HTMLElement && el.isContentEditable) {
+        selectContentEditable(el);
+    }
+}
 const Input = forwardRef((props, ref) => {
     const inputRef = useRef(null);
     const setRef = (element) => {
@@ -27,7 +59,7 @@ const Input = forwardRef((props, ref) => {
             ref.current = element;
         }
     };
-    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, fitContentWidth, } = props;
+    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, clearPaddingLeft, clearPaddingRight, forceLabelOnTop, scrollProps, step = 1, round, autoFocus, className, fitContentWidth, selectAllOnFocus, } = props;
     const updateAutoComplete = () => {
         const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
@@ -39,6 +71,8 @@ const Input = forwardRef((props, ref) => {
         const elem = inputRef.current;
         if (!isFocused || !elem || type !== 'text')
             return;
+        if (elem.selectionStart !== elem.selectionEnd)
+            return;
         elem.selectionStart = cursorPos.current;
         elem.selectionEnd = cursorPos.current;
     };
@@ -57,6 +91,7 @@ const Input = forwardRef((props, ref) => {
     const hasValue = isNumber || Boolean(value || inputValue || defaultValue);
     const isLabelOnTop = forceLabelOnTop || Boolean(addonLeft) || hasValue || isFocused;
     const cursorPos = useRef(0);
+    const selectAllOnFocusPending = useRef(false);
     const getValue = (val = inputValue) => {
         if (type === 'number') {
             if (val)
@@ -136,6 +171,7 @@ const Input = forwardRef((props, ref) => {
         onChangeValue(val, e);
     };
     const onChangeValue = (value, e) => {
+        selectAllOnFocusPending.current = false;
         if (!isNumber && inputRef.current) {
             cursorPos.current = inputRef.current.selectionStart;
         }
@@ -159,8 +195,23 @@ const Input = forwardRef((props, ref) => {
     const handleFocus = e => {
         setIsFocused(true);
         onFocus?.(e);
+        if (!selectAllOnFocus)
+            return;
+        selectAllOnFocusPending.current = true;
+        selectAllOnElement(inputRef.current ?? e.target);
+    };
+    const handleMouseDown = e => {
+        props.controlProps?.onMouseDown?.(e);
+        if (!selectAllOnFocus || isFocusedRef.current)
+            return;
+        e.preventDefault();
+        const el = e.currentTarget;
+        if (el instanceof HTMLElement)
+            el.focus();
+        selectAllOnElement(el);
     };
     const handleBlur = e => {
+        selectAllOnFocusPending.current = false;
         if (changeOnEnd)
             onTypingEnd();
         const val = getValue(e?.target?.value);
@@ -181,6 +232,7 @@ const Input = forwardRef((props, ref) => {
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
+            ...(selectAllOnFocus ? { onMouseDown: handleMouseDown } : null),
         };
         if (isTextArea) {
             controlProps.contentEditable = true;
@@ -208,8 +260,10 @@ const Input = forwardRef((props, ref) => {
         disabled,
         props.controlProps,
         handleChange,
+        handleMouseDown,
         onFocus,
         onBlur,
+        selectAllOnFocus,
         isTextArea,
         onTextAreaInput,
         placeholder,
@@ -271,6 +325,23 @@ const Input = forwardRef((props, ref) => {
         if (isTextArea)
             setTextareaValue(String(value ?? ''));
     }, []);
+    useLayoutEffect(() => {
+        if (!selectAllOnFocus || !selectAllOnFocusPending.current)
+            return;
+        if (!isFocused)
+            return;
+        const field = resolveNativeTextField(inputRef.current);
+        if (field) {
+            if (!field.value || typeof field.select !== 'function')
+                return;
+            field.select();
+            return;
+        }
+        const node = inputRef.current;
+        if (node instanceof HTMLElement && node.isContentEditable && node.innerText) {
+            selectContentEditable(node);
+        }
+    });
     const Control = isTextArea ? 'span' : 'input';
     const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, fitContentWidth && !isTextArea && S.fitContentWidth, className);
     return (jsxs("div", { className: classes, children: [jsxs("label", { className: cn(S.main, clearPaddingLeft && S.clearPaddingLeft, clearPaddingRight && S.clearPaddingRight), children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: setRef, key: "control" }), isTextArea &&

package/dist/esm/src/components/NestedMenu/NestedMenu.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '../Icon/Icon.js';
+import { Popup } from '../Popup/Popup.js';
 import S from './NestedMenu.styl.js';
 
 const MOBILE_MQ = '(max-width: 720px)';
 const HOVER_MQ = '(hover: hover) and (pointer: fine)';
+const ICON_SIZE = { xs: 'xs', s: 'xs', m: 'xs', l: 's', xl: 'm' };
 function useMedia(query) {
     const [matches, setMatches] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
     useEffect(() => {
@@ -27,14 +29,13 @@ function NestedMenuItemRow({ children, className, danger, disabled, href, target
     }
     return (jsx("button", { type: "button", className: classes, disabled: disabled, onClick: onClick, children: children }));
 }
-function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', className, }) {
-    const rootRef = useRef(null);
+function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', size = 'm', className, popupProps, }) {
     const [activeId, setActiveId] = useState(null);
-    const [flipLeft, setFlipLeft] = useState(false);
-    const hoverTimer = useRef(0);
     const stacked = useMedia(MOBILE_MQ);
     const canHover = useMedia(HOVER_MQ);
     const active = items.find(item => item.id === activeId);
+    const iconSize = ICON_SIZE[size];
+    const contentClass = cn(S.content, S[`size-${size}`]);
     function close() {
         onOpenChange(false);
         setActiveId(null);
@@ -54,40 +55,9 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
             if (e.key === 'Escape')
                 close();
         };
-        const onPointer = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                close();
-        };
         document.addEventListener('keydown', onKey);
-        document.addEventListener('pointerdown', onPointer);
-        return () => {
-            document.removeEventListener('keydown', onKey);
-            document.removeEventListener('pointerdown', onPointer);
-        };
+        return () => document.removeEventListener('keydown', onKey);
     }, [open]);
-    useLayoutEffect(() => {
-        if (!open || !rootRef.current)
-            return;
-        const rect = rootRef.current.getBoundingClientRect();
-        setFlipLeft(window.innerWidth - rect.right < 280);
-    }, [open, activeId]);
-    useEffect(() => () => window.clearTimeout(hoverTimer.current), []);
-    function onItemEnter(id) {
-        if (!canHover || stacked)
-            return;
-        window.clearTimeout(hoverTimer.current);
-        const item = items.find(entry => entry.id === id);
-        if (item?.disabled || !item?.submenu) {
-            setActiveId(null);
-            return;
-        }
-        openSub(id, false);
-    }
-    function onItemLeave() {
-        if (!canHover || stacked)
-            return;
-        hoverTimer.current = window.setTimeout(() => setActiveId(null), 160);
-    }
     function onItemClick(id) {
         const item = items.find(entry => entry.id === id);
         if (!item || item.disabled)
@@ -97,18 +67,47 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
             close();
             return;
         }
-        if (activeId === id && !stacked) {
+        if (!item.submenu)
+            return;
+        if (activeId === id && !stacked && !canHover) {
             setActiveId(null);
             return;
         }
         openSub(id, true);
     }
+    function renderItemButton(item) {
+        return (jsxs("button", { type: "button", className: cn(S.item, activeId === item.id && S.itemActive, item.danger && S.itemDanger, item.disabled && S.itemDisabled, item.wrap && S.multiline, item.className), role: "menuitem", disabled: item.disabled, "aria-haspopup": item.submenu ? 'menu' : undefined, "aria-expanded": item.submenu ? activeId === item.id : undefined, onClick: () => onItemClick(item.id), children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), jsx("span", { className: S.label, children: item.label }), item.hint != null && item.hint !== '' && (jsx("span", { className: S.hint, children: item.hint })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: iconSize }))] }));
+    }
     function renderItems() {
-        return items.map(item => (jsxs("div", { className: S.itemWrap, onMouseEnter: () => onItemEnter(item.id), onMouseLeave: onItemLeave, children: [jsxs("button", { type: "button", className: cn(S.item, activeId === item.id && S.itemActive, item.danger && S.itemDanger, item.disabled && S.itemDisabled, item.wrap && S.multiline, item.className), role: "menuitem", disabled: item.disabled, "aria-haspopup": item.submenu ? 'menu' : undefined, "aria-expanded": item.submenu ? activeId === item.id : undefined, onClick: () => onItemClick(item.id), children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), jsx("span", { className: S.label, children: item.label }), item.hint != null && item.hint !== '' && (jsx("span", { className: S.hint, children: item.hint })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: "xs" }))] }), !stacked && activeId === item.id && item.submenu && (jsx("div", { className: cn(S.submenu, flipLeft && S.submenuLeft), role: "menu", onMouseEnter: () => {
-                        window.clearTimeout(hoverTimer.current);
-                    }, children: item.submenu }))] }, item.id)));
+        return items.map(item => {
+            if (item.submenu && !stacked) {
+                return (jsx(Popup, { ...popupProps, className: cn(S.itemPopup, popupProps?.className), size: size, hoverControl: canHover, isOpen: activeId === item.id, onOpen: () => openSub(item.id, true), onClose: () => {
+                        setActiveId(current => (current === item.id ? null : current));
+                    }, direction: align === 'end' ? 'left-top' : 'right-top', trigger: renderItemButton(item), triggerProps: {
+                        ...popupProps?.triggerProps,
+                        className: cn(S.itemTrigger, popupProps?.triggerProps?.className),
+                    }, contentProps: {
+                        ...popupProps?.contentProps,
+                        className: cn(contentClass, popupProps?.contentProps?.className),
+                    }, content: jsx("div", { className: S.list, role: "menu", children: item.submenu }) }, item.id));
+            }
+            return (jsx("div", { className: S.itemWrap, onPointerEnter: () => {
+                    if (canHover && !stacked)
+                        setActiveId(null);
+                }, children: renderItemButton(item) }, item.id));
+        });
     }
-    return (jsxs("div", { ref: rootRef, className: cn(S.root, className), children: [jsx("div", { className: S.trigger, onClick: () => onOpenChange(!open), children: trigger }), open && (jsxs("div", { className: cn(S.popup, align === 'end' && S.alignEnd), role: "menu", children: [stacked && active && (jsxs("div", { className: S.stacked, children: [jsxs("button", { type: "button", className: S.back, onClick: () => setActiveId(null), children: [jsx(Icon, { type: "chevronLeft", size: "xs" }), jsx("span", { className: S.label, children: active.label })] }), jsx("div", { className: S.stackedBody, children: active.submenu })] })), (!stacked || !active) && renderItems()] }))] }));
+    return (jsx(Popup, { ...popupProps, className: cn(S.root, className, popupProps?.className), size: size, isOpen: open, onOpen: () => onOpenChange(true), onClose: () => {
+            onOpenChange(false);
+            setActiveId(null);
+        }, direction: align === 'end' ? 'bottom-left' : 'bottom-right', trigger: trigger, triggerProps: {
+            ...popupProps?.triggerProps,
+            className: cn(S.trigger, popupProps?.triggerProps?.className),
+            onClick: () => onOpenChange(!open),
+        }, contentProps: {
+            ...popupProps?.contentProps,
+            className: cn(contentClass, popupProps?.contentProps?.className),
+        }, content: jsx("div", { className: S.list, role: "menu", children: stacked && active ? (jsxs("div", { className: S.stacked, children: [jsxs("button", { type: "button", className: S.back, onClick: () => setActiveId(null), children: [jsx(Icon, { type: "chevronLeft", size: iconSize }), jsx("span", { className: S.label, children: active.label })] }), jsx("div", { className: S.stackedBody, children: active.submenu })] })) : (renderItems()) }) }));
 }
 const NestedMenu = Object.assign(NestedMenuComponent, {
     Item: NestedMenuItemRow,

package/dist/esm/src/components/NestedMenu/NestedMenu.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".NestedMenu_root__ybyGA{display:inline-flex;position:relative}.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_popup__q0uYO{background:var(--decent-color);border:1px solid var(--accent-color-alpha-200);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px;left:0;max-width:280px;min-width:200px;padding:4px;position:absolute;top:calc(100% + 6px);z-index:20}.NestedMenu_alignEnd__L4AZi{left:auto;right:0}.NestedMenu_itemWrap__Qmc0B{position:relative}.NestedMenu_back__dNsDV,.NestedMenu_item__tgbZm,.NestedMenu_row__48g5c{align-items:center;background:none;border:none;border-radius:6px;color:inherit;cursor:pointer;display:flex;font:inherit;font-size:13px;font-weight:500;gap:8px;letter-spacing:.01em;line-height:1.3;padding:6px 10px;text-align:left;text-decoration:none;width:100%}.NestedMenu_back__dNsDV:hover,.NestedMenu_item__tgbZm:hover,.NestedMenu_row__48g5c:hover{background:var(--accent-color-alpha-50)}.NestedMenu_back__dNsDV.NestedMenu_itemActive__RfPZH,.NestedMenu_item__tgbZm.NestedMenu_itemActive__RfPZH,.NestedMenu_row__48g5c.NestedMenu_itemActive__RfPZH{background:var(--accent-color-alpha-100)}.NestedMenu_back__dNsDV.NestedMenu_itemDisabled__evVk1,.NestedMenu_back__dNsDV:disabled,.NestedMenu_item__tgbZm.NestedMenu_itemDisabled__evVk1,.NestedMenu_item__tgbZm:disabled,.NestedMenu_row__48g5c.NestedMenu_itemDisabled__evVk1,.NestedMenu_row__48g5c:disabled{cursor:default;opacity:.55;pointer-events:none}.NestedMenu_itemDanger__oAJbP{color:var(--active-color)}.NestedMenu_itemDanger__oAJbP .NestedMenu_icon__4g2Yp{color:inherit;opacity:1}.NestedMenu_icon__4g2Yp{display:inline-flex;flex-shrink:0;opacity:.55}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_label__Jnm6l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;opacity:.5}.NestedMenu_multiline__MDdk-{grid-row-gap:2px;align-items:start;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:252px;row-gap:2px}.NestedMenu_multiline__MDdk- .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip}.NestedMenu_multiline__MDdk- .NestedMenu_hint__hotNP{grid-column:2;min-width:0;white-space:normal}.NestedMenu_chevron__8i-Po{flex-shrink:0;opacity:.45}.NestedMenu_row__48g5c svg{color:var(--active-color);flex-shrink:0}.NestedMenu_submenu__Tx1Ll{background:var(--decent-color);border:1px solid var(--accent-color-alpha-200);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.45);left:calc(100% + 6px);max-height:min(360px,calc(100vh - 24px));max-width:280px;min-width:220px;overflow-x:hidden;overflow-y:auto;padding:4px;position:absolute;top:-4px;z-index:21}.NestedMenu_submenu__Tx1Ll:before{bottom:0;content:\"\";left:-6px;position:absolute;top:0;width:6px}.NestedMenu_submenuLeft__y18Nb{left:auto;right:calc(100% + 6px)}.NestedMenu_submenuLeft__y18Nb:before{left:auto;right:-6px}.NestedMenu_stacked__rMiOi{display:flex;flex-direction:column;max-height:min(360px,calc(100vh - 24px));overflow-y:auto}.NestedMenu_back__dNsDV{font-weight:650;margin-bottom:2px}.NestedMenu_stackedBody__Fbkma{min-width:0}";
-var S = {"root":"NestedMenu_root__ybyGA","trigger":"NestedMenu_trigger__zBeNI","popup":"NestedMenu_popup__q0uYO","alignEnd":"NestedMenu_alignEnd__L4AZi","itemWrap":"NestedMenu_itemWrap__Qmc0B","item":"NestedMenu_item__tgbZm","row":"NestedMenu_row__48g5c","back":"NestedMenu_back__dNsDV","itemActive":"NestedMenu_itemActive__RfPZH","itemDisabled":"NestedMenu_itemDisabled__evVk1","itemDanger":"NestedMenu_itemDanger__oAJbP","icon":"NestedMenu_icon__4g2Yp","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","multiline":"NestedMenu_multiline__MDdk-","chevron":"NestedMenu_chevron__8i-Po","submenu":"NestedMenu_submenu__Tx1Ll","submenuLeft":"NestedMenu_submenuLeft__y18Nb","stacked":"NestedMenu_stacked__rMiOi","stackedBody":"NestedMenu_stackedBody__Fbkma"};
+var css_248z = ".NestedMenu_root__ybyGA,.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_content__OyLXN{box-sizing:border-box;max-width:280px;min-width:200px;padding:4px}.NestedMenu_list__Q55Aa{display:flex;flex-direction:column;gap:1px}.NestedMenu_itemPopup__kMaxU{display:block;width:100%}.NestedMenu_itemTrigger__a7XHw{cursor:inherit;display:block;width:100%}.NestedMenu_itemWrap__Qmc0B{position:relative}.NestedMenu_back__dNsDV,.NestedMenu_item__tgbZm,.NestedMenu_row__48g5c{align-items:center;background:none;border:none;border-radius:6px;color:inherit;cursor:pointer;display:flex;font:inherit;font-weight:500;gap:8px;letter-spacing:.01em;line-height:1.3;text-align:left;text-decoration:none;width:100%}.NestedMenu_back__dNsDV:hover,.NestedMenu_item__tgbZm:hover,.NestedMenu_row__48g5c:hover{background:var(--accent-color-alpha-50)}.NestedMenu_back__dNsDV.NestedMenu_itemActive__RfPZH,.NestedMenu_item__tgbZm.NestedMenu_itemActive__RfPZH,.NestedMenu_row__48g5c.NestedMenu_itemActive__RfPZH{background:var(--accent-color-alpha-100)}.NestedMenu_back__dNsDV.NestedMenu_itemDisabled__evVk1,.NestedMenu_back__dNsDV:disabled,.NestedMenu_item__tgbZm.NestedMenu_itemDisabled__evVk1,.NestedMenu_item__tgbZm:disabled,.NestedMenu_row__48g5c.NestedMenu_itemDisabled__evVk1,.NestedMenu_row__48g5c:disabled{cursor:default;opacity:.55;pointer-events:none}.NestedMenu_itemDanger__oAJbP{color:var(--active-color)}.NestedMenu_itemDanger__oAJbP .NestedMenu_icon__4g2Yp{color:inherit;opacity:1}.NestedMenu_icon__4g2Yp{display:inline-flex;flex-shrink:0;opacity:.55}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_label__Jnm6l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;opacity:.5}.NestedMenu_multiline__MDdk-{grid-row-gap:2px;align-items:start;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:252px;row-gap:2px}.NestedMenu_multiline__MDdk- .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip}.NestedMenu_multiline__MDdk- .NestedMenu_hint__hotNP{grid-column:2;min-width:0;white-space:normal}.NestedMenu_chevron__8i-Po{flex-shrink:0;opacity:.45}.NestedMenu_row__48g5c svg{color:var(--active-color);flex-shrink:0}.NestedMenu_stacked__rMiOi{display:flex;flex-direction:column;max-height:min(360px,calc(100vh - 24px));overflow-y:auto}.NestedMenu_back__dNsDV{font-weight:650;margin-bottom:2px}.NestedMenu_stackedBody__Fbkma{min-width:0}.NestedMenu_size-s__2n2te .NestedMenu_back__dNsDV,.NestedMenu_size-s__2n2te .NestedMenu_item__tgbZm,.NestedMenu_size-s__2n2te .NestedMenu_row__48g5c,.NestedMenu_size-xs__yUJ0q .NestedMenu_back__dNsDV,.NestedMenu_size-xs__yUJ0q .NestedMenu_item__tgbZm,.NestedMenu_size-xs__yUJ0q .NestedMenu_row__48g5c{font-size:12px;gap:6px;padding:4px 8px}.NestedMenu_size-s__2n2te.NestedMenu_content__OyLXN,.NestedMenu_size-xs__yUJ0q.NestedMenu_content__OyLXN{min-width:176px;padding:3px}.NestedMenu_size-s__2n2te .NestedMenu_back__dNsDV svg,.NestedMenu_size-s__2n2te .NestedMenu_chevron__8i-Po,.NestedMenu_size-s__2n2te .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-s__2n2te .NestedMenu_row__48g5c svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_back__dNsDV svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_chevron__8i-Po,.NestedMenu_size-xs__yUJ0q .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-xs__yUJ0q .NestedMenu_row__48g5c svg{height:10px;width:10px}.NestedMenu_size-m__B8zm5 .NestedMenu_back__dNsDV,.NestedMenu_size-m__B8zm5 .NestedMenu_item__tgbZm,.NestedMenu_size-m__B8zm5 .NestedMenu_row__48g5c{font-size:13px;padding:6px 10px}.NestedMenu_size-l__1FrvQ .NestedMenu_back__dNsDV,.NestedMenu_size-l__1FrvQ .NestedMenu_item__tgbZm,.NestedMenu_size-l__1FrvQ .NestedMenu_row__48g5c{font-size:16px;gap:10px;padding:10px 14px}.NestedMenu_size-l__1FrvQ.NestedMenu_content__OyLXN{max-width:320px;min-width:240px;padding:6px}.NestedMenu_size-l__1FrvQ .NestedMenu_back__dNsDV svg,.NestedMenu_size-l__1FrvQ .NestedMenu_chevron__8i-Po,.NestedMenu_size-l__1FrvQ .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-l__1FrvQ .NestedMenu_row__48g5c svg{height:18px;width:18px}.NestedMenu_size-xl__jiXmT .NestedMenu_back__dNsDV,.NestedMenu_size-xl__jiXmT .NestedMenu_item__tgbZm,.NestedMenu_size-xl__jiXmT .NestedMenu_row__48g5c{font-size:18px;gap:12px;padding:12px 16px}.NestedMenu_size-xl__jiXmT.NestedMenu_content__OyLXN{max-width:360px;min-width:260px;padding:8px}.NestedMenu_size-xl__jiXmT .NestedMenu_back__dNsDV svg,.NestedMenu_size-xl__jiXmT .NestedMenu_chevron__8i-Po,.NestedMenu_size-xl__jiXmT .NestedMenu_icon__4g2Yp svg,.NestedMenu_size-xl__jiXmT .NestedMenu_row__48g5c svg{height:22px;width:22px}";
+var S = {"root":"NestedMenu_root__ybyGA","trigger":"NestedMenu_trigger__zBeNI","content":"NestedMenu_content__OyLXN","list":"NestedMenu_list__Q55Aa","itemPopup":"NestedMenu_itemPopup__kMaxU","itemTrigger":"NestedMenu_itemTrigger__a7XHw","itemWrap":"NestedMenu_itemWrap__Qmc0B","item":"NestedMenu_item__tgbZm","row":"NestedMenu_row__48g5c","back":"NestedMenu_back__dNsDV","itemActive":"NestedMenu_itemActive__RfPZH","itemDisabled":"NestedMenu_itemDisabled__evVk1","itemDanger":"NestedMenu_itemDanger__oAJbP","icon":"NestedMenu_icon__4g2Yp","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","multiline":"NestedMenu_multiline__MDdk-","chevron":"NestedMenu_chevron__8i-Po","stacked":"NestedMenu_stacked__rMiOi","stackedBody":"NestedMenu_stackedBody__Fbkma","size-xs":"NestedMenu_size-xs__yUJ0q","size-s":"NestedMenu_size-s__2n2te","size-m":"NestedMenu_size-m__B8zm5","size-l":"NestedMenu_size-l__1FrvQ","size-xl":"NestedMenu_size-xl__jiXmT"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Popup/Popup.helpers.js

@@ -118,10 +118,6 @@ const getPopupId = (elem, attr = 'data-popup-id') => {
     const id = elem.getAttribute(attr);
     return id ? parseInt(id, 10) : null;
 };
-function isLastChild(rootId, id) {
-    const ids = childs[rootId];
-    return ids && ids[ids.length - 1] === id;
-}
 function setChild(rootId, id) {
     if (!childs[rootId])
         childs[rootId] = [];
@@ -133,4 +129,4 @@ function unsetChild(rootId, id) {
         delete childs[rootId];
 }
 
-export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isEditable, isLastChild, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };
+export { ZERO_BOUNDARY_FIT, childs, constrainAxisShift, domRectToEdges, edgesWidth, fitRectToBoundary, getId, getPopupId, intersectEdges, isEditable, popupBoundaryEdges, popupBoundaryPadding, setChild, shiftMarginsIntoBounds, shrinkEdgesUniform, unsetChild, viewportClientRectEdges };

package/dist/esm/src/components/Popup/Popup.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, isLastChild, unsetChild, childs, isEditable, setChild } from './Popup.helpers.js';
+import { ZERO_BOUNDARY_FIT, getId, getPopupId, popupBoundaryEdges, popupBoundaryPadding, edgesWidth, fitRectToBoundary, childs, isEditable, setChild, unsetChild } from './Popup.helpers.js';
 import { observe, unobserve } from '../../tools/resizeObserver.js';
 import { Component, createRef } from 'react';
 import { Paranja } from '../Paranja/Paranja.js';
@@ -8,7 +8,6 @@ import { config } from '../../tools/config.js';
 import S from './Popup.styl.js';
 import Time from 'timen';
 import cn from 'classnames';
-import debounce from '../../tools/debounce.js';
 import { getCoords } from '../../tools/dom.js';
 import { isBrowser } from '../../tools/env.js';
 import throttle from '../../tools/throttle.js';
@@ -16,6 +15,7 @@ import throttle from '../../tools/throttle.js';
 const ANIMATION_DURATION = 100;
 const OFFSET_GAP = 10;
 const BOUNDARY_FIT_EPSILON = 1;
+const HOVER_CLOSE_DELAY = 160;
 class Popup extends Component {
     rootElem = createRef();
     triggerElem = createRef();
@@ -33,11 +33,12 @@ class Popup extends Component {
     };
     focused = false;
     isOpening = false;
+    openedByHover = false;
     pointerPressed = false;
-    subscribedHoverControl = false;
     subscribedSizeChange = false;
     pointerDownTarget = null;
     isPointerPressedInside = false;
+    hoverCloseUnsub = null;
     id;
     parentPopupContent;
     timers = Time.create();
@@ -63,7 +64,7 @@ class Popup extends Component {
         this.id = getId();
     }
     componentDidMount() {
-        const { hoverControl, focusControl } = this.props;
+        const { focusControl } = this.props;
         const vv = isBrowser ? window.visualViewport : null;
         if (vv) {
             vv.addEventListener('resize', this.onBoundaryGeometryChange);
@@ -81,8 +82,6 @@ class Popup extends Component {
             document.addEventListener('keydown', this.onDocKeyDown, true);
             document.addEventListener('keyup', this.onDocKeyUp);
         }
-        if (hoverControl)
-            this.subscribeHoverControl();
         this.subscribeScroll();
         if (this.state.isOpen &&
             this.state.isContentVisible &&
@@ -95,15 +94,11 @@ class Popup extends Component {
             this.scheduleComputeShift();
     }, 100);
     componentDidUpdate(prevProps, prevState) {
-        const { isOpen, disabled, hoverControl } = this.props;
+        const { isOpen, disabled } = this.props;
         if (disabled !== prevProps.disabled) {
             this.setState({ isOpen: false }); // close when receive disabled=true
             return;
         }
-        if (!prevProps.hoverControl && hoverControl)
-            this.subscribeHoverControl();
-        if (prevProps.hoverControl && !hoverControl)
-            this.unsubscribeHoverControl();
         if (typeof isOpen === 'boolean' && isOpen !== prevProps.isOpen) {
             isOpen ? this.open() : this.close();
         }
@@ -138,7 +133,7 @@ class Popup extends Component {
         if (this.scrollParent) {
             this.scrollParent.removeEventListener('scroll', this.close);
         }
-        this.unsubscribeHoverControl();
+        this.cancelHoverClose();
         this.unsubscribeSizeChange();
         this.unsubscribeScroll();
     }
@@ -162,20 +157,6 @@ class Popup extends Component {
         unobserve(this.triggerElem.current);
         unobserve(this.containerElem);
     }
-    subscribeHoverControl() {
-        if (this.subscribedHoverControl)
-            return;
-        this.subscribedHoverControl = true;
-        document.addEventListener('pointermove', this.checkHover);
-        document.addEventListener('pointerup', this.checkHover);
-    }
-    unsubscribeHoverControl() {
-        if (!this.subscribedHoverControl)
-            return;
-        this.subscribedHoverControl = false;
-        document.removeEventListener('pointermove', this.checkHover);
-        document.removeEventListener('pointerup', this.checkHover);
-    }
     updateBounds() {
         if (!this.containerElem)
             return;
@@ -268,33 +249,6 @@ class Popup extends Component {
             this.setState({ boundaryFit });
         }
     }
-    checkHover = debounce((e) => {
-        if (this.isPointerPressedInside)
-            return;
-        const { isOpen, rootPopupId } = this.state;
-        const overTrigger = this.isPointerOver(e.target, S.trigger);
-        const overContent = this.isPointerOver(e.target, S.content);
-        if (!isOpen) {
-            if (overTrigger)
-                this.open();
-            return;
-        }
-        // isOpen
-        if (overTrigger || overContent)
-            return;
-        if (typeof rootPopupId === 'number') {
-            if (isLastChild(rootPopupId, this.id)) {
-                this.close();
-                unsetChild(rootPopupId, this.id);
-            }
-        }
-        else {
-            const isOverAnyPopupContent = e.target.closest(`.${S.content}`);
-            if (!isOverAnyPopupContent || !childs[this.id]?.length) {
-                this.close();
-            }
-        }
-    }, 100);
     isControllable = () => typeof this.props.isOpen === 'boolean';
     isLastClickInside = () => this.pointerDownTarget &&
         (this.pointerDownTarget.closest(`.${S.trigger}`) ||
@@ -305,12 +259,81 @@ class Popup extends Component {
         this.timers.after(100, () => (this.pointerDownTarget = null));
     };
     onDocPointerUp = (e) => {
-        if (!this.isPointerPressedInside)
-            this.close();
+        const pressedInside = this.isPointerPressedInside;
         this.isPointerPressedInside = false;
+        if (!this.state.isOpen || pressedInside)
+            return;
+        if (this.isHoverInside(e.target))
+            return;
+        this.close();
     };
     isPointerOver(target, elem) {
-        return target.closest(`.${elem}[data-popup-id="${this.id}"]`);
+        return (target instanceof Element &&
+            target.closest(`.${elem}[data-popup-id="${this.id}"]`));
+    }
+    isHoverInside(target) {
+        return (this.isPointerOver(target, S.trigger) ||
+            this.isPointerOver(target, S.content));
+    }
+    isRelatedHover(target) {
+        if (!(target instanceof Element))
+            return false;
+        if (this.isHoverInside(target))
+            return true;
+        const popupEl = target.closest('[data-popup-id]');
+        if (!popupEl)
+            return false;
+        const id = getPopupId(popupEl);
+        if (id == null || id === this.id)
+            return false;
+        if (childs[this.id]?.includes(id))
+            return true;
+        const { rootPopupId } = this.state;
+        return rootPopupId != null && childs[rootPopupId]?.includes(id);
+    }
+    cancelHoverClose() {
+        this.hoverCloseUnsub?.();
+        this.hoverCloseUnsub = null;
+    }
+    scheduleHoverClose() {
+        this.cancelHoverClose();
+        this.hoverCloseUnsub = Time.after(HOVER_CLOSE_DELAY, () => {
+            this.hoverCloseUnsub = null;
+            this.close();
+        });
+    }
+    onHoverEnter = () => {
+        if (!this.props.hoverControl)
+            return;
+        this.cancelHoverClose();
+        if (!this.state.isOpen) {
+            this.openedByHover = true;
+            this.open();
+        }
+    };
+    onHoverLeave = (e) => {
+        if (!this.props.hoverControl)
+            return;
+        if (this.isRelatedHover(e.relatedTarget)) {
+            this.cancelHoverClose();
+            return;
+        }
+        this.scheduleHoverClose();
+    };
+    bindHoverHandlers(props = {}) {
+        const enter = props.onPointerEnter;
+        const leave = props.onPointerLeave;
+        return {
+            ...props,
+            onPointerEnter: (e) => {
+                this.onHoverEnter();
+                enter?.(e);
+            },
+            onPointerLeave: (e) => {
+                this.onHoverLeave(e);
+                leave?.(e);
+            },
+        };
     }
     onScroll = throttle(e => {
         if (!this.state.isOpen) {
@@ -347,8 +370,12 @@ class Popup extends Component {
     };
     onTriggerPointerUp = e => {
         this.pointerPressed = false;
-        if (e.traget === this.pointerDownTarget)
-            this.toggle();
+        if (e.target !== this.pointerDownTarget)
+            return;
+        // Hover already opened — don't toggle shut on the same pointer.
+        if (this.state.isOpen && this.openedByHover)
+            return;
+        this.toggle();
     };
     onFocus = e => {
         this.focused = true;
@@ -393,8 +420,13 @@ class Popup extends Component {
     };
     close = () => {
         this.isOpening = false;
+        this.openedByHover = false;
+        this.cancelHoverClose();
         if (!this.state.isOpen)
             return;
+        const { rootPopupId } = this.state;
+        if (rootPopupId)
+            unsetChild(rootPopupId, this.id);
         this.unsubscribeSizeChange();
         this.changeState(false, this.afterClose);
     };
@@ -438,9 +470,17 @@ class Popup extends Component {
         if (!disableTrigger) {
             triggerProps.role = 'button';
             if (hoverControl) {
-                Object.assign(triggerProps, {
-                    onPointerDown: this.onTriggerPointerDown,
-                    onPointerUp: this.onTriggerPointerUp,
+                const userDown = triggerProps.onPointerDown;
+                const userUp = triggerProps.onPointerUp;
+                Object.assign(triggerProps, this.bindHoverHandlers(triggerProps), {
+                    onPointerDown: e => {
+                        this.onTriggerPointerDown(e);
+                        userDown?.(e);
+                    },
+                    onPointerUp: e => {
+                        this.onTriggerPointerUp(e);
+                        userUp?.(e);
+                    },
                 });
             }
             if (focusControl) {
@@ -453,7 +493,10 @@ class Popup extends Component {
         return (jsx("div", { className: classesTrigger, ...triggerProps, suppressHydrationWarning: true, "data-popup-id": this.id, ref: this.triggerElem, children: trigger }));
     }
     renderContent() {
-        const { content, contentProps = {}, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, } = this.props;
+        const { content, wrapperProps = {}, size, disabled, inline, outlined, animated, paranja, blur, round, elevation, hoverControl, } = this.props;
+        const contentProps = hoverControl
+            ? this.bindHoverHandlers(this.props.contentProps ?? {})
+            : (this.props.contentProps ?? {});
         const { isOpen, isContentVisible, animating, direction, triggerBounds, rootPopupId, boundaryFit, } = this.state;
         if (disabled)
             return null;
@@ -471,6 +514,15 @@ class Popup extends Component {
                 ...(shiftTf ? { transform: shiftTf } : {}),
             };
         }
+        // Nested popups portal as siblings of the parent wrapper. A transform on
+        // the parent creates a stacking context, so the child needs a higher
+        // z-index or it paints under the parent (looks like it never opened).
+        if (rootPopupId) {
+            wrapperProps.style = {
+                ...wrapperProps.style,
+                zIndex: 12,
+            };
+        }
         const contentNode = (jsx("div", { ...wrapperProps, className: wrapperClasses, children: jsxs("div", { ...contentProps, ref: this.onContainerElemRef, className: classes, suppressHydrationWarning: true, "data-popup-id": this.id, "data-root-popup-id": rootPopupId, style: {
                     ...(contentProps.style ?? {}),
                     ...(boundaryFit.maxWidth !== null && boundaryFit.maxWidth > 0

package/dist/esm/src/components/Popup/Popup.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;pointer-events:all}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-sizing:border-box;max-width:min(min(560px,70vw),calc(100svw - 16px));min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
+var css_248z = ".Popup_root__uQ-fP{display:inline-block;position:relative}.Popup_contentWrapper__2yi-2{opacity:0;pointer-events:none;position:absolute}.Popup_contentWrapper__2yi-2.Popup_animating__kR0qF{transition:opacity .1s ease-out}.Popup_contentWrapper__2yi-2.Popup_isOpen__BRIdP{opacity:1;z-index:11}.Popup_contentWrapper__2yi-2.Popup_inline__1-l1S.Popup_isOpen__BRIdP{position:relative}.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S),.Popup_contentWrapper__2yi-2:not(.Popup_inline__1-l1S)>.Popup_content__e8Qyu{position:absolute}.Popup_trigger__jQNaQ{cursor:pointer}.Popup_trigger__jQNaQ.Popup_isOpen__BRIdP{position:relative;z-index:11}.Popup_trigger__jQNaQ.Popup_disabled__DlE9y{opacity:.4;pointer-events:none}.Popup_content__e8Qyu{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-sizing:border-box;max-width:min(min(560px,70vw),calc(100svw - 16px));min-width:100%;overflow:hidden;position:relative;transform-origin:top center;z-index:11}.Popup_content__e8Qyu:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_content__e8Qyu.Popup_blur__1hfU8{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_size-xs__7QR-d{border-radius:4px}.Popup_content__e8Qyu.Popup_size-xs__7QR-d.Popup_round__7rD1m{border-radius:12px}.Popup_content__e8Qyu.Popup_size-s__UmixP{border-radius:4px}.Popup_content__e8Qyu.Popup_size-s__UmixP.Popup_round__7rD1m{border-radius:16px}.Popup_content__e8Qyu.Popup_size-m__FYpTL{border-radius:6px}.Popup_content__e8Qyu.Popup_size-m__FYpTL.Popup_round__7rD1m{border-radius:20px}.Popup_content__e8Qyu.Popup_size-l__BTS57{border-radius:8px}.Popup_content__e8Qyu.Popup_size-l__BTS57.Popup_round__7rD1m{border-radius:24px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc{border-radius:10px}.Popup_content__e8Qyu.Popup_size-xl__fSfCc.Popup_round__7rD1m{border-radius:28px}.Popup_content__e8Qyu.Popup_elevation-1__vmP3e{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-3) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_elevation-2__Ci4sI{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 0 var(--p-5) 2px var(--decent-color-alpha-500)}.Popup_content__e8Qyu.Popup_outlined__g3cJV:after{border-radius:inherit;bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.Popup_isOpen__BRIdP .Popup_content__e8Qyu{opacity:1;pointer-events:all;transform:scaleX(1)}.Popup_animating__kR0qF{transition:70ms ease-out;transition-property:transform,opacity,margin}.Popup_axis-top__BaLgG{bottom:100%}.Popup_axis-bottom__hZwwr{top:100%}.Popup_axis-right__LMYVy{left:100%}.Popup_axis-left__SFKm-{right:100%}.Popup_float-top__8SQAu{bottom:0}.Popup_float-right__mdm-3{left:0}.Popup_float-bottom__7flve{top:0}.Popup_float-left__tz7fX{right:0}.Popup_axis-bottom__hZwwr,.Popup_axis-top__BaLgG{transform:scaleY(.5)}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{left:50%;transform:translateX(-50%) scaleY(.5)}.Popup_isOpen__BRIdP .Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform:translateX(-50%) scaleX(1)}.Popup_axis-left__SFKm-,.Popup_axis-right__LMYVy{transform:scaleX(.5)}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{top:50%;transform:translateY(-50%) scaleX(.5)}.Popup_isOpen__BRIdP .Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1,.Popup_isOpen__BRIdP .Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform:translateY(-50%) scaleX(1)}.Popup_axis-top__BaLgG.Popup_float-middle__Dmnn1{transform-origin:bottom center}.Popup_axis-top__BaLgG.Popup_float-right__mdm-3{transform-origin:bottom left}.Popup_axis-top__BaLgG.Popup_float-left__tz7fX{transform-origin:bottom right}.Popup_axis-bottom__hZwwr.Popup_float-middle__Dmnn1{transform-origin:top center}.Popup_axis-bottom__hZwwr.Popup_float-right__mdm-3{transform-origin:top left}.Popup_axis-bottom__hZwwr.Popup_float-left__tz7fX{transform-origin:top right}.Popup_axis-right__LMYVy.Popup_float-middle__Dmnn1{transform-origin:center left}.Popup_axis-right__LMYVy.Popup_float-top__8SQAu{transform-origin:bottom left}.Popup_axis-right__LMYVy.Popup_float-bottom__7flve{transform-origin:top left}.Popup_axis-left__SFKm-.Popup_float-middle__Dmnn1{transform-origin:center right}.Popup_axis-left__SFKm-.Popup_float-top__8SQAu{transform-origin:bottom right}.Popup_axis-left__SFKm-.Popup_float-bottom__7flve{transform-origin:top right}";
 var S = {"root":"Popup_root__uQ-fP","contentWrapper":"Popup_contentWrapper__2yi-2","animating":"Popup_animating__kR0qF","isOpen":"Popup_isOpen__BRIdP","inline":"Popup_inline__1-l1S","content":"Popup_content__e8Qyu","trigger":"Popup_trigger__jQNaQ","disabled":"Popup_disabled__DlE9y","blur":"Popup_blur__1hfU8","size-xs":"Popup_size-xs__7QR-d","round":"Popup_round__7rD1m","size-s":"Popup_size-s__UmixP","size-m":"Popup_size-m__FYpTL","size-l":"Popup_size-l__BTS57","size-xl":"Popup_size-xl__fSfCc","elevation-1":"Popup_elevation-1__vmP3e","elevation-2":"Popup_elevation-2__Ci4sI","outlined":"Popup_outlined__g3cJV","axis-top":"Popup_axis-top__BaLgG","axis-bottom":"Popup_axis-bottom__hZwwr","axis-right":"Popup_axis-right__LMYVy","axis-left":"Popup_axis-left__SFKm-","float-top":"Popup_float-top__8SQAu","float-right":"Popup_float-right__mdm-3","float-bottom":"Popup_float-bottom__7flve","float-left":"Popup_float-left__tz7fX","float-middle":"Popup_float-middle__Dmnn1"};
 styleInject(css_248z);
 

package/dist/esm/src/components/PromptComposer/PromptComposer.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_scroller__Sueif{flex:1;max-height:200px;min-height:40px;width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq{border:none!important;box-shadow:none!important;flex:1;margin:0;min-height:40px!important;outline:none!important;overflow:hidden!important;padding:var(--p-2) 0 0!important;resize:none!important;transition:opacity .1s ease-out;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a{color:var(--link-color)}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a:hover{cursor:pointer;opacity:.8}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEmptyEditor__VrwNe .PromptComposer_promptComposerEmptyNode__62Ylm:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
-var S = {"root":"PromptComposer_root__gfdXN","scroller":"PromptComposer_scroller__Sueif","editorMount":"PromptComposer_editorMount__B9G-o","promptComposerEditor":"PromptComposer_promptComposerEditor__yQIpq","promptComposerEmptyEditor":"PromptComposer_promptComposerEmptyEditor__VrwNe","promptComposerEmptyNode":"PromptComposer_promptComposerEmptyNode__62Ylm"};
+var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_scroller__Sueif{flex:1;max-height:200px;min-height:40px;width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq{border:none!important;box-shadow:none!important;flex:1;margin:0;min-height:40px!important;outline:none!important;overflow:hidden!important;padding:var(--p-2) 0 0!important;resize:none!important;transition:opacity .1s ease-out;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a{color:var(--link-color)}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEditor__yQIpq a:hover{cursor:pointer;opacity:.8}.PromptComposer_editorMount__B9G-o .PromptComposer_promptComposerEmptyNode__62Ylm:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
+var S = {"root":"PromptComposer_root__gfdXN","scroller":"PromptComposer_scroller__Sueif","editorMount":"PromptComposer_editorMount__B9G-o","promptComposerEditor":"PromptComposer_promptComposerEditor__yQIpq","promptComposerEmptyNode":"PromptComposer_promptComposerEmptyNode__62Ylm"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Select/Select2.js

@@ -245,7 +245,7 @@ function Select2(props) {
         const inputValue = isSearching ? searchVal : isMultiple$1 ? '' : selectedLabel;
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
-            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
+            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, selectAllOnFocus: true, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
     };
     const renderTriggerButton = () => {
         const { label, className, ...rest } = triggerProps;

package/dist/esm/src/components/TextShimmer/TextShimmer.js

@@ -8,12 +8,11 @@ function TextShimmerComponent({ children, as: Component = 'p', className, durati
         const raw = Math.min(48, 3.5 + Math.max(0, Math.min(1, spread / 10)) * 100.5);
         // Wide blend stops “vertical knife” artefacts when the ramp only spans few pixels inside the glyph mask.
         const ridgeHalf = Math.min(49, Math.max(36, raw + 17));
-        const baseColor = inverted
-            ? 'var(--txt-sh-highlight)'
-            : 'var(--txt-sh-fill)';
-        const bandColor = inverted
-            ? 'var(--txt-sh-fill)'
-            : 'var(--txt-sh-highlight)';
+        // Resolve on the gradient so ancestor --txt-sh-* inherit. --decent-color is the surface.
+        const fill = 'var(--txt-sh-fill, var(--text-shimmer-decent-tone, var(--accent-color)))';
+        const highlight = 'var(--txt-sh-highlight, var(--text-shimmer-accent-tone, var(--active-color)))';
+        const baseColor = inverted ? highlight : fill;
+        const bandColor = inverted ? fill : highlight;
         const backgroundGradient = `linear-gradient(90deg, ${baseColor} calc(50% - ${ridgeHalf}%), ${bandColor} 50%, ${baseColor} calc(50% + ${ridgeHalf}%))`;
         return { backgroundGradient };
     }, [spread, inverted]);

package/dist/esm/src/components/TextShimmer/TextShimmer.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".TextShimmer_root__cnKtV{-webkit-text-fill-color:transparent;-webkit-font-smoothing:antialiased;--txt-sh-fill:var(--text-shimmer-decent-tone,var(--accent-color));--txt-sh-highlight:var(--text-shimmer-accent-tone,var(--decent-color));animation:TextShimmer_textShimmer__w7rQj 1s linear infinite;animation:TextShimmer_textShimmer__w7rQj var(--text-shimmer-duration,1s) linear infinite;-webkit-background-clip:text;background-clip:text;background-repeat:repeat-x;background-size:200% 100%;color:transparent!important;display:inline-block;position:relative}@keyframes TextShimmer_textShimmer__w7rQj{0%{background-position:100%}to{background-position:-100%}}";
+var css_248z = ".TextShimmer_root__cnKtV{-webkit-text-fill-color:transparent;-webkit-font-smoothing:antialiased;animation:TextShimmer_textShimmer__w7rQj 1s linear infinite;animation:TextShimmer_textShimmer__w7rQj var(--text-shimmer-duration,1s) linear infinite;-webkit-background-clip:text;background-clip:text;background-repeat:repeat-x;background-size:200% 100%;color:transparent!important;display:inline-block;position:relative}@keyframes TextShimmer_textShimmer__w7rQj{0%{background-position:100%}to{background-position:-100%}}";
 var S = {"root":"TextShimmer_root__cnKtV","textShimmer":"TextShimmer_textShimmer__w7rQj"};
 styleInject(css_248z);
 

package/dist/esm/src/components/TextWithDeferTooltip/TextWithDeferTooltip.js

@@ -3,6 +3,39 @@ import { useState, useRef } from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import S from './TextWithDeferTooltip.styl.js';
 
+function clipsOverflow(style, axis) {
+    const overflow = axis === 'x' ? style.overflowX : style.overflowY;
+    if (overflow === 'hidden' || overflow === 'auto' || overflow === 'scroll') {
+        return true;
+    }
+    if (axis === 'x' && style.textOverflow === 'ellipsis')
+        return true;
+    if (axis === 'y' &&
+        style.webkitLineClamp &&
+        style.webkitLineClamp !== 'none') {
+        return true;
+    }
+    return false;
+}
+function isNodeOverflowing(node) {
+    const style = getComputedStyle(node);
+    if (clipsOverflow(style, 'x') && node.scrollWidth - node.clientWidth > 1) {
+        return true;
+    }
+    if (clipsOverflow(style, 'y') && node.scrollHeight - node.clientHeight > 1) {
+        return true;
+    }
+    return false;
+}
+function isTextOverflowing(root) {
+    if (isNodeOverflowing(root))
+        return true;
+    for (const child of root.querySelectorAll('*')) {
+        if (isNodeOverflowing(child))
+            return true;
+    }
+    return false;
+}
 function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bottom', overTrigger = false, ...props }) {
     const [withTooltip, setWithTooltip] = useState(false);
     const [tooltipWidth, setTooltipWidth] = useState();
@@ -11,9 +44,7 @@ function TextWithDeferTooltip({ className, children, width, maxWidth, side = 'bo
     const handleMouseEnter = () => {
         if (!ref.current)
             return;
-        const isOverflowingHorizontally = ref.current.scrollWidth - ref.current.clientWidth > 3;
-        const isOverflowingVertically = ref.current.scrollHeight - ref.current.clientHeight > 3;
-        if (isOverflowingHorizontally || isOverflowingVertically) {
+        if (isTextOverflowing(ref.current)) {
             if (width != null) {
                 setTooltipWidth(width);
             }

package/dist/esm/types/src/components/FormattedText/FormattedText.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Input/Input.d.ts

@@ -24,4 +24,5 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
     checkAutofill?: boolean;
     scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
     fitContentWidth?: boolean;
+    selectAllOnFocus?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/types/src/components/Input/Input.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/Input/Input.types.d.ts

@@ -28,4 +28,6 @@ export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Om
     scrollProps?: Partial<ScrollProps>;
     /** When true, width follows text via CSS `field-sizing: content` (non-textarea only). */
     fitContentWidth?: boolean;
+    /** Select the current value when the field is focused. */
+    selectAllOnFocus?: boolean;
 };

package/dist/esm/types/src/components/NestedMenu/NestedMenu.d.ts

@@ -1,7 +1,7 @@
 import * as T from './NestedMenu.types';
 export declare function NestedMenuLabel({ children, className, }: T.NestedMenuLabelProps): import("react").JSX.Element;
 export declare function NestedMenuItemRow({ children, className, danger, disabled, href, target, rel, onClick, }: T.NestedMenuRowProps): import("react").JSX.Element;
-declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, className, }: T.Props): import("react").JSX.Element;
+declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, size, className, popupProps, }: T.Props): import("react").JSX.Element;
 export declare const NestedMenu: typeof NestedMenuComponent & {
     Item: typeof NestedMenuItemRow;
     Label: typeof NestedMenuLabel;

package/dist/esm/types/src/components/NestedMenu/NestedMenu.types.d.ts

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+import { Size } from 'uilib/types';
 export type NestedMenuItem = {
     id: string;
     label: ReactNode;
@@ -19,7 +21,9 @@ export type Props = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     align?: 'start' | 'end';
+    size?: Size;
     className?: string;
+    popupProps?: Partial<PopupProps>;
 };
 export type NestedMenuProps = Props;
 export type NestedMenuRowProps = {

package/dist/esm/types/src/components/Popup/Popup.d.ts

@@ -10,11 +10,12 @@ export declare class Popup extends Component<T.Props, T.State> {
     onContainerElemRef: (elem: any) => void;
     focused: boolean;
     isOpening: boolean;
+    openedByHover: boolean;
     pointerPressed: boolean;
-    subscribedHoverControl: boolean;
     subscribedSizeChange: boolean;
     pointerDownTarget: any;
     isPointerPressedInside: boolean;
+    hoverCloseUnsub: (() => void) | null;
     id: any;
     parentPopupContent: any;
     timers: any;
@@ -36,8 +37,6 @@ export declare class Popup extends Component<T.Props, T.State> {
     subscribeScroll(): void;
     unsubscribeScroll(): void;
     unsubscribeSizeChange(): void;
-    subscribeHoverControl(): void;
-    unsubscribeHoverControl(): void;
     updateBounds(): void;
     updateBoundsThrottled: any;
     scheduleComputeShift(): void;
@@ -47,12 +46,21 @@ export declare class Popup extends Component<T.Props, T.State> {
         maxWidth: number | null;
     };
     setBoundaryFit(boundaryFit: H.BoundaryFit): void;
-    checkHover: any;
     isControllable: () => boolean;
     isLastClickInside: () => any;
     onDocPointerDown: (e: PointerEvent) => void;
     onDocPointerUp: (e: PointerEvent) => void;
-    isPointerOver(target: any, elem: any): any;
+    isPointerOver(target: any, elem: any): Element;
+    isHoverInside(target: any): Element;
+    isRelatedHover(target: any): boolean;
+    cancelHoverClose(): void;
+    scheduleHoverClose(): void;
+    onHoverEnter: () => void;
+    onHoverLeave: (e: PointerEvent) => void;
+    bindHoverHandlers(props?: Record<string, unknown>): {
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+    };
     onScroll: any;
     onDocKeyDown: (e: KeyboardEvent) => void;
     onDocKeyUp: (e: KeyboardEvent) => void;

package/dist/esm/types/src/components/Select/Select.d.ts

@@ -28,6 +28,7 @@ export declare class Select extends Component<T.Props, T.State> {
         checkAutofill?: boolean;
         scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
         fitContentWidth?: boolean;
+        selectAllOnFocus?: boolean;
     } & import("react").RefAttributes<HTMLInputElement>>>;
     triggerInputRef: import("react").RefObject<HTMLDivElement>;
     contentRef: import("react").RefObject<HTMLDivElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.11.0",
+  "version": "5.13.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",