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

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

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 (454) hide show

package/build/cjs/components/MobileHeader/MobileHeader.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import './MobileHeader.css';
 'use strict';
+var tslib = require('tslib');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var useForwardRef = require('../../hooks/useForwardRef.js');
@@ -19,14 +20,14 @@ const b = cn.createBlock('mobile-header', MobileHeader_module.default);
 const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = index.default('burger_button_close'), burgerOpenTitle = index.default('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef.useForwardRef(ref);
     const [compact] = React.useState(true);
-    const [visiblePanel, setVisiblePanel] = React.useState(null);
+    const [openPanel, setOpenPanel] = React.useState(null);
     const [overlapPanelVisible, setOverlapPanelVisible] = React.useState(false);
     // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
     const size = compact ? constants.MOBILE_HEADER_COMPACT_HEIGHT : constants.MOBILE_HEADER_EXPANDED_HEIGHT;
     const onPanelToggle = React.useCallback((name) => {
         if (!name)
             return;
-        setVisiblePanel((prev) => {
+        setOpenPanel((prev) => {
             const panelOpen = prev === name;
             onEvent === null || onEvent === undefined ? undefined : onEvent(name, panelOpen
                 ? constants.MOBILE_HEADER_EVENT_NAMES.closeEvent
@@ -43,24 +44,24 @@ const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = in
     const onMobilePanelOpen = React.useCallback(({ detail }) => {
         if (typeof (detail === null || detail === undefined ? undefined : detail.panelName) === 'string') {
             onEvent === null || onEvent === undefined ? undefined : onEvent(detail === null || detail === undefined ? undefined : detail.panelName, constants.MOBILE_HEADER_EVENT_NAMES.openEvent);
-            setVisiblePanel(detail === null || detail === undefined ? undefined : detail.panelName);
+            setOpenPanel(detail === null || detail === undefined ? undefined : detail.panelName);
             setOverlapPanelVisible(false);
         }
     }, [onEvent]);
     const onMobilePanelClose = React.useCallback(({ detail }) => {
         if (typeof (detail === null || detail === undefined ? undefined : detail.panelName) === 'string') {
             onEvent === null || onEvent === undefined ? undefined : onEvent(detail === null || detail === undefined ? undefined : detail.panelName, constants.MOBILE_HEADER_EVENT_NAMES.closeEvent);
-            setVisiblePanel(null);
+            setOpenPanel(null);
             setOverlapPanelVisible(false);
         }
     }, [onEvent]);
     const onBurgerOpen = React.useCallback(() => {
         onEvent === null || onEvent === undefined ? undefined : onEvent(constants.BURGER_PANEL_ITEM_ID, constants.MOBILE_HEADER_EVENT_NAMES.openEvent);
-        setVisiblePanel(constants.BURGER_PANEL_ITEM_ID);
+        setOpenPanel(constants.BURGER_PANEL_ITEM_ID);
     }, [onEvent]);
     const onBurgerClose = React.useCallback(() => {
         onEvent === null || onEvent === undefined ? undefined : onEvent(constants.BURGER_PANEL_ITEM_ID, constants.MOBILE_HEADER_EVENT_NAMES.closeEvent);
-        setVisiblePanel(null);
+        setOpenPanel(null);
     }, [onEvent]);
     const onOverlapOpen = React.useCallback(() => {
         onEvent === null || onEvent === undefined ? undefined : onEvent(constants.OVERLAP_PANEL_ITEM_ID, constants.MOBILE_HEADER_EVENT_NAMES.openEvent);
@@ -71,11 +72,11 @@ const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = in
         setOverlapPanelVisible(false);
     }, [onEvent]);
     const onCloseDrawer = React.useCallback(() => {
-        if (visiblePanel) {
-            onEvent === null || onEvent === undefined ? undefined : onEvent(visiblePanel, constants.MOBILE_HEADER_EVENT_NAMES.closeEvent);
+        if (openPanel) {
+            onEvent === null || onEvent === undefined ? undefined : onEvent(openPanel, constants.MOBILE_HEADER_EVENT_NAMES.closeEvent);
         }
-        setVisiblePanel(null);
-    }, [visiblePanel, onEvent]);
+        setOpenPanel(null);
+    }, [openPanel, onEvent]);
     const onBurgerMenuItemClick = React.useCallback((item) => {
         var _a;
         const closeMenuOnClick = (_a = item.closeMenuOnClick) !== null && _a !== undefined ? _a : true;
@@ -97,7 +98,7 @@ const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = in
     }, [logo, onClosePanel]);
     const burgerPanelItem = React.useMemo(() => ({
         id: constants.BURGER_PANEL_ITEM_ID,
-        content: (React.createElement(BurgerMenu.BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b('burger-menu') })),
+        children: (React.createElement(BurgerMenu.BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b('burger-menu') })),
         className: burgerMenu.className,
     }), [
         burgerMenu.items,
@@ -144,11 +145,14 @@ const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = in
             topAlert && (React.createElement(React.Suspense, { fallback: null },
                 React.createElement(TopAlert, { alert: topAlert, mobileView: true }))),
             React.createElement("header", { className: b('header'), style: { height: size } },
-                React.createElement(Burger.Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(constants.BURGER_PANEL_ITEM_ID), className: b('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
+                React.createElement(Burger.Burger, { opened: openPanel === burgerPanelItem.id, onClick: () => onPanelToggle(constants.BURGER_PANEL_ITEM_ID), className: b('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
                 React.createElement(MobileLogo.MobileLogo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
                 React.createElement("div", { className: b('side-item') }, sideItemRenderContent === null || sideItemRenderContent === undefined ? undefined : sideItemRenderContent({ size })))),
-        allPanelItems.map((item) => (React.createElement(uikit.Drawer, { key: item.id, className: b('panels'), open: visiblePanel === item.id, onOpenChange: (open) => !open && onCloseDrawer(), style: { top: `calc(${size}px + var(--gn-top-alert-height, 0px))` }, contentClassName: b('panel-item', item.className), size: 320, disablePortal: true }, item.content))),
-        overlapPanel && (React.createElement(OverlapPanel.OverlapPanel, { topOffset: size, className: b('overlap-panel'), title: overlapPanel.title, onClose: onOverlapClose, action: overlapPanel.action, visible: overlapPanelVisible, renderContent: overlapPanel.renderContent })),
+        allPanelItems.map((_a) => {
+            var { id, className } = _a, rest = tslib.__rest(_a, ["id", "className"]);
+            return (React.createElement(uikit.Drawer, Object.assign({}, rest, { key: id, className: b('panels'), open: openPanel === id, onOpenChange: (open) => !open && onCloseDrawer(), style: { top: `calc(${size}px + var(--gn-top-alert-height, 0px))` }, contentClassName: b('panel-item', className), size: 320 })));
+        }),
+        overlapPanel && (React.createElement(OverlapPanel.OverlapPanel, { topOffset: size, className: b('overlap-panel'), title: overlapPanel.title, onClose: onOverlapClose, action: overlapPanel.action, open: overlapPanelVisible, renderContent: overlapPanel.renderContent })),
         React.createElement(Content.Content, { size: size, renderContent: renderContent, className: b('content', contentClassName), cssSizeVariableName: "--mobile-header-size" })));
 });
 MobileHeader.displayName = 'MobileHeader';

package/build/cjs/components/MobileHeader/MobileHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Drawer} from '@gravity-ui/uikit';\n\nimport {useForwardRef} from '../../hooks/useForwardRef';\nimport {Content, RenderContentType} from '../Content';\nimport {MobileLogo} from '../MobileLogo';\nimport {LogoProps, TopAlertProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport {Burger} from './Burger/Burger';\nimport {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';\nimport {\n OverlapPanelProps as CommonOverlapPanelProps,\n OverlapPanel,\n} from './OverlapPanel/OverlapPanel';\nimport {\n BURGER_PANEL_ITEM_ID,\n MOBILE_HEADER_COMPACT_HEIGHT,\n MOBILE_HEADER_EVENT_NAMES,\n MOBILE_HEADER_EXPANDED_HEIGHT,\n OVERLAP_PANEL_ITEM_ID,\n} from './constants';\nimport i18n from './i18n';\nimport {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './types';\n\nimport styles from './MobileHeader.module.scss';\n\nconst TopAlert = React.lazy(() =>\n import('../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\nconst b = createBlock('mobile-header', styles);\n\ntype PanelName = string \| null;\n\ninterface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {\n renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;\n}\n\ntype OverlapPanelProps = Omit<CommonOverlapPanelProps, 'onClose' \| 'visible'>;\n\ninterface PanelItem {\n id: string;\n content?: React.ReactNode;\n className?: string;\n}\n\nexport interface MobileHeaderProps {\n logo: LogoProps;\n burgerMenu: BurgerMenuProps;\n overlapPanel?: OverlapPanelProps;\n burgerCloseTitle?: string;\n burgerOpenTitle?: string;\n panelItems?: PanelItem[];\n topAlert?: TopAlertProps;\n renderContent?: RenderContentType;\n sideItemRenderContent?: RenderContentType;\n onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;\n onClosePanel?: () => void;\n className?: string;\n contentClassName?: string;\n}\n\nexport const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(\n (\n {\n logo,\n burgerMenu,\n burgerCloseTitle = i18n('burger_button_close'),\n burgerOpenTitle = i18n('burger_button_open'),\n panelItems = [],\n renderContent,\n sideItemRenderContent,\n onClosePanel,\n onEvent,\n className,\n contentClassName,\n overlapPanel,\n topAlert,\n },\n ref,\n ): React.ReactElement => {\n const targetRef = useForwardRef<HTMLDivElement>(ref);\n const [compact] = useState(true);\n const [visiblePanel, setVisiblePanel] = useState<PanelName>(null);\n const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);\n\n // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design\n const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;\n\n const onPanelToggle = useCallback(\n (name: PanelName) => {\n if (!name) return;\n\n setVisiblePanel((prev) => {\n const panelOpen = prev === name;\n\n onEvent?.(\n name,\n panelOpen\n ? MOBILE_HEADER_EVENT_NAMES.closeEvent\n : MOBILE_HEADER_EVENT_NAMES.openEvent,\n );\n\n return panelOpen ? null : name;\n });\n\n setOverlapPanelVisible(false);\n },\n [onEvent],\n );\n\n const onMobilePanelToggle = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onPanelToggle(detail?.panelName);\n }\n },\n [onPanelToggle],\n );\n\n const onMobilePanelOpen = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setVisiblePanel(detail?.panelName);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onMobilePanelClose = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setVisiblePanel(null);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onBurgerOpen = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setVisiblePanel(BURGER_PANEL_ITEM_ID);\n }, [onEvent]);\n\n const onBurgerClose = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setVisiblePanel(null);\n }, [onEvent]);\n\n const onOverlapOpen = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOverlapPanelVisible(true);\n }, [onEvent]);\n\n const onOverlapClose = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOverlapPanelVisible(false);\n }, [onEvent]);\n\n const onCloseDrawer = useCallback(() => {\n if (visiblePanel) {\n onEvent?.(visiblePanel, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n }\n setVisiblePanel(null);\n }, [visiblePanel, onEvent]);\n\n const onBurgerMenuItemClick = useCallback(\n (item: MobileMenuItem) => {\n const closeMenuOnClick = item.closeMenuOnClick ?? true;\n\n if (closeMenuOnClick) {\n onBurgerClose();\n }\n },\n [onBurgerClose],\n );\n\n const renderBurgerMenuFooter = useCallback(\n () =>\n burgerMenu.renderFooter?.({\n size,\n isCompact: compact,\n }),\n [burgerMenu, size, compact],\n );\n\n const onLogoClick = useCallback(\n (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onClosePanel?.();\n logo.onClick?.(event);\n },\n [logo, onClosePanel],\n );\n\n const burgerPanelItem: PanelItem = useMemo(\n () => ({\n id: BURGER_PANEL_ITEM_ID,\n content: (\n <BurgerMenu\n items={burgerMenu.items}\n modalItem={burgerMenu.modalItem}\n renderFooter={renderBurgerMenuFooter}\n onItemClick={onBurgerMenuItemClick}\n className={b('burger-menu')}\n />\n ),\n className: burgerMenu.className,\n }),\n [\n burgerMenu.items,\n burgerMenu.modalItem,\n burgerMenu.className,\n onBurgerMenuItemClick,\n renderBurgerMenuFooter,\n ],\n );\n\n useEffect(() => {\n const node = targetRef?.current;\n\n if (node) {\n node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.addEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.addEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.addEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n\n return () => {\n if (node) {\n node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.removeEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.removeEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.removeEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n };\n }, [\n targetRef,\n onBurgerClose,\n onBurgerOpen,\n onMobilePanelToggle,\n onMobilePanelOpen,\n onMobilePanelClose,\n onOverlapOpen,\n onOverlapClose,\n ]);\n\n const allPanelItems = [burgerPanelItem, ...panelItems];\n\n return (\n <div className={b({compact}, className)} ref={targetRef}>\n <div className={b('header-container')}>\n {topAlert && (\n <Suspense fallback={null}>\n <TopAlert alert={topAlert} mobileView />\n </Suspense>\n )}\n <header className={b('header')} style={{height: size}}>\n <Burger\n opened={visiblePanel === burgerPanelItem.id}\n onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}\n className={b('burger')}\n closeTitle={burgerCloseTitle}\n openTitle={burgerOpenTitle}\n />\n <MobileLogo {...logo} compact={compact} onClick={onLogoClick} />\n\n <div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>\n </header>\n </div>\n\n {allPanelItems.map((item) => (\n <Drawer\n key={item.id}\n className={b('panels')}\n open={visiblePanel === item.id}\n onOpenChange={(open) => !open && onCloseDrawer()}\n style={{top: `calc(${size}px + var(--gn-top-alert-height, 0px))`}}\n contentClassName={b('panel-item', item.className)}\n size={320}\n disablePortal\n >\n {item.content}\n </Drawer>\n ))}\n {overlapPanel && (\n <OverlapPanel\n topOffset={size}\n className={b('overlap-panel')}\n title={overlapPanel.title}\n onClose={onOverlapClose}\n action={overlapPanel.action}\n visible={overlapPanelVisible}\n renderContent={overlapPanel.renderContent}\n />\n )}\n <Content\n size={size}\n renderContent={renderContent}\n className={b('content', contentClassName)}\n cssSizeVariableName=\"--mobile-header-size\"\n />\n </div>\n );\n },\n);\n\nMobileHeader.displayName = 'MobileHeader';\n"],"names":["createBlock","styles","i18n","useForwardRef","useState","MOBILE_HEADER_COMPACT_HEIGHT","MOBILE_HEADER_EXPANDED_HEIGHT","useCallback","MOBILE_HEADER_EVENT_NAMES","BURGER_PANEL_ITEM_ID","OVERLAP_PANEL_ITEM_ID","useMemo","BurgerMenu","useEffect","Suspense","Burger","MobileLogo","Drawer","OverlapPanel","Content"],"mappings":"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"}
1	+ {"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Drawer} from '@gravity-ui/uikit';\n\nimport {useForwardRef} from '../../hooks/useForwardRef';\nimport {PanelItemProps} from '../AsideHeader';\nimport {Content, RenderContentType} from '../Content';\nimport {MobileLogo} from '../MobileLogo';\nimport {LogoProps, TopAlertProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport {Burger} from './Burger/Burger';\nimport {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';\nimport {\n OverlapPanelProps as CommonOverlapPanelProps,\n OverlapPanel,\n} from './OverlapPanel/OverlapPanel';\nimport {\n BURGER_PANEL_ITEM_ID,\n MOBILE_HEADER_COMPACT_HEIGHT,\n MOBILE_HEADER_EVENT_NAMES,\n MOBILE_HEADER_EXPANDED_HEIGHT,\n OVERLAP_PANEL_ITEM_ID,\n} from './constants';\nimport i18n from './i18n';\nimport {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './types';\n\nimport styles from './MobileHeader.module.scss';\n\nconst TopAlert = React.lazy(() =>\n import('../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\nconst b = createBlock('mobile-header', styles);\n\ntype PanelName = string \| null;\n\ninterface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {\n renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;\n}\n\ntype OverlapPanelProps = Omit<CommonOverlapPanelProps, 'onClose' \| 'open'>;\n\nexport interface MobileHeaderProps {\n logo: LogoProps;\n burgerMenu: BurgerMenuProps;\n overlapPanel?: OverlapPanelProps;\n burgerCloseTitle?: string;\n burgerOpenTitle?: string;\n panelItems?: PanelItemProps[];\n topAlert?: TopAlertProps;\n renderContent?: RenderContentType;\n sideItemRenderContent?: RenderContentType;\n onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;\n onClosePanel?: () => void;\n className?: string;\n contentClassName?: string;\n}\n\nexport const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(\n (\n {\n logo,\n burgerMenu,\n burgerCloseTitle = i18n('burger_button_close'),\n burgerOpenTitle = i18n('burger_button_open'),\n panelItems = [],\n renderContent,\n sideItemRenderContent,\n onClosePanel,\n onEvent,\n className,\n contentClassName,\n overlapPanel,\n topAlert,\n },\n ref,\n ): React.ReactElement => {\n const targetRef = useForwardRef<HTMLDivElement>(ref);\n const [compact] = useState(true);\n const [openPanel, setOpenPanel] = useState<PanelName>(null);\n const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);\n\n // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design\n const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;\n\n const onPanelToggle = useCallback(\n (name: PanelName) => {\n if (!name) return;\n\n setOpenPanel((prev) => {\n const panelOpen = prev === name;\n\n onEvent?.(\n name,\n panelOpen\n ? MOBILE_HEADER_EVENT_NAMES.closeEvent\n : MOBILE_HEADER_EVENT_NAMES.openEvent,\n );\n\n return panelOpen ? null : name;\n });\n\n setOverlapPanelVisible(false);\n },\n [onEvent],\n );\n\n const onMobilePanelToggle = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onPanelToggle(detail?.panelName);\n }\n },\n [onPanelToggle],\n );\n\n const onMobilePanelOpen = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(detail?.panelName);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onMobilePanelClose = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onBurgerOpen = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(BURGER_PANEL_ITEM_ID);\n }, [onEvent]);\n\n const onBurgerClose = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n }, [onEvent]);\n\n const onOverlapOpen = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOverlapPanelVisible(true);\n }, [onEvent]);\n\n const onOverlapClose = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOverlapPanelVisible(false);\n }, [onEvent]);\n\n const onCloseDrawer = useCallback(() => {\n if (openPanel) {\n onEvent?.(openPanel, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n }\n setOpenPanel(null);\n }, [openPanel, onEvent]);\n\n const onBurgerMenuItemClick = useCallback(\n (item: MobileMenuItem) => {\n const closeMenuOnClick = item.closeMenuOnClick ?? true;\n\n if (closeMenuOnClick) {\n onBurgerClose();\n }\n },\n [onBurgerClose],\n );\n\n const renderBurgerMenuFooter = useCallback(\n () =>\n burgerMenu.renderFooter?.({\n size,\n isCompact: compact,\n }),\n [burgerMenu, size, compact],\n );\n\n const onLogoClick = useCallback(\n (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onClosePanel?.();\n logo.onClick?.(event);\n },\n [logo, onClosePanel],\n );\n\n const burgerPanelItem: PanelItemProps = useMemo<PanelItemProps>(\n () => ({\n id: BURGER_PANEL_ITEM_ID,\n children: (\n <BurgerMenu\n items={burgerMenu.items}\n modalItem={burgerMenu.modalItem}\n renderFooter={renderBurgerMenuFooter}\n onItemClick={onBurgerMenuItemClick}\n className={b('burger-menu')}\n />\n ),\n className: burgerMenu.className,\n }),\n [\n burgerMenu.items,\n burgerMenu.modalItem,\n burgerMenu.className,\n onBurgerMenuItemClick,\n renderBurgerMenuFooter,\n ],\n );\n\n useEffect(() => {\n const node = targetRef?.current;\n\n if (node) {\n node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.addEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.addEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.addEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n\n return () => {\n if (node) {\n node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.removeEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.removeEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.removeEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n };\n }, [\n targetRef,\n onBurgerClose,\n onBurgerOpen,\n onMobilePanelToggle,\n onMobilePanelOpen,\n onMobilePanelClose,\n onOverlapOpen,\n onOverlapClose,\n ]);\n\n const allPanelItems = [burgerPanelItem, ...panelItems];\n\n return (\n <div className={b({compact}, className)} ref={targetRef}>\n <div className={b('header-container')}>\n {topAlert && (\n <Suspense fallback={null}>\n <TopAlert alert={topAlert} mobileView />\n </Suspense>\n )}\n <header className={b('header')} style={{height: size}}>\n <Burger\n opened={openPanel === burgerPanelItem.id}\n onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}\n className={b('burger')}\n closeTitle={burgerCloseTitle}\n openTitle={burgerOpenTitle}\n />\n <MobileLogo {...logo} compact={compact} onClick={onLogoClick} />\n\n <div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>\n </header>\n </div>\n\n {allPanelItems.map(({id, className, ...rest}) => (\n <Drawer\n {...rest}\n key={id}\n className={b('panels')}\n open={openPanel === id}\n onOpenChange={(open) => !open && onCloseDrawer()}\n style={{top: `calc(${size}px + var(--gn-top-alert-height, 0px))`}}\n contentClassName={b('panel-item', className)}\n size={320}\n />\n ))}\n {overlapPanel && (\n <OverlapPanel\n topOffset={size}\n className={b('overlap-panel')}\n title={overlapPanel.title}\n onClose={onOverlapClose}\n action={overlapPanel.action}\n open={overlapPanelVisible}\n renderContent={overlapPanel.renderContent}\n />\n )}\n <Content\n size={size}\n renderContent={renderContent}\n className={b('content', contentClassName)}\n cssSizeVariableName=\"--mobile-header-size\"\n />\n </div>\n );\n },\n);\n\nMobileHeader.displayName = 'MobileHeader';\n"],"names":["createBlock","styles","i18n","useForwardRef","useState","MOBILE_HEADER_COMPACT_HEIGHT","MOBILE_HEADER_EXPANDED_HEIGHT","useCallback","MOBILE_HEADER_EVENT_NAMES","BURGER_PANEL_ITEM_ID","OVERLAP_PANEL_ITEM_ID","useMemo","BurgerMenu","useEffect","Suspense","Burger","MobileLogo","__rest","Drawer","OverlapPanel","Content"],"mappings":"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"}

package/build/cjs/components/MobileHeader/OverlapPanel/OverlapPanel.d.ts CHANGED Viewed

@@ -13,8 +13,8 @@ export interface OverlapPanelProps {
     action?: OverlapPanelActionProps;
     renderContent: () => React.ReactNode;
     closeTitle?: string;
-    visible: boolean;
+    open: boolean;
     topOffset?: number | string;
 }
-export declare const OverlapPanel: ({ title, renderContent, className, onClose, action, closeTitle, visible, topOffset, }: OverlapPanelProps) => React.JSX.Element;
+export declare const OverlapPanel: ({ title, renderContent, className, onClose, action, closeTitle, open, topOffset, }: OverlapPanelProps) => React.JSX.Element;
 export {};

package/build/cjs/components/MobileHeader/OverlapPanel/OverlapPanel.js CHANGED Viewed

@@ -10,10 +10,10 @@ var index = require('../i18n/index.js');
 var OverlapPanel_module = require('./OverlapPanel.module.scss.js');
 const b = cn.createBlock('mobile-overlap-panel', OverlapPanel_module.default);
-const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = index.default('overlap_button_close'), visible, topOffset, }) => {
+const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = index.default('overlap_button_close'), open, topOffset, }) => {
     const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;
     const drawerStyle = React.useMemo(() => ({ top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }), [topOffsetValue]);
-    return (React.createElement(uikit.Drawer, { className: b('', { action: Boolean(action) }, className), open: visible, onOpenChange: (open) => !open && onClose(), style: drawerStyle, contentClassName: b('drawer-item') },
+    return (React.createElement(uikit.Drawer, { className: b('', { action: Boolean(action) }, className), open: open, onOpenChange: (open) => !open && onClose(), style: drawerStyle, contentClassName: b('drawer-item') },
         React.createElement("div", { className: b('header') },
             React.createElement(uikit.Button, { size: "l", view: "flat", className: b('close'), onClick: onClose, "aria-label": closeTitle },
                 React.createElement(uikit.Icon, { className: b('icon'), data: icons.ArrowLeft, size: constants.MOBILE_HEADER_ICON_SIZE })),

package/build/cjs/components/MobileHeader/OverlapPanel/OverlapPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlapPanel.js","sources":["../../../../../../src/components/MobileHeader/OverlapPanel/OverlapPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ArrowLeft as CloseIcon} from '@gravity-ui/icons';\nimport {Button, Drawer, Icon, IconProps, Text} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {MOBILE_HEADER_ICON_SIZE} from '../constants';\nimport i18n from '../i18n';\n\nimport styles from './OverlapPanel.module.scss';\n\nconst b = createBlock('mobile-overlap-panel', styles);\n\ninterface OverlapPanelActionProps {\n icon: IconProps['data'];\n className?: string;\n onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n title: string;\n}\n\nexport interface OverlapPanelProps {\n className?: string;\n title?: string;\n onClose: () => void;\n action?: OverlapPanelActionProps;\n renderContent: () => React.ReactNode;\n closeTitle?: string;\n ~~visible~~: boolean;\n topOffset?: number \| string;\n}\n\nexport const OverlapPanel = ({\n title,\n renderContent,\n className,\n onClose,\n action,\n closeTitle = i18n('overlap_button_close'),\n ~~visible~~,\n topOffset,\n}: OverlapPanelProps) => {\n const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;\n\n const drawerStyle = React.useMemo(\n () => ({top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))`}),\n [topOffsetValue],\n );\n\n return (\n <Drawer\n className={b('', {action: Boolean(action)}, className)}\n open={~~visible~~}\n onOpenChange={(open) => !open && onClose()}\n style={drawerStyle}\n contentClassName={b('drawer-item')}\n >\n <div className={b('header')}>\n <Button\n size=\"l\"\n view=\"flat\"\n className={b('close')}\n onClick={onClose}\n aria-label={closeTitle}\n >\n <Icon className={b('icon')} data={CloseIcon} size={MOBILE_HEADER_ICON_SIZE} />\n </Button>\n <Text\n whiteSpace=\"nowrap\"\n ellipsis\n variant={'subheader-2'}\n className={b('title')}\n as={title ? ('h2' as const) : undefined}\n >\n {title}\n </Text>\n {action && (\n <Button\n size=\"l\"\n type=\"button\"\n view=\"flat\"\n onClick={action.onClick}\n className={b('action')}\n aria-label={action.title}\n >\n <Icon data={action.icon} size={MOBILE_HEADER_ICON_SIZE} />\n </Button>\n )}\n </div>\n <div className={b('content')}>{renderContent()}</div>\n </Drawer>\n );\n};\n"],"names":["createBlock","styles","i18n","Drawer","Button","Icon","CloseIcon","MOBILE_HEADER_ICON_SIZE","Text"],"mappings":";;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,cAAW,CAAC,sBAAsB,EAAEC,2BAAM,CAAC;AAoB9C,MAAM,YAAY,GAAG,CAAC,EACzB,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,GAAGC,aAAI,CAAC,sBAAsB,CAAC,EACzC,~~OAAO~~,~~EACP~~,SAAS,GACO,KAAI;AACpB,IAAA,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,EAAG,SAAS,CAAI,EAAA,CAAA,GAAG,SAAS;IAEnF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,OAAO,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,cAAc,CAAA,mCAAA,CAAqC,EAAC,CAAC,EAC1E,CAAC,cAAc,CAAC,CACnB;IAED,QACI,oBAACC,YAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAC,EAAE,SAAS,CAAC,EACtD,IAAI,EAAE,~~OAAO~~,~~EACb~~,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,EAAE,EAC1C,KAAK,EAAE,WAAW,EAClB,gBAAgB,EAAE,CAAC,CAAC,aAAa,CAAC,EAAA;AAElC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAA;YACvB,KAAC,CAAA,aAAA,CAAAC,YAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,OAAO,EAAA,YAAA,EACJ,UAAU,EAAA;AAEtB,gBAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAEC,eAAS,EAAE,IAAI,EAAEC,iCAAuB,GAAI,CACzE;AACT,YAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,UAAU,EAAC,QAAQ,EACnB,QAAQ,EACR,IAAA,EAAA,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,EAAE,EAAE,KAAK,GAAI,IAAc,GAAG,SAAS,EAAA,EAEtC,KAAK,CACH;AACN,YAAA,MAAM,KACH,KAAC,CAAA,aAAA,CAAAJ,YAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACV,YAAA,EAAA,MAAM,CAAC,KAAK,EAAA;AAExB,gBAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAEE,iCAAuB,EAAI,CAAA,CACrD,CACZ,CACC;AACN,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAG,EAAA,aAAa,EAAE,CAAO,CAChD;AAEjB;;;;"}
1	+ {"version":3,"file":"OverlapPanel.js","sources":["../../../../../../src/components/MobileHeader/OverlapPanel/OverlapPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ArrowLeft as CloseIcon} from '@gravity-ui/icons';\nimport {Button, Drawer, Icon, IconProps, Text} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {MOBILE_HEADER_ICON_SIZE} from '../constants';\nimport i18n from '../i18n';\n\nimport styles from './OverlapPanel.module.scss';\n\nconst b = createBlock('mobile-overlap-panel', styles);\n\ninterface OverlapPanelActionProps {\n icon: IconProps['data'];\n className?: string;\n onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n title: string;\n}\n\nexport interface OverlapPanelProps {\n className?: string;\n title?: string;\n onClose: () => void;\n action?: OverlapPanelActionProps;\n renderContent: () => React.ReactNode;\n closeTitle?: string;\n open: boolean;\n topOffset?: number \| string;\n}\n\nexport const OverlapPanel = ({\n title,\n renderContent,\n className,\n onClose,\n action,\n closeTitle = i18n('overlap_button_close'),\n open,\n topOffset,\n}: OverlapPanelProps) => {\n const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;\n\n const drawerStyle = React.useMemo(\n () => ({top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))`}),\n [topOffsetValue],\n );\n\n return (\n <Drawer\n className={b('', {action: Boolean(action)}, className)}\n open={open}\n onOpenChange={(open) => !open && onClose()}\n style={drawerStyle}\n contentClassName={b('drawer-item')}\n >\n <div className={b('header')}>\n <Button\n size=\"l\"\n view=\"flat\"\n className={b('close')}\n onClick={onClose}\n aria-label={closeTitle}\n >\n <Icon className={b('icon')} data={CloseIcon} size={MOBILE_HEADER_ICON_SIZE} />\n </Button>\n <Text\n whiteSpace=\"nowrap\"\n ellipsis\n variant={'subheader-2'}\n className={b('title')}\n as={title ? ('h2' as const) : undefined}\n >\n {title}\n </Text>\n {action && (\n <Button\n size=\"l\"\n type=\"button\"\n view=\"flat\"\n onClick={action.onClick}\n className={b('action')}\n aria-label={action.title}\n >\n <Icon data={action.icon} size={MOBILE_HEADER_ICON_SIZE} />\n </Button>\n )}\n </div>\n <div className={b('content')}>{renderContent()}</div>\n </Drawer>\n );\n};\n"],"names":["createBlock","styles","i18n","Drawer","Button","Icon","CloseIcon","MOBILE_HEADER_ICON_SIZE","Text"],"mappings":";;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,cAAW,CAAC,sBAAsB,EAAEC,2BAAM,CAAC;AAoB9C,MAAM,YAAY,GAAG,CAAC,EACzB,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,GAAGC,aAAI,CAAC,sBAAsB,CAAC,EACzC,IAAI,EACJ,SAAS,GACO,KAAI;AACpB,IAAA,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,EAAG,SAAS,CAAI,EAAA,CAAA,GAAG,SAAS;IAEnF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,OAAO,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,cAAc,CAAA,mCAAA,CAAqC,EAAC,CAAC,EAC1E,CAAC,cAAc,CAAC,CACnB;IAED,QACI,oBAACC,YAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAC,EAAE,SAAS,CAAC,EACtD,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,EAAE,EAC1C,KAAK,EAAE,WAAW,EAClB,gBAAgB,EAAE,CAAC,CAAC,aAAa,CAAC,EAAA;AAElC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAA;YACvB,KAAC,CAAA,aAAA,CAAAC,YAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,OAAO,EAAA,YAAA,EACJ,UAAU,EAAA;AAEtB,gBAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAEC,eAAS,EAAE,IAAI,EAAEC,iCAAuB,GAAI,CACzE;AACT,YAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,UAAU,EAAC,QAAQ,EACnB,QAAQ,EACR,IAAA,EAAA,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,EAAE,EAAE,KAAK,GAAI,IAAc,GAAG,SAAS,EAAA,EAEtC,KAAK,CACH;AACN,YAAA,MAAM,KACH,KAAC,CAAA,aAAA,CAAAJ,YAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACV,YAAA,EAAA,MAAM,CAAC,KAAK,EAAA;AAExB,gBAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAEE,iCAAuB,EAAI,CAAA,CACrD,CACZ,CACC;AACN,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAG,EAAA,aAAa,EAAE,CAAO,CAChD;AAEjB;;;;"}

package/build/cjs/components/MobileHeader/types.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export interface ModalItem {
     onClose?: () => void;
 }
 type MobileMenuItemType = 'regular' | 'divider';
-export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'rightAdornment' | 'itemWrapper' | 'onItemClick' | 'href'> {
+export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'pinned' | 'rightAdornment' | 'afterMoreButton' | 'itemWrapper' | 'onItemClick' | 'href'> {
     type?: MobileMenuItemType;
     closeMenuOnClick?: boolean;
     link?: string;

package/build/cjs/components/Settings/Settings.css CHANGED Viewed

	@@ -1 +1 @@
1	- .Settings-module__gn-settings___RP-Ow{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.Settings-module__gn-settings_view_mobile___4DAjN{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.Settings-module__gn-settings_view_mobile___4DAjN{height:calc(90dvh - 56px)}}.Settings-module__gn-settings_view_mobile___4DAjN.Settings-module__gn-settings_loading___PpULI{text-align:center}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__loader___68JGV{margin-top:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__search___2xBLH{margin:4px 0 16px;padding:0 20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__page___pbx2Y{overflow-y:visible}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:first-child{margin-left:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:last-child{margin-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB{color:var(--g-color-text-secondary)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings-subheader___WAPMz{margin-top:8px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92{margin-top:0}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings__section-item___2NG92, .Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB+.Settings-module__gn-settings__section-item___2NG92{margin-top:30px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92+.Settings-module__gn-settings__section-item___2NG92{margin-top:22px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item___rCuSR:not(.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p){gap:8px;grid-template-columns:1fr}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-heading___1zCRl{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-description___8rQUz{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p{grid-template-columns:1fr auto}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p .Settings-module__gn-settings__item-heading___1zCRl{padding-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-content___1InnS{width:100%}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__not-found___eIxBf{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.Settings-module__gn-settings_loading___PpULI{grid-template-columns:auto}.Settings-module__gn-settings__loader___68JGV{place-self:center}.Settings-module__gn-settings__not-found___eIxBf{display:grid;height:100%;place-items:center}.Settings-module__gn-settings__menu___3XZde{border-right:1px solid var(--g-color-line-generic)}.Settings-module__gn-settings__heading___mLHq2{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.Settings-module__gn-settings__search___2xBLH{margin:0 20px 16px}.Settings-module__gn-settings__page___pbx2Y{overflow-y:auto}.Settings-module__gn-settings__content___tQ2hC{padding:20px}.Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__section-heading___gPmIo:hover .Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:1}.Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.Settings-module__gn-settings__section-item___2NG92{margin-top:24px}.Settings-module__gn-settings__section___c6u3X+.Settings-module__gn-settings__section___c6u3X{margin-top:32px}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-item___2NG92:first-of-type{margin-top:0}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-heading___gPmIo{display:none}.Settings-module__gn-settings__item___rCuSR{display:grid;grid-template-columns:216px 1fr;justify-items:start}.Settings-module__gn-settings__item_title_hide___w1l3N{grid-template-columns:1fr;justify-items:normal}.Settings-module__gn-settings__item_align_top___sPweP{align-items:start}.Settings-module__gn-settings__item_align_center___GdjES{align-items:center}.Settings-module__gn-settings__item-title_badge___pTkg2{position:relative}.Settings-module__gn-settings__item-title_badge___pTkg2:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.Settings-module__gn-settings__item-description___8rQUz{color:var(--g-color-text-secondary);display:block;font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-top:2px;padding-right:20px}.Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__item___rCuSR:hover .Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:1}.Settings-module__gn-settings__item_selected___e4r3Y, .Settings-module__gn-settings__section_selected___YOdnN{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.Settings-module__gn-settings__found___PDgmI{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}
1	+ .Settings-module__gn-settings___RP-Ow{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.Settings-module__gn-settings_view_mobile___4DAjN{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.Settings-module__gn-settings_view_mobile___4DAjN{height:calc(90dvh - 56px)}}.Settings-module__gn-settings_view_mobile___4DAjN.Settings-module__gn-settings_loading___PpULI{text-align:center}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__loader___68JGV{margin-top:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__search___2xBLH{margin:4px 0 16px;padding:0 20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__page___pbx2Y{overflow-y:visible}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:first-child{margin-left:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:last-child{margin-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB{color:var(--g-color-text-secondary)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings-subheader___WAPMz{margin-top:8px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92{margin-top:0}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings__section-item___2NG92, .Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB+.Settings-module__gn-settings__section-item___2NG92{margin-top:30px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92+.Settings-module__gn-settings__section-item___2NG92{margin-top:22px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item___rCuSR:not(.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p){gap:8px;grid-template-columns:1fr}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-heading___1zCRl{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-description___8rQUz{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p{grid-template-columns:1fr auto}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p .Settings-module__gn-settings__item-heading___1zCRl{padding-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-content___1InnS{width:100%}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__not-found___eIxBf{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.Settings-module__gn-settings_loading___PpULI{grid-template-columns:auto}.Settings-module__gn-settings__loader___68JGV{place-self:center}.Settings-module__gn-settings__not-found___eIxBf{display:grid;height:100%;place-items:center}.Settings-module__gn-settings__menu___3XZde{border-right:1px solid var(--g-color-line-generic);display:flex;flex-direction:column;min-height:0}.Settings-module__gn-settings__heading___mLHq2{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.Settings-module__gn-settings__search___2xBLH{margin:0 20px 16px}.Settings-module__gn-settings__page___pbx2Y{overflow-y:auto}.Settings-module__gn-settings__content___tQ2hC{padding:20px}.Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__section-heading___gPmIo:hover .Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:1}.Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.Settings-module__gn-settings__section-item___2NG92{margin-top:24px}.Settings-module__gn-settings__section___c6u3X+.Settings-module__gn-settings__section___c6u3X{margin-top:32px}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-item___2NG92:first-of-type{margin-top:0}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-heading___gPmIo{display:none}.Settings-module__gn-settings__item___rCuSR{display:grid;grid-template-columns:216px 1fr;justify-items:start}.Settings-module__gn-settings__item_title_hide___w1l3N{grid-template-columns:1fr;justify-items:normal}.Settings-module__gn-settings__item_align_top___sPweP{align-items:start}.Settings-module__gn-settings__item_align_center___GdjES{align-items:center}.Settings-module__gn-settings__item-title_badge___pTkg2{position:relative}.Settings-module__gn-settings__item-title_badge___pTkg2:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.Settings-module__gn-settings__item-description___8rQUz{color:var(--g-color-text-secondary);display:block;font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-top:2px;padding-right:20px}.Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__item___rCuSR:hover .Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:1}.Settings-module__gn-settings__item_selected___e4r3Y, .Settings-module__gn-settings__section_selected___YOdnN{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.Settings-module__gn-settings__found___PDgmI{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}

package/build/cjs/components/Settings/Settings.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import './Settings.css';
 'use strict';
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var identity = require('../../_virtual/identity.js');
+var identity = require('lodash/identity');
 var Title = require('../Title/Title.js');
 var context = require('./Selection/context.js');
 var SettingsContext = require('./SettingsContext/SettingsContext.js');
@@ -19,7 +19,7 @@ var collectSettings = require('./collect-settings.js');
 var index = require('./i18n/index.js');
 function Settings(_a) {
-    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib_es6.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
+    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
     if (loading) {
         return (React.createElement("div", { className: b.b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b.b('loader'), size: "m" }))));
     }
@@ -115,7 +115,7 @@ Settings.Section = function SettingsSection({ children }) {
     return React.createElement(React.Fragment, null, children);
 };
 Settings.Item = function SettingsItem(setting) {
-    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity.default, mode, description, } = setting;
+    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity, mode, description, } = setting;
     const selected = context.useSettingsSelectionContext();
     const isSettingSelected = selected.setting && selected.setting.id === id;
     const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext.useSettingsContext();

package/build/cjs/components/Settings/Settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n SettingsSelectionContextProvider,\n useSettingsSelectionContext,\n useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n SettingsContentProps,\n SettingsGroupProps,\n SettingsItemProps,\n SettingsPageProps,\n SettingsProps,\n SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n loading,\n renderLoading,\n children,\n view = 'normal',\n renderRightAdornment,\n renderSectionRightAdornment,\n showRightAdornmentOnHover = true,\n ...props\n}: SettingsProps) {\n if (loading) {\n return (\n <div className={b({loading: true, view})}>\n {typeof renderLoading === 'function' ? (\n renderLoading()\n ) : (\n <Loader className={b('loader')} size=\"m\" />\n )}\n </div>\n );\n }\n\n return (\n <SettingsContext.Provider\n value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n >\n <SettingsContent view={view} {...props}>\n {children}\n </SettingsContent>\n </SettingsContext.Provider>\n );\n}\n\nfunction SettingsContent({\n initialPage,\n initialSearch,\n selection,\n children,\n renderNotFound,\n title = i18n('label_title'),\n filterPlaceholder = i18n('label_filter-placeholder'),\n emptyPlaceholder = i18n('label_empty-placeholder'),\n view,\n onPageChange,\n onClose,\n}: SettingsContentProps) {\n const [search, setSearch] = React.useState(initialSearch ?? '');\n const {menu, pages} = getSettingsFromChildren(children, search);\n\n const selected = useSettingsSelectionProviderValue(pages, selection);\n\n const pageKeys = Object.keys(pages);\n const selectionInitialPage =\n selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n const [selectedPage, setCurrentPage] = React.useState<string \| undefined>(\n selectionInitialPage \|\|\n (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n );\n const searchInputRef = React.useRef<HTMLInputElement>(null);\n const menuRef = React.useRef<SettingsMenuInstance>(null);\n const isMobile = view === 'mobile';\n\n React.useEffect(() => {\n menuRef.current?.clearFocus();\n }, [search]);\n\n React.useEffect(() => {\n const handler = () => {\n menuRef.current?.clearFocus();\n };\n window.addEventListener('click', handler);\n return () => {\n window.removeEventListener('click', handler);\n };\n }, []);\n\n let activePage = selectedPage;\n\n if (!activePage \|\| !pages[activePage] \|\| pages[activePage].hidden) {\n activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n }\n\n const handlePageChange = (newPage: string \| undefined) => {\n setCurrentPage((prevPage) => {\n if (prevPage !== newPage && !isFakePage(newPage)) {\n onPageChange?.(newPage);\n }\n return newPage;\n });\n };\n\n const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n function isFakePage(page: string \| undefined) {\n return isAllSearchPage(page);\n }\n\n React.useEffect(() => {\n if (activePage !== selectedPage) {\n handlePageChange(activePage);\n }\n });\n\n React.useEffect(() => {\n if (!selectionInitialPage) return;\n setCurrentPage(selectionInitialPage);\n }, [selectionInitialPage]);\n\n React.useEffect(() => {\n if (selected.selectedRef?.current) {\n selected.selectedRef.current.scrollIntoView();\n }\n }, [selected.selectedRef]);\n\n return (\n <SettingsSelectionContextProvider value={selected}>\n <div className={b({view})}>\n {isMobile ? (\n <React.Fragment>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n autoFocus={false}\n inputSize={'xl'}\n />\n <SettingsMenuMobile\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n className={b('tabs')}\n />\n </React.Fragment>\n ) : (\n <div\n className={b('menu')}\n onClick={() => {\n if (searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }}\n onKeyDown={(event) => {\n if (menuRef.current) {\n if (menuRef.current.handleKeyDown(event)) {\n event.preventDefault();\n }\n }\n }}\n >\n <Title>{title}</Title>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n placeholder={filterPlaceholder}\n autoFocus\n />\n <SettingsMenu\n ref={menuRef}\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n />\n </div>\n )}\n <div className={b('page')}>\n <SettingsPageComponent\n menu={menu}\n pages={pages}\n selected={selected}\n search={search}\n isMobile={isMobile}\n page={activePage}\n emptyPlaceholder={emptyPlaceholder}\n renderNotFound={renderNotFound}\n onClose={onClose}\n />\n </div>\n </div>\n </SettingsSelectionContextProvider>\n );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n const {\n id,\n labelId,\n highlightedTitle,\n children,\n align = 'center',\n withBadge,\n renderTitleComponent = identity,\n mode,\n description,\n } = setting;\n\n const selected = useSettingsSelectionContext();\n const isSettingSelected = selected.setting && selected.setting.id === id;\n\n const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n const titleComponent = renderTitleComponent(highlightedTitle);\n const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n const showTitle = titleComponent !== null;\n\n return (\n <div\n className={b('item', {\n align,\n mode,\n selected: isSettingSelected,\n title: showTitle ? 'show' : 'hide',\n })}\n ref={isSettingSelected ? selected.selectedRef : undefined}\n >\n {showTitle ? (\n <label className={b('item-heading')} id={labelId}>\n {renderRightAdornment ? (\n <Flex className={b('item-title-wrapper')} gap={3}>\n {titleNode}\n <div\n className={b('item-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderRightAdornment(setting)}\n </div>\n </Flex>\n ) : (\n titleNode\n )}\n {description ? (\n <span className={b('item-description')}>{description}</span>\n ) : null}\n </label>\n ) : null}\n <div className={b('item-content')}>{children}</div>\n </div>\n );\n};\n"],"names":["__rest","b","Loader","SettingsContext","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","Title","SettingsMenu","SettingsPageComponent","identity","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}
1	+ {"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n SettingsSelectionContextProvider,\n useSettingsSelectionContext,\n useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n SettingsContentProps,\n SettingsGroupProps,\n SettingsItemProps,\n SettingsPageProps,\n SettingsProps,\n SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n loading,\n renderLoading,\n children,\n view = 'normal',\n renderRightAdornment,\n renderSectionRightAdornment,\n showRightAdornmentOnHover = true,\n ...props\n}: SettingsProps) {\n if (loading) {\n return (\n <div className={b({loading: true, view})}>\n {typeof renderLoading === 'function' ? (\n renderLoading()\n ) : (\n <Loader className={b('loader')} size=\"m\" />\n )}\n </div>\n );\n }\n\n return (\n <SettingsContext.Provider\n value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n >\n <SettingsContent view={view} {...props}>\n {children}\n </SettingsContent>\n </SettingsContext.Provider>\n );\n}\n\nfunction SettingsContent({\n initialPage,\n initialSearch,\n selection,\n children,\n renderNotFound,\n title = i18n('label_title'),\n filterPlaceholder = i18n('label_filter-placeholder'),\n emptyPlaceholder = i18n('label_empty-placeholder'),\n view,\n onPageChange,\n onClose,\n}: SettingsContentProps) {\n const [search, setSearch] = React.useState(initialSearch ?? '');\n const {menu, pages} = getSettingsFromChildren(children, search);\n\n const selected = useSettingsSelectionProviderValue(pages, selection);\n\n const pageKeys = Object.keys(pages);\n const selectionInitialPage =\n selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n const [selectedPage, setCurrentPage] = React.useState<string \| undefined>(\n selectionInitialPage \|\|\n (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n );\n const searchInputRef = React.useRef<HTMLInputElement>(null);\n const menuRef = React.useRef<SettingsMenuInstance>(null);\n const isMobile = view === 'mobile';\n\n React.useEffect(() => {\n menuRef.current?.clearFocus();\n }, [search]);\n\n React.useEffect(() => {\n const handler = () => {\n menuRef.current?.clearFocus();\n };\n window.addEventListener('click', handler);\n return () => {\n window.removeEventListener('click', handler);\n };\n }, []);\n\n let activePage = selectedPage;\n\n if (!activePage \|\| !pages[activePage] \|\| pages[activePage].hidden) {\n activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n }\n\n const handlePageChange = (newPage: string \| undefined) => {\n setCurrentPage((prevPage) => {\n if (prevPage !== newPage && !isFakePage(newPage)) {\n onPageChange?.(newPage);\n }\n return newPage;\n });\n };\n\n const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n function isFakePage(page: string \| undefined) {\n return isAllSearchPage(page);\n }\n\n React.useEffect(() => {\n if (activePage !== selectedPage) {\n handlePageChange(activePage);\n }\n });\n\n React.useEffect(() => {\n if (!selectionInitialPage) return;\n setCurrentPage(selectionInitialPage);\n }, [selectionInitialPage]);\n\n React.useEffect(() => {\n if (selected.selectedRef?.current) {\n selected.selectedRef.current.scrollIntoView();\n }\n }, [selected.selectedRef]);\n\n return (\n <SettingsSelectionContextProvider value={selected}>\n <div className={b({view})}>\n {isMobile ? (\n <React.Fragment>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n autoFocus={false}\n inputSize={'xl'}\n />\n <SettingsMenuMobile\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n className={b('tabs')}\n />\n </React.Fragment>\n ) : (\n <div\n className={b('menu')}\n onClick={() => {\n if (searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }}\n onKeyDown={(event) => {\n if (menuRef.current) {\n if (menuRef.current.handleKeyDown(event)) {\n event.preventDefault();\n }\n }\n }}\n >\n <Title>{title}</Title>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n placeholder={filterPlaceholder}\n autoFocus\n />\n <SettingsMenu\n ref={menuRef}\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n />\n </div>\n )}\n <div className={b('page')}>\n <SettingsPageComponent\n menu={menu}\n pages={pages}\n selected={selected}\n search={search}\n isMobile={isMobile}\n page={activePage}\n emptyPlaceholder={emptyPlaceholder}\n renderNotFound={renderNotFound}\n onClose={onClose}\n />\n </div>\n </div>\n </SettingsSelectionContextProvider>\n );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n const {\n id,\n labelId,\n highlightedTitle,\n children,\n align = 'center',\n withBadge,\n renderTitleComponent = identity,\n mode,\n description,\n } = setting;\n\n const selected = useSettingsSelectionContext();\n const isSettingSelected = selected.setting && selected.setting.id === id;\n\n const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n const titleComponent = renderTitleComponent(highlightedTitle);\n const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n const showTitle = titleComponent !== null;\n\n return (\n <div\n className={b('item', {\n align,\n mode,\n selected: isSettingSelected,\n title: showTitle ? 'show' : 'hide',\n })}\n ref={isSettingSelected ? selected.selectedRef : undefined}\n >\n {showTitle ? (\n <label className={b('item-heading')} id={labelId}>\n {renderRightAdornment ? (\n <Flex className={b('item-title-wrapper')} gap={3}>\n {titleNode}\n <div\n className={b('item-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderRightAdornment(setting)}\n </div>\n </Flex>\n ) : (\n titleNode\n )}\n {description ? (\n <span className={b('item-description')}>{description}</span>\n ) : null}\n </label>\n ) : null}\n <div className={b('item-content')}>{children}</div>\n </div>\n );\n};\n"],"names":["__rest","b","Loader","SettingsContext","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","Title","SettingsMenu","SettingsPageComponent","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.css CHANGED Viewed

	@@ -1 +1 @@
1	- .SettingsMenu-module__gn-settings-menu__group-heading___b3rMA{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__group___zBrCj+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:24px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:8px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-text-misc);margin-right:5px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y:hover, .SettingsMenu-module__gn-settings-menu__item_focused___pKQBC{background:var(--g-color-base-simple-hover)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr{background:var(--g-color-base-selection)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr.SettingsMenu-module__gn-settings-menu__item_focused___pKQBC, .SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr:hover{background:var(--g-color-base-selection-hover)}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8{color:var(--g-color-text-secondary);cursor:auto}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8:hover{background:none}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8 .SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-base-misc-heavy)}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X{position:relative}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}
1	+ .SettingsMenu-module__gn-settings-menu___ChFyc{overflow-y:auto}.SettingsMenu-module__gn-settings-menu_scrolled___QYbnX{box-shadow:inset 0 5px 5px -5px rgba(0,0,0,.15)}.SettingsMenu-module__gn-settings-menu__group-heading___b3rMA{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__group___zBrCj+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:24px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:8px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-text-misc);margin-right:5px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y:hover, .SettingsMenu-module__gn-settings-menu__item_focused___pKQBC{background:var(--g-color-base-simple-hover)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr{background:var(--g-color-base-selection)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr.SettingsMenu-module__gn-settings-menu__item_focused___pKQBC, .SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr:hover{background:var(--g-color-base-selection-hover)}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8{color:var(--g-color-text-secondary);cursor:auto}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8:hover{background:none}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8 .SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-base-misc-heavy)}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X{position:relative}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.js CHANGED Viewed

@@ -12,9 +12,13 @@ const SettingsMenu = React.forwardRef(
 // eslint-disable-next-line prefer-arrow-callback
 function SettingsMenu({ items, onChange, activeItemId }, ref) {
     const [focusItemId, setFocusId] = React.useState();
+    const [scrolled, setScrolled] = React.useState(false);
     const containerRef = React.useRef(null);
     const handleChange = helpers.useStableCallback(onChange);
     const getFocused = helpers.useCurrent(focusItemId);
+    const handleScroll = React.useCallback((event) => {
+        setScrolled(event.currentTarget.scrollTop > 0);
+    }, []);
     React.useImperativeHandle(ref, () => ({
         handleKeyDown(event) {
             if (!containerRef.current) {
@@ -39,7 +43,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
             setFocusId(undefined);
         },
     }), [getFocused, handleChange]);
-    return (React.createElement("div", { ref: containerRef, className: b() }, items.map((firstLevelItem) => {
+    return (React.createElement("div", { ref: containerRef, className: b({ scrolled }), onScroll: handleScroll }, items.map((firstLevelItem) => {
         if ('groupTitle' in firstLevelItem) {
             return (React.createElement("div", { key: firstLevelItem.groupTitle, className: b('group') },
                 React.createElement("span", { className: b('group-heading') }, firstLevelItem.groupTitle),

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n handleKeyDown(event: React.KeyboardEvent): boolean;\n clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n // eslint-disable-next-line prefer-arrow-callback\n function SettingsMenu({items, onChange, activeItemId}, ref) {\n const [focusItemId, setFocusId] = React.useState<string>();\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleChange = useStableCallback(onChange);\n const getFocused = useCurrent(focusItemId);\n\n React.useImperativeHandle(\n ref,\n () => ({\n handleKeyDown(event) {\n if (!containerRef.current) {\n return false;\n }\n const focused = getFocused();\n if (focused && event.key === 'Enter') {\n handleChange(focused);\n return true;\n } else if (event.key === 'ArrowDown') {\n setFocusId(focusNext(containerRef.current, focused, 1));\n return true;\n } else if (event.key === 'ArrowUp') {\n setFocusId(focusNext(containerRef.current, focused, -1));\n return true;\n }\n return false;\n },\n clearFocus() {\n setFocusId(undefined);\n },\n }),\n [getFocused, handleChange],\n );\n\n return (\n <div ref={containerRef} className={b()}>\n {items.map((firstLevelItem) => {\n if ('groupTitle' in firstLevelItem) {\n return (\n <div key={firstLevelItem.groupTitle} className={b('group')}>\n <span className={b('group-heading')}>\n {firstLevelItem.groupTitle}\n </span>\n {firstLevelItem.items.map((item) => {\n return renderMenuItem(\n item,\n onChange,\n activeItemId,\n focusItemId,\n );\n })}\n </div>\n );\n }\n return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n })}\n </div>\n );\n },\n);\n\nfunction renderMenuItem(\n item: Item,\n onChange: (id: string) => void,\n activeItemId: string \| undefined,\n focusItemId: string \| undefined,\n) {\n return (\n <span\n key={item.title}\n className={b('item', {\n selected: activeItemId === item.id,\n disabled: item.disabled,\n focused: focusItemId === item.id,\n badge: item.withBadge,\n })}\n onClick={() => {\n if (!item.disabled) {\n onChange(item.id);\n }\n }}\n data-id={item.id}\n >\n {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n <span>{item.title}</span>\n </span>\n );\n}\n\nfunction focusNext(container: HTMLElement, focused: string \| undefined, direction: number) {\n const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n if (elements.length === 0) {\n return undefined;\n }\n\n let currentIndex = direction > 0 ? -1 : 0;\n if (focused) {\n currentIndex = Array.prototype.findIndex.call(\n elements,\n (element) => element.getAttribute('data-id') === focused,\n );\n }\n\n currentIndex = (elements.length + currentIndex + direction) % elements.length;\n return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["createBlock","styles","useStableCallback","useCurrent","Icon"],"mappings":";;;;;;;;AAUA,MAAM,CAAC,GAAGA,cAAW,CAAC,eAAe,EAAEC,2BAAM,CAAC;AAOjC,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU;AACxC;AACA,SAAS,YAAY,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAC,EAAE,GAAG,EAAA;IACtD,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAU;~~IAC1D~~,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AACvD,IAAA,MAAM,YAAY,GAAGC,yBAAiB,CAAC,QAAQ,CAAC;AAChD,IAAA,MAAM,UAAU,GAAGC,kBAAU,CAAC,WAAW,CAAC;IAE1C,KAAK,CAAC,mBAAmB,CACrB,GAAG,EACH,OAAO;AACH,QAAA,aAAa,CAAC,KAAK,EAAA;AACf,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AACvB,gBAAA,OAAO,KAAK;;AAEhB,YAAA,MAAM,OAAO,GAAG,UAAU,EAAE;YAC5B,IAAI,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBAClC,YAAY,CAAC,OAAO,CAAC;AACrB,gBAAA,OAAO,IAAI;;AACR,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;AAClC,gBAAA,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;AACvD,gBAAA,OAAO,IAAI;;AACR,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;AAChC,gBAAA,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,gBAAA,OAAO,IAAI;;AAEf,YAAA,OAAO,KAAK;SACf;QACD,UAAU,GAAA;YACN,UAAU,CAAC,SAAS,CAAC;SACxB;AACJ,KAAA,CAAC,EACF,CAAC,UAAU,EAAE,YAAY,CAAC,CAC7B;~~AAED~~,~~IAAA,~~QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,EAAA,~~EACjC,~~KAAK,CAAC,GAAG,CAAC,CAAC,cAAc,KAAI;AAC1B,QAAA,IAAI,YAAY,IAAI,cAAc,EAAE;AAChC,YAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,cAAc,CAAC,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAA;gBACtD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC9B,EAAA,cAAc,CAAC,UAAU,CACvB;gBACN,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;oBAC/B,OAAO,cAAc,CACjB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,WAAW,CACd;iBACJ,CAAC,CACA;;QAGd,OAAO,cAAc,CAAC,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAC;KAC7E,CAAC,CACA;AAEd,CAAC;AAGL,SAAS,cAAc,CACnB,IAAU,EACV,QAA8B,EAC9B,YAAgC,EAChC,WAA+B,EAAA;AAE/B,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC,EAAE;YAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC,EAAE;YAChC,KAAK,EAAE,IAAI,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,OAAO,EAAE,MAAK;AACV,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,gBAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;SAExB,EAAA,SAAA,EACQ,IAAI,CAAC,EAAE,EAAA;QAEf,IAAI,CAAC,IAAI,GAAG,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,EAAE,EAAM,EAAA,IAAI,CAAC,IAAI,EAAA,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAI,CAAA,CAAA,GAAG,SAAS;AACrF,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACtB;AAEf;AAEA,SAAS,SAAS,CAAC,SAAsB,EAAE,OAA2B,EAAE,SAAiB,EAAA;;AACrF,IAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA,UAAA,CAAY,CAAC;AACxF,IAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACvB,QAAA,OAAO,SAAS;;AAGpB,IAAA,IAAI,YAAY,GAAG,SAAS,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC;IACzC,IAAI,OAAO,EAAE;QACT,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CACzC,QAAQ,EACR,CAAC,OAAO,KAAK,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,OAAO,CAC3D;;AAGL,IAAA,YAAY,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,YAAY,GAAG,SAAS,IAAI,QAAQ,CAAC,MAAM;AAC7E,IAAA,OAAO,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,SAAS;AACtE;;;;"}
1	+ {"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n handleKeyDown(event: React.KeyboardEvent): boolean;\n clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n // eslint-disable-next-line prefer-arrow-callback\n function SettingsMenu({items, onChange, activeItemId}, ref) {\n const [focusItemId, setFocusId] = React.useState<string>();\n const [scrolled, setScrolled] = React.useState(false);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleChange = useStableCallback(onChange);\n const getFocused = useCurrent(focusItemId);\n\n const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {\n setScrolled(event.currentTarget.scrollTop > 0);\n }, []);\n\n React.useImperativeHandle(\n ref,\n () => ({\n handleKeyDown(event) {\n if (!containerRef.current) {\n return false;\n }\n const focused = getFocused();\n if (focused && event.key === 'Enter') {\n handleChange(focused);\n return true;\n } else if (event.key === 'ArrowDown') {\n setFocusId(focusNext(containerRef.current, focused, 1));\n return true;\n } else if (event.key === 'ArrowUp') {\n setFocusId(focusNext(containerRef.current, focused, -1));\n return true;\n }\n return false;\n },\n clearFocus() {\n setFocusId(undefined);\n },\n }),\n [getFocused, handleChange],\n );\n\n return (\n <div ref={containerRef} className={b({scrolled})} onScroll={handleScroll}>\n {items.map((firstLevelItem) => {\n if ('groupTitle' in firstLevelItem) {\n return (\n <div key={firstLevelItem.groupTitle} className={b('group')}>\n <span className={b('group-heading')}>\n {firstLevelItem.groupTitle}\n </span>\n {firstLevelItem.items.map((item) => {\n return renderMenuItem(\n item,\n onChange,\n activeItemId,\n focusItemId,\n );\n })}\n </div>\n );\n }\n return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n })}\n </div>\n );\n },\n);\n\nfunction renderMenuItem(\n item: Item,\n onChange: (id: string) => void,\n activeItemId: string \| undefined,\n focusItemId: string \| undefined,\n) {\n return (\n <span\n key={item.title}\n className={b('item', {\n selected: activeItemId === item.id,\n disabled: item.disabled,\n focused: focusItemId === item.id,\n badge: item.withBadge,\n })}\n onClick={() => {\n if (!item.disabled) {\n onChange(item.id);\n }\n }}\n data-id={item.id}\n >\n {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n <span>{item.title}</span>\n </span>\n );\n}\n\nfunction focusNext(container: HTMLElement, focused: string \| undefined, direction: number) {\n const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n if (elements.length === 0) {\n return undefined;\n }\n\n let currentIndex = direction > 0 ? -1 : 0;\n if (focused) {\n currentIndex = Array.prototype.findIndex.call(\n elements,\n (element) => element.getAttribute('data-id') === focused,\n );\n }\n\n currentIndex = (elements.length + currentIndex + direction) % elements.length;\n return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["createBlock","styles","useStableCallback","useCurrent","Icon"],"mappings":";;;;;;;;AAUA,MAAM,CAAC,GAAGA,cAAW,CAAC,eAAe,EAAEC,2BAAM,CAAC;AAOjC,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU;AACxC;AACA,SAAS,YAAY,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAC,EAAE,GAAG,EAAA;IACtD,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAU;AAC1D,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IACrD,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AACvD,IAAA,MAAM,YAAY,GAAGC,yBAAiB,CAAC,QAAQ,CAAC;AAChD,IAAA,MAAM,UAAU,GAAGC,kBAAU,CAAC,WAAW,CAAC;IAE1C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAoC,KAAI;QAC5E,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC;KACjD,EAAE,EAAE,CAAC;IAEN,KAAK,CAAC,mBAAmB,CACrB,GAAG,EACH,OAAO;AACH,QAAA,aAAa,CAAC,KAAK,EAAA;AACf,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AACvB,gBAAA,OAAO,KAAK;;AAEhB,YAAA,MAAM,OAAO,GAAG,UAAU,EAAE;YAC5B,IAAI,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBAClC,YAAY,CAAC,OAAO,CAAC;AACrB,gBAAA,OAAO,IAAI;;AACR,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;AAClC,gBAAA,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;AACvD,gBAAA,OAAO,IAAI;;AACR,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;AAChC,gBAAA,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,gBAAA,OAAO,IAAI;;AAEf,YAAA,OAAO,KAAK;SACf;QACD,UAAU,GAAA;YACN,UAAU,CAAC,SAAS,CAAC;SACxB;AACJ,KAAA,CAAC,EACF,CAAC,UAAU,EAAE,YAAY,CAAC,CAC7B;IAED,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,EAAC,QAAQ,EAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EACnE,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,cAAc,KAAI;AAC1B,QAAA,IAAI,YAAY,IAAI,cAAc,EAAE;AAChC,YAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,cAAc,CAAC,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAA;gBACtD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC9B,EAAA,cAAc,CAAC,UAAU,CACvB;gBACN,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;oBAC/B,OAAO,cAAc,CACjB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,WAAW,CACd;iBACJ,CAAC,CACA;;QAGd,OAAO,cAAc,CAAC,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAC;KAC7E,CAAC,CACA;AAEd,CAAC;AAGL,SAAS,cAAc,CACnB,IAAU,EACV,QAA8B,EAC9B,YAAgC,EAChC,WAA+B,EAAA;AAE/B,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;AACjB,YAAA,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC,EAAE;YAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC,EAAE;YAChC,KAAK,EAAE,IAAI,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,OAAO,EAAE,MAAK;AACV,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,gBAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;SAExB,EAAA,SAAA,EACQ,IAAI,CAAC,EAAE,EAAA;QAEf,IAAI,CAAC,IAAI,GAAG,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,EAAE,EAAM,EAAA,IAAI,CAAC,IAAI,EAAA,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAI,CAAA,CAAA,GAAG,SAAS;AACrF,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACtB;AAEf;AAEA,SAAS,SAAS,CAAC,SAAsB,EAAE,OAA2B,EAAE,SAAiB,EAAA;;AACrF,IAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA,UAAA,CAAY,CAAC;AACxF,IAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACvB,QAAA,OAAO,SAAS;;AAGpB,IAAA,IAAI,YAAY,GAAG,SAAS,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC;IACzC,IAAI,OAAO,EAAE;QACT,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CACzC,QAAQ,EACR,CAAC,OAAO,KAAK,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,OAAO,CAC3D;;AAGL,IAAA,YAAY,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,YAAY,GAAG,SAAS,IAAI,QAAQ,CAAC,MAAM;AAC7E,IAAA,OAAO,CAAA,EAAA,GAAA,QAAQ,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,SAAS;AACtE;;;;"}

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.module.scss.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var styles = {"gn-settings-menu__group-heading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gnSettingsMenuGroupHeading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gn-settings-menu__group":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gnSettingsMenuGroup":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gn-settings-menu__item":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gnSettingsMenuItem":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gn-settings-menu__item-icon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gnSettingsMenuItemIcon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gn-settings-menu__item_focused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gnSettingsMenuItemFocused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gn-settings-menu__item_selected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gnSettingsMenuItemSelected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gn-settings-menu__item_disabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gnSettingsMenuItemDisabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gn-settings-menu__item_badge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X","gnSettingsMenuItemBadge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X"};
+var styles = {"gn-settings-menu":"SettingsMenu-module__gn-settings-menu___ChFyc","gnSettingsMenu":"SettingsMenu-module__gn-settings-menu___ChFyc","gn-settings-menu_scrolled":"SettingsMenu-module__gn-settings-menu_scrolled___QYbnX","gnSettingsMenuScrolled":"SettingsMenu-module__gn-settings-menu_scrolled___QYbnX","gn-settings-menu__group-heading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gnSettingsMenuGroupHeading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gn-settings-menu__group":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gnSettingsMenuGroup":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gn-settings-menu__item":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gnSettingsMenuItem":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gn-settings-menu__item-icon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gnSettingsMenuItemIcon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gn-settings-menu__item_focused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gnSettingsMenuItemFocused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gn-settings-menu__item_selected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gnSettingsMenuItemSelected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gn-settings-menu__item_disabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gnSettingsMenuItemDisabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gn-settings-menu__item_badge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X","gnSettingsMenuItemBadge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X"};
 exports.default = styles;
 //# sourceMappingURL=SettingsMenu.module.scss.js.map

package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var React = require('react');
 var icons = require('@gravity-ui/icons');
-var last = require('../../../_virtual/last.js');
+var last = require('lodash/last');
 var index = require('../i18n/index.js');
 const allSearchResultsId = 'allSearchResults';
@@ -47,7 +47,7 @@ function createAllResultsPage(pages, menu) {
             return page.sections.map((section) => {
                 var _a;
                 const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
-                const lastBreadcrumb = last.default(breadcrumbs);
+                const lastBreadcrumb = last(breadcrumbs);
                 const breadcrumbsTitlePart = breadcrumbs.join(' / ');
                 return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
                         ? breadcrumbsTitlePart

package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n SettingsDescription,\n SettingsMenu,\n SettingsMenuItem,\n SettingsPage,\n SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({\n pages,\n handlePageChange,\n}: {\n pages: SettingsDescription['pages'];\n handlePageChange: (page: string \| undefined) => void;\n}) {\n const allSearchResultsPage = pages[allSearchResultsId];\n const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n React.useEffect(() => {\n if (hasAllSearchResultsPage) {\n handlePageChange(allSearchResultsId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hasAllSearchResultsPage]);\n\n return {\n isAllSearchPage: (page: string \| undefined) => page === allSearchResultsId,\n };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n settingsDescription: SettingsDescription,\n): SettingsDescription {\n const {menu, pages} = settingsDescription;\n const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n const pagesList = Object.values(pages);\n\n return {\n ...settingsDescription,\n menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n pages: {\n ...pages,\n [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n },\n };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n return menu.filter((item) => !('id' in item) \|\| item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n const breadcrumbsMap: Record<string, string[] \| undefined> = {};\n\n for (const menuItem of menu) {\n if ('items' in menuItem) {\n for (const pageItem of menuItem.items) {\n breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n }\n } else {\n breadcrumbsMap[menuItem.id] = [menuItem.title];\n }\n }\n\n return {\n id: allSearchResultsId,\n sections: Object.values(pages)\n .map((page) => {\n return page.sections.map((section): SettingsPageSection => {\n const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n const lastBreadcrumb = last(breadcrumbs);\n const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n return {\n ...section,\n title:\n section.title === lastBreadcrumb\n ? breadcrumbsTitlePart\n : `${breadcrumbsTitlePart} / ${section.title}`,\n };\n });\n })\n .flat(),\n };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n return {\n id: allSearchResultsId,\n title: i18n('label_all-results'),\n icon: {data: ListUl},\n };\n}\n"],"names":["~~last","~~i18n","ListUl"],"mappings":";;;;;;;AAcA,MAAM,kBAAkB,GAAG,kBAAkB;SAE7B,iBAAiB,CAAC,EAC9B,KAAK,EACL,gBAAgB,GAInB,EAAA;AACG,IAAA,MAAM,oBAAoB,GAAG,KAAK,CAAC,kBAAkB,CAAC;AACtD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,oBAAoB,CAAC;AAE7D,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACjB,IAAI,uBAAuB,EAAE;YACzB,gBAAgB,CAAC,kBAAkB,CAAC;;;AAG5C,KAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;IAE7B,OAAO;QACH,eAAe,EAAE,CAAC,IAAwB,KAAK,IAAI,KAAK,kBAAkB;KAC7E;AACL;AAEM,SAAU,wCAAwC,CACpD,mBAAwC,EAAA;AAExC,IAAA,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,mBAAmB;AACzC,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,IAAI,CAAC;IAC5D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAEtC,OACO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,mBAAmB,CACtB,EAAA,EAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,EAAE,GAAG,qBAAqB,CAAC,EAC5D,KAAK,kCACE,KAAK,CAAA,EAAA,EACR,CAAC,kBAAkB,GAAG,oBAAoB,CAAC,SAAS,EAAE,qBAAqB,CAAC,EAElF,CAAA,EAAA,CAAA;AACN;AAEA,SAAS,wBAAwB,CAAC,IAAkB,EAAA;IAChD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,EAAE,KAAK,kBAAkB,CAAC;AACnF;AAEA,SAAS,oBAAoB,CAAC,KAAqB,EAAE,IAAkB,EAAA;IACnE,MAAM,cAAc,GAAyC,EAAE;AAE/D,IAAA,KAAK,MAAM,QAAQ,IAAI,IAAI,EAAE;AACzB,QAAA,IAAI,OAAO,IAAI,QAAQ,EAAE;AACrB,YAAA,KAAK,MAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,EAAE;AACnC,gBAAA,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;;;aAEpE;YACH,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;;;IAItD,OAAO;AACH,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK;AACxB,aAAA,GAAG,CAAC,CAAC,IAAI,KAAI;YACV,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAyB;;gBACtD,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;AACjD,gBAAA,MAAM,cAAc,~~GAAGA~~,~~YAAI~~,CAAC,WAAW,CAAC;gBACxC,MAAM,oBAAoB,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;gBAEpD,OACO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,KACV,KAAK,EACD,OAAO,CAAC,KAAK,KAAK;AACd,0BAAE;0BACA,GAAG,oBAAoB,CAAA,GAAA,EAAM,OAAO,CAAC,KAAK,EAAE,EACxD,CAAA;AACN,aAAC,CAAC;AACN,SAAC;AACA,aAAA,IAAI,EAAE;KACd;AACL;AAEA,SAAS,wBAAwB,GAAA;IAC7B,OAAO;AACH,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,~~EAAEC~~,aAAI,CAAC,mBAAmB,CAAC;AAChC,QAAA,IAAI,EAAE,EAAC,IAAI,EAAEC,YAAM,EAAC;KACvB;AACL;;;;;"}
1	+ {"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n SettingsDescription,\n SettingsMenu,\n SettingsMenuItem,\n SettingsPage,\n SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({\n pages,\n handlePageChange,\n}: {\n pages: SettingsDescription['pages'];\n handlePageChange: (page: string \| undefined) => void;\n}) {\n const allSearchResultsPage = pages[allSearchResultsId];\n const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n React.useEffect(() => {\n if (hasAllSearchResultsPage) {\n handlePageChange(allSearchResultsId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hasAllSearchResultsPage]);\n\n return {\n isAllSearchPage: (page: string \| undefined) => page === allSearchResultsId,\n };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n settingsDescription: SettingsDescription,\n): SettingsDescription {\n const {menu, pages} = settingsDescription;\n const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n const pagesList = Object.values(pages);\n\n return {\n ...settingsDescription,\n menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n pages: {\n ...pages,\n [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n },\n };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n return menu.filter((item) => !('id' in item) \|\| item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n const breadcrumbsMap: Record<string, string[] \| undefined> = {};\n\n for (const menuItem of menu) {\n if ('items' in menuItem) {\n for (const pageItem of menuItem.items) {\n breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n }\n } else {\n breadcrumbsMap[menuItem.id] = [menuItem.title];\n }\n }\n\n return {\n id: allSearchResultsId,\n sections: Object.values(pages)\n .map((page) => {\n return page.sections.map((section): SettingsPageSection => {\n const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n const lastBreadcrumb = last(breadcrumbs);\n const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n return {\n ...section,\n title:\n section.title === lastBreadcrumb\n ? breadcrumbsTitlePart\n : `${breadcrumbsTitlePart} / ${section.title}`,\n };\n });\n })\n .flat(),\n };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n return {\n id: allSearchResultsId,\n title: i18n('label_all-results'),\n icon: {data: ListUl},\n };\n}\n"],"names":["i18n","ListUl"],"mappings":"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"}

package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.js CHANGED Viewed

@@ -2,15 +2,15 @@
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var debounce = require('../../../_virtual/debounce.js');
+var debounceFn = require('lodash/debounce');
 var cn = require('../../utils/cn.js');
 var helpers = require('../helpers.js');
 var index = require('../i18n/index.js');
 const b = cn.cn('settings-search');
-function SettingsSearch({ className, initialValue, onChange, debounce: debounce$1 = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
     const [value, setValue] = React.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
-    const onChangeDebounced = debounce.default(onChange, debounce$1);
+    const onChangeDebounced = debounceFn(onChange, debounce);
     const handleUpdate = helpers.useStableCallback((updated) => {
         setValue(updated);
         onChangeDebounced(updated);