@gravity-ui/navigation 3.0.0-beta.2 → 3.0.0-beta.3

package/build/cjs/components/CompositeBar/Item/Item.scss.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--gn-ah-hovered-item-background-color);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--gn-ah-selected-item-background-color);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__action{align-items:center;cursor:pointer;display:flex;height:100%;min-width:0;width:100%}.gn-composite-bar-item__action_collapse{display:flex;width:216px}.gn-composite-bar-item__action-btn-container{display:flex}.gn-composite-bar-item__icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item__icon,.gn-footer-item .gn-composite-bar-item__icon{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item.gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-footer-item.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar-item__icon-tooltip .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin-block-start:0}.gn-composite-bar-item__icon-place{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--gn-aside-header-min-width)}.gn-composite-bar-item__action-icon{align-items:center;color:var(--gn-aside-header-item-icon-color,var(--g-color-text-complementary));display:flex;flex-shrink:0;justify-content:center;width:var(--gn-composite-bar-item-action-size,36px)}.gn-composite-bar-item__title{align-items:center;display:flex;margin-right:16px;overflow:hidden}.gn-composite-bar-item__title-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.gn-composite-bar-item_current .gn-composite-bar-item__title-text{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.gn-composite-bar-item__title-adornment{margin:0 10px}.gn-composite-bar-item__collapse-item{--_--item-icon-color:var(--g-color-text-misc);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;outline:inherit;padding:0 16px;text-decoration:inherit;width:100%}.gn-composite-bar-item__collapse-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__collapse-item-icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment{margin-right:0}.gn-composite-bar-item__menu-divider{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.gn-composite-bar-item__collapse-items-popup-content{padding:4px 0}.gn-composite-bar-item__link{align-items:center;display:flex;height:100%;width:100%}.gn-composite-bar-item__link,.gn-composite-bar-item__link:active,.gn-composite-bar-item__link:focus,.gn-composite-bar-item__link:hover,.gn-composite-bar-item__link:visited{color:inherit;outline:none;text-decoration:none}.gn-composite-bar-item__btn-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.gn-composite-bar-item__action-container{margin:0 10px 8px;width:100%}.gn-composite-bar-item__action-container-compact{height:var(--gn-composite-bar-item-action-size,36px);margin:0 10px 8px;width:var(--gn-composite-bar-item-action-size,36px)}.gn-composite-bar-item__icon-tooltip_item-type_action{margin-left:10px}.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title{margin:0}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Item.scss.js.map

package/build/cjs/components/CompositeBar/Item/Item.scss.js.map

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

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltip.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../../utils/cn.js');
+var constants = require('../constants.js');
+var MultipleTooltipContext = require('./MultipleTooltipContext.js');
+require('./MultipleTooltip.scss.js');
+
+const b = cn.block('multiple-tooltip');
+const POPUP_OFFSET = { mainAxis: -32, crossAxis: 4 };
+const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
+    const { activeIndex, hideCollapseItemTooltip } = React.useContext(MultipleTooltipContext.MultipleTooltipContext);
+    const activeItem = activeIndex === undefined ? null : items[activeIndex];
+    return (React.createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET },
+        React.createElement("div", { className: b() }, items
+            .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
+            (id !== constants.COLLAPSE_ITEM_ID && type !== 'action'))
+            .map((item, idx) => {
+            switch (item.type) {
+                case 'divider':
+                    return (React.createElement("div", { className: b('item', { divider: true }), key: idx }, item.title));
+                default:
+                    return (React.createElement("div", { className: b('item', {
+                            active: item === activeItem,
+                        }), key: idx }, item.title));
+            }
+        }))));
+};
+
+exports.MultipleTooltip = MultipleTooltip;
+//# sourceMappingURL=MultipleTooltip.js.map

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleTooltip.js","sources":["../../../../../../src/components/CompositeBar/MultipleTooltip/MultipleTooltip.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Popup, PopupProps} from '@gravity-ui/uikit';\n\nimport {MenuItem} from '../../types';\nimport {block} from '../../utils/cn';\nimport {COLLAPSE_ITEM_ID} from '../constants';\n\nimport {MultipleTooltipContext} from './MultipleTooltipContext';\n\nimport './MultipleTooltip.scss';\n\nconst b = block('multiple-tooltip');\n\nconst POPUP_OFFSET: PopupProps['offset'] = {mainAxis: -32, crossAxis: 4};\n\nexport type MultipleTooltipProps = Pick<PopupProps, 'open' | 'anchorRef' | 'placement'> & {\n    items: MenuItem[];\n};\n\nexport const MultipleTooltip: React.FC<MultipleTooltipProps> = ({\n    items,\n    open,\n    anchorRef,\n    placement,\n}) => {\n    const {activeIndex, hideCollapseItemTooltip} = React.useContext(MultipleTooltipContext);\n    const activeItem = activeIndex === undefined ? null : items[activeIndex];\n\n    return (\n        <Popup open={open} anchorRef={anchorRef} placement={placement} offset={POPUP_OFFSET}>\n            <div className={b()}>\n                {items\n                    .filter(\n                        ({type = 'regular', id}) =>\n                            !hideCollapseItemTooltip ||\n                            (id !== COLLAPSE_ITEM_ID && type !== 'action'),\n                    )\n                    .map((item, idx) => {\n                        switch (item.type) {\n                            case 'divider':\n                                return (\n                                    <div className={b('item', {divider: true})} key={idx}>\n                                        {item.title}\n                                    </div>\n                                );\n                            default:\n                                return (\n                                    <div\n                                        className={b('item', {\n                                            active: item === activeItem,\n                                        })}\n                                        key={idx}\n                                    >\n                                        {item.title}\n                                    </div>\n                                );\n                        }\n                    })}\n            </div>\n        </Popup>\n    );\n};\n"],"names":["block","MultipleTooltipContext","Popup","COLLAPSE_ITEM_ID"],"mappings":";;;;;;;;;AAYA,MAAM,CAAC,GAAGA,QAAK,CAAC,kBAAkB,CAAC;AAEnC,MAAM,YAAY,GAAyB,EAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAC;AAMjE,MAAM,eAAe,GAAmC,CAAC,EAC5D,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,EAAC,WAAW,EAAE,uBAAuB,EAAC,GAAG,KAAK,CAAC,UAAU,CAACC,6CAAsB,CAAC;AACvF,IAAA,MAAM,UAAU,GAAG,WAAW,KAAK,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;AAExE,IAAA,QACI,KAAC,CAAA,aAAA,CAAAC,WAAK,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAA;AAC/E,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,EAAE,IACd;AACI,aAAA,MAAM,CACH,CAAC,EAAC,IAAI,GAAG,SAAS,EAAE,EAAE,EAAC,KACnB,CAAC,uBAAuB;aACvB,EAAE,KAAKC,0BAAgB,IAAI,IAAI,KAAK,QAAQ,CAAC;AAErD,aAAA,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,KAAI;AACf,YAAA,QAAQ,IAAI,CAAC,IAAI;AACb,gBAAA,KAAK,SAAS;oBACV,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,EAC/C,IAAI,CAAC,KAAK,CACT;AAEd,gBAAA;AACI,oBAAA,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;4BACjB,MAAM,EAAE,IAAI,KAAK,UAAU;yBAC9B,CAAC,EACF,GAAG,EAAE,GAAG,EAAA,EAEP,IAAI,CAAC,KAAK,CACT;;AAGtB,SAAC,CAAC,CACJ,CACF;AAEhB;;;;"}

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-white-100-solid)\n  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(16px)}.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-white-150-solid)\n  )}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-black-550-solid)\n  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(12px)}.gn-multiple-tooltip.gn-multiple-tooltip{background-color:transparent;box-shadow:none}.gn-multiple-tooltip:before{background:var(--multiple-tooltip-backdrop-background);box-shadow:none;content:\"\";filter:var(--multiple-tooltip-backdrop-filter);height:100%;opacity:.7;position:absolute;width:100%;z-index:-1}.gn-multiple-tooltip__items-container{align-items:flex-start;display:flex;flex-direction:column;padding:32px 40px 32px 12px}.gn-multiple-tooltip__item{align-items:center;background-color:var(--multiple-tooltip-item-bg-color);border-radius:5px;box-sizing:border-box;color:var(--g-color-text-light-primary);display:flex;height:30px;margin-bottom:5px;padding:8px 12px;position:relative;transition:transform .1s ease-in-out}.gn-multiple-tooltip__item:first-child,.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider)+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:5px}.gn-multiple-tooltip__item_divider+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:4px}.gn-multiple-tooltip__item_active{background-color:var(--multiple-tooltip-item-active-bg-color);transform:translateX(-12px)}.gn-multiple-tooltip__item_divider{height:15px;margin:0;visibility:hidden}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=MultipleTooltip.scss.js.map

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss.js.map

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

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+
+const multipleTooltipContextDefaults = {
+    active: false,
+    activeIndex: undefined,
+    hideCollapseItemTooltip: false,
+    lastClickedItemIndex: undefined,
+    setValue: () => { },
+};
+const MultipleTooltipContext = React.createContext(multipleTooltipContextDefaults);
+class MultipleTooltipProvider extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = Object.assign({}, multipleTooltipContextDefaults);
+        this.setValue = (value) => {
+            this.setState(Object.assign({}, value));
+        };
+    }
+    render() {
+        const { children } = this.props;
+        return (React.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
+    }
+}
+
+exports.MultipleTooltipContext = MultipleTooltipContext;
+exports.MultipleTooltipProvider = MultipleTooltipProvider;
+//# sourceMappingURL=MultipleTooltipContext.js.map

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleTooltipContext.js","sources":["../../../../../../src/components/CompositeBar/MultipleTooltip/MultipleTooltipContext.tsx"],"sourcesContent":["import React from 'react';\n\ninterface MultipleTooltipContextProps {\n    active: boolean;\n    activeIndex: number | undefined;\n    hideCollapseItemTooltip: boolean;\n    lastClickedItemIndex: number | undefined;\n    setValue<K extends keyof Omit<MultipleTooltipContextProps, 'setValue'>>(\n        value:\n            | Pick<Omit<MultipleTooltipContextProps, 'setValue'>, K>\n            | Omit<MultipleTooltipContextProps, 'setValue'>,\n    ): void;\n}\n\nconst multipleTooltipContextDefaults = {\n    active: false,\n    activeIndex: undefined,\n    hideCollapseItemTooltip: false,\n    lastClickedItemIndex: undefined,\n    setValue: () => {},\n};\n\nexport const MultipleTooltipContext = React.createContext<MultipleTooltipContextProps>(\n    multipleTooltipContextDefaults,\n);\n\ntype MultipleTooltipProviderState = Omit<MultipleTooltipContextProps, 'setValue'>;\n\nexport class MultipleTooltipProvider extends React.PureComponent<\n    {children: React.ReactNode},\n    MultipleTooltipProviderState\n> {\n    state = {\n        ...multipleTooltipContextDefaults,\n    };\n\n    setValue: MultipleTooltipContextProps['setValue'] = (value) => {\n        this.setState({...value});\n    };\n\n    render() {\n        const {children} = this.props;\n\n        return (\n            <MultipleTooltipContext.Provider value={{...this.state, setValue: this.setValue}}>\n                {children}\n            </MultipleTooltipContext.Provider>\n        );\n    }\n}\n"],"names":[],"mappings":";;;;AAcA,MAAM,8BAA8B,GAAG;AACnC,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,WAAW,EAAE,SAAS;AACtB,IAAA,uBAAuB,EAAE,KAAK;AAC9B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,QAAQ,EAAE,MAAK,GAAG;CACrB;AAEY,MAAA,sBAAsB,GAAG,KAAK,CAAC,aAAa,CACrD,8BAA8B;AAKrB,MAAA,uBAAwB,SAAQ,KAAK,CAAC,aAGlD,CAAA;AAHD,IAAA,WAAA,GAAA;;QAII,IAAK,CAAA,KAAA,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,8BAA8B,CACnC;AAEF,QAAA,IAAA,CAAA,QAAQ,GAA4C,CAAC,KAAK,KAAI;AAC1D,YAAA,IAAI,CAAC,QAAQ,CAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAE;AAC7B,SAAC;;IAED,MAAM,GAAA;AACF,QAAA,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK;QAE7B,QACI,oBAAC,sBAAsB,CAAC,QAAQ,EAAC,EAAA,KAAK,kCAAM,IAAI,CAAC,KAAK,CAAE,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAC1E,CAAA,EAAA,EAAA,QAAQ,CACqB;;AAG7C;;;;;"}

package/build/cjs/components/CompositeBar/constants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const ITEM_TYPE_REGULAR = 'regular';
+const COLLAPSE_ITEM_ID = 'collapse-item-id';
+const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
+const POPUP_ITEM_HEIGHT = 28;
+
+exports.COLLAPSE_ITEM_ID = COLLAPSE_ITEM_ID;
+exports.ITEM_TYPE_REGULAR = ITEM_TYPE_REGULAR;
+exports.POPUP_ITEM_HEIGHT = POPUP_ITEM_HEIGHT;
+exports.POPUP_PLACEMENT = POPUP_PLACEMENT;
+//# sourceMappingURL=constants.js.map

package/build/cjs/components/CompositeBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/CompositeBar/constants.ts"],"sourcesContent":["import {PopupPlacement} from '@gravity-ui/uikit';\n\nexport const ITEM_TYPE_REGULAR = 'regular';\nexport const COLLAPSE_ITEM_ID = 'collapse-item-id';\n\nexport const POPUP_PLACEMENT: PopupPlacement = ['right-start', 'right-end', 'right'];\nexport const POPUP_ITEM_HEIGHT = 28;\n"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB,GAAG;AAC1B,MAAM,gBAAgB,GAAG;AAEnB,MAAA,eAAe,GAAmB,CAAC,aAAa,EAAE,WAAW,EAAE,OAAO;AAC5E,MAAM,iBAAiB,GAAG;;;;;;;"}

package/build/cjs/components/CompositeBar/utils.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var icons = require('@gravity-ui/icons');
+var constants = require('../constants.js');
+var constants$1 = require('./constants.js');
+
+function getItemHeight(item) {
+    if (!isMenuItem(item)) {
+        return constants.ITEM_HEIGHT;
+    }
+    switch (item.type) {
+        case 'action':
+            return 50;
+        case 'divider':
+            return 15;
+        default:
+            return constants.ITEM_HEIGHT;
+    }
+}
+function getItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+}
+function getSelectedItemIndex(items) {
+    const index = items.findIndex(({ current }) => Boolean(current));
+    return index === -1 ? undefined : index;
+}
+function getPinnedItems(items) {
+    const pinnedItems = [];
+    for (const item of items) {
+        if (item.pinned) {
+            pinnedItems.push(item);
+        }
+        else if (item.type === 'divider') {
+            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
+                pinnedItems.push(item);
+            }
+        }
+    }
+    return pinnedItems;
+}
+function getItemsMinHeight(items) {
+    const pinnedItems = getPinnedItems(items);
+    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
+    return (getItemsHeight(pinnedItems) +
+        getItemsHeight(afterMoreButtonItems) +
+        (pinnedItems.length === items.length ? 0 : constants.ITEM_HEIGHT));
+}
+function getMoreButtonItem(menuMoreTitle) {
+    return {
+        id: constants$1.COLLAPSE_ITEM_ID,
+        title: menuMoreTitle,
+        icon: icons.Ellipsis,
+        iconSize: 18,
+    };
+}
+function getAutosizeListItems(items, height, collapseItem) {
+    var _a, _b, _c;
+    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
+    const regularItems = items.filter((item) => !item.afterMoreButton);
+    const listItems = [...regularItems, ...afterMoreButtonItems];
+    const allItemsHeight = getItemsHeight(listItems);
+    if (allItemsHeight <= height) {
+        return { listItems, collapseItems: [] };
+    }
+    const collapseItemHeight = getItemHeight(collapseItem);
+    listItems.splice(regularItems.length, 0, collapseItem);
+    const collapseItems = [];
+    let listHeight = allItemsHeight + collapseItemHeight;
+    let index = listItems.length;
+    while (listHeight > height) {
+        if (index === 0) {
+            break;
+        }
+        index--;
+        const item = listItems[index];
+        if (item.pinned || item.id === constants$1.COLLAPSE_ITEM_ID || item.afterMoreButton) {
+            continue;
+        }
+        if (item.type === 'divider') {
+            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === undefined ? undefined : _a.type) === 'divider') {
+                listHeight -= getItemHeight(item);
+                listItems.splice(index, 1);
+            }
+            continue;
+        }
+        listHeight -= getItemHeight(item);
+        collapseItems.unshift(...listItems.splice(index, 1));
+    }
+    if (((_b = listItems[index]) === null || _b === undefined ? undefined : _b.type) === 'divider' &&
+        (index === 0 || ((_c = listItems[index - 1]) === null || _c === undefined ? undefined : _c.type) === 'divider')) {
+        listItems.splice(index, 1);
+    }
+    return { listItems, collapseItems };
+}
+function isMenuItem(item) {
+    return (item === null || item === undefined ? undefined : item.id) !== undefined;
+}
+
+exports.getAutosizeListItems = getAutosizeListItems;
+exports.getItemHeight = getItemHeight;
+exports.getItemsHeight = getItemsHeight;
+exports.getItemsMinHeight = getItemsMinHeight;
+exports.getMoreButtonItem = getMoreButtonItem;
+exports.getPinnedItems = getPinnedItems;
+exports.getSelectedItemIndex = getSelectedItemIndex;
+exports.isMenuItem = isMenuItem;
+//# sourceMappingURL=utils.js.map

package/build/cjs/components/CompositeBar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {CompositeBarItem} from '../CompositeBar/CompositeBar';\nimport {ITEM_HEIGHT} from '../constants';\n\nimport {MenuItem} from './../types';\nimport {COLLAPSE_ITEM_ID} from './constants';\n\nexport function getItemHeight(item: CompositeBarItem) {\n    if (!isMenuItem(item)) {\n        return ITEM_HEIGHT;\n    }\n\n    switch (item.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends CompositeBarItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(items: MenuItem[]) {\n    const index = items.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\nexport function getPinnedItems(items: MenuItem[]) {\n    const pinnedItems: MenuItem[] = [];\n    for (const item of items) {\n        if (item.pinned) {\n            pinnedItems.push(item);\n        } else if (item.type === 'divider') {\n            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n                pinnedItems.push(item);\n            }\n        }\n    }\n    return pinnedItems;\n}\n\nexport function getItemsMinHeight(items: MenuItem[]) {\n    const pinnedItems = getPinnedItems(items);\n    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);\n\n    return (\n        getItemsHeight(pinnedItems) +\n        getItemsHeight(afterMoreButtonItems) +\n        (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT)\n    );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): MenuItem {\n    return {\n        id: COLLAPSE_ITEM_ID,\n        title: menuMoreTitle,\n        icon: Ellipsis,\n        iconSize: 18,\n    };\n}\n\nexport function getAutosizeListItems(\n    items: MenuItem[],\n    height: number,\n    collapseItem: MenuItem,\n): {\n    listItems: MenuItem[];\n    collapseItems: MenuItem[];\n} {\n    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);\n    const regularItems = items.filter((item) => !item.afterMoreButton);\n    const listItems = [...regularItems, ...afterMoreButtonItems];\n\n    const allItemsHeight = getItemsHeight(listItems);\n    if (allItemsHeight <= height) {\n        return {listItems, collapseItems: []};\n    }\n\n    const collapseItemHeight = getItemHeight(collapseItem);\n\n    listItems.splice(regularItems.length, 0, collapseItem);\n    const collapseItems: MenuItem[] = [];\n\n    let listHeight = allItemsHeight + collapseItemHeight;\n    let index = listItems.length;\n    while (listHeight > height) {\n        if (index === 0) {\n            break;\n        }\n        index--;\n\n        const item = listItems[index];\n        if (item.pinned || item.id === COLLAPSE_ITEM_ID || item.afterMoreButton) {\n            continue;\n        }\n        if (item.type === 'divider') {\n            if (index + 1 < listItems.length && listItems[index + 1]?.type === 'divider') {\n                listHeight -= getItemHeight(item);\n                listItems.splice(index, 1);\n            }\n            continue;\n        }\n        listHeight -= getItemHeight(item);\n        collapseItems.unshift(...listItems.splice(index, 1));\n    }\n    if (\n        listItems[index]?.type === 'divider' &&\n        (index === 0 || listItems[index - 1]?.type === 'divider')\n    ) {\n        listItems.splice(index, 1);\n    }\n\n    return {listItems, collapseItems};\n}\n\nexport function isMenuItem(item: CompositeBarItem): item is MenuItem {\n    return (item as MenuItem)?.id !== undefined;\n}\n"],"names":["ITEM_HEIGHT","COLLAPSE_ITEM_ID","Ellipsis"],"mappings":"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"}

package/build/cjs/{Content-Dy2XkiRi.js → components/Content/Content.js}

@@ -13,4 +13,4 @@ className, cssSizeVariableName = '--gn-aside-header-size', renderContent, childr
 };
 
 exports.Content = Content;
-//# sourceMappingURL=Content-Dy2XkiRi.js.map
+//# sourceMappingURL=Content.js.map

package/build/cjs/components/Content/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Content/Content.tsx"],"sourcesContent":["/* Used by renderContent AsideHeader prop */\n\nimport React from 'react';\n\nexport type RenderContentType = (data: {size: number}) => React.ReactNode;\n\nexport interface ContentProps {\n    size: number;\n    className?: string;\n    cssSizeVariableName?: string;\n    renderContent?: RenderContentType;\n    children?: React.ReactNode;\n}\n\ninterface RenderContentProps {\n    renderContent: RenderContentType;\n    size: number;\n}\n\nconst RenderContent: React.FC<RenderContentProps> = React.memo(({renderContent, size}) => {\n    return <React.Fragment>{renderContent({size})}</React.Fragment>;\n});\n\nRenderContent.displayName = 'RenderContent';\n\nexport const Content: React.FC<ContentProps> = ({\n    size, // TODO: move to context when MobileHeader will support it\n    className,\n    cssSizeVariableName = '--gn-aside-header-size',\n    renderContent,\n    children,\n}) => {\n    return (\n        <div\n            className={className}\n            style={{...({[cssSizeVariableName]: `${size}px`} as React.CSSProperties)}}\n        >\n            {typeof renderContent === 'function' ? (\n                <RenderContent size={size} renderContent={renderContent} />\n            ) : (\n                children\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;AAAA;AAmBA,MAAM,aAAa,GAAiC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,KAAI;AACrF,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAE,IAAA,EAAA,aAAa,CAAC,EAAC,IAAI,EAAC,CAAC,CAAkB;AACnE,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe;MAE9B,OAAO,GAA2B,CAAC,EAC5C,IAAI;AACJ,SAAS,EACT,mBAAmB,GAAG,wBAAwB,EAC9C,aAAa,EACb,QAAQ,GACX,KAAI;IACD,QACI,6BACI,SAAS,EAAE,SAAS,EACpB,KAAK,oBAAO,EAAC,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAA,EAAA,CAAI,EAAyB,CAEvE,EAAA,EAAA,OAAO,aAAa,KAAK,UAAU,IAChC,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAI,CAAA,KAE3D,QAAQ,CACX,CACC;AAEd;;;;"}

package/build/cjs/components/Drawer/Drawer.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../utils/cn.js');
+var utils = require('./utils.js');
+require('./Drawer.scss.js');
+var CSSTransition = require('../../node_modules/react-transition-group/esm/CSSTransition.js');
+var Transition = require('../../node_modules/react-transition-group/esm/Transition.js');
+
+const b = cn.block('drawer');
+const TIMEOUT = 300;
+const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResize, keepMounted = false, } = props;
+    const [isInitialRender, setInitialRender] = React.useState(true);
+    const itemRef = React.useRef(null);
+    const handleRef = uikit.useForkRef(ref, itemRef);
+    const cssDirection = direction === 'left' ? undefined : direction;
+    const { resizedWidth, resizerHandlers } = utils.useResizableDrawerItem({
+        direction,
+        width,
+        minResizeWidth,
+        maxResizeWidth,
+        onResizeStart,
+        onResize,
+    });
+    React.useEffect(() => {
+        setInitialRender(true);
+    }, [direction]);
+    const resizerElement = resizable ? (React.createElement("div", Object.assign({ className: b('resizer', { direction }) }, resizerHandlers),
+        React.createElement("div", { className: b('resizer-handle') }))) : null;
+    return (React.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
+        React.createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection, hidden: isInitialRender && !visible }, [className]), style: { width: resizable ? `${resizedWidth}px` : undefined } },
+            resizerElement, children !== null && children !== undefined ? children : content)));
+});
+const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
+    let someItemVisible = false;
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === DrawerItem) {
+            const childVisible = Boolean(child.props.visible);
+            if (childVisible) {
+                someItemVisible = true;
+            }
+        }
+    });
+    React.useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key === 'Escape') {
+                onEscape === null || onEscape === undefined ? undefined : onEscape();
+            }
+        }
+        if (someItemVisible) {
+            window.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onEscape, someItemVisible]);
+    const containerRef = React.useRef(null);
+    const veilRef = React.useRef(null);
+    const drawer = (React.createElement(Transition.default, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
+        const childrenVisible = someItemVisible && state === 'entered';
+        return (React.createElement("div", { ref: containerRef, className: b({ hideVeil }, className), style: style },
+            React.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('veil-transition'), nodeRef: veilRef },
+                React.createElement("div", { ref: veilRef, className: b('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
+            React.Children.map(children, (child) => {
+                if (React.isValidElement(child) &&
+                    child.type === DrawerItem) {
+                    const childVisible = Boolean(child.props.visible);
+                    return React.cloneElement(child, Object.assign(Object.assign({ keepMounted }, child.props), { visible: childVisible && childrenVisible }));
+                }
+                return child;
+            })));
+    }));
+    if (disablePortal) {
+        return drawer;
+    }
+    return React.createElement(uikit.Portal, null, drawer);
+};
+
+exports.Drawer = Drawer;
+exports.DrawerItem = DrawerItem;
+//# sourceMappingURL=Drawer.js.map

package/build/cjs/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Portal, useForkRef} from '@gravity-ui/uikit';\nimport {CSSTransition, Transition} from 'react-transition-group';\n\nimport {block} from '../utils/cn';\n\nimport {type DrawerDirection, useResizableDrawerItem} from './utils';\n\nimport './Drawer.scss';\n\nconst b = block('drawer');\nconst TIMEOUT = 300;\n\nexport interface DrawerItemProps {\n    /** Unique identifier for the drawer item. */\n    id: string;\n\n    /**\n     * Content to be displayed within the drawer item.\n     * @deprecated Use `children` instead.\n     */\n    content?: React.ReactNode;\n\n    /** Content to be displayed within the drawer item, preferable over the deprecated `content`. */\n    children?: React.ReactNode;\n\n    /** Determines whether the drawer item is visible or hidden. */\n    visible: boolean;\n\n    /** Specifies the direction from which the drawer should slide in, `left` by default.\n     * @default left\n     */\n    direction?: DrawerDirection;\n\n    /** Additional custom class name applied to the drawer item. */\n    className?: string;\n\n    /** Determines whether the drawer item can be resized */\n    resizable?: boolean;\n\n    /**\n     * The width of the resizable drawer item.\n     * If not provided, the width will be stored internally.\n     */\n    width?: number;\n\n    /** Called at the start of resizing. */\n    onResizeStart?: VoidFunction;\n\n    /**\n     * Called at the end of resizing. Can be used to save the new width.\n     * @param width The new width of the drawer item\n     */\n    onResize?: (width: number) => void;\n\n    /** The minimum width of the resizable drawer item */\n    minResizeWidth?: number;\n\n    /** The maximum width of the resizable drawer item */\n    maxResizeWidth?: number;\n\n    /**\n     * Keep child components mounted when closed, prioritized over Drawer.keepMounted property\n     * @default false\n     * */\n    keepMounted?: boolean;\n}\n\nexport const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(\n    function DrawerItem(props, ref) {\n        const {\n            visible,\n            content,\n            children,\n            direction = 'left',\n            className,\n            resizable,\n            width,\n            minResizeWidth,\n            maxResizeWidth,\n            onResizeStart,\n            onResize,\n            keepMounted = false,\n        } = props;\n\n        const [isInitialRender, setInitialRender] = React.useState(true);\n        const itemRef = React.useRef<HTMLDivElement>(null);\n        const handleRef = useForkRef(ref, itemRef);\n\n        const cssDirection = direction === 'left' ? undefined : direction;\n\n        const {resizedWidth, resizerHandlers} = useResizableDrawerItem({\n            direction,\n            width,\n            minResizeWidth,\n            maxResizeWidth,\n            onResizeStart,\n            onResize,\n        });\n\n        React.useEffect(() => {\n            setInitialRender(true);\n        }, [direction]);\n\n        const resizerElement = resizable ? (\n            <div className={b('resizer', {direction})} {...resizerHandlers}>\n                <div className={b('resizer-handle')} />\n            </div>\n        ) : null;\n\n        return (\n            <CSSTransition\n                in={visible}\n                timeout={TIMEOUT}\n                mountOnEnter={!keepMounted}\n                unmountOnExit={!keepMounted}\n                classNames={b('item-transition', {direction: cssDirection})}\n                nodeRef={itemRef}\n                onEnter={() => setInitialRender(false)}\n                onExit={() => setInitialRender(false)}\n            >\n                <div\n                    ref={handleRef}\n                    className={b(\n                        'item',\n                        {direction: cssDirection, hidden: isInitialRender && !visible},\n                        [className],\n                    )}\n                    style={{width: resizable ? `${resizedWidth}px` : undefined}}\n                >\n                    {resizerElement}\n                    {children ?? content}\n                </div>\n            </CSSTransition>\n        );\n    },\n);\n\ntype DrawerChild = React.ReactElement<DrawerItemProps>;\n\nexport interface DrawerProps {\n    /** Child components to be rendered within the drawer. This can be a single child or an array of children. */\n    children: DrawerChild | DrawerChild[];\n\n    /** Optional additional class names to style the drawer component. */\n    className?: string;\n\n    /** Optional inline styles to be applied to the drawer component. */\n    style?: React.CSSProperties;\n\n    /** Optional additional class names to style the background veil element. */\n    veilClassName?: string;\n\n    /** Optional callback function that is called when the veil (overlay) is clicked. */\n    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n\n    /** Optional callback function that is called when the escape key is pressed, if the drawer is open. */\n    onEscape?: () => void;\n\n    /** Optional flag to hide the background darkening */\n    hideVeil?: boolean;\n\n    /** Optional flag to not use `Portal` for drawer */\n    disablePortal?: boolean;\n\n    /**\n     * Keep child components mounted when closed\n     * @default false\n     * */\n    keepMounted?: boolean;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n    className,\n    veilClassName,\n    children,\n    style,\n    onVeilClick,\n    onEscape,\n    hideVeil,\n    disablePortal = true,\n    keepMounted = false,\n}) => {\n    let someItemVisible = false;\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<DrawerItemProps>(child) && child.type === DrawerItem) {\n            const childVisible = Boolean(child.props.visible);\n            if (childVisible) {\n                someItemVisible = true;\n            }\n        }\n    });\n\n    React.useEffect(() => {\n        function onKeyDown(event: KeyboardEvent) {\n            if (event.key === 'Escape') {\n                onEscape?.();\n            }\n        }\n        if (someItemVisible) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n        return () => {\n            window.removeEventListener('keydown', onKeyDown);\n        };\n    }, [onEscape, someItemVisible]);\n\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const veilRef = React.useRef<HTMLDivElement>(null);\n\n    const drawer = (\n        <Transition\n            in={someItemVisible}\n            timeout={{enter: 0, exit: TIMEOUT}}\n            mountOnEnter={!keepMounted}\n            unmountOnExit={!keepMounted}\n            nodeRef={containerRef}\n        >\n            {(state) => {\n                const childrenVisible = someItemVisible && state === 'entered';\n                return (\n                    <div ref={containerRef} className={b({hideVeil}, className)} style={style}>\n                        <CSSTransition\n                            in={childrenVisible}\n                            timeout={TIMEOUT}\n                            unmountOnExit\n                            classNames={b('veil-transition')}\n                            nodeRef={veilRef}\n                        >\n                            <div\n                                ref={veilRef}\n                                className={b('veil', {hidden: hideVeil}, veilClassName)}\n                                onClick={onVeilClick}\n                            />\n                        </CSSTransition>\n                        {React.Children.map(children, (child) => {\n                            if (\n                                React.isValidElement<DrawerItemProps>(child) &&\n                                child.type === DrawerItem\n                            ) {\n                                const childVisible = Boolean(child.props.visible);\n                                return React.cloneElement(child, {\n                                    keepMounted,\n                                    ...child.props,\n                                    visible: childVisible && childrenVisible,\n                                });\n                            }\n                            return child;\n                        })}\n                    </div>\n                );\n            }}\n        </Transition>\n    );\n\n    if (disablePortal) {\n        return drawer;\n    }\n\n    return <Portal>{drawer}</Portal>;\n};\n"],"names":["block","useForkRef","useResizableDrawerItem","Transition","Portal"],"mappings":";;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,QAAK,CAAC,QAAQ,CAAC;AACzB,MAAM,OAAO,GAAG,GAAG;AAyDZ,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACtC,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG,EAAA;AAC1B,IAAA,MAAM,EACF,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,KAAK,GACtB,GAAG,KAAK;AAET,IAAA,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;IAClD,MAAM,SAAS,GAAGC,gBAAU,CAAC,GAAG,EAAE,OAAO,CAAC;AAE1C,IAAA,MAAM,YAAY,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS;AAEjE,IAAA,MAAM,EAAC,YAAY,EAAE,eAAe,EAAC,GAAGC,4BAAsB,CAAC;QAC3D,SAAS;QACT,KAAK;QACL,cAAc;QACd,cAAc;QACd,aAAa;QACb,QAAQ;AACX,KAAA,CAAC;AAEF,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACjB,gBAAgB,CAAC,IAAI,CAAC;AAC1B,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,cAAc,GAAG,SAAS,IAC5B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,SAAS,EAAC,CAAC,IAAM,eAAe,CAAA;AAC1D,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAI,CAAA,CACrC,IACN,IAAI;IAER,QACI,KAAC,CAAA,aAAA,CAAA,aAAa,EACV,EAAA,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,CAAC,WAAW,EAC1B,aAAa,EAAE,CAAC,WAAW,EAC3B,UAAU,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC,EAC3D,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,EACtC,MAAM,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,EAAA;QAErC,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CACR,MAAM,EACN,EAAC,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,eAAe,IAAI,CAAC,OAAO,EAAC,EAC9D,CAAC,SAAS,CAAC,CACd,EACD,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,GAAG,GAAG,YAAY,CAAA,EAAA,CAAI,GAAG,SAAS,EAAC,EAAA;YAE1D,cAAc,EACd,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAR,QAAQ,GAAI,OAAO,CAClB,CACM;AAExB,CAAC;AAqCE,MAAM,MAAM,GAA0B,CAAC,EAC1C,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,WAAW,GAAG,KAAK,GACtB,KAAI;IACD,IAAI,eAAe,GAAG,KAAK;IAC3B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACvC,QAAA,IAAI,KAAK,CAAC,cAAc,CAAkB,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;YAC3E,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;YACjD,IAAI,YAAY,EAAE;gBACd,eAAe,GAAG,IAAI;;;AAGlC,KAAC,CAAC;AAEF,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;QACjB,SAAS,SAAS,CAAC,KAAoB,EAAA;AACnC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AACxB,gBAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,EAAI;;;QAGpB,IAAI,eAAe,EAAE;AACjB,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;;AAEjD,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AACpD,SAAC;AACL,KAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,MAAM,IACR,KAAC,CAAA,aAAA,CAAAC,kBAAU,IACP,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,EAClC,YAAY,EAAE,CAAC,WAAW,EAC1B,aAAa,EAAE,CAAC,WAAW,EAC3B,OAAO,EAAE,YAAY,IAEpB,CAAC,KAAK,KAAI;AACP,QAAA,MAAM,eAAe,GAAG,eAAe,IAAI,KAAK,KAAK,SAAS;AAC9D,QAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,EAAC,QAAQ,EAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAA;YACrE,KAAC,CAAA,aAAA,CAAA,aAAa,IACV,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,OAAO,EAChB,aAAa,EACb,IAAA,EAAA,UAAU,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA;gBAEhB,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,EAAE,aAAa,CAAC,EACvD,OAAO,EAAE,WAAW,EAAA,CACtB,CACU;YACf,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACpC,gBAAA,IACI,KAAK,CAAC,cAAc,CAAkB,KAAK,CAAC;AAC5C,oBAAA,KAAK,CAAC,IAAI,KAAK,UAAU,EAC3B;oBACE,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjD,oBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAC3B,WAAW,EACR,EAAA,KAAK,CAAC,KAAK,KACd,OAAO,EAAE,YAAY,IAAI,eAAe,IAC1C;;AAEN,gBAAA,OAAO,KAAK;aACf,CAAC,CACA;KAEb,CACQ,CAChB;IAED,IAAI,aAAa,EAAE;AACf,QAAA,OAAO,MAAM;;AAGjB,IAAA,OAAO,KAAC,CAAA,aAAA,CAAAC,YAAM,EAAE,IAAA,EAAA,MAAM,CAAU;AACpC;;;;;"}

package/build/cjs/components/Drawer/Drawer.scss.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);height:100%;left:var(--gn-aside-header-size);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:0;will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_right-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_right-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_right-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_right-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0}.gn-drawer__resizer_direction_left{right:0}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Drawer.scss.js.map

package/build/cjs/components/Drawer/Drawer.scss.js.map

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

package/build/cjs/components/Drawer/utils.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
+const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
+const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
+function getEventClientX(e) {
+    var _a, _b;
+    return 'touches' in e ? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0) : e.clientX;
+}
+function useResizeHandlers({ onStart, onMove, onEnd }) {
+    const initialXPosition = React__namespace.useRef(0);
+    const currentXPosition = React__namespace.useRef(0);
+    const handleMove = React__namespace.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        if (currentXPosition.current === currentX) {
+            return;
+        }
+        currentXPosition.current = currentX;
+        const delta = initialXPosition.current - currentX;
+        onMove(delta);
+    }, [onMove]);
+    const handleEnd = React__namespace.useCallback((e) => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('touchmove', handleMove);
+        document.body.style.removeProperty('user-select');
+        document.body.style.removeProperty('-webkit-user-select');
+        document.body.style.removeProperty('cursor');
+        const currentX = getEventClientX(e);
+        const delta = initialXPosition.current - currentX;
+        onEnd(delta);
+    }, [handleMove, onEnd]);
+    const handleStart = React__namespace.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        initialXPosition.current = currentX;
+        currentXPosition.current = currentX;
+        window.addEventListener('mouseup', handleEnd, { once: true });
+        window.addEventListener('touchend', handleEnd, { once: true });
+        window.addEventListener('touchcancel', handleEnd, { once: true });
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('touchmove', handleMove);
+        document.body.style.setProperty('user-select', 'none');
+        document.body.style.setProperty('-webkit-user-select', 'none');
+        document.body.style.setProperty('cursor', 'col-resize');
+        onStart();
+    }, [handleEnd, handleMove, onStart]);
+    return {
+        onMouseDown: handleStart,
+        onTouchStart: handleStart,
+    };
+}
+function useResizableDrawerItem(params) {
+    const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
+    const [isResizing, setIsResizing] = React__namespace.useState(false);
+    const [resizeDelta, setResizeDelta] = React__namespace.useState(0);
+    const [internalWidth, setInternalWidth] = React__namespace.useState(width !== null && width !== undefined ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
+    const getClampedWidth = React__namespace.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
+    const getResizedWidth = React__namespace.useCallback((delta) => {
+        const signedDelta = direction === 'right' ? delta : -delta;
+        const newWidth = (width !== null && width !== undefined ? width : internalWidth) + signedDelta;
+        return getClampedWidth(newWidth);
+    }, [width, internalWidth, direction, getClampedWidth]);
+    const onStart = React__namespace.useCallback(() => {
+        setIsResizing(true);
+        setResizeDelta(0);
+        onResizeStart === null || onResizeStart === undefined ? undefined : onResizeStart();
+    }, [onResizeStart]);
+    const onMove = React__namespace.useCallback((delta) => {
+        setResizeDelta(delta);
+    }, []);
+    const onEnd = React__namespace.useCallback((delta) => {
+        const newWidth = getResizedWidth(delta);
+        setIsResizing(false);
+        setInternalWidth(newWidth);
+        onResize === null || onResize === undefined ? undefined : onResize(newWidth);
+    }, [getResizedWidth, onResize]);
+    const displayWidth = isResizing
+        ? getResizedWidth(resizeDelta)
+        : getClampedWidth(width !== null && width !== undefined ? width : internalWidth);
+    const handlers = useResizeHandlers({ onStart, onMove, onEnd });
+    return { resizedWidth: displayWidth, resizerHandlers: handlers };
+}
+
+exports.DRAWER_ITEM_INITIAL_RESIZE_WIDTH = DRAWER_ITEM_INITIAL_RESIZE_WIDTH;
+exports.DRAWER_ITEM_MAX_RESIZE_WIDTH = DRAWER_ITEM_MAX_RESIZE_WIDTH;
+exports.DRAWER_ITEM_MIN_RESIZE_WIDTH = DRAWER_ITEM_MIN_RESIZE_WIDTH;
+exports.useResizableDrawerItem = useResizableDrawerItem;
+exports.useResizeHandlers = useResizeHandlers;
+//# sourceMappingURL=utils.js.map

package/build/cjs/components/Drawer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Drawer/utils.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;\nexport const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;\nexport const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;\n\nexport type DrawerDirection = 'right' | 'left';\nexport type OnResizeHandler = (width: number) => void;\n\nfunction getEventClientX(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) {\n    return 'touches' in e ? (e.touches[0]?.clientX ?? 0) : e.clientX;\n}\n\nexport interface UseResizeHandlersParams {\n    onStart: () => void;\n    onMove: (delta: number) => void;\n    onEnd: (delta: number) => void;\n}\n\nexport function useResizeHandlers({onStart, onMove, onEnd}: UseResizeHandlersParams) {\n    const initialXPosition = React.useRef(0);\n    const currentXPosition = React.useRef(0);\n\n    const handleMove = React.useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            const currentX = getEventClientX(e);\n\n            if (currentXPosition.current === currentX) {\n                return;\n            }\n\n            currentXPosition.current = currentX;\n\n            const delta = initialXPosition.current - currentX;\n\n            onMove(delta);\n        },\n        [onMove],\n    );\n\n    const handleEnd = React.useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            window.removeEventListener('mousemove', handleMove);\n            window.removeEventListener('touchmove', handleMove);\n\n            document.body.style.removeProperty('user-select');\n            document.body.style.removeProperty('-webkit-user-select');\n            document.body.style.removeProperty('cursor');\n\n            const currentX = getEventClientX(e);\n            const delta = initialXPosition.current - currentX;\n\n            onEnd(delta);\n        },\n        [handleMove, onEnd],\n    );\n\n    const handleStart = React.useCallback(\n        (e: React.MouseEvent | React.TouchEvent) => {\n            const currentX = getEventClientX(e);\n\n            initialXPosition.current = currentX;\n            currentXPosition.current = currentX;\n\n            window.addEventListener('mouseup', handleEnd, {once: true});\n            window.addEventListener('touchend', handleEnd, {once: true});\n            window.addEventListener('touchcancel', handleEnd, {once: true});\n\n            window.addEventListener('mousemove', handleMove);\n            window.addEventListener('touchmove', handleMove);\n\n            document.body.style.setProperty('user-select', 'none');\n            document.body.style.setProperty('-webkit-user-select', 'none');\n            document.body.style.setProperty('cursor', 'col-resize');\n\n            onStart();\n        },\n        [handleEnd, handleMove, onStart],\n    );\n\n    return {\n        onMouseDown: handleStart,\n        onTouchStart: handleStart,\n    };\n}\n\nexport interface UseResizableDrawerItemParams {\n    direction?: DrawerDirection;\n    width?: number;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    onResizeStart?: VoidFunction;\n    onResize?: OnResizeHandler;\n}\n\nexport function useResizableDrawerItem(params: UseResizableDrawerItemParams) {\n    const {\n        direction,\n        width,\n        minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH,\n        maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH,\n        onResizeStart,\n        onResize,\n    } = params;\n\n    const [isResizing, setIsResizing] = React.useState(false);\n    const [resizeDelta, setResizeDelta] = React.useState(0);\n    const [internalWidth, setInternalWidth] = React.useState(\n        width ?? DRAWER_ITEM_INITIAL_RESIZE_WIDTH,\n    );\n\n    const getClampedWidth = React.useCallback(\n        (width: number) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth),\n        [minResizeWidth, maxResizeWidth],\n    );\n\n    const getResizedWidth = React.useCallback(\n        (delta: number) => {\n            const signedDelta = direction === 'right' ? delta : -delta;\n            const newWidth = (width ?? internalWidth) + signedDelta;\n            return getClampedWidth(newWidth);\n        },\n        [width, internalWidth, direction, getClampedWidth],\n    );\n\n    const onStart = React.useCallback(() => {\n        setIsResizing(true);\n        setResizeDelta(0);\n        onResizeStart?.();\n    }, [onResizeStart]);\n\n    const onMove = React.useCallback((delta: number) => {\n        setResizeDelta(delta);\n    }, []);\n\n    const onEnd = React.useCallback(\n        (delta: number) => {\n            const newWidth = getResizedWidth(delta);\n            setIsResizing(false);\n            setInternalWidth(newWidth);\n            onResize?.(newWidth);\n        },\n        [getResizedWidth, onResize],\n    );\n\n    const displayWidth = isResizing\n        ? getResizedWidth(resizeDelta)\n        : getClampedWidth(width ?? internalWidth);\n\n    const handlers = useResizeHandlers({onStart, onMove, onEnd});\n\n    return {resizedWidth: displayWidth, resizerHandlers: handlers};\n}\n"],"names":["React"],"mappings":"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"}

package/build/cjs/components/Footer/MenuItem/MenuItem.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var cn = require('../../utils/cn.js');
+require('./MenuItem.scss.js');
+
+const b = cn.block('footer-menu-item');
+const MenuItem = (_a) => {
+    var { text, className } = _a, menuItemProps = tslib_es6.__rest(_a, ["text", "className"]);
+    return (React.createElement(uikit.Menu.Item, Object.assign({ className: b(null, className) }, menuItemProps), text));
+};
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/build/cjs/components/Footer/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Footer/MenuItem/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type {FC} from 'react';\n\nimport {Menu} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {FooterMenuItem} from '../types';\n\nimport './MenuItem.scss';\n\nconst b = block('footer-menu-item');\n\nexport type MenuItemProps = FooterMenuItem;\n\nexport const MenuItem: FC<MenuItemProps> = ({text, className, ...menuItemProps}) => {\n    return (\n        <Menu.Item className={b(null, className)} {...menuItemProps}>\n            {text}\n        </Menu.Item>\n    );\n};\n"],"names":["block","__rest","Menu"],"mappings":";;;;;;;;AAUA,MAAM,CAAC,GAAGA,QAAK,CAAC,kBAAkB,CAAC;AAItB,MAAA,QAAQ,GAAsB,CAAC,EAAmC,KAAI;QAAvC,EAAC,IAAI,EAAE,SAAS,EAAA,GAAA,EAAmB,EAAd,aAAa,GAAAC,gBAAA,CAAA,EAAA,EAAlC,qBAAmC,CAAD;IAC1E,QACI,oBAACC,UAAI,CAAC,IAAI,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAM,EAAA,aAAa,GACtD,IAAI,CACG;AAEpB;;;;"}

package/build/cjs/components/Footer/MenuItem/MenuItem.scss.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".gn-footer-menu-item{align-items:center;align-self:stretch;display:flex;height:100%;justify-content:center}.gn-footer-menu-item .g-menu__item-content{color:var(--g-color-text-secondary);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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gn-footer-menu-item[class]:hover{background-color:inherit}.gn-footer-menu-item[class]:hover[href] .g-menu__item-content{color:var(--g-color-text-link-hover)}";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=MenuItem.scss.js.map

package/build/cjs/components/Footer/MenuItem/MenuItem.scss.js.map

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