@gravity-ui/navigation 0.3.1 → 0.3.2
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/CHANGELOG.md +8 -0
- package/README.md +4 -2
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/cjs/index.js +8 -3
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/esm/index.js +8 -3
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.3.2](https://github.com/gravity-ui/navigation/compare/v0.3.1...v0.3.2) (2023-02-17)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **AsideHeader:** panel border in High Contrast themes ([#37](https://github.com/gravity-ui/navigation/issues/37)) ([340f9bb](https://github.com/gravity-ui/navigation/commit/340f9bb5b728fe9757e9f9db26669f12e3770ae9))
|
|
9
|
+
* **Logo:** close panels by logo click ([#39](https://github.com/gravity-ui/navigation/issues/39)) ([860e8b2](https://github.com/gravity-ui/navigation/commit/860e8b29408ed5eba0880f0ebc63e2e6551ded4d))
|
|
10
|
+
|
|
3
11
|
## [0.3.1](https://github.com/gravity-ui/navigation/compare/v0.3.0...v0.3.1) (2022-12-29)
|
|
4
12
|
|
|
5
13
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
# @gravity-ui/navigation · [](https://www.npmjs.com/package/@gravity-ui/navigation) [](https://www.npmjs.com/package/@gravity-ui/navigation) [](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [](https://preview.yandexcloud.dev/navigation/)
|
|
2
2
|
|
|
3
|
-
Aside Header Navigation
|
|
3
|
+
### Aside Header Navigation · [Preview →](preview.yandexcloud.dev/navigation/)
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
package/build/cjs/index.js
CHANGED
|
@@ -3312,7 +3312,7 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3312
3312
|
return (React__default["default"].createElement("div", { className: b$8() },
|
|
3313
3313
|
React__default["default"].createElement("div", { className: b$8('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3314
3314
|
!compact &&
|
|
3315
|
-
(hasWrapper ? (wrapper(logo, compact)) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
|
|
3315
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
|
|
3316
3316
|
};
|
|
3317
3317
|
|
|
3318
3318
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -4132,7 +4132,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4132
4132
|
};
|
|
4133
4133
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4134
4134
|
|
|
4135
|
-
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n --aside-header-divider-line-color: var(--yc-color-
|
|
4135
|
+
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n --aside-header-divider-line-color: var(--yc-color-line-solid);\n --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header__menu-items {\n flex-grow: 1;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4136
4136
|
styleInject(css_248z$3);
|
|
4137
4137
|
|
|
4138
4138
|
const b$4 = block('aside-header');
|
|
@@ -4155,7 +4155,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4155
4155
|
this.renderSecondPane = (size) => {
|
|
4156
4156
|
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
|
|
4157
4157
|
};
|
|
4158
|
-
this.renderLogo = () => React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact }));
|
|
4158
|
+
this.renderLogo = () => (React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4159
4159
|
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$4('header') },
|
|
4160
4160
|
this.renderLogo(),
|
|
4161
4161
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
@@ -4192,6 +4192,11 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4192
4192
|
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4193
4193
|
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
|
|
4194
4194
|
};
|
|
4195
|
+
this.onLogoClick = (event) => {
|
|
4196
|
+
var _a, _b, _c, _d;
|
|
4197
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4198
|
+
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4199
|
+
};
|
|
4195
4200
|
}
|
|
4196
4201
|
render() {
|
|
4197
4202
|
const { className, compact } = this.props;
|