@gravity-ui/navigation 3.6.3 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/CompositeBar/CompositeBar.d.ts +1 -0
- package/build/cjs/components/types.d.ts +1 -0
- package/build/cjs/{index-B6F9orr8.js → index-C2UqHNdF.js} +2 -2
- package/build/cjs/{index-B6F9orr8.js.map → index-C2UqHNdF.js.map} +1 -1
- package/build/cjs/{index-CUI-2dbs.js → index-Cfkp4RxD.js} +12 -10
- package/build/cjs/index-Cfkp4RxD.js.map +1 -0
- package/build/cjs/index.js +1 -1
- package/build/esm/components/CompositeBar/CompositeBar.d.ts +1 -0
- package/build/esm/components/types.d.ts +1 -0
- package/build/esm/{index-CI_SBVwl.js → index-BYgSDqdV.js} +12 -10
- package/build/esm/index-BYgSDqdV.js.map +1 -0
- package/build/esm/{index-Dz2PNf_D.js → index-BckFwvaf.js} +2 -2
- package/build/esm/{index-Dz2PNf_D.js.map → index-BckFwvaf.js.map} +1 -1
- package/build/esm/index.js +1 -1
- package/package.json +1 -1
- package/build/cjs/index-CUI-2dbs.js.map +0 -1
- package/build/esm/index-CI_SBVwl.js.map +0 -1
|
@@ -42,6 +42,7 @@ export interface MenuItem extends QAProps {
|
|
|
42
42
|
* The category to which the menu item belongs. Need for grouping in the display/editing mode of all pages
|
|
43
43
|
*/
|
|
44
44
|
category?: string;
|
|
45
|
+
className?: string;
|
|
45
46
|
}
|
|
46
47
|
export type SubheaderMenuItem = Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'>;
|
|
47
48
|
export interface LogoProps {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var uikit = require('@gravity-ui/uikit');
|
|
5
|
-
var index = require('./index-
|
|
5
|
+
var index = require('./index-Cfkp4RxD.js');
|
|
6
6
|
require('@bem-react/classname');
|
|
7
7
|
require('@gravity-ui/icons');
|
|
8
8
|
require('@gravity-ui/uikit/i18n');
|
|
@@ -67,4 +67,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
exports.TopAlert = TopAlert;
|
|
70
|
-
//# sourceMappingURL=index-
|
|
70
|
+
//# sourceMappingURL=index-C2UqHNdF.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-C2UqHNdF.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n alertRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n const alertRef = React.useRef<HTMLDivElement>(null);\n\n const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n const gRootElement = document\n .getElementsByClassName(G_ROOT_CLASS_NAME)\n .item(0) as HTMLElement | null;\n gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n }, [setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (alert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n return {\n alertRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n alert?: TopAlertProps;\n className?: string;\n mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n const [opened, setOpened] = React.useState(true);\n\n const handleClose = React.useCallback(() => {\n setOpened(false);\n alert?.onCloseTopAlert?.();\n }, [alert]);\n\n React.useEffect(() => {\n if (!opened) {\n updateTopSize();\n }\n }, [opened, updateTopSize]);\n\n if (!alert || !alert.message) {\n return null;\n }\n\n return (\n <div\n ref={alertRef}\n className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n >\n {opened && (\n <Alert\n className={b('', {\n centered: alert.centered,\n dense: alert.dense,\n })}\n corners=\"square\"\n layout=\"horizontal\"\n align={alert.align}\n theme={alert.theme || 'warning'}\n view={alert.view}\n icon={alert.icon}\n title={alert.title}\n message={\n mobileView ? (\n <Text ellipsisLines={5} variant=\"body-2\">\n {alert.message}\n </Text>\n ) : (\n alert.message\n )\n }\n actions={alert.actions}\n onClose={alert.closable ? handleClose : undefined}\n />\n )}\n </div>\n );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}
|
|
@@ -141,7 +141,7 @@ function styleInject(css, ref) {
|
|
|
141
141
|
var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
|
|
142
142
|
styleInject(css_248z$u);
|
|
143
143
|
|
|
144
|
-
const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-
|
|
144
|
+
const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-C2UqHNdF.js'); }).then((module) => ({ default: module.TopAlert })));
|
|
145
145
|
const Layout = ({ compact, className, children, topAlert }) => {
|
|
146
146
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
147
147
|
const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
|
|
@@ -1589,7 +1589,7 @@ const Item$1 = (props) => {
|
|
|
1589
1589
|
? ['a', { href: item.link }]
|
|
1590
1590
|
: ['button', {}];
|
|
1591
1591
|
const createdNode = (React.createElement(React.Fragment, null,
|
|
1592
|
-
React.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
|
|
1592
|
+
React.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, [className, item.className]), ref: ref, "data-qa": item.qa, onClick: (event) => {
|
|
1593
1593
|
if (collapsedItem) {
|
|
1594
1594
|
/**
|
|
1595
1595
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -1722,7 +1722,7 @@ var css_248z$o = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn
|
|
|
1722
1722
|
styleInject(css_248z$o);
|
|
1723
1723
|
|
|
1724
1724
|
const b$p = block('composite-bar');
|
|
1725
|
-
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, }) => {
|
|
1725
|
+
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compositeId, }) => {
|
|
1726
1726
|
const ref = React.useRef(null);
|
|
1727
1727
|
const tooltipRef = React.useRef(null);
|
|
1728
1728
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
|
|
@@ -1826,7 +1826,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
|
|
|
1826
1826
|
]);
|
|
1827
1827
|
return (React.createElement(React.Fragment, null,
|
|
1828
1828
|
React.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1829
|
-
React.createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$p('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
1829
|
+
React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$p('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
1830
1830
|
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
1831
1831
|
const enableTooltip = isMenuItem(item)
|
|
1832
1832
|
? !multipleTooltip
|
|
@@ -1835,7 +1835,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
|
|
|
1835
1835
|
} })),
|
|
1836
1836
|
type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
1837
1837
|
};
|
|
1838
|
-
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, }) => {
|
|
1838
|
+
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compositeId, }) => {
|
|
1839
1839
|
if (items.length === 0) {
|
|
1840
1840
|
return null;
|
|
1841
1841
|
}
|
|
@@ -1848,7 +1848,7 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, mu
|
|
|
1848
1848
|
const height = Number.isNaN(size.height) ? 0 : size.height;
|
|
1849
1849
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
1850
1850
|
return (React.createElement("div", { style: { width, height } },
|
|
1851
|
-
React.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
1851
|
+
React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
1852
1852
|
}))));
|
|
1853
1853
|
}
|
|
1854
1854
|
else {
|
|
@@ -1965,6 +1965,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
1965
1965
|
};
|
|
1966
1966
|
|
|
1967
1967
|
const DEFAULT_SUBHEADER_ITEMS = [];
|
|
1968
|
+
const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
|
|
1968
1969
|
const Header = () => {
|
|
1969
1970
|
const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
|
|
1970
1971
|
const { compact } = useAsideHeaderContext();
|
|
@@ -1975,7 +1976,7 @@ const Header = () => {
|
|
|
1975
1976
|
}, [onClosePanel, logo]);
|
|
1976
1977
|
return (React.createElement("div", { className: b$v('header', { ['with-decoration']: headerDecoration }) },
|
|
1977
1978
|
logo && (React.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b$v('logo-button'), iconPlaceClassName: b$v('logo-icon-place') }))),
|
|
1978
|
-
React.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
1979
|
+
React.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
1979
1980
|
headerDecoration && (React.createElement(uikit.Icon, { data: SvgDividerCollapsed, className: b$v('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
|
|
1980
1981
|
};
|
|
1981
1982
|
|
|
@@ -4591,6 +4592,7 @@ const Panels = () => {
|
|
|
4591
4592
|
return panelItems ? (React.createElement(Drawer, { className: b$v('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
|
|
4592
4593
|
};
|
|
4593
4594
|
|
|
4595
|
+
const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
|
|
4594
4596
|
const FirstPanel = React.forwardRef((_props, ref) => {
|
|
4595
4597
|
const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
|
|
4596
4598
|
const visibleMenuItems = useVisibleMenuItems();
|
|
@@ -4604,7 +4606,7 @@ const FirstPanel = React.forwardRef((_props, ref) => {
|
|
|
4604
4606
|
customBackground && (React.createElement("div", { className: b$v('aside-custom-background', customBackgroundClassName) }, customBackground)),
|
|
4605
4607
|
React.createElement("div", { className: b$v('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4606
4608
|
React.createElement(Header, null),
|
|
4607
|
-
(visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React.createElement("div", { className: b$v('menu-items') })),
|
|
4609
|
+
(visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React.createElement("div", { className: b$v('menu-items') })),
|
|
4608
4610
|
React.createElement("div", { className: b$v('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
|
|
4609
4611
|
size,
|
|
4610
4612
|
compact: Boolean(compact),
|
|
@@ -5687,7 +5689,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5687
5689
|
var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
|
|
5688
5690
|
styleInject(css_248z$4);
|
|
5689
5691
|
|
|
5690
|
-
const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-
|
|
5692
|
+
const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-C2UqHNdF.js'); }).then((module) => ({ default: module.TopAlert })));
|
|
5691
5693
|
const b$4 = block('mobile-header');
|
|
5692
5694
|
const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
|
|
5693
5695
|
const targetRef = useForwardRef(ref);
|
|
@@ -6003,4 +6005,4 @@ exports.styleInject = styleInject;
|
|
|
6003
6005
|
exports.useAsideHeaderContext = useAsideHeaderContext;
|
|
6004
6006
|
exports.useSettingsContext = useSettingsContext;
|
|
6005
6007
|
exports.useSettingsSelectionContext = useSettingsSelectionContext;
|
|
6006
|
-
//# sourceMappingURL=index-
|
|
6008
|
+
//# sourceMappingURL=index-Cfkp4RxD.js.map
|