@consta/header 0.4.0 → 0.4.3
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/Badges/helpers.d.ts +1 -1
- package/ButtonMenu/helpers.d.ts +1 -1
- package/Header/Header.css +1 -1
- package/Languages/helpers.d.ts +1 -1
- package/Layout/Layout.d.ts +3 -3
- package/Menu/Menu.css +1 -1
- package/Menu/Menu.js +1 -1
- package/Menu/Menu.js.map +1 -1
- package/Menu/helpers.d.ts +1 -1
- package/NotificationsList/helpers.d.ts +4 -4068
- package/README.md +4 -4
- package/SelectMenu/helpers.d.ts +1 -1
- package/TileMenu/helpers.d.ts +175 -175
- package/VerticalMenu/helpers.d.ts +1 -1
- package/__private__/components/NotificationCard/NotificationCard.d.ts +3 -3
- package/__private__/components/NotificationsActions/helpers.d.ts +1 -1
- package/package.json +1 -1
package/Badges/helpers.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export declare const withDefaultGetters: <ITEM>(props: BadgesProps<ITEM>) => {
|
|
|
9
9
|
getItemLabel?: BadgesPropGetItemLabel<ITEM> | undefined;
|
|
10
10
|
getItemStatus?: BadgesPropGetItemStatus<ITEM> | undefined;
|
|
11
11
|
getItemIcon?: BadgesPropGetItemIcon<ITEM> | undefined;
|
|
12
|
-
} &
|
|
12
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "view" | "form" | "children" | "size" | "css" | "items" | "getItemLabel" | "getItemStatus" | "getItemIcon"> & import("react").RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
13
13
|
label: string;
|
|
14
14
|
} ? {} : {
|
|
15
15
|
getItemLabel: BadgesPropGetItemLabel<ITEM>;
|
package/ButtonMenu/helpers.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export declare function withDefaultGetters<ITEM>(props: ButtonMenuProps<ITEM>):
|
|
|
30
30
|
size?: "s" | "xs" | "m" | "l" | undefined;
|
|
31
31
|
view?: "clear" | "ghost" | "primary" | "secondary" | undefined;
|
|
32
32
|
onlyIcon?: boolean | undefined;
|
|
33
|
-
} &
|
|
33
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "view" | "form" | "size" | "css" | "items" | "getItemLabel" | "getItemIcon" | "onItemClick" | "getItemHref" | "getItemTarget" | "getItemOnClick" | "onlyIcon"> & import("react").RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
34
34
|
label: string;
|
|
35
35
|
} ? {} : {
|
|
36
36
|
getItemLabel: ButtonMenuPropGetItemLabel<ITEM>;
|
package/Header/Header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.che--Header .che--Layout-Row_botton .che--LayoutRow-Side_position_left{width:100%}.che--Header_fixed{position:fixed;top:0;left:0;width:100%}.che--Header-Logo{flex:none}.che--Header-Menu{flex:1}.che--Header-RowCenterLeft{display:flex;align-items:center;grid-gap:var(--space-2xl);gap:var(--space-2xl)}.che--Header-RowCenterLeft_breakpoint_m{width:100%}.che--Header-RowCenterRight,.che--Header-RowTopRight{display:flex;align-items:center;flex-direction:row-reverse;width:100%;grid-gap:var(--space-l);gap:var(--space-l)}.che--Header-NotificationsList_breakpoint_m,.che--Header-ThemeToggler_breakpoint_m,.che--Header-TileMenuList_breakpoint_m{max-height:60vh}.che--Header-RowCenterLeftMobile{display:flex;align-items:center;grid-gap:var(--space-2xl);gap:var(--space-2xl)}.che--Header-MobileMenuHeader{display:flex;flex-wrap:wrap;justify-content:space-between;margin:var(--space-s) var(--space-l);grid-gap:var(--space-s);gap:var(--space-s)}.che--Header-Breadcrumbs,.che--Header-MobileSearchContainer{width:100%}.che--Header-MobileMenuSocialMedia{display:flex;justify-content:center;margin-bottom:var(--space-m)}
|
|
1
|
+
.che--Header .che--Layout-Row_botton .che--LayoutRow-Side_position_left{width:100%}.che--Header_fixed{position:fixed;top:0;left:0;width:100%}.che--Header-Logo{flex:none}.che--Header-Menu{flex:1;height:var(--header-height)}.che--Header-RowCenterLeft{display:flex;align-items:center;grid-gap:var(--space-2xl);gap:var(--space-2xl)}.che--Header-RowCenterLeft_breakpoint_m{width:100%}.che--Header-RowCenterRight,.che--Header-RowTopRight{display:flex;align-items:center;flex-direction:row-reverse;width:100%;grid-gap:var(--space-l);gap:var(--space-l)}.che--Header-NotificationsList_breakpoint_m,.che--Header-ThemeToggler_breakpoint_m,.che--Header-TileMenuList_breakpoint_m{max-height:60vh}.che--Header-RowCenterLeftMobile{display:flex;align-items:center;grid-gap:var(--space-2xl);gap:var(--space-2xl)}.che--Header-MobileMenuHeader{display:flex;flex-wrap:wrap;justify-content:space-between;margin:var(--space-s) var(--space-l);grid-gap:var(--space-s);gap:var(--space-s)}.che--Header-Breadcrumbs,.che--Header-MobileSearchContainer{width:100%}.che--Header-MobileMenuSocialMedia{display:flex;justify-content:center;margin-bottom:var(--space-m)}
|
package/Languages/helpers.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export declare function withDefaultGetters<ITEM>(props: LanguagesProps<ITEM>): {
|
|
|
8
8
|
getItemLabel?: import("../SelectMenu/index").SelectMenuPropGetItemLabel<ITEM> | undefined;
|
|
9
9
|
getItemTarget?: import("../SelectMenu/index").SelectMenuPropGetItemTarget<ITEM> | undefined;
|
|
10
10
|
getItemOnClick?: import("../SelectMenu/index").SelectMenuPropGetItemOnClick<ITEM> | undefined;
|
|
11
|
-
} &
|
|
11
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "value" | "onChange" | "css" | "items" | "getItemLabel" | "getItemHref" | "getItemTarget" | "getItemOnClick"> & import("react").RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
12
12
|
label: string;
|
|
13
13
|
} ? {} : {
|
|
14
14
|
getItemLabel: import("../SelectMenu/index").SelectMenuPropGetItemLabel<ITEM>;
|
package/Layout/Layout.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Layout.css';
|
|
3
|
-
export declare const Layout: React.ForwardRefExoticComponent<Pick<
|
|
3
|
+
export declare const Layout: React.ForwardRefExoticComponent<Pick<{
|
|
4
4
|
rowCenter?: import("./types").LayoutPropRowCenter;
|
|
5
5
|
rowTop?: import("./types").LayoutPropRowTop;
|
|
6
|
-
rowBottom?: import("./types").
|
|
7
|
-
}
|
|
6
|
+
rowBottom?: import("./types").LayoutPropRowBottom;
|
|
7
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "rowCenter" | "rowTop" | "rowBottom"> & React.RefAttributes<HTMLDivElement>, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "rowCenter" | "rowTop" | "rowBottom"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
8
|
export * from "./types";
|
package/Menu/Menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.che--Menu-List{
|
|
1
|
+
.che--Menu-List{margin:0;padding:0;list-style-type:none}.che--Menu-Item,.che--Menu-List{display:flex;align-items:center;height:100%}.che--Menu-Item{--text-color:var(--color-typo-secondary);position:relative;margin-right:var(--space-m);color:var(--text-color);transition:color .2s}.che--Menu-Item:hover,.che--Menu-Item_opened{--text-color:var(--color-typo-primary)}.che--Menu-Item:last-child{margin-right:0}.che--Menu-Item_hidden{position:absolute;left:-300vw;visibility:hidden}.che--Menu-Item_active{--text-color:var(--color-typo-primary)}.che--Menu-Item_active:before{position:absolute;bottom:0;left:0;width:100%;height:2px;content:"";background-color:var(--color-typo-link)}.che--Menu-Link{position:relative;display:flex;align-items:center;height:100%;cursor:pointer;text-decoration:none;color:var(--text-color)}.che--Menu-Arrow{margin-left:var(--space-2xs)}
|
package/Menu/Menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _jsx from"@babel/runtime/helpers/jsx";import _objectSpread from"@babel/runtime/helpers/objectSpread";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{forwardRef,useState,useRef,useCallback,useEffect}from"react";import{IconSelect}from"@consta/uikit/IconSelect";import{Button}from"@consta/uikit/Button";import{IconMeatball}from"@consta/uikit/IconMeatball";import{useMutableRef}from"@consta/uikit/useMutableRef";import{useDebounce}from"@consta/uikit/useDebounce";import{useFlag}from"@consta/uikit/useFlag";import{AnimatedContextMenu}from"../__private__/AnimatedContextMenu/AnimatedContextMenu";import{cn}from"../__private__/utils/bem";import{useHideElementsInLine}from"@consta/uikit/useHideElementsInLine";import{animateTimeout}from"@consta/uikit/MixPopoverAnimate";import{withDefaultGetters}from"./helpers";import{getItemClick}from"../__private__/helpers/getItemClick";import"./Menu.css";export const cnMenu=cn("Menu");const MenuRender=(a,b)=>{var c;const d=withDefaultGetters(a),{items:e,className:f,getItemActive:g,getItemHref:h,getItemLabel:i,getItemOnClick:j,getItemTarget:k,getItemSubMenu:l,onItemClick:m}=d,n=_objectWithoutProperties(d,["items","className","getItemActive","getItemHref","getItemLabel","getItemOnClick","getItemTarget","getItemSubMenu","onItemClick"]),[o,p]=useState(),[q,r]=useFlag(),{visibleItems:s,itemsRefs:t,wrapperRef:u,hiddenItems:v,moreRef:w}=useHideElementsInLine(e),x=useRef(null),y=useMutableRef(h),z=useMutableRef(k),A=useCallback(a=>y.current(a)?"a":"span",[]),B=useCallback(a=>{const b=y.current(a),c=z.current(a);return _objectSpread({},b&&{href:y.current(a)},c&&{href:z.current(a)})},[]),C="number"==typeof(null===(c=a.style)||void 0===c?void 0:c.zIndex)?a.style.zIndex+1:void 0;return useEffect(useDebounce(()=>{q||p(void 0)},animateTimeout),[q]),React.createElement("nav",Object.assign({},n,{className:cnMenu(null,[f]),onMouseLeave:r.off,onMouseEnter:r.on,ref:b}),React.createElement("ul",{className:cnMenu("List"),ref:u},e.map((a,b)=>{const c=i(a),d=h(a),e=d?k(a):void 0,f=g(a),n=d?"a":"span",q=l(a),r=o===b,u=!s[b];return React.createElement("li",{className:cnMenu("Item",{hidden:u}),key:cnMenu("Item",{index:b}),ref:t[b],onMouseEnter:()=>p(b)},_jsx(n,{className:cnMenu("Link"
|
|
1
|
+
import _jsx from"@babel/runtime/helpers/jsx";import _objectSpread from"@babel/runtime/helpers/objectSpread";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{forwardRef,useState,useRef,useCallback,useEffect}from"react";import{IconSelect}from"@consta/uikit/IconSelect";import{Button}from"@consta/uikit/Button";import{IconMeatball}from"@consta/uikit/IconMeatball";import{useMutableRef}from"@consta/uikit/useMutableRef";import{useDebounce}from"@consta/uikit/useDebounce";import{useFlag}from"@consta/uikit/useFlag";import{AnimatedContextMenu}from"../__private__/AnimatedContextMenu/AnimatedContextMenu";import{cn}from"../__private__/utils/bem";import{useHideElementsInLine}from"@consta/uikit/useHideElementsInLine";import{animateTimeout}from"@consta/uikit/MixPopoverAnimate";import{withDefaultGetters}from"./helpers";import{getItemClick}from"../__private__/helpers/getItemClick";import"./Menu.css";export const cnMenu=cn("Menu");const MenuRender=(a,b)=>{var c;const d=withDefaultGetters(a),{items:e,className:f,getItemActive:g,getItemHref:h,getItemLabel:i,getItemOnClick:j,getItemTarget:k,getItemSubMenu:l,onItemClick:m}=d,n=_objectWithoutProperties(d,["items","className","getItemActive","getItemHref","getItemLabel","getItemOnClick","getItemTarget","getItemSubMenu","onItemClick"]),[o,p]=useState(),[q,r]=useFlag(),{visibleItems:s,itemsRefs:t,wrapperRef:u,hiddenItems:v,moreRef:w}=useHideElementsInLine(e),x=useRef(null),y=useMutableRef(h),z=useMutableRef(k),A=useCallback(a=>y.current(a)?"a":"span",[]),B=useCallback(a=>{const b=y.current(a),c=z.current(a);return _objectSpread({},b&&{href:y.current(a)},c&&{href:z.current(a)})},[]),C="number"==typeof(null===(c=a.style)||void 0===c?void 0:c.zIndex)?a.style.zIndex+1:void 0;return useEffect(useDebounce(()=>{q||p(void 0)},animateTimeout),[q]),React.createElement("nav",Object.assign({},n,{className:cnMenu(null,[f]),onMouseLeave:r.off,onMouseEnter:r.on,ref:b}),React.createElement("ul",{className:cnMenu("List"),ref:u},e.map((a,b)=>{const c=i(a),d=h(a),e=d?k(a):void 0,f=g(a),n=d?"a":"span",q=l(a),r=o===b,u=!s[b];return React.createElement("li",{className:cnMenu("Item",{hidden:u,active:f,opened:r}),key:cnMenu("Item",{index:b}),ref:t[b],onMouseEnter:()=>p(b)},_jsx(n,{className:cnMenu("Link"),href:d,target:e,onClick:getItemClick(a,j,m)},void 0,c),q&&_jsx(IconSelect,{size:"s",className:cnMenu("Arrow")}),_jsx(AnimatedContextMenu,{isOpen:q&&0<q.length&&r,items:q||[],getLabel:i,getSubItems:l,anchorRef:t[b],getOnClick:a=>getItemClick(a,j,m),direction:"downStartLeft",possibleDirections:["upStartLeft","downStartRight","downStartLeft","upStartRight"],spareDirection:"downStartLeft",getItemAs:A,getItemHTMLAttributes:B,style:{zIndex:C}}))}),0<v.length&&React.createElement("li",{className:cnMenu("Item"),key:cnMenu("Item",{more:!0}),ref:w,onMouseEnter:()=>p("more")},React.createElement(Button,{iconLeft:IconMeatball,ref:x,size:"xs",view:"clear"}),_jsx(AnimatedContextMenu,{isOpen:"more"===o,items:v,getLabel:i,getSubItems:l,anchorRef:x,getOnClick:a=>getItemClick(a,j,m),direction:"downStartLeft",possibleDirections:["upStartLeft","downStartRight","downStartLeft","upStartRight"],spareDirection:"downStartRight",getItemAs:A,getItemHTMLAttributes:B,style:{zIndex:C},offset:8}))))};export const Menu=forwardRef(MenuRender);export*from"./types";
|
|
2
2
|
//# sourceMappingURL=Menu.js.map
|
package/Menu/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Menu/Menu.tsx"],"names":["React","forwardRef","useState","useRef","useCallback","useEffect","IconSelect","Button","IconMeatball","useMutableRef","useDebounce","useFlag","AnimatedContextMenu","cn","useHideElementsInLine","animateTimeout","withDefaultGetters","getItemClick","cnMenu","MenuRender","props","ref","items","className","getItemActive","getItemHref","getItemLabel","getItemOnClick","getItemTarget","getItemSubMenu","onItemClick","otherProps","openedSubMenu","setOpenedSubMenu","mouseOnMenu","setMouseOnMenu","visibleItems","itemsRefs","wrapperRef","hiddenItems","moreRef","moreButtonRef","getItemHrefRef","getItemTargetRef","getItemAs","item","current","getItemHTMLAttributes","href","target","elementZIndex","style","zIndex","off","on","map","index","label","active","Tag","subItems","opened","hidden","length","contextMenuItem","more","Menu"],"mappings":"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","sourcesContent":["import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react'\n\nimport { IconSelect } from '@consta/uikit/IconSelect'\nimport { Button } from '@consta/uikit/Button'\nimport { IconMeatball } from '@consta/uikit/IconMeatball'\nimport { useMutableRef } from '@consta/uikit/useMutableRef'\nimport { useDebounce } from '@consta/uikit/useDebounce'\nimport { useFlag } from '@consta/uikit/useFlag'\n\nimport { AnimatedContextMenu } from '@/__private__/AnimatedContextMenu/AnimatedContextMenu'\n\nimport { cn } from '@/__private__/utils/bem'\nimport { useHideElementsInLine } from '@consta/uikit/useHideElementsInLine'\n\nimport { animateTimeout } from '@consta/uikit/MixPopoverAnimate'\n\nimport { withDefaultGetters } from './helpers'\n\nimport { getItemClick } from '@/__private__/helpers/getItemClick'\nimport { MenuComponent, MenuProps } from './types'\nimport './Menu.css'\n\nexport const cnMenu = cn('Menu')\n\nconst MenuRender = (props: MenuProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n items,\n className,\n getItemActive,\n getItemHref,\n getItemLabel,\n getItemOnClick,\n getItemTarget,\n getItemSubMenu,\n onItemClick,\n ...otherProps\n } = withDefaultGetters(props)\n\n const [openedSubMenu, setOpenedSubMenu] = useState<number | 'more' | undefined>()\n const [mouseOnMenu, setMouseOnMenu] = useFlag()\n\n const { visibleItems, itemsRefs, wrapperRef, hiddenItems, moreRef } = useHideElementsInLine<\n typeof items[number],\n HTMLLIElement,\n HTMLUListElement\n >(items)\n\n const moreButtonRef = useRef<HTMLButtonElement>(null)\n\n const getItemHrefRef = useMutableRef(getItemHref)\n const getItemTargetRef = useMutableRef(getItemTarget)\n\n const getItemAs = useCallback((item: typeof items[number]) => {\n if (!!getItemHrefRef.current(item)) {\n return 'a'\n }\n return 'span'\n }, [])\n\n const getItemHTMLAttributes = useCallback((item: typeof items[number]) => {\n const href = getItemHrefRef.current(item)\n const target = getItemTargetRef.current(item)\n\n return {\n ...(href && { href: getItemHrefRef.current(item) }),\n ...(target && { href: getItemTargetRef.current(item) }),\n }\n }, [])\n\n const elementZIndex = typeof props.style?.zIndex === 'number' ? props.style.zIndex + 1 : undefined\n\n useEffect(\n useDebounce(() => {\n if (!mouseOnMenu) {\n setOpenedSubMenu(undefined)\n }\n }, animateTimeout),\n [mouseOnMenu]\n )\n\n return (\n <nav\n {...otherProps}\n className={cnMenu(null, [className])}\n onMouseLeave={setMouseOnMenu.off}\n onMouseEnter={setMouseOnMenu.on}\n ref={ref}\n >\n <ul className={cnMenu('List')} ref={wrapperRef}>\n {items.map((item, index) => {\n const label = getItemLabel(item)\n const href = getItemHref(item)\n const target = href ? getItemTarget(item) : undefined\n const active = getItemActive(item)\n const Tag = href ? 'a' : 'span'\n const subItems = getItemSubMenu(item)\n const opened = openedSubMenu === index\n const hidden = !visibleItems[index]\n return (\n <li\n className={cnMenu('Item', { hidden })}\n key={cnMenu('Item', { index })}\n ref={itemsRefs[index]}\n onMouseEnter={() => setOpenedSubMenu(index)}\n >\n <Tag\n className={cnMenu('Link', { active, opened })}\n href={href}\n target={target}\n onClick={getItemClick(item, getItemOnClick, onItemClick)}\n >\n {label} {subItems && <IconSelect size=\"s\" className={cnMenu('Arrow')} />}\n </Tag>\n <AnimatedContextMenu\n isOpen={subItems && subItems.length > 0 && opened}\n items={subItems || []}\n getLabel={getItemLabel}\n getSubItems={getItemSubMenu}\n anchorRef={itemsRefs[index]}\n getOnClick={contextMenuItem =>\n getItemClick(contextMenuItem, getItemOnClick, onItemClick)\n }\n direction=\"downStartLeft\"\n possibleDirections={[\n 'upStartLeft',\n 'downStartRight',\n 'downStartLeft',\n 'upStartRight',\n ]}\n spareDirection=\"downStartLeft\"\n getItemAs={getItemAs}\n getItemHTMLAttributes={getItemHTMLAttributes}\n style={{ zIndex: elementZIndex }}\n offset={8}\n />\n </li>\n )\n })}\n {hiddenItems.length > 0 && (\n <li\n className={cnMenu('Item')}\n key={cnMenu('Item', { more: true })}\n ref={moreRef}\n onMouseEnter={() => setOpenedSubMenu('more')}\n >\n <Button iconLeft={IconMeatball} ref={moreButtonRef} size=\"xs\" view=\"clear\" />\n <AnimatedContextMenu\n isOpen={openedSubMenu === 'more'}\n items={hiddenItems}\n getLabel={getItemLabel}\n getSubItems={getItemSubMenu}\n anchorRef={moreButtonRef}\n getOnClick={contextMenuItem =>\n getItemClick(contextMenuItem, getItemOnClick, onItemClick)\n }\n direction=\"downStartLeft\"\n possibleDirections={[\n 'upStartLeft',\n 'downStartRight',\n 'downStartLeft',\n 'upStartRight',\n ]}\n spareDirection=\"downStartRight\"\n getItemAs={getItemAs}\n getItemHTMLAttributes={getItemHTMLAttributes}\n style={{ zIndex: elementZIndex }}\n offset={5}\n />\n </li>\n )}\n </ul>\n </nav>\n )\n}\n\nexport const Menu = forwardRef(MenuRender) as MenuComponent\n\nexport * from './types'\n"],"file":"Menu.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Menu/Menu.tsx"],"names":["React","forwardRef","useState","useRef","useCallback","useEffect","IconSelect","Button","IconMeatball","useMutableRef","useDebounce","useFlag","AnimatedContextMenu","cn","useHideElementsInLine","animateTimeout","withDefaultGetters","getItemClick","cnMenu","MenuRender","props","ref","items","className","getItemActive","getItemHref","getItemLabel","getItemOnClick","getItemTarget","getItemSubMenu","onItemClick","otherProps","openedSubMenu","setOpenedSubMenu","mouseOnMenu","setMouseOnMenu","visibleItems","itemsRefs","wrapperRef","hiddenItems","moreRef","moreButtonRef","getItemHrefRef","getItemTargetRef","getItemAs","item","current","getItemHTMLAttributes","href","target","elementZIndex","style","zIndex","off","on","map","index","label","active","Tag","subItems","opened","hidden","length","contextMenuItem","more","Menu"],"mappings":"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","sourcesContent":["import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react'\n\nimport { IconSelect } from '@consta/uikit/IconSelect'\nimport { Button } from '@consta/uikit/Button'\nimport { IconMeatball } from '@consta/uikit/IconMeatball'\nimport { useMutableRef } from '@consta/uikit/useMutableRef'\nimport { useDebounce } from '@consta/uikit/useDebounce'\nimport { useFlag } from '@consta/uikit/useFlag'\n\nimport { AnimatedContextMenu } from '@/__private__/AnimatedContextMenu/AnimatedContextMenu'\n\nimport { cn } from '@/__private__/utils/bem'\nimport { useHideElementsInLine } from '@consta/uikit/useHideElementsInLine'\n\nimport { animateTimeout } from '@consta/uikit/MixPopoverAnimate'\n\nimport { withDefaultGetters } from './helpers'\n\nimport { getItemClick } from '@/__private__/helpers/getItemClick'\nimport { MenuComponent, MenuProps } from './types'\nimport './Menu.css'\n\nexport const cnMenu = cn('Menu')\n\nconst MenuRender = (props: MenuProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n items,\n className,\n getItemActive,\n getItemHref,\n getItemLabel,\n getItemOnClick,\n getItemTarget,\n getItemSubMenu,\n onItemClick,\n ...otherProps\n } = withDefaultGetters(props)\n\n const [openedSubMenu, setOpenedSubMenu] = useState<number | 'more' | undefined>()\n const [mouseOnMenu, setMouseOnMenu] = useFlag()\n\n const { visibleItems, itemsRefs, wrapperRef, hiddenItems, moreRef } = useHideElementsInLine<\n typeof items[number],\n HTMLLIElement,\n HTMLUListElement\n >(items)\n\n const moreButtonRef = useRef<HTMLButtonElement>(null)\n\n const getItemHrefRef = useMutableRef(getItemHref)\n const getItemTargetRef = useMutableRef(getItemTarget)\n\n const getItemAs = useCallback((item: typeof items[number]) => {\n if (!!getItemHrefRef.current(item)) {\n return 'a'\n }\n return 'span'\n }, [])\n\n const getItemHTMLAttributes = useCallback((item: typeof items[number]) => {\n const href = getItemHrefRef.current(item)\n const target = getItemTargetRef.current(item)\n\n return {\n ...(href && { href: getItemHrefRef.current(item) }),\n ...(target && { href: getItemTargetRef.current(item) }),\n }\n }, [])\n\n const elementZIndex = typeof props.style?.zIndex === 'number' ? props.style.zIndex + 1 : undefined\n\n useEffect(\n useDebounce(() => {\n if (!mouseOnMenu) {\n setOpenedSubMenu(undefined)\n }\n }, animateTimeout),\n [mouseOnMenu]\n )\n\n return (\n <nav\n {...otherProps}\n className={cnMenu(null, [className])}\n onMouseLeave={setMouseOnMenu.off}\n onMouseEnter={setMouseOnMenu.on}\n ref={ref}\n >\n <ul className={cnMenu('List')} ref={wrapperRef}>\n {items.map((item, index) => {\n const label = getItemLabel(item)\n const href = getItemHref(item)\n const target = href ? getItemTarget(item) : undefined\n const active = getItemActive(item)\n const Tag = href ? 'a' : 'span'\n const subItems = getItemSubMenu(item)\n const opened = openedSubMenu === index\n const hidden = !visibleItems[index]\n return (\n <li\n className={cnMenu('Item', { hidden, active, opened })}\n key={cnMenu('Item', { index })}\n ref={itemsRefs[index]}\n onMouseEnter={() => setOpenedSubMenu(index)}\n >\n <Tag\n className={cnMenu('Link')}\n href={href}\n target={target}\n onClick={getItemClick(item, getItemOnClick, onItemClick)}\n >\n {label}\n </Tag>\n {subItems && <IconSelect size=\"s\" className={cnMenu('Arrow')} />}\n <AnimatedContextMenu\n isOpen={subItems && subItems.length > 0 && opened}\n items={subItems || []}\n getLabel={getItemLabel}\n getSubItems={getItemSubMenu}\n anchorRef={itemsRefs[index]}\n getOnClick={contextMenuItem =>\n getItemClick(contextMenuItem, getItemOnClick, onItemClick)\n }\n direction=\"downStartLeft\"\n possibleDirections={[\n 'upStartLeft',\n 'downStartRight',\n 'downStartLeft',\n 'upStartRight',\n ]}\n spareDirection=\"downStartLeft\"\n getItemAs={getItemAs}\n getItemHTMLAttributes={getItemHTMLAttributes}\n style={{ zIndex: elementZIndex }}\n />\n </li>\n )\n })}\n {hiddenItems.length > 0 && (\n <li\n className={cnMenu('Item')}\n key={cnMenu('Item', { more: true })}\n ref={moreRef}\n onMouseEnter={() => setOpenedSubMenu('more')}\n >\n <Button iconLeft={IconMeatball} ref={moreButtonRef} size=\"xs\" view=\"clear\" />\n <AnimatedContextMenu\n isOpen={openedSubMenu === 'more'}\n items={hiddenItems}\n getLabel={getItemLabel}\n getSubItems={getItemSubMenu}\n anchorRef={moreButtonRef}\n getOnClick={contextMenuItem =>\n getItemClick(contextMenuItem, getItemOnClick, onItemClick)\n }\n direction=\"downStartLeft\"\n possibleDirections={[\n 'upStartLeft',\n 'downStartRight',\n 'downStartLeft',\n 'upStartRight',\n ]}\n spareDirection=\"downStartRight\"\n getItemAs={getItemAs}\n getItemHTMLAttributes={getItemHTMLAttributes}\n style={{ zIndex: elementZIndex }}\n offset={8}\n />\n </li>\n )}\n </ul>\n </nav>\n )\n}\n\nexport const Menu = forwardRef(MenuRender) as MenuComponent\n\nexport * from './types'\n"],"file":"Menu.js"}
|
package/Menu/helpers.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export declare function withDefaultGetters<ITEM>(props: MenuProps<ITEM>): {
|
|
|
30
30
|
getItemActive?: MenuPropGetItemActive<ITEM> | undefined;
|
|
31
31
|
getItemOnClick?: MenuPropGetItemOnClick<ITEM> | undefined;
|
|
32
32
|
getItemSubMenu?: MenuPropGetItemSubMenu<ITEM> | undefined;
|
|
33
|
-
} &
|
|
33
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "items" | "getItemLabel" | "onItemClick" | "getItemHref" | "getItemTarget" | "getItemOnClick" | "getItemActive" | "getItemSubMenu"> & import("react").RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
34
34
|
label: string;
|
|
35
35
|
} ? {} : {
|
|
36
36
|
getItemLabel: MenuPropGetItemLabel<ITEM>;
|