npm - @gravity-ui/navigation - Versions diffs - 5.0.0-beta.3 → 5.0.0 - Mend

@gravity-ui/navigation 5.0.0-beta.3 → 5.0.0

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.

Files changed (395) hide show

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Pin, PinFill} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {AsideHeaderItem} from 'src/components/AsideHeader/types';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY, ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {ITEM_TYPE_REGULAR} from '../constants';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst itemTransitionClasses = {\n enter: b('transition-title-enter'),\n enterActive: b('transition-title-enter-active'),\n enterDone: b('transition-title-enter-done'),\n exit: b('transition-title-exit'),\n exitActive: b('transition-title-exit-active'),\n exitDone: b('transition-title-exit-done'),\n};\n\nexport interface ItemProps extends AsideHeaderItem {}\n\ninterface ItemInnerProps extends ItemProps {\n compact?: boolean;\n className?: string;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n editMode?: boolean;\n onToggleVisibility?: () => void;\n}\n\nfunction renderItemTitle(params: Pick<AsideHeaderItem, 'title' \| 'rightAdornment'>) {\n let titleNode = <div className={b('title-text')}>{params.title}</div>;\n\n if (params.rightAdornment) {\n titleNode = (\n <React.Fragment>\n {titleNode}\n <div className={b('title-adornment')}>{params.rightAdornment}</div>\n </React.Fragment>\n );\n }\n\n return titleNode;\n}\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 8, crossAxis: -20};\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n onMouseLeave,\n onMouseEnter,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n compact,\n editMode = false,\n onToggleVisibility,\n hidden,\n preventUserRemoving,\n } = props;\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n const type = props.type \|\| ITEM_TYPE_REGULAR;\n const current = props.current \|\| false;\n const icon = props.icon;\n const iconSize = props.iconSize \|\| ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n\n const onPinButtonClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n e.preventDefault();\n onToggleVisibility?.();\n },\n [onToggleVisibility],\n );\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n if (type === 'divider') {\n return <div className={b('menu-divider')} />;\n }\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n return compact ? <div className={b('btn-icon')}>{iconEl}</div> : iconEl;\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n const createdNode = (\n <React.Fragment>\n <Tag\n {...tagProps}\n className={b({type, current, compact}, className)}\n ref={ref}\n data-qa={qa}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onItemClick?.(props, false, event);\n }}\n onClickCapture={onItemClickCapture}\n onMouseEnter={() => {\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n onMouseLeave?.();\n }}\n >\n <div className={b('icon-place')} ref={highlightedRef}>\n {makeIconNode(iconEl)}\n </div>\n\n <CSSTransition\n in={!compact}\n timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n classNames={itemTransitionClasses}\n >\n <div\n className={b('title')}\n title={typeof title === 'string' ? title : undefined}\n >\n {titleEl}\n </div>\n </CSSTransition>\n\n {editMode && !preventUserRemoving && onToggleVisibility ? (\n <Button\n onClick={onPinButtonClick}\n view={hidden ? 'flat-secondary' : 'flat-action'}\n className={b('visibility-button')}\n >\n <Button.Icon>{hidden ? <Pin /> : <PinFill />}</Button.Icon>\n </Button>\n ) : null}\n </Tag>\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode = icon ? (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n ) : null;\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (itemWrapper(\n params,\n ({icon: iconEl}) => makeIconNode(iconEl),\n opts,\n ) as React.ReactElement);\n } else {\n node = makeNode(params);\n highlightedNode = bringForward && makeIconNode(iconNode);\n }\n\n return (\n <React.Fragment>\n {bringForward && (\n <HighlightedItem\n iconNode={highlightedNode}\n iconRef={highlightedRef}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n onItemClick?.(props, false, event)\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["createBlock","styles","ITEM_TYPE_REGULAR","ASIDE_HEADER_ICON_SIZE","CSSTransition","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","Button","Pin","PinFill","Popup","Icon","HighlightedItem"],"mappings":"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"}
1	+ {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Pin, PinFill} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY, ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem, SetCollapseBlocker} from '../../../types';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {ITEM_TYPE_REGULAR} from '../constants';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst itemTransitionClasses = {\n enter: b('transition-title-enter'),\n enterActive: b('transition-title-enter-active'),\n enterDone: b('transition-title-enter-done'),\n exit: b('transition-title-exit'),\n exitActive: b('transition-title-exit-active'),\n exitDone: b('transition-title-exit-done'),\n};\n\nexport interface ItemProps extends AsideHeaderItem {}\n\ninterface ItemInnerProps extends ItemProps {\n /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. /\n setCollapseBlocker?: SetCollapseBlocker;\n /* When `true`, the item is displayed in expanded form. /\n isExpanded?: boolean;\n /* Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used in FooterBar. */\n layout?: 'horizontal' \| 'vertical';\n className?: string;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n editMode?: boolean;\n onToggleVisibility?: () => void;\n}\n\nfunction renderItemTitle(params: Pick<AsideHeaderItem, 'title' \| 'rightAdornment'>) {\n let titleNode = <div className={b('title-text')}>{params.title}</div>;\n\n if (params.rightAdornment) {\n titleNode = (\n <React.Fragment>\n {titleNode}\n <div className={b('title-adornment')}>{params.rightAdornment}</div>\n </React.Fragment>\n );\n }\n\n return titleNode;\n}\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 8, crossAxis: -20};\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n onMouseLeave,\n onMouseEnter,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n isExpanded = true,\n layout = 'vertical',\n editMode = false,\n onToggleVisibility,\n setCollapseBlocker,\n hidden,\n preventUserRemoving,\n } = props;\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n let didBlock = false;\n\n if (popupVisible) {\n didBlock = true;\n\n setCollapseBlocker?.(true);\n }\n\n return () => {\n if (didBlock) {\n setCollapseBlocker?.(false);\n }\n };\n }, [popupVisible, setCollapseBlocker]);\n\n const type = props.type \|\| ITEM_TYPE_REGULAR;\n const current = props.current \|\| false;\n const icon = props.icon;\n const iconSize = props.iconSize \|\| ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n\n const onPinButtonClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n e.preventDefault();\n onToggleVisibility?.();\n },\n [onToggleVisibility],\n );\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n if (type === 'divider') {\n return <div className={b('menu-divider')} />;\n }\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n return isExpanded ? iconEl : <div className={b('btn-icon')}>{iconEl}</div>;\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n const ariaLabel = typeof title === 'string' ? title : undefined;\n\n const createdNode = (\n <React.Fragment>\n <Tag\n {...tagProps}\n className={b({type, current, collapsed: !isExpanded}, className)}\n ref={ref}\n data-qa={qa}\n data-type={type}\n aria-label={ariaLabel}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onItemClick?.(props, false, event, {setCollapseBlocker});\n }}\n onClickCapture={onItemClickCapture}\n onMouseEnter={() => {\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n onMouseLeave?.();\n }}\n >\n <div className={b('icon-place')} ref={highlightedRef}>\n {makeIconNode(iconEl)}\n </div>\n\n {layout === 'vertical' && (\n <CSSTransition\n in={isExpanded}\n timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n classNames={itemTransitionClasses}\n >\n <div\n className={b('title')}\n title={typeof title === 'string' ? title : undefined}\n >\n {titleEl}\n </div>\n </CSSTransition>\n )}\n\n {editMode && !preventUserRemoving && onToggleVisibility ? (\n <Button\n onClick={onPinButtonClick}\n view={hidden ? 'flat-secondary' : 'flat-action'}\n className={b('visibility-button')}\n >\n <Button.Icon>{hidden ? <Pin /> : <PinFill />}</Button.Icon>\n </Button>\n ) : null}\n </Tag>\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode = icon ? (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n ) : null;\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {\n isExpanded,\n item: props,\n ref,\n setCollapseBlocker,\n };\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (itemWrapper(\n params,\n ({icon: iconEl}) => makeIconNode(iconEl),\n opts,\n ) as React.ReactElement);\n } else {\n node = makeNode(params);\n highlightedNode = bringForward && makeIconNode(iconNode);\n }\n\n return (\n <React.Fragment>\n {bringForward && (\n <HighlightedItem\n iconNode={highlightedNode}\n iconRef={highlightedRef}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n onItemClick?.(props, false, event, {setCollapseBlocker})\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["createBlock","styles","ITEM_TYPE_REGULAR","ASIDE_HEADER_ICON_SIZE","CSSTransition","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","Button","Pin","PinFill","Popup","Icon","HighlightedItem"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.module.scss.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var styles = {"gn-composite-bar-item":"Item-module__gn-composite-bar-item___-pkx5","gnCompositeBarItem":"Item-module__gn-composite-bar-item___-pkx5","gn-composite-bar-item__icon":"Item-module__gn-composite-bar-item__icon___ORFNf","gnCompositeBarItemIcon":"Item-module__gn-composite-bar-item__icon___ORFNf","gn-composite-bar-item_current":"Item-module__gn-composite-bar-item_current___NT2hB","gnCompositeBarItemCurrent":"Item-module__gn-composite-bar-item_current___NT2hB","gn-composite-bar-item__icon-tooltip":"Item-module__gn-composite-bar-item__icon-tooltip___PxU2i","gnCompositeBarItemIconTooltip":"Item-module__gn-composite-bar-item__icon-tooltip___PxU2i","g-action-tooltip__description":"Item-module__g-action-tooltip__description___UsHcG","gActionTooltipDescription":"Item-module__g-action-tooltip__description___UsHcG","gn-composite-bar-item__icon-place":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gnCompositeBarItemIconPlace":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gn-composite-bar-item__title":"Item-module__gn-composite-bar-item__title___wj5L5","gnCompositeBarItemTitle":"Item-module__gn-composite-bar-item__title___wj5L5","gn-composite-bar-item__transition-title-enter":"Item-module__gn-composite-bar-item__transition-title-enter___4n6yR","gnCompositeBarItemTransitionTitleEnter":"Item-module__gn-composite-bar-item__transition-title-enter___4n6yR","gn-composite-bar-item__transition-title-enter-active":"Item-module__gn-composite-bar-item__transition-title-enter-active___AAvSZ","gnCompositeBarItemTransitionTitleEnterActive":"Item-module__gn-composite-bar-item__transition-title-enter-active___AAvSZ","gn-composite-bar-item__transition-title-enter-done":"Item-module__gn-composite-bar-item__transition-title-enter-done___Ilzkv","gnCompositeBarItemTransitionTitleEnterDone":"Item-module__gn-composite-bar-item__transition-title-enter-done___Ilzkv","gn-composite-bar-item__transition-title-exit":"Item-module__gn-composite-bar-item__transition-title-exit___5-JKk","gnCompositeBarItemTransitionTitleExit":"Item-module__gn-composite-bar-item__transition-title-exit___5-JKk","gn-composite-bar-item__transition-title-exit-active":"Item-module__gn-composite-bar-item__transition-title-exit-active___Dif7T","gnCompositeBarItemTransitionTitleExitActive":"Item-module__gn-composite-bar-item__transition-title-exit-active___Dif7T","gn-composite-bar-item__transition-title-exit-done":"Item-module__gn-composite-bar-item__transition-title-exit-done___PJvzY","gnCompositeBarItemTransitionTitleExitDone":"Item-module__gn-composite-bar-item__transition-title-exit-done___PJvzY","gn-composite-bar-item__visibility-button":"Item-module__gn-composite-bar-item__visibility-button___QaJg-","gnCompositeBarItemVisibilityButton":"Item-module__gn-composite-bar-item__visibility-button___QaJg-","gn-composite-bar-item__title-text":"Item-module__gn-composite-bar-item__title-text___cILJo","gnCompositeBarItemTitleText":"Item-module__gn-composite-bar-item__title-text___cILJo","gn-composite-bar-item__title-adornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gnCompositeBarItemTitleAdornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gn-composite-bar-item__collapse-item":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gnCompositeBarItemCollapseItem":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gn-composite-bar-item__collapse-item-icon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gnCompositeBarItemCollapseItemIcon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gn-composite-bar-item__menu-divider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gnCompositeBarItemMenuDivider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gn-composite-bar-item__collapse-items-popup-content":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gnCompositeBarItemCollapseItemsPopupContent":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gn-composite-bar-item__link":"Item-module__gn-composite-bar-item__link___McAVN","gnCompositeBarItemLink":"Item-module__gn-composite-bar-item__link___McAVN","gn-composite-bar-item__btn-icon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gnCompositeBarItemBtnIcon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gn-composite-bar-item_type_action":"Item-module__gn-composite-bar-item_type_action___2jxO8","gnCompositeBarItemTypeAction":"Item-module__gn-composite-bar-item_type_action___2jxO8","gn-composite-bar-item__icon-tooltip_item-type_action":"Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR","gnCompositeBarItemIconTooltipItemTypeAction":"Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR","gn-composite-bar-item_compact":"Item-module__gn-composite-bar-item_compact___PVTeM","gnCompositeBarItemCompact":"Item-module__gn-composite-bar-item_compact___PVTeM","gn-composite-bar-item_type_regular":"Item-module__gn-composite-bar-item_type_regular___wkhsT","gnCompositeBarItemTypeRegular":"Item-module__gn-composite-bar-item_type_regular___wkhsT"};
+var styles = {"gn-composite-bar-item":"Item-module__gn-composite-bar-item___-pkx5","gnCompositeBarItem":"Item-module__gn-composite-bar-item___-pkx5","gn-composite-bar-item_type_regular":"Item-module__gn-composite-bar-item_type_regular___wkhsT","gnCompositeBarItemTypeRegular":"Item-module__gn-composite-bar-item_type_regular___wkhsT","gn-composite-bar-item__btn-icon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gnCompositeBarItemBtnIcon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gn-composite-bar-item_current":"Item-module__gn-composite-bar-item_current___NT2hB","gnCompositeBarItemCurrent":"Item-module__gn-composite-bar-item_current___NT2hB","gn-composite-bar-item__icon-place":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gnCompositeBarItemIconPlace":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gn-composite-bar-item__title":"Item-module__gn-composite-bar-item__title___wj5L5","gnCompositeBarItemTitle":"Item-module__gn-composite-bar-item__title___wj5L5","gn-composite-bar-item__transition-title-enter":"Item-module__gn-composite-bar-item__transition-title-enter___4n6yR","gnCompositeBarItemTransitionTitleEnter":"Item-module__gn-composite-bar-item__transition-title-enter___4n6yR","gn-composite-bar-item__transition-title-enter-active":"Item-module__gn-composite-bar-item__transition-title-enter-active___AAvSZ","gnCompositeBarItemTransitionTitleEnterActive":"Item-module__gn-composite-bar-item__transition-title-enter-active___AAvSZ","gn-composite-bar-item__transition-title-enter-done":"Item-module__gn-composite-bar-item__transition-title-enter-done___Ilzkv","gnCompositeBarItemTransitionTitleEnterDone":"Item-module__gn-composite-bar-item__transition-title-enter-done___Ilzkv","gn-composite-bar-item__transition-title-exit":"Item-module__gn-composite-bar-item__transition-title-exit___5-JKk","gnCompositeBarItemTransitionTitleExit":"Item-module__gn-composite-bar-item__transition-title-exit___5-JKk","gn-composite-bar-item__transition-title-exit-active":"Item-module__gn-composite-bar-item__transition-title-exit-active___Dif7T","gnCompositeBarItemTransitionTitleExitActive":"Item-module__gn-composite-bar-item__transition-title-exit-active___Dif7T","gn-composite-bar-item__transition-title-exit-done":"Item-module__gn-composite-bar-item__transition-title-exit-done___PJvzY","gnCompositeBarItemTransitionTitleExitDone":"Item-module__gn-composite-bar-item__transition-title-exit-done___PJvzY","gn-composite-bar-item__visibility-button":"Item-module__gn-composite-bar-item__visibility-button___QaJg-","gnCompositeBarItemVisibilityButton":"Item-module__gn-composite-bar-item__visibility-button___QaJg-","gn-composite-bar-item__title-text":"Item-module__gn-composite-bar-item__title-text___cILJo","gnCompositeBarItemTitleText":"Item-module__gn-composite-bar-item__title-text___cILJo","gn-composite-bar-item__title-adornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gnCompositeBarItemTitleAdornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gn-composite-bar-item__collapse-item":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gnCompositeBarItemCollapseItem":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gn-composite-bar-item__collapse-item-icon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gnCompositeBarItemCollapseItemIcon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gn-composite-bar-item__menu-divider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gnCompositeBarItemMenuDivider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gn-composite-bar-item__collapse-items-popup-content":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gnCompositeBarItemCollapseItemsPopupContent":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gn-composite-bar-item__link":"Item-module__gn-composite-bar-item__link___McAVN","gnCompositeBarItemLink":"Item-module__gn-composite-bar-item__link___McAVN","gn-composite-bar-item_type_action":"Item-module__gn-composite-bar-item_type_action___2jxO8","gnCompositeBarItemTypeAction":"Item-module__gn-composite-bar-item_type_action___2jxO8","gn-composite-bar-item_collapsed":"Item-module__gn-composite-bar-item_collapsed___Ichlf","gnCompositeBarItemCollapsed":"Item-module__gn-composite-bar-item_collapsed___Ichlf"};
 exports.default = styles;
 //# sourceMappingURL=Item.module.scss.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.css ADDED Viewed

@@ -0,0 +1 @@

+ .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{flex:1 1 auto;min-height:0;position:relative;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:before{background:var(--gn-aside-bottom-shadow-color,linear-gradient(to bottom,transparent 0,transparent 50%,rgba(0,0,0,.08) 100%));bottom:0;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .3s ease-in-out}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ:before{opacity:1}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza{-ms-overflow-style:none;height:100%;overflow:hidden auto;scrollbar-width:none;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza::-webkit-scrollbar{display:none}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar___igCbU{bottom:0;box-sizing:border-box;padding:2px 0;position:absolute;right:2px;top:0;width:var(--g-spacing-1)}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN{background:var(--gn-aside-scrollbar-track-color,transparent);cursor:pointer;height:100%;position:relative;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h{background:var(--gn-aside-scrollbar-handle-color,var(--g-color-line-generic-solid));cursor:grab;left:0;min-height:20px;position:absolute;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h:hover{background:var(--gn-aside-scrollbar-handle-color-hover,var(--gn-aside-scrollbar-handle-color,var(--g-color-line-generic-solid)))}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h:active{cursor:grabbing}.g-root_theme_light .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_light-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(0,0,0,.08))}.g-root_theme_dark .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_dark-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 80%,transparent 0,rgba(0,0,0,.4))}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React, { FC, ReactNode } from 'react';
+type ScrollableWithScrollbarProps = {
+    children: ReactNode;
+    className?: string;
+    recalcDeps?: React.DependencyList;
+};
+export declare const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps>;
+export {};

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js ADDED Viewed

@@ -0,0 +1,27 @@
+import './ScrollableWithScrollbar.css';
+'use strict';
+var React = require('react');
+var cn = require('../../../../utils/cn.js');
+var useScrollbar = require('./useScrollbar.js');
+var ScrollableWithScrollbar_module = require('./ScrollableWithScrollbar.module.scss.js');
+const b = cn.createBlock('scrollable-with-scrollbar', ScrollableWithScrollbar_module.default);
+const EMPTY_DEPS = [];
+const ScrollableWithScrollbar = ({ children, className, recalcDeps = EMPTY_DEPS, }) => {
+    const scrollableContentId = React.useId();
+    const { scrollRef, scrollState, updateScrollState, showScrollbar, thumbHeight, thumbTop, handleThumbMouseDown, handleTrackClick, handleScrollbarKeyDown, } = useScrollbar.useScrollbar({ recalcDeps });
+    const hasContentBelow = scrollState.scrollHeight > scrollState.clientHeight &&
+        scrollState.scrollTop + scrollState.clientHeight < scrollState.scrollHeight - 1;
+    return (React.createElement("div", { className: b({ 'bottom-shadow': hasContentBelow }, className) },
+        React.createElement("div", { id: scrollableContentId, ref: scrollRef, className: b('scrollable-inner'), onScroll: updateScrollState }, children),
+        showScrollbar && (React.createElement("div", { className: b('scrollbar'), role: "scrollbar", "aria-controls": scrollableContentId, "aria-orientation": "vertical", "aria-valuenow": scrollState.scrollTop, "aria-valuemin": 0, "aria-valuemax": scrollState.scrollHeight - scrollState.clientHeight, tabIndex: 0, onKeyDown: handleScrollbarKeyDown },
+            React.createElement("div", { className: b('scrollbar-track'), onClick: handleTrackClick },
+                React.createElement("div", { className: b('scrollbar-thumb'), style: {
+                        height: thumbHeight,
+                        transform: `translateY(${thumbTop}px)`,
+                    }, onMouseDown: handleThumbMouseDown }))))));
+};
+exports.ScrollableWithScrollbar = ScrollableWithScrollbar;
+//# sourceMappingURL=ScrollableWithScrollbar.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ScrollableWithScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useId} from 'react';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport {useScrollbar} from './useScrollbar';\n\nimport styles from './ScrollableWithScrollbar.module.scss';\n\nconst b = createBlock('scrollable-with-scrollbar', styles);\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\ntype ScrollableWithScrollbarProps = {\n children: ReactNode;\n className?: string;\n recalcDeps?: React.DependencyList;\n};\n\nexport const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps> = ({\n children,\n className,\n recalcDeps = EMPTY_DEPS,\n}) => {\n const scrollableContentId = useId();\n const {\n scrollRef,\n scrollState,\n updateScrollState,\n showScrollbar,\n thumbHeight,\n thumbTop,\n handleThumbMouseDown,\n handleTrackClick,\n handleScrollbarKeyDown,\n } = useScrollbar({recalcDeps});\n\n const hasContentBelow =\n scrollState.scrollHeight > scrollState.clientHeight &&\n scrollState.scrollTop + scrollState.clientHeight < scrollState.scrollHeight - 1;\n\n return (\n <div className={b({'bottom-shadow': hasContentBelow}, className)}>\n <div\n id={scrollableContentId}\n ref={scrollRef}\n className={b('scrollable-inner')}\n onScroll={updateScrollState}\n >\n {children}\n </div>\n\n {showScrollbar && (\n <div\n className={b('scrollbar')}\n role=\"scrollbar\"\n aria-controls={scrollableContentId}\n aria-orientation=\"vertical\"\n aria-valuenow={scrollState.scrollTop}\n aria-valuemin={0}\n aria-valuemax={scrollState.scrollHeight - scrollState.clientHeight}\n tabIndex={0}\n onKeyDown={handleScrollbarKeyDown}\n >\n <div className={b('scrollbar-track')} onClick={handleTrackClick}>\n <div\n className={b('scrollbar-thumb')}\n style={{\n height: thumbHeight,\n transform: `translateY(${thumbTop}px)`,\n }}\n onMouseDown={handleThumbMouseDown}\n />\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["createBlock","styles","useId","useScrollbar"],"mappings":";;;;;;;AAQA,MAAM,CAAC,GAAGA,cAAW,CAAC,2BAA2B,EAAEC,sCAAM,CAAC;AAE1D,MAAM,UAAU,GAAyB,EAAE;AAQpC,MAAM,uBAAuB,GAAqC,CAAC,EACtE,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,UAAU,GAC1B,KAAI;AACD,IAAA,MAAM,mBAAmB,GAAGC,WAAK,EAAE;IACnC,MAAM,EACF,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,GACzB,GAAGC,yBAAY,CAAC,EAAC,UAAU,EAAC,CAAC;IAE9B,MAAM,eAAe,GACjB,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY;AACnD,QAAA,WAAW,CAAC,SAAS,GAAG,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,GAAG,CAAC;AAEnF,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,EAAC,eAAe,EAAE,eAAe,EAAC,EAAE,SAAS,CAAC,EAAA;QAC5D,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAChC,QAAQ,EAAE,iBAAiB,EAAA,EAE1B,QAAQ,CACP;AAEL,QAAA,aAAa,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EACzB,IAAI,EAAC,WAAW,mBACD,mBAAmB,EAAA,kBAAA,EACjB,UAAU,EACZ,eAAA,EAAA,WAAW,CAAC,SAAS,mBACrB,CAAC,EAAA,eAAA,EACD,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,EAClE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,sBAAsB,EAAA;YAEjC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAA;gBAC3D,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,KAAK,EAAE;AACH,wBAAA,MAAM,EAAE,WAAW;wBACnB,SAAS,EAAE,CAAc,WAAA,EAAA,QAAQ,CAAK,GAAA,CAAA;qBACzC,EACD,WAAW,EAAE,oBAAoB,EAAA,CACnC,CACA,CACJ,CACT,CACC;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js ADDED Viewed

@@ -0,0 +1,8 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var styles = {"gn-scrollable-with-scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gnScrollableWithScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gn-scrollable-with-scrollbar_bottom-shadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gnScrollableWithScrollbarBottomShadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gn-scrollable-with-scrollbar__scrollable-inner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gnScrollableWithScrollbarScrollableInner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gn-scrollable-with-scrollbar__scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar___igCbU","gnScrollableWithScrollbarScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar___igCbU","gn-scrollable-with-scrollbar__scrollbar-track":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gnScrollableWithScrollbarScrollbarTrack":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gn-scrollable-with-scrollbar__scrollbar-thumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h","gnScrollableWithScrollbarScrollbarThumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h"};
+exports.default = styles;
+//# sourceMappingURL=ScrollableWithScrollbar.module.scss.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ScrollableWithScrollbar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { ScrollableWithScrollbar } from './ScrollableWithScrollbar';

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollbar.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+type ScrollbarState = {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+};
+type UseScrollbarOptions = {
+    recalcDeps?: React.DependencyList;
+};
+export declare function useScrollbar(options?: UseScrollbarOptions): {
+    scrollRef: React.RefObject<HTMLDivElement>;
+    scrollState: ScrollbarState;
+    updateScrollState: () => void;
+    showScrollbar: boolean;
+    thumbHeight: number;
+    thumbTop: number;
+    handleThumbMouseDown: (e: React.MouseEvent) => void;
+    handleTrackClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleScrollbarKeyDown: (e: React.KeyboardEvent) => void;
+};
+export {};

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollbar.js ADDED Viewed

@@ -0,0 +1,146 @@
+'use strict';
+var React = require('react');
+const DEFAULT_SCROLLBAR_THUMB_HEIGHT = 20;
+const EMPTY_DEPS = [];
+function useScrollbar(options = {}) {
+    const { recalcDeps = EMPTY_DEPS } = options;
+    const scrollRef = React.useRef(null);
+    const [scrollState, setScrollState] = React.useState({
+        scrollTop: 0,
+        scrollHeight: 0,
+        clientHeight: 0,
+    });
+    const thumbDragRef = React.useRef({ isDragging: false, startY: 0, startScrollTop: 0 });
+    const dragCleanupRef = React.useRef(null);
+    const updateScrollState = React.useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setScrollState({
+            scrollTop: el.scrollTop,
+            scrollHeight: el.scrollHeight,
+            clientHeight: el.clientHeight,
+        });
+    }, []);
+    React.useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        updateScrollState();
+        const observer = new ResizeObserver(updateScrollState);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [updateScrollState, ...recalcDeps]);
+    const handleThumbMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+        if (!scrollRef.current)
+            return;
+        thumbDragRef.current = {
+            isDragging: true,
+            startY: e.clientY,
+            startScrollTop: scrollRef.current.scrollTop,
+        };
+        const onMouseMove = (moveEvent) => {
+            if (!thumbDragRef.current.isDragging || !scrollRef.current)
+                return;
+            const { scrollHeight, clientHeight } = scrollRef.current;
+            const trackHeight = clientHeight;
+            const maxScroll = scrollHeight - clientHeight;
+            if (maxScroll <= 0)
+                return;
+            const deltaY = moveEvent.clientY - thumbDragRef.current.startY;
+            const thumbRatio = trackHeight / scrollHeight;
+            const scrollDelta = deltaY / thumbRatio;
+            scrollRef.current.scrollTop = Math.min(maxScroll, Math.max(0, thumbDragRef.current.startScrollTop + scrollDelta));
+            thumbDragRef.current.startY = moveEvent.clientY;
+            thumbDragRef.current.startScrollTop = scrollRef.current.scrollTop;
+        };
+        const removeListeners = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            dragCleanupRef.current = null;
+        };
+        const onMouseUp = () => {
+            thumbDragRef.current.isDragging = false;
+            removeListeners();
+        };
+        dragCleanupRef.current = removeListeners;
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = dragCleanupRef.current) === null || _a === undefined ? undefined : _a.call(dragCleanupRef);
+        };
+    }, []);
+    const handleTrackClick = React.useCallback((e) => {
+        if (!scrollRef.current || e.target !== e.currentTarget)
+            return;
+        const { scrollHeight, clientHeight } = scrollRef.current;
+        const maxScroll = scrollHeight - clientHeight;
+        if (maxScroll <= 0)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientY - rect.top) / rect.height;
+        scrollRef.current.scrollTop = ratio * maxScroll;
+    }, []);
+    const handleScrollbarKeyDown = React.useCallback((e) => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const { scrollHeight, clientHeight } = el;
+        const maxScroll = scrollHeight - clientHeight;
+        if (maxScroll <= 0)
+            return;
+        const step = Math.max(20, clientHeight * 0.2);
+        let newScrollTop = el.scrollTop;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                newScrollTop = Math.min(maxScroll, el.scrollTop + step);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                newScrollTop = Math.max(0, el.scrollTop - step);
+                break;
+            case 'End':
+                e.preventDefault();
+                newScrollTop = maxScroll;
+                break;
+            case 'Home':
+                e.preventDefault();
+                newScrollTop = 0;
+                break;
+            default:
+                return;
+        }
+        el.scrollTop = newScrollTop;
+        updateScrollState();
+    }, [updateScrollState]);
+    const showScrollbar = scrollState.scrollHeight > scrollState.clientHeight && scrollState.scrollHeight > 0;
+    const thumbRatio = scrollState.scrollHeight > 0 ? scrollState.clientHeight / scrollState.scrollHeight : 0;
+    const thumbHeight = Math.max(DEFAULT_SCROLLBAR_THUMB_HEIGHT, scrollState.clientHeight * thumbRatio);
+    const trackHeight = scrollState.clientHeight;
+    const thumbMaxTop = trackHeight - thumbHeight;
+    const thumbTop = trackHeight > thumbHeight && scrollState.scrollHeight > scrollState.clientHeight
+        ? (scrollState.scrollTop / (scrollState.scrollHeight - scrollState.clientHeight)) *
+            thumbMaxTop
+        : 0;
+    return {
+        scrollRef,
+        scrollState,
+        updateScrollState,
+        showScrollbar,
+        thumbHeight,
+        thumbTop,
+        handleThumbMouseDown,
+        handleTrackClick,
+        handleScrollbarKeyDown,
+    };
+}
+exports.useScrollbar = useScrollbar;
+//# sourceMappingURL=useScrollbar.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollbar.ts"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\n\ntype ScrollbarState = {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n};\n\ntype UseScrollbarOptions = {\n recalcDeps?: React.DependencyList;\n};\n\nconst DEFAULT_SCROLLBAR_THUMB_HEIGHT = 20;\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\nexport function useScrollbar(options: UseScrollbarOptions = {}) {\n const {recalcDeps = EMPTY_DEPS} = options;\n const scrollRef = useRef<HTMLDivElement>(null);\n const [scrollState, setScrollState] = useState<ScrollbarState>({\n scrollTop: 0,\n scrollHeight: 0,\n clientHeight: 0,\n });\n const thumbDragRef = useRef({isDragging: false, startY: 0, startScrollTop: 0});\n const dragCleanupRef = useRef<(() => void) | null>(null);\n\n const updateScrollState = useCallback(() => {\n const el = scrollRef.current;\n\n if (!el) return;\n\n setScrollState({\n scrollTop: el.scrollTop,\n scrollHeight: el.scrollHeight,\n clientHeight: el.clientHeight,\n });\n }, []);\n\n useEffect(() => {\n const el = scrollRef.current;\n\n if (!el) return;\n\n updateScrollState();\n\n const observer = new ResizeObserver(updateScrollState);\n observer.observe(el);\n\n return () => observer.disconnect();\n }, [updateScrollState, ...recalcDeps]);\n\n const handleThumbMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n\n if (!scrollRef.current) return;\n\n thumbDragRef.current = {\n isDragging: true,\n startY: e.clientY,\n startScrollTop: scrollRef.current.scrollTop,\n };\n\n const onMouseMove = (moveEvent: MouseEvent) => {\n if (!thumbDragRef.current.isDragging || !scrollRef.current) return;\n const {scrollHeight, clientHeight} = scrollRef.current;\n const trackHeight = clientHeight;\n const maxScroll = scrollHeight - clientHeight;\n\n if (maxScroll <= 0) return;\n\n const deltaY = moveEvent.clientY - thumbDragRef.current.startY;\n const thumbRatio = trackHeight / scrollHeight;\n const scrollDelta = deltaY / thumbRatio;\n\n scrollRef.current.scrollTop = Math.min(\n maxScroll,\n Math.max(0, thumbDragRef.current.startScrollTop + scrollDelta),\n );\n\n thumbDragRef.current.startY = moveEvent.clientY;\n thumbDragRef.current.startScrollTop = scrollRef.current.scrollTop;\n };\n\n const removeListeners = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n dragCleanupRef.current = null;\n };\n\n const onMouseUp = () => {\n thumbDragRef.current.isDragging = false;\n removeListeners();\n };\n\n dragCleanupRef.current = removeListeners;\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }, []);\n\n useEffect(() => {\n return () => {\n dragCleanupRef.current?.();\n };\n }, []);\n\n const handleTrackClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n if (!scrollRef.current || e.target !== e.currentTarget) return;\n\n const {scrollHeight, clientHeight} = scrollRef.current;\n const maxScroll = scrollHeight - clientHeight;\n\n if (maxScroll <= 0) return;\n\n const rect = e.currentTarget.getBoundingClientRect();\n const ratio = (e.clientY - rect.top) / rect.height;\n\n scrollRef.current.scrollTop = ratio * maxScroll;\n }, []);\n\n const handleScrollbarKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const el = scrollRef.current;\n if (!el) return;\n\n const {scrollHeight, clientHeight} = el;\n const maxScroll = scrollHeight - clientHeight;\n if (maxScroll <= 0) return;\n\n const step = Math.max(20, clientHeight * 0.2);\n let newScrollTop = el.scrollTop;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n newScrollTop = Math.min(maxScroll, el.scrollTop + step);\n break;\n case 'ArrowUp':\n e.preventDefault();\n newScrollTop = Math.max(0, el.scrollTop - step);\n break;\n case 'End':\n e.preventDefault();\n newScrollTop = maxScroll;\n break;\n case 'Home':\n e.preventDefault();\n newScrollTop = 0;\n break;\n default:\n return;\n }\n\n el.scrollTop = newScrollTop;\n updateScrollState();\n },\n [updateScrollState],\n );\n\n const showScrollbar =\n scrollState.scrollHeight > scrollState.clientHeight && scrollState.scrollHeight > 0;\n const thumbRatio =\n scrollState.scrollHeight > 0 ? scrollState.clientHeight / scrollState.scrollHeight : 0;\n const thumbHeight = Math.max(\n DEFAULT_SCROLLBAR_THUMB_HEIGHT,\n scrollState.clientHeight * thumbRatio,\n );\n const trackHeight = scrollState.clientHeight;\n const thumbMaxTop = trackHeight - thumbHeight;\n const thumbTop =\n trackHeight > thumbHeight && scrollState.scrollHeight > scrollState.clientHeight\n ? (scrollState.scrollTop / (scrollState.scrollHeight - scrollState.clientHeight)) *\n thumbMaxTop\n : 0;\n\n return {\n scrollRef,\n scrollState,\n updateScrollState,\n showScrollbar,\n thumbHeight,\n thumbTop,\n handleThumbMouseDown,\n handleTrackClick,\n handleScrollbarKeyDown,\n };\n}\n"],"names":["useRef","useState","useCallback","useEffect"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/CompositeBar/utils.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import { AsideHeaderItem, MenuItemsWithGroups } from '../../types';
-export declare function getItemHeight(compositeItem: MenuItemsWithGroups): number;
-export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[]): number;
+export declare function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean): number;
+export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean): number;
 export declare function getSelectedItemIndex(compositeItems: AsideHeaderItem[]): number | undefined;
+export declare function getVisibleItemsWithFilteredDividers(items: MenuItemsWithGroups[], allPagesId?: string): MenuItemsWithGroups[];
+export declare function filterRedundantDividers<T extends MenuItemsWithGroups>(items: T[], allPagesId?: string): T[];

package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js CHANGED Viewed

@@ -3,14 +3,14 @@
 var constants = require('../../../constants.js');
 var getGroupHeight$1 = require('../../utils/getGroupHeight.js');
-function getGroupHeight(compositeItem) {
+function getGroupHeight(compositeItem, isCompactMode) {
     const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
-    return getGroupHeight$1.getGroupBlockHeight(visibleGroupItems);
+    return getGroupHeight$1.getGroupBlockHeight(visibleGroupItems, isCompactMode);
 }
-function getItemHeight(compositeItem) {
+function getItemHeight(compositeItem, isCompactMode) {
     var _a;
     if ('items' in compositeItem && compositeItem.items && ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.length) > 0) {
-        return getGroupHeight(compositeItem);
+        return getGroupHeight(compositeItem, isCompactMode);
     }
     switch (compositeItem.type) {
         case 'action':
@@ -18,18 +18,68 @@ function getItemHeight(compositeItem) {
         case 'divider':
             return 15;
         default:
-            return constants.ITEM_HEIGHT;
+            return isCompactMode ? constants.ITEM_HEIGHT_COMPACT : constants.ITEM_HEIGHT;
     }
 }
-function getItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+function getItemsHeight(items, isCompactMode) {
+    const gaps = items.length > 1 ? (items.length - 1) * constants.ITEM_GAP : 0;
+    return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;
 }
 function getSelectedItemIndex(compositeItems) {
     const index = compositeItems.findIndex(({ current }) => Boolean(current));
     return index === -1 ? undefined : index;
 }
+/** Removes consecutive dividers so that at most one divider is shown between other items. */
+function filterConsecutiveDividers(items) {
+    return items.filter((item, index) => {
+        if (item.type !== 'divider') {
+            return true;
+        }
+        const prev = items[index - 1];
+        return (prev === null || prev === undefined ? undefined : prev.type) !== 'divider';
+    });
+}
+/** Removes dividers from the start and end of the list. */
+function filterLeadingAndTrailingDividers(items) {
+    const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');
+    if (firstNonDividerIndex === -1) {
+        return [];
+    }
+    let lastNonDividerIndex = items.length - 1;
+    while (lastNonDividerIndex >= firstNonDividerIndex &&
+        items[lastNonDividerIndex].type === 'divider') {
+        lastNonDividerIndex--;
+    }
+    if (lastNonDividerIndex < firstNonDividerIndex) {
+        return [];
+    }
+    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);
+}
+function getVisibleItemsWithFilteredDividers(items, allPagesId) {
+    const visible = items
+        .filter((item) => !item.hidden)
+        .map((item) => {
+        if ('items' in item && item.items) {
+            return Object.assign(Object.assign({}, item), { items: filterRedundantDividers(item.items.filter((nested) => !nested.hidden), allPagesId) });
+        }
+        return item;
+    });
+    return filterRedundantDividers(visible, allPagesId);
+}
+function filterRedundantDividers(items, allPagesId) {
+    const nonDividers = items.filter((item) => item.type !== 'divider');
+    const hasNoNonDividers = nonDividers.length === 0;
+    const isOnlyAllPagesItem = nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;
+    const hasNoRealContent = hasNoNonDividers || isOnlyAllPagesItem;
+    if (hasNoRealContent) {
+        return nonDividers;
+    }
+    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));
+}
+exports.filterRedundantDividers = filterRedundantDividers;
 exports.getItemHeight = getItemHeight;
 exports.getItemsHeight = getItemsHeight;
 exports.getSelectedItemIndex = getSelectedItemIndex;
+exports.getVisibleItemsWithFilteredDividers = getVisibleItemsWithFilteredDividers;
 //# sourceMappingURL=utils.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem, GroupedMenuItem, MenuItemsWithGroups} from '../../types';\nimport {getGroupBlockHeight} from '../../utils/getGroupHeight';\n\nfunction getGroupHeight(compositeItem: GroupedMenuItem) {\n const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;\n\n return getGroupBlockHeight(visibleGroupItems);\n}\n\nexport function getItemHeight(compositeItem: MenuItemsWithGroups) {\n if ('items' in compositeItem && compositeItem.items && compositeItem.items?.length > 0) {\n return getGroupHeight(compositeItem);\n }\n\n switch (compositeItem.type) {\n case 'action':\n return 50;\n case 'divider':\n return 15;\n\n default:\n return ITEM_HEIGHT;\n }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n const index = compositeItems.findIndex(({current}) => Boolean(current));\n return index === -1 ? undefined : index;\n}\n"],"names":["getGroupBlockHeight","ITEM_HEIGHT"],"mappings":";;;;;AAIA,SAAS,cAAc,CAAC,aAA8B,EAAA;~~AAClD~~,IAAA,MAAM,iBAAiB,GAAG,aAAa,CAAC,WAAW,GAAG,EAAE,GAAG,aAAa,CAAC,KAAK;AAE9E,IAAA,OAAOA,oCAAmB,CAAC,iBAAiB,CAAC;~~AACjD~~;~~AAEM~~,~~SAAU~~,aAAa,CAAC,aAAkC,EAAA;;~~AAC5D~~,IAAA,IAAI,OAAO,IAAI,aAAa,IAAI,aAAa,CAAC,KAAK,IAAI,CAAA,CAAA,EAAA,GAAA,aAAa,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,IAAG,CAAC,EAAE;AACpF,QAAA,OAAO,cAAc,CAAC,aAAa,CAAC;;~~AAGxC~~,IAAA,QAAQ,aAAa,CAAC,IAAI;AACtB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,EAAE;AACb,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,EAAE;AAEb,QAAA;~~AACI~~,~~YAAA~~,~~OAAOC~~,qBAAW;;~~AAE9B~~;~~AAEM~~,~~SAAU~~,cAAc,CAA4B,KAAU,EAAA;~~IAChE~~,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;~~AACpE~~;AAEM,SAAU,oBAAoB,CAAC,cAAiC,EAAA;AAClE,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAC,OAAO,EAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AACvE,IAAA,OAAO,KAAK,KAAK,EAAE,GAAG,SAAS,GAAG,KAAK;AAC3C~~;;;;;;~~"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {ITEM_GAP, ITEM_HEIGHT, ITEM_HEIGHT_COMPACT} from '../../../constants';\nimport {AsideHeaderItem, GroupedMenuItem, MenuItemsWithGroups} from '../../types';\nimport {getGroupBlockHeight} from '../../utils/getGroupHeight';\n\nfunction getGroupHeight(compositeItem: GroupedMenuItem, isCompactMode?: boolean) {\n const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;\n\n return getGroupBlockHeight(visibleGroupItems, isCompactMode);\n}\n\nexport function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean) {\n if ('items' in compositeItem && compositeItem.items && compositeItem.items?.length > 0) {\n return getGroupHeight(compositeItem, isCompactMode);\n }\n\n switch (compositeItem.type) {\n case 'action':\n return 50;\n case 'divider':\n return 15;\n\n default:\n return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;\n }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean) {\n const gaps = items.length > 1 ? (items.length - 1) * ITEM_GAP : 0;\n\n return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n const index = compositeItems.findIndex(({current}) => Boolean(current));\n return index === -1 ? undefined : index;\n}\n\n/** Removes consecutive dividers so that at most one divider is shown between other items. /\nfunction filterConsecutiveDividers<T extends AsideHeaderItem>(items: T[]): T[] {\n return items.filter((item, index) => {\n if (item.type !== 'divider') {\n return true;\n }\n\n const prev = items[index - 1];\n\n return prev?.type !== 'divider';\n });\n}\n\n/* Removes dividers from the start and end of the list. */\nfunction filterLeadingAndTrailingDividers<T extends MenuItemsWithGroups>(items: T[]): T[] {\n const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');\n\n if (firstNonDividerIndex === -1) {\n return [];\n }\n\n let lastNonDividerIndex = items.length - 1;\n\n while (\n lastNonDividerIndex >= firstNonDividerIndex &&\n items[lastNonDividerIndex].type === 'divider'\n ) {\n lastNonDividerIndex--;\n }\n\n if (lastNonDividerIndex < firstNonDividerIndex) {\n return [];\n }\n return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);\n}\n\nexport function getVisibleItemsWithFilteredDividers(\n items: MenuItemsWithGroups[],\n allPagesId?: string,\n) {\n const visible = items\n .filter((item) => !item.hidden)\n .map((item) => {\n if ('items' in item && item.items) {\n return {\n ...item,\n items: filterRedundantDividers(\n item.items.filter((nested) => !nested.hidden),\n allPagesId,\n ),\n };\n }\n return item;\n });\n\n return filterRedundantDividers(visible, allPagesId);\n}\n\nexport function filterRedundantDividers<T extends MenuItemsWithGroups>(\n items: T[],\n allPagesId?: string,\n) {\n const nonDividers = items.filter((item) => item.type !== 'divider');\n const hasNoNonDividers = nonDividers.length === 0;\n const isOnlyAllPagesItem =\n nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;\n const hasNoRealContent = hasNoNonDividers \|\| isOnlyAllPagesItem;\n\n if (hasNoRealContent) {\n return nonDividers;\n }\n\n return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));\n}\n"],"names":["getGroupBlockHeight","ITEM_HEIGHT_COMPACT","ITEM_HEIGHT","ITEM_GAP"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/FirstPanel.js CHANGED Viewed

@@ -8,6 +8,7 @@ var AsideHeaderContext = require('../AsideHeaderContext.js');
 var utils = require('../utils.js');
 var useGroupedMenuItems = require('./AllPagesPanel/useGroupedMenuItems.js');
 var CompositeBar = require('./CompositeBar/CompositeBar.js');
+var FooterBar = require('./FooterBar/FooterBar.js');
 var Header = require('./Header.js');
 var Panels = require('./Panels.js');
@@ -20,26 +21,45 @@ const asideTransitionClassNames = {
     exitActive: utils.b('aside-transition-exit-active'),
 };
 const FirstPanel = React.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, multipleTooltip, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, compact, customBackground, customBackgroundClassName, className, menuItems, menuGroups, qa, onExpand, onFold, isExpanded, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, renderFooterAfter, pinned, customBackground, customBackgroundClassName, className, menuItems, menuGroups, qa, onExpand, onFold, setCollapseBlocker, isExpanded, isCompactMode, } = AsideHeaderContext.useAsideHeaderInnerContext();
     const flatListItems = useGroupedMenuItems.useGroupedMenuItems(menuItems, menuGroups);
     const asideRef = React.useRef(null);
     React.useEffect(() => {
         uikit.setRef(ref, asideRef.current);
     }, [ref]);
-    const isExpandedByHover = compact && isExpanded;
+    const isExpandedByHover = !pinned && isExpanded;
+    const footerResult = renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+        size,
+        isExpanded,
+        isPinned: pinned,
+        asideRef,
+        isCompactMode,
+    });
+    const canRenderFooterInHorizontalMode = Array.isArray(footerResult) && footerResult.length > 1;
+    const renderFooterContent = React.useCallback(() => {
+        if (canRenderFooterInHorizontalMode) {
+            return (React.createElement(FooterBar.FooterBar, { isPinned: pinned, isExpanded: isExpanded, renderAfter: renderFooterAfter, setCollapseBlocker: setCollapseBlocker }, footerResult));
+        }
+        return footerResult;
+    }, [
+        footerResult,
+        pinned,
+        isExpanded,
+        canRenderFooterInHorizontalMode,
+        setCollapseBlocker,
+        renderFooterAfter,
+    ]);
     return (React.createElement(React.Fragment, null,
         React.createElement(reactTransitionGroup.CSSTransition, { in: isExpandedByHover, timeout: constants.ASIDE_HEADER_EXPAND_TRANSITION_DELAY, classNames: asideTransitionClassNames },
-            React.createElement("div", { className: utils.b('aside', className), style: { width: size }, "data-qa": qa, onMouseEnter: onExpand, onMouseLeave: onFold },
+            React.createElement("div", { className: utils.b('aside', { ['compact-mode']: isCompactMode }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onExpand, onMouseLeave: onFold },
                 React.createElement("div", { className: utils.b('aside-popup-anchor'), ref: asideRef }),
                 customBackground && (React.createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
                 React.createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
                     React.createElement(Header.Header, null),
-                    (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React.createElement(CompositeBar.CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: utils.b('menu-items'), groupClassName: utils.b('menu-items-group'), menuItemClassName: utils.b('menu-item'), compact: !isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, multipleTooltip: multipleTooltip })) : (React.createElement("div", { className: utils.b('menu-items') })),
-                    React.createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
-                        size,
-                        compact: Boolean(!isExpanded),
-                        asideRef,
-                    }))))),
+                    (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React.createElement(CompositeBar.CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: utils.b('menu-items'), menuItemClassName: utils.b('menu-item'), isExpanded: isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker })) : (React.createElement("div", { className: utils.b('menu-items') })),
+                    React.createElement("div", { className: utils.b('footer', {
+                            horizontal: canRenderFooterInHorizontalMode && pinned,
+                        }) }, renderFooterContent())))),
         React.createElement(Panels.Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';