@homecode/ui 5.20.13 → 5.20.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,12 +3,15 @@ import { useState, useEffect } from 'react';
|
|
|
3
3
|
import { Icon } from '../Icon/Icon.js';
|
|
4
4
|
import { Input } from '../Input/Input.js';
|
|
5
5
|
import { Popup } from '../Popup/Popup.js';
|
|
6
|
+
import { Scroll } from '../Scroll/Scroll.js';
|
|
6
7
|
import S from './NestedMenu.styl.js';
|
|
7
8
|
import cn from 'classnames';
|
|
8
9
|
|
|
9
10
|
const MOBILE_MQ = '(max-width: 720px)';
|
|
10
11
|
const HOVER_MQ = '(hover: hover) and (pointer: fine)';
|
|
11
12
|
const ICON_SIZE = { xs: 'xs', s: 'xs', m: 'xs', l: 's', xl: 'm' };
|
|
13
|
+
// Scrollbar grows with the menu size, up to `m`.
|
|
14
|
+
const SCROLL_SIZE = { xs: 'xs', s: 's', m: 'm', l: 'm', xl: 'm' };
|
|
12
15
|
function useMedia(query) {
|
|
13
16
|
const [matches, setMatches] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
|
|
14
17
|
useEffect(() => {
|
|
@@ -48,6 +51,12 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
48
51
|
const canHover = useMedia(HOVER_MQ);
|
|
49
52
|
const active = items.find(item => item.id === activeId);
|
|
50
53
|
const iconSize = ICON_SIZE[size];
|
|
54
|
+
const scrollProps = {
|
|
55
|
+
y: true,
|
|
56
|
+
size: SCROLL_SIZE[size],
|
|
57
|
+
fadeSize: size,
|
|
58
|
+
offset: { y: { after: 8 } },
|
|
59
|
+
};
|
|
51
60
|
const contentClass = cn(S.content, S[`size-${size}`]);
|
|
52
61
|
function close() {
|
|
53
62
|
onOpenChange(false);
|
|
@@ -151,7 +160,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
151
160
|
}, contentProps: {
|
|
152
161
|
...popupProps?.contentProps,
|
|
153
162
|
className: cn(contentClass, popupProps?.contentProps?.className),
|
|
154
|
-
}, content: jsx("div", { className: S.list, role: "menu", children: stacked && active ? (jsxs(
|
|
163
|
+
}, content: jsx("div", { className: S.list, role: "menu", children: stacked && active ? (jsxs(Scroll, { ...scrollProps, className: S.stacked, innerClassName: S.stackedInner, 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 })] })) : searchable ? (jsxs(Fragment, { children: [jsx(Input, { className: S.search, size: size, value: query, placeholder: searchPlaceholder, autoFocus: true, hasClear: true, onChange: (_, value) => setQuery(String(value)), controlProps: {
|
|
155
164
|
// Enter picks the first match.
|
|
156
165
|
onKeyDown: e => {
|
|
157
166
|
if (e.key !== 'Enter' || !visibleItems[0])
|
|
@@ -159,7 +168,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
159
168
|
handleItemClick(visibleItems[0].id, e);
|
|
160
169
|
e.preventDefault();
|
|
161
170
|
},
|
|
162
|
-
} }), jsx(
|
|
171
|
+
} }), jsx(Scroll, { ...scrollProps, className: S.searchList, innerClassName: S.searchListInner, children: visibleItems.length > 0 ? (renderItems()) : (jsx("div", { className: S.searchEmpty, children: searchEmpty })) })] })) : (renderItems()) }) }));
|
|
163
172
|
}
|
|
164
173
|
const NestedMenu = Object.assign(NestedMenuComponent, {
|
|
165
174
|
Item: NestedMenuItemRow,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var css_248z = ".NestedMenu_root__ybyGA,.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_content__OyLXN{box-sizing:border-box;max-width:min(100vw - 16px,360px);min-width:0;padding:4px;width:-moz-fit-content;width:fit-content}.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;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}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_text__0iCNy{display:flex;flex:1 1 auto;flex-direction:column;gap:0;justify-content:center;min-width:-moz-min-content;min-width:min-content}.NestedMenu_text__0iCNy .NestedMenu_label__Jnm6l{flex:none}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;line-height:1.2;margin:0;opacity:.5;white-space:nowrap}.NestedMenu_label__Jnm6l{flex:1;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_wrap__3b6E1 .NestedMenu_text__0iCNy{min-width:0}.NestedMenu_wrap__3b6E1 .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip;white-space:normal}.NestedMenu_wrap__3b6E1 .NestedMenu_hint__hotNP{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{
|
|
2
|
-
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","text":"NestedMenu_text__0iCNy","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","wrap":"NestedMenu_wrap__3b6E1","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","search":"NestedMenu_search__1g86f","searchEmpty":"NestedMenu_searchEmpty__-cnnf","searchList":"NestedMenu_searchList__Tjdl-"};
|
|
1
|
+
var css_248z = ".NestedMenu_root__ybyGA,.NestedMenu_trigger__zBeNI{display:inline-flex}.NestedMenu_content__OyLXN{box-sizing:border-box;max-width:min(100vw - 16px,360px);min-width:0;padding:4px;width:-moz-fit-content;width:fit-content}.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;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}.NestedMenu_icon__4g2Yp svg{display:block}.NestedMenu_text__0iCNy{display:flex;flex:1 1 auto;flex-direction:column;gap:0;justify-content:center;min-width:-moz-min-content;min-width:min-content}.NestedMenu_text__0iCNy .NestedMenu_label__Jnm6l{flex:none}.NestedMenu_hint__hotNP{flex-shrink:0;font-weight:400;line-height:1.2;margin:0;opacity:.5;white-space:nowrap}.NestedMenu_label__Jnm6l{flex:1;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NestedMenu_wrap__3b6E1 .NestedMenu_text__0iCNy{min-width:0}.NestedMenu_wrap__3b6E1 .NestedMenu_label__Jnm6l{overflow:visible;text-overflow:clip;white-space:normal}.NestedMenu_wrap__3b6E1 .NestedMenu_hint__hotNP{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{max-height:min(360px,calc(100vh - 24px))}.NestedMenu_stackedInner__t-EYH{display:flex;flex-direction:column}.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{border-radius:6px;font-size:12px;gap:6px;padding:4px 8px}.NestedMenu_size-s__2n2te.NestedMenu_content__OyLXN,.NestedMenu_size-xs__yUJ0q.NestedMenu_content__OyLXN{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{border-radius:9px;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{border-radius:12px;font-size:16px;gap:10px;padding:10px 14px}.NestedMenu_size-l__1FrvQ.NestedMenu_content__OyLXN{max-width:320px;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{border-radius:15px;font-size:18px;gap:12px;padding:12px 16px}.NestedMenu_size-xl__jiXmT.NestedMenu_content__OyLXN{max-width:360px;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}.NestedMenu_search__1g86f{margin-bottom:4px;min-width:120px}.NestedMenu_search__1g86f input{min-width:0;width:100%}.NestedMenu_size-xs__yUJ0q .NestedMenu_search__1g86f>label{border-radius:6px;font-size:12px;height:22.4px;min-height:0;padding-left:8px}.NestedMenu_size-xs__yUJ0q .NestedMenu_searchEmpty__-cnnf{font-size:12px;padding:4px 8px}.NestedMenu_size-xs__yUJ0q .NestedMenu_search__1g86f>label>button{bottom:0;height:22.4px;min-height:0;min-width:0;padding:0;top:0;width:22.4px}.NestedMenu_size-s__2n2te .NestedMenu_search__1g86f>label{border-radius:6px;font-size:12px;height:22.4px;min-height:0;padding-left:8px}.NestedMenu_size-s__2n2te .NestedMenu_searchEmpty__-cnnf{font-size:12px;padding:4px 8px}.NestedMenu_size-s__2n2te .NestedMenu_search__1g86f>label>button{bottom:0;height:22.4px;min-height:0;min-width:0;padding:0;top:0;width:22.4px}.NestedMenu_size-m__B8zm5 .NestedMenu_search__1g86f>label{border-radius:9px;font-size:13px;height:27.6px;min-height:0;padding-left:10px}.NestedMenu_size-m__B8zm5 .NestedMenu_searchEmpty__-cnnf{font-size:13px;padding:6px 10px}.NestedMenu_size-m__B8zm5 .NestedMenu_search__1g86f>label>button{bottom:0;height:27.6px;min-height:0;min-width:0;padding:0;top:0;width:27.6px}.NestedMenu_size-l__1FrvQ .NestedMenu_search__1g86f>label{border-radius:12px;font-size:16px;height:39.2px;min-height:0;padding-left:14px}.NestedMenu_size-l__1FrvQ .NestedMenu_searchEmpty__-cnnf{font-size:16px;padding:10px 14px}.NestedMenu_size-l__1FrvQ .NestedMenu_search__1g86f>label>button{bottom:0;height:39.2px;min-height:0;min-width:0;padding:0;top:0;width:39.2px}.NestedMenu_size-xl__jiXmT .NestedMenu_search__1g86f>label{border-radius:15px;font-size:18px;height:45.6px;min-height:0;padding-left:16px}.NestedMenu_size-xl__jiXmT .NestedMenu_searchEmpty__-cnnf{font-size:18px;padding:12px 16px}.NestedMenu_size-xl__jiXmT .NestedMenu_search__1g86f>label>button{bottom:0;height:45.6px;min-height:0;min-width:0;padding:0;top:0;width:45.6px}.NestedMenu_searchList__Tjdl-{max-height:320px}.NestedMenu_searchListInner__yPHi-{display:flex;flex-direction:column;gap:1px}.NestedMenu_searchEmpty__-cnnf{font-weight:500;line-height:1.2;opacity:.6;white-space:nowrap}";
|
|
2
|
+
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","text":"NestedMenu_text__0iCNy","label":"NestedMenu_label__Jnm6l","hint":"NestedMenu_hint__hotNP","wrap":"NestedMenu_wrap__3b6E1","chevron":"NestedMenu_chevron__8i-Po","stacked":"NestedMenu_stacked__rMiOi","stackedInner":"NestedMenu_stackedInner__t-EYH","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","search":"NestedMenu_search__1g86f","searchEmpty":"NestedMenu_searchEmpty__-cnnf","searchList":"NestedMenu_searchList__Tjdl-","searchListInner":"NestedMenu_searchListInner__yPHi-"};
|
|
3
3
|
if (typeof document !== 'undefined') {
|
|
4
4
|
var __uilibHead = document.head || document.getElementsByTagName('head')[0];
|
|
5
5
|
if (__uilibHead) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;transition
|
|
1
|
+
var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;opacity:.3;transition:.2s ease-out;transition-property:opacity,transform}.Select_root__mjOjv:hover .Select_triggerArrow__1LEop{opacity:1}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_variant-clear__3Htb5 .Select_triggerButton__lErtt{background-color:transparent}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad{padding-right:0}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-xs__2lZQY .Select_option__iJkfJ{border-radius:6px;font-size:14px;height:22px;padding:0 8px}.Select_size-s__qBK9t .Select_option__iJkfJ{border-radius:6px;font-size:16px;height:26px;padding:0 12px}.Select_size-m__jp7n- .Select_option__iJkfJ{border-radius:9px;font-size:18px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{border-radius:12px;font-size:22px;height:42px;padding:0 20px}.Select_size-xl__0OerX .Select_option__iJkfJ{border-radius:15px;font-size:26px;height:50px;padding:0 24px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-xs__2lZQY .Select_expandButton__UTwlR{margin-left:-34px}.Select_size-s__qBK9t .Select_expandButton__UTwlR{margin-left:-37px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_size-xl__0OerX .Select_expandButton__UTwlR{margin-left:-52px}.Select_expandIcon__gWAIB{backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-xs__2lZQY .Select_chipsContainer__JruCi{max-height:90px}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_size-xl__0OerX .Select_chipsContainer__JruCi{max-height:260px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
|
|
2
2
|
var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","variant-clear":"Select_variant-clear__3Htb5","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-xs":"Select_size-xs__2lZQY","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","fadeIn":"Select_fadeIn__QpAwZ"};
|
|
3
3
|
if (typeof document !== 'undefined') {
|
|
4
4
|
var __uilibHead = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useRef, useEffect } from 'react';
|
|
3
3
|
import { TooltipCore } from './TooltipCore.js';
|
|
4
|
-
import {
|
|
4
|
+
import { applyTriggerTextStyles, getTextStyleSource, clearTriggerTextStyles } from './tooltipTextStyles.js';
|
|
5
5
|
|
|
6
|
+
function isPopoverOpen(el) {
|
|
7
|
+
try {
|
|
8
|
+
return el.matches(':popover-open');
|
|
9
|
+
}
|
|
10
|
+
catch {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
6
14
|
const useSimplePositionSetup = ({ triggerRef, tooltipRef, content, delay, direction, }) => {
|
|
7
15
|
const timeoutRef = useRef();
|
|
8
16
|
useEffect(() => {
|
|
@@ -51,13 +59,19 @@ const useSimplePositionSetup = ({ triggerRef, tooltipRef, content, delay, direct
|
|
|
51
59
|
tooltip.hidePopover?.();
|
|
52
60
|
clearTriggerTextStyles(tooltip);
|
|
53
61
|
};
|
|
62
|
+
// New content while open: keep the trigger's font and re-center on the new size.
|
|
63
|
+
if (isPopoverOpen(tooltip)) {
|
|
64
|
+
applyTriggerTextStyles(tooltip, getTextStyleSource(trigger));
|
|
65
|
+
positionTooltip();
|
|
66
|
+
}
|
|
54
67
|
trigger.addEventListener('mouseenter', showTooltip);
|
|
55
68
|
trigger.addEventListener('mouseleave', hideTooltip);
|
|
56
69
|
trigger.addEventListener('focusin', showTooltip);
|
|
57
70
|
trigger.addEventListener('focusout', hideTooltip);
|
|
58
71
|
return () => {
|
|
59
72
|
clearTimeout(timeoutRef.current);
|
|
60
|
-
|
|
73
|
+
if (!isPopoverOpen(tooltip))
|
|
74
|
+
clearTriggerTextStyles(tooltip);
|
|
61
75
|
trigger.removeEventListener('mouseenter', showTooltip);
|
|
62
76
|
trigger.removeEventListener('mouseleave', hideTooltip);
|
|
63
77
|
trigger.removeEventListener('focusin', showTooltip);
|