@homecode/ui 4.27.15 → 4.27.16
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.
|
@@ -5,16 +5,16 @@ import { Scroll } from '../Scroll/Scroll.js';
|
|
|
5
5
|
import S from './Menu.styl.js';
|
|
6
6
|
|
|
7
7
|
// @ts-ignore
|
|
8
|
-
const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
|
|
8
|
+
const MenuComponent = forwardRef(({ children, className, textOverflow, ...props }, ref) => {
|
|
9
9
|
const size = props.size || 'm';
|
|
10
10
|
return (jsx(Scroll, { y: true,
|
|
11
11
|
// @ts-ignore
|
|
12
|
-
ref: ref, className: cn(S.root, className, S[`size-${size}`]), ...props, children: children }));
|
|
12
|
+
ref: ref, className: cn(S.root, className, S[`size-${size}`], textOverflow && S.textOverflow), ...props, children: children }));
|
|
13
13
|
});
|
|
14
14
|
const MenuItem = forwardRef((props, ref) => {
|
|
15
|
-
const { children, className, selected, focused, disabled, level = 0, onClick, ...rest } = props;
|
|
16
|
-
const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
|
|
17
|
-
return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: jsx("span", { children: children }) }));
|
|
15
|
+
const { children, className, selected, focused, disabled, level = 0, onClick, textOverflow, ...rest } = props;
|
|
16
|
+
const classes = cn(S.item, level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, textOverflow && S.textOverflow, className);
|
|
17
|
+
return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: textOverflow ? children : jsx("span", { children: children }) }));
|
|
18
18
|
});
|
|
19
19
|
const MenuGroup = ({ children, className, label, size = 'm', ...props }) => {
|
|
20
20
|
return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className, S[`size-${size}`]), ...props, children: label }), children] }));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;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%}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.
|
|
4
|
-
var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
|
|
3
|
+
var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;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%}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_size-s__DA0r3 .Menu_item__VtmwS{font-size:12px;height:30px;padding:0 14px}.Menu_size-m__0EI47 .Menu_item__VtmwS{font-size:16px;height:40px;padding:0 16px}.Menu_size-l__PXpIm .Menu_item__VtmwS{font-size:20px;height:50px;padding:0 18px}.Menu_size-xl__U1WW8 .Menu_item__VtmwS{font-size:24px;height:60px;padding:0 20px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_textOverflow__udsHR .Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
|
|
4
|
+
var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","textOverflow":"Menu_textOverflow__udsHR","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -5,6 +5,7 @@ export interface MenuProps extends ScrollProps {
|
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
className?: string;
|
|
7
7
|
size?: Size;
|
|
8
|
+
textOverflow?: boolean;
|
|
8
9
|
}
|
|
9
10
|
export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
11
|
children: ReactNode;
|
|
@@ -14,6 +15,7 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
14
15
|
disabled?: boolean;
|
|
15
16
|
level?: number;
|
|
16
17
|
size?: Size;
|
|
18
|
+
textOverflow?: boolean;
|
|
17
19
|
}
|
|
18
20
|
export interface MenuGroupProps {
|
|
19
21
|
children: ReactNode;
|