@homecode/ui 5.20.12 → 5.20.13
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 +26 -4
- package/dist/esm/src/components/NestedMenu/NestedMenu.styl.js +2 -2
- 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,6 +1,7 @@
|
|
|
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';
|
|
5
6
|
import S from './NestedMenu.styl.js';
|
|
6
7
|
import cn from 'classnames';
|
|
@@ -29,8 +30,20 @@ function NestedMenuItemRow({ children, className, danger, disabled, href, target
|
|
|
29
30
|
}
|
|
30
31
|
return (jsx("button", { type: "button", className: classes, disabled: disabled, onClick: onClick, children: children }));
|
|
31
32
|
}
|
|
32
|
-
function
|
|
33
|
+
function itemSearchText(item) {
|
|
34
|
+
if (item.searchText != null)
|
|
35
|
+
return item.searchText;
|
|
36
|
+
return typeof item.label === 'string' || typeof item.label === 'number'
|
|
37
|
+
? String(item.label)
|
|
38
|
+
: '';
|
|
39
|
+
}
|
|
40
|
+
function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end', size = 'm', className, popupProps, onItemClick, searchable = false, searchPlaceholder = 'Search', searchEmpty = 'Nothing found', }) {
|
|
33
41
|
const [activeId, setActiveId] = useState(null);
|
|
42
|
+
const [query, setQuery] = useState('');
|
|
43
|
+
const needle = searchable ? query.trim().toLowerCase() : '';
|
|
44
|
+
const visibleItems = needle
|
|
45
|
+
? items.filter(item => itemSearchText(item).toLowerCase().includes(needle))
|
|
46
|
+
: items;
|
|
34
47
|
const stacked = useMedia(MOBILE_MQ);
|
|
35
48
|
const canHover = useMedia(HOVER_MQ);
|
|
36
49
|
const active = items.find(item => item.id === activeId);
|
|
@@ -49,6 +62,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
49
62
|
useEffect(() => {
|
|
50
63
|
if (!open) {
|
|
51
64
|
setActiveId(null);
|
|
65
|
+
setQuery('');
|
|
52
66
|
return undefined;
|
|
53
67
|
}
|
|
54
68
|
const onKey = (e) => {
|
|
@@ -106,7 +120,7 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
106
120
|
}, 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
121
|
}
|
|
108
122
|
function renderItems() {
|
|
109
|
-
return
|
|
123
|
+
return visibleItems.map(item => {
|
|
110
124
|
if (item.submenu && !stacked) {
|
|
111
125
|
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
126
|
setActiveId(current => (current === item.id ? null : current));
|
|
@@ -137,7 +151,15 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
|
|
|
137
151
|
}, contentProps: {
|
|
138
152
|
...popupProps?.contentProps,
|
|
139
153
|
className: cn(contentClass, popupProps?.contentProps?.className),
|
|
140
|
-
}, 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 })] })) : (
|
|
154
|
+
}, 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 })] })) : 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
|
+
// Enter picks the first match.
|
|
156
|
+
onKeyDown: e => {
|
|
157
|
+
if (e.key !== 'Enter' || !visibleItems[0])
|
|
158
|
+
return;
|
|
159
|
+
handleItemClick(visibleItems[0].id, e);
|
|
160
|
+
e.preventDefault();
|
|
161
|
+
},
|
|
162
|
+
} }), jsx("div", { className: S.searchList, children: visibleItems.length > 0 ? (renderItems()) : (jsx("div", { className: S.searchEmpty, children: searchEmpty })) })] })) : (renderItems()) }) }));
|
|
141
163
|
}
|
|
142
164
|
const NestedMenu = Object.assign(NestedMenuComponent, {
|
|
143
165
|
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{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{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}";
|
|
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{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{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-{display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto}.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","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-"};
|
|
3
3
|
if (typeof document !== 'undefined') {
|
|
4
4
|
var __uilibHead = document.head || document.getElementsByTagName('head')[0];
|
|
5
5
|
if (__uilibHead) {
|
|
@@ -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 = {
|