@homecode/ui 5.20.12 → 5.20.14
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.
- package/dist/esm/src/components/NestedMenu/NestedMenu.js +35 -4
- package/dist/esm/src/components/NestedMenu/NestedMenu.styl.js +2 -2
- package/dist/esm/src/components/Select/Select.styl.js +1 -1
- package/dist/esm/types/src/components/NestedMenu/NestedMenu.d.ts +1 -1
- package/dist/esm/types/src/components/NestedMenu/NestedMenu.test.d.ts +1 -0
- package/dist/esm/types/src/components/NestedMenu/NestedMenu.types.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { Icon } from '../Icon/Icon.js';
|
|
4
|
+
import { Input } from '../Input/Input.js';
|
|
4
5
|
import { Popup } from '../Popup/Popup.js';
|
|
6
|
+
import { Scroll } from '../Scroll/Scroll.js';
|
|
5
7
|
import S from './NestedMenu.styl.js';
|
|
6
8
|
import cn from 'classnames';
|
|
7
9
|
|
|
8
10
|
const MOBILE_MQ = '(max-width: 720px)';
|
|
9
11
|
const HOVER_MQ = '(hover: hover) and (pointer: fine)';
|
|
10
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' };
|
|
11
15
|
function useMedia(query) {
|
|
12
16
|
const [matches, setMatches] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
|
|
13
17
|
useEffect(() => {
|
|
@@ -29,12 +33,30 @@ function NestedMenuItemRow({ children, className, danger, disabled, href, target
|
|
|
29
33
|
}
|
|
30
34
|
return (jsx("button", { type: "button", className: classes, disabled: disabled, onClick: onClick, children: children }));
|
|
31
35
|
}
|
|
32
|
-
function
|
|
36
|
+
function itemSearchText(item) {
|
|
37
|
+
if (item.searchText != null)
|
|
38
|
+
return item.searchText;
|
|
39
|
+
return typeof item.label === 'string' || typeof item.label === 'number'
|
|
40
|
+
? String(item.label)
|
|
41
|
+
: '';
|
|
42
|
+
}
|
|
43
|
+
function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', size = 'm', className, popupProps, onItemClick, searchable = false, searchPlaceholder = 'Search', searchEmpty = 'Nothing found', }) {
|
|
33
44
|
const [activeId, setActiveId] = useState(null);
|
|
45
|
+
const [query, setQuery] = useState('');
|
|
46
|
+
const needle = searchable ? query.trim().toLowerCase() : '';
|
|
47
|
+
const visibleItems = needle
|
|
48
|
+
? items.filter(item => itemSearchText(item).toLowerCase().includes(needle))
|
|
49
|
+
: items;
|
|
34
50
|
const stacked = useMedia(MOBILE_MQ);
|
|
35
51
|
const canHover = useMedia(HOVER_MQ);
|
|
36
52
|
const active = items.find(item => item.id === activeId);
|
|
37
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
|
+
};
|
|
38
60
|
const contentClass = cn(S.content, S[`size-${size}`]);
|
|
39
61
|
function close() {
|
|
40
62
|
onOpenChange(false);
|
|
@@ -49,6 +71,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
49
71
|
useEffect(() => {
|
|
50
72
|
if (!open) {
|
|
51
73
|
setActiveId(null);
|
|
74
|
+
setQuery('');
|
|
52
75
|
return undefined;
|
|
53
76
|
}
|
|
54
77
|
const onKey = (e) => {
|
|
@@ -106,7 +129,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
106
129
|
}, children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), item.hint != null && item.hint !== '' ? (jsxs("span", { className: S.text, children: [jsx("span", { className: S.label, children: item.label }), jsx("span", { className: S.hint, children: item.hint })] })) : (jsx("span", { className: S.label, children: item.label })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: iconSize }))] }));
|
|
107
130
|
}
|
|
108
131
|
function renderItems() {
|
|
109
|
-
return
|
|
132
|
+
return visibleItems.map(item => {
|
|
110
133
|
if (item.submenu && !stacked) {
|
|
111
134
|
return (jsx(Popup, { ...popupProps, className: cn(S.itemPopup, popupProps?.className), size: size, hoverControl: canHover, isOpen: activeId === item.id, onOpen: () => openSub(item.id, true), onClose: () => {
|
|
112
135
|
setActiveId(current => (current === item.id ? null : current));
|
|
@@ -137,7 +160,15 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
137
160
|
}, contentProps: {
|
|
138
161
|
...popupProps?.contentProps,
|
|
139
162
|
className: cn(contentClass, popupProps?.contentProps?.className),
|
|
140
|
-
}, 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: {
|
|
164
|
+
// Enter picks the first match.
|
|
165
|
+
onKeyDown: e => {
|
|
166
|
+
if (e.key !== 'Enter' || !visibleItems[0])
|
|
167
|
+
return;
|
|
168
|
+
handleItemClick(visibleItems[0].id, e);
|
|
169
|
+
e.preventDefault();
|
|
170
|
+
},
|
|
171
|
+
} }), jsx(Scroll, { ...scrollProps, className: S.searchList, innerClassName: S.searchListInner, children: visibleItems.length > 0 ? (renderItems()) : (jsx("div", { className: S.searchEmpty, children: searchEmpty })) })] })) : (renderItems()) }) }));
|
|
141
172
|
}
|
|
142
173
|
const NestedMenu = Object.assign(NestedMenuComponent, {
|
|
143
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"};
|
|
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,7 +1,7 @@
|
|
|
1
1
|
import * as T from './NestedMenu.types';
|
|
2
2
|
export declare function NestedMenuLabel({ children, className, }: T.NestedMenuLabelProps): import("react").JSX.Element;
|
|
3
3
|
export declare function NestedMenuItemRow({ children, className, danger, disabled, href, target, rel, onClick, }: T.NestedMenuRowProps): import("react").JSX.Element;
|
|
4
|
-
declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, size, className, popupProps, onItemClick, }: T.Props): import("react").JSX.Element;
|
|
4
|
+
declare function NestedMenuComponent({ trigger, items, open, onOpenChange, align, size, className, popupProps, onItemClick, searchable, searchPlaceholder, searchEmpty, }: T.Props): import("react").JSX.Element;
|
|
5
5
|
export declare const NestedMenu: typeof NestedMenuComponent & {
|
|
6
6
|
Item: typeof NestedMenuItemRow;
|
|
7
7
|
Label: typeof NestedMenuLabel;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -16,6 +16,8 @@ export type NestedMenuItem = {
|
|
|
16
16
|
danger?: boolean;
|
|
17
17
|
disabled?: boolean;
|
|
18
18
|
className?: string;
|
|
19
|
+
/** Text matched by the search field when `label` is not a plain string. */
|
|
20
|
+
searchText?: string;
|
|
19
21
|
};
|
|
20
22
|
export type Props = {
|
|
21
23
|
trigger: ReactNode;
|
|
@@ -27,6 +29,11 @@ export type Props = {
|
|
|
27
29
|
size?: Size;
|
|
28
30
|
className?: string;
|
|
29
31
|
popupProps?: Partial<PopupProps>;
|
|
32
|
+
/** Show a search field above the items that filters them by label. */
|
|
33
|
+
searchable?: boolean;
|
|
34
|
+
searchPlaceholder?: string;
|
|
35
|
+
/** Shown when nothing matches the search. */
|
|
36
|
+
searchEmpty?: ReactNode;
|
|
30
37
|
};
|
|
31
38
|
export type NestedMenuProps = Props;
|
|
32
39
|
export type NestedMenuRowProps = {
|