@gravity-ui/navigation 0.3.0 → 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 +16 -5
- package/README.md +4 -2
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/cjs/index.js +11 -3
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/esm/index.js +11 -3
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [0.3.
|
|
3
|
+
## [0.3.2](https://github.com/gravity-ui/navigation/compare/v0.3.1...v0.3.2) (2023-02-17)
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
###
|
|
6
|
+
### Bug Fixes
|
|
7
7
|
|
|
8
|
-
*
|
|
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))
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
## [0.3.1](https://github.com/gravity-ui/navigation/compare/v0.3.0...v0.3.1) (2022-12-29)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* keep svg viewbox ([#33](https://github.com/gravity-ui/navigation/issues/33)) ([0205630](https://github.com/gravity-ui/navigation/commit/020563098e5e1d8187f2d2c62e7ef9af4d4085eb))
|
|
17
|
+
|
|
18
|
+
## [0.3.0](https://github.com/gravity-ui/navigation/compare/v0.2.1...v0.3.0) (2022-11-24)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### ⚠ BREAKING CHANGES
|
|
11
22
|
|
|
12
|
-
*
|
|
23
|
+
* Type of FooterItemProps.item.itemWrapper is changed ([df865df](https://github.com/gravity-ui/navigation/commit/df865df329f6c1e62c09063cdbf1596e634e8145))
|
|
13
24
|
|
|
14
25
|
|
|
15
26
|
### Bug Fixes
|
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) {
|
|
@@ -3981,6 +3981,7 @@ function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : func
|
|
|
3981
3981
|
var SvgDots = function SvgDots(props) {
|
|
3982
3982
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
3983
3983
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3984
|
+
viewBox: "0 0 16 16",
|
|
3984
3985
|
width: 16,
|
|
3985
3986
|
height: 16
|
|
3986
3987
|
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4107,6 +4108,7 @@ var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
|
4107
4108
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
4108
4109
|
width: 8,
|
|
4109
4110
|
height: 8,
|
|
4111
|
+
viewBox: "0 0 8 8",
|
|
4110
4112
|
fill: "currentColor",
|
|
4111
4113
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4112
4114
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4121,6 +4123,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4121
4123
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
4122
4124
|
width: 56,
|
|
4123
4125
|
height: 29,
|
|
4126
|
+
viewBox: "0 0 56 29",
|
|
4124
4127
|
fill: "currentColor",
|
|
4125
4128
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4126
4129
|
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4129,7 +4132,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4129
4132
|
};
|
|
4130
4133
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4131
4134
|
|
|
4132
|
-
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}";
|
|
4133
4136
|
styleInject(css_248z$3);
|
|
4134
4137
|
|
|
4135
4138
|
const b$4 = block('aside-header');
|
|
@@ -4152,7 +4155,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4152
4155
|
this.renderSecondPane = (size) => {
|
|
4153
4156
|
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
|
|
4154
4157
|
};
|
|
4155
|
-
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 })));
|
|
4156
4159
|
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$4('header') },
|
|
4157
4160
|
this.renderLogo(),
|
|
4158
4161
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
@@ -4189,6 +4192,11 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4189
4192
|
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4190
4193
|
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
|
|
4191
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
|
+
};
|
|
4192
4200
|
}
|
|
4193
4201
|
render() {
|
|
4194
4202
|
const { className, compact } = this.props;
|