@semcore/breadcrumbs 16.6.0-prerelease.3 → 16.6.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/CHANGELOG.md +14 -2
- package/README.md +4 -4
- package/lib/cjs/Breadcrumbs.js +37 -44
- package/lib/cjs/Breadcrumbs.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/breadcrumbs.shadow.css +4 -10
- package/lib/es6/Breadcrumbs.js +36 -43
- package/lib/es6/Breadcrumbs.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/breadcrumbs.shadow.css +4 -10
- package/lib/esm/Breadcrumbs.mjs +31 -39
- package/lib/esm/style/breadcrumbs.shadow.css +4 -10
- package/lib/types/index.d.ts +9 -9
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [16.6.0] -
|
|
5
|
+
## [16.6.0] - 2026-05-07
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- New brand theme.
|
|
10
|
+
|
|
11
|
+
## [16.5.4] - 2025-11-17
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [16.7.2 ~> 16.7.3]).
|
|
16
|
+
|
|
17
|
+
## [16.5.3] - 2025-10-29
|
|
6
18
|
|
|
7
19
|
### Changed
|
|
8
20
|
|
|
9
|
-
- Version
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [16.5.1 ~> 16.7.2], `@semcore/base-components` [16.4.0 ~> 16.4.1]).
|
|
10
22
|
|
|
11
23
|
## [16.5.2] - 2025-10-06
|
|
12
24
|
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/@semcore/breadcrumbs)
|
|
4
4
|
[](https://www.npmjs.com/package/@semcore/breadcrumbs)
|
|
5
|
-
[](https://github.com/semrush/intergalactic/blob/
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
|
|
6
6
|
|
|
7
7
|
> This component is part of the Intergalactic Design System
|
|
8
8
|
|
|
@@ -20,13 +20,13 @@ npm install @semcore/breadcrumbs
|
|
|
20
20
|
|
|
21
21
|
## 👤 Author
|
|
22
22
|
|
|
23
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
24
24
|
|
|
25
25
|
## 🤝 Contributing
|
|
26
26
|
|
|
27
27
|
Contributions, issues and feature requests are welcome!
|
|
28
28
|
|
|
29
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/
|
|
29
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
|
|
30
30
|
|
|
31
31
|
## Show your support
|
|
32
32
|
|
|
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
|
|
|
34
34
|
|
|
35
35
|
## 📝 License
|
|
36
36
|
|
|
37
|
-
This project is [MIT](https://github.com/semrush/intergalactic/blob/
|
|
37
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
|
package/lib/cjs/Breadcrumbs.js
CHANGED
|
@@ -12,21 +12,22 @@ var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSup
|
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
14
|
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
15
16
|
var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
|
|
16
|
-
var _flexBox = require("@semcore/flex-box");
|
|
17
17
|
var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
|
|
18
|
+
var _typography = require("@semcore/typography");
|
|
18
19
|
var _react = _interopRequireDefault(require("react"));
|
|
19
20
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
20
21
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
21
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBreadcrumbs_lllrq_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_{display:contents;list-style:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));display:flex}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_:last-child{display:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{width:100%;display:block;position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));-webkit-text-decoration:none;text-decoration:none;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"lllrq_gg_"),
|
|
22
23
|
/*__reshadow_css_end__*/
|
|
23
24
|
{
|
|
24
|
-
"__SBreadcrumbs": "
|
|
25
|
-
"__SListContainer": "
|
|
26
|
-
"__SSeparator": "
|
|
27
|
-
"__SListItem": "
|
|
28
|
-
"__SBreadcrumbsItem": "
|
|
29
|
-
"_active": "
|
|
25
|
+
"__SBreadcrumbs": "___SBreadcrumbs_lllrq_gg_",
|
|
26
|
+
"__SListContainer": "___SListContainer_lllrq_gg_",
|
|
27
|
+
"__SSeparator": "___SSeparator_lllrq_gg_",
|
|
28
|
+
"__SListItem": "___SListItem_lllrq_gg_",
|
|
29
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_lllrq_gg_",
|
|
30
|
+
"_active": "__active_lllrq_gg_"
|
|
30
31
|
});
|
|
31
32
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
32
33
|
function Breadcrumbs() {
|
|
@@ -50,7 +51,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
50
51
|
value: function render() {
|
|
51
52
|
var _ref = this.asProps,
|
|
52
53
|
_ref3;
|
|
53
|
-
var SBreadcrumbs =
|
|
54
|
+
var SBreadcrumbs = _baseComponents.Box;
|
|
54
55
|
var SListContainer = 'ol';
|
|
55
56
|
var _this$asProps2 = this.asProps,
|
|
56
57
|
styles = _this$asProps2.styles,
|
|
@@ -71,44 +72,36 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
i18n: _intergalacticDynamicLocales.localizedMessages,
|
|
72
73
|
locale: 'en'
|
|
73
74
|
});
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
"use:tag": active ? 'span' : tag
|
|
101
|
-
}, _ref2))))), /*#__PURE__*/_react["default"].createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
102
|
-
"aria-hidden": 'true'
|
|
103
|
-
}), separator));
|
|
104
|
-
}
|
|
105
|
-
}]);
|
|
106
|
-
}(_core.Component);
|
|
107
|
-
(0, _defineProperty2["default"])(Item, "defaultProps", {
|
|
75
|
+
function Item(props) {
|
|
76
|
+
var _ref2 = arguments[0],
|
|
77
|
+
_ref4;
|
|
78
|
+
var SBreadcrumbsItem = _typography.Text;
|
|
79
|
+
var styles = props.styles,
|
|
80
|
+
separator = props.separator,
|
|
81
|
+
active = props.active,
|
|
82
|
+
disabled = props.disabled,
|
|
83
|
+
href = props.href,
|
|
84
|
+
tabIndex = props.tabIndex,
|
|
85
|
+
tag = props.tag,
|
|
86
|
+
_props$ellipsis = props.ellipsis,
|
|
87
|
+
ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis;
|
|
88
|
+
var SSeparator = 'div';
|
|
89
|
+
var SListItem = 'li';
|
|
90
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SListItem, _ref4.cn("SListItem", {}), /*#__PURE__*/_react["default"].createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
91
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
92
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
93
|
+
"aria-current": active ? 'page' : undefined,
|
|
94
|
+
"use:tag": active ? 'span' : tag,
|
|
95
|
+
"ellipsis": ellipsis
|
|
96
|
+
}, _ref2))))), /*#__PURE__*/_react["default"].createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
97
|
+
"aria-hidden": 'true'
|
|
98
|
+
}), separator));
|
|
99
|
+
}
|
|
100
|
+
Item.defaultProps = {
|
|
108
101
|
tag: 'a',
|
|
109
102
|
locale: 'en',
|
|
110
103
|
tabIndex: 0
|
|
111
|
-
}
|
|
104
|
+
};
|
|
112
105
|
var _default = exports["default"] = (0, _core.createComponent)(Breadcrumbs, {
|
|
113
106
|
Item: Item
|
|
114
107
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["_core","require","_i18nEnhance","_interopRequireDefault","
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["_core","require","_baseComponents","_i18nEnhance","_interopRequireDefault","_m","_typography","_react","_intergalacticDynamicLocales","style","sstyled","insert","Breadcrumbs","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","Box","SListContainer","_this$asProps2","styles","getI18nText","Children","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","i18nEnhance","localizedMessages","tag","i18n","Item","props","_ref2","arguments[0]","_ref4","SBreadcrumbsItem","Text","active","disabled","href","tabIndex","_props$ellipsis","ellipsis","SSeparator","SListItem","Fragment","undefined","defaultProps","_default","exports","createComponent"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/breadcrumbs.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass Breadcrumbs extends Component {\n static displayName = 'Breadcrumbs';\n static style = style;\n static enhance = [i18nEnhance(localizedMessages)];\n static defaultProps = {\n separator: <SSeparator />,\n tag: 'nav',\n i18n: localizedMessages,\n locale: 'en',\n };\n\n getItemProps() {\n const { separator, locale } = this.asProps;\n return {\n separator,\n locale,\n };\n }\n\n render() {\n const SBreadcrumbs = Root;\n const SListContainer = 'ol';\n const { styles, getI18nText, Children } = this.asProps;\n return sstyled(styles)(\n <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')}>\n <SListContainer>\n <Children />\n </SListContainer>\n </SBreadcrumbs>,\n );\n }\n}\n\nfunction Item(props) {\n const SBreadcrumbsItem = Root;\n const { styles, separator, active, disabled, href, tabIndex, tag, ellipsis = true } = props;\n const SSeparator = 'div';\n const SListItem = 'li';\n\n return sstyled(styles)(\n <>\n <SListItem>\n <SBreadcrumbsItem\n render={Text}\n use:tabIndex={active || disabled ? -1 : tabIndex}\n use:href={!active && !disabled ? href : undefined}\n aria-current={active ? 'page' : undefined}\n use:tag={active ? 'span' : tag}\n ellipsis={ellipsis}\n />\n </SListItem>\n <SSeparator aria-hidden='true'>{separator}</SSeparator>\n </>,\n );\n}\nItem.defaultProps = {\n tag: 'a',\n locale: 'en',\n tabIndex: 0,\n};\n\nexport default createComponent(Breadcrumbs, {\n Item,\n});\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { EllipsisSettings, SimpleHintPopperProps, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\nexport type BreadcrumbsProps = BoxProps & {\n /**\n * Links divider\n * */\n separator?: React.ReactNode;\n /** Specifies the locale for i18n support */\n locale?: string;\n};\n\nexport type BreadcrumbsItemProps = BoxProps & {\n /** The property is responsible for the activity of the element */\n active?: boolean;\n /** Specifies the locale for i18n support */\n locale?: string;\n /**\n * Ellipsis settings. You shouldn't use `cropPosition: middle` for breadcrumbs.\n * If you're sure you need `cropPosition: middle`, set `w` to Breadcrumbs.Item manually, for correct Ellipsis calculations.\n * @default false\n */\n} & NSText.HintProps & NSText.EllipsisProps;\n\nexport type BreadcrumbsContext = BreadcrumbsProps & {\n getItemProps: PropGetterFn;\n};\n\ndeclare const Breadcrumbs: Intergalactic.Component<'div', BreadcrumbsProps, BreadcrumbsContext> & {\n Item: Intergalactic.Component<'a', BreadcrumbsItemProps>;\n};\n\nexport default Breadcrumbs;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -7,13 +7,10 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
10
|
|
|
14
11
|
SSeparator {
|
|
15
12
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
16
|
-
color: var(--intergalactic-icon-secondary-neutral,
|
|
13
|
+
color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
|
|
17
14
|
display: flex;
|
|
18
15
|
|
|
19
16
|
&:last-child {
|
|
@@ -34,21 +31,18 @@ SBreadcrumbs {
|
|
|
34
31
|
position: relative;
|
|
35
32
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
36
33
|
line-height: var(--intergalactic-lh-200, 142%);
|
|
37
|
-
color: var(--intergalactic-text-secondary,
|
|
34
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
38
35
|
text-decoration: none;
|
|
39
36
|
cursor: pointer;
|
|
40
|
-
text-overflow: ellipsis;
|
|
41
|
-
white-space: nowrap;
|
|
42
|
-
overflow: hidden;
|
|
43
37
|
|
|
44
38
|
&:hover {
|
|
45
39
|
text-decoration: underline;
|
|
46
|
-
color: var(--intergalactic-text-primary,
|
|
40
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
|
|
50
44
|
SBreadcrumbsItem[active] {
|
|
51
|
-
color: var(--intergalactic-text-primary,
|
|
45
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
52
46
|
cursor: default;
|
|
53
47
|
&:hover {
|
|
54
48
|
text-decoration: none;
|
package/lib/es6/Breadcrumbs.js
CHANGED
|
@@ -7,21 +7,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
7
7
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
8
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
10
|
+
import { Box } from '@semcore/base-components';
|
|
10
11
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
11
12
|
import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
|
|
12
|
-
import { Box } from '@semcore/flex-box';
|
|
13
13
|
import SSeparator from '@semcore/icon/ChevronRight/m';
|
|
14
|
+
import { Text } from '@semcore/typography';
|
|
14
15
|
import React from 'react';
|
|
15
16
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
16
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBreadcrumbs_lllrq_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_{display:contents;list-style:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));display:flex}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_:last-child{display:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{width:100%;display:block;position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));-webkit-text-decoration:none;text-decoration:none;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"lllrq_gg_"),
|
|
17
18
|
/*__reshadow_css_end__*/
|
|
18
19
|
{
|
|
19
|
-
"__SBreadcrumbs": "
|
|
20
|
-
"__SListContainer": "
|
|
21
|
-
"__SSeparator": "
|
|
22
|
-
"__SListItem": "
|
|
23
|
-
"__SBreadcrumbsItem": "
|
|
24
|
-
"_active": "
|
|
20
|
+
"__SBreadcrumbs": "___SBreadcrumbs_lllrq_gg_",
|
|
21
|
+
"__SListContainer": "___SListContainer_lllrq_gg_",
|
|
22
|
+
"__SSeparator": "___SSeparator_lllrq_gg_",
|
|
23
|
+
"__SListItem": "___SListItem_lllrq_gg_",
|
|
24
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_lllrq_gg_",
|
|
25
|
+
"_active": "__active_lllrq_gg_"
|
|
25
26
|
});
|
|
26
27
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
27
28
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
@@ -67,44 +68,36 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
67
68
|
i18n: localizedMessages,
|
|
68
69
|
locale: 'en'
|
|
69
70
|
});
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"use:tag": active ? 'span' : tag
|
|
97
|
-
}, _ref2))))), /*#__PURE__*/React.createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
98
|
-
"aria-hidden": 'true'
|
|
99
|
-
}), separator));
|
|
100
|
-
}
|
|
101
|
-
}]);
|
|
102
|
-
}(Component);
|
|
103
|
-
_defineProperty(Item, "defaultProps", {
|
|
71
|
+
function Item(props) {
|
|
72
|
+
var _ref2 = arguments[0],
|
|
73
|
+
_ref4;
|
|
74
|
+
var SBreadcrumbsItem = Text;
|
|
75
|
+
var styles = props.styles,
|
|
76
|
+
separator = props.separator,
|
|
77
|
+
active = props.active,
|
|
78
|
+
disabled = props.disabled,
|
|
79
|
+
href = props.href,
|
|
80
|
+
tabIndex = props.tabIndex,
|
|
81
|
+
tag = props.tag,
|
|
82
|
+
_props$ellipsis = props.ellipsis,
|
|
83
|
+
ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis;
|
|
84
|
+
var SSeparator = 'div';
|
|
85
|
+
var SListItem = 'li';
|
|
86
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SListItem, _ref4.cn("SListItem", {}), /*#__PURE__*/React.createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", _objectSpread({}, _assignProps2({
|
|
87
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
88
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
89
|
+
"aria-current": active ? 'page' : undefined,
|
|
90
|
+
"use:tag": active ? 'span' : tag,
|
|
91
|
+
"ellipsis": ellipsis
|
|
92
|
+
}, _ref2))))), /*#__PURE__*/React.createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
93
|
+
"aria-hidden": 'true'
|
|
94
|
+
}), separator));
|
|
95
|
+
}
|
|
96
|
+
Item.defaultProps = {
|
|
104
97
|
tag: 'a',
|
|
105
98
|
locale: 'en',
|
|
106
99
|
tabIndex: 0
|
|
107
|
-
}
|
|
100
|
+
};
|
|
108
101
|
export default createComponent(Breadcrumbs, {
|
|
109
102
|
Item: Item
|
|
110
103
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["createComponent","Component","sstyled","Root","i18nEnhance","
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["Box","createComponent","Component","sstyled","Root","i18nEnhance","SSeparator","Text","React","style","_sstyled","insert","localizedMessages","Breadcrumbs","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","getItemProps","_this$asProps","asProps","separator","locale","render","_ref","_ref3","SBreadcrumbs","SListContainer","_this$asProps2","styles","getI18nText","Children","createElement","cn","_objectSpread","_assignProps","_defineProperty","tag","i18n","Item","props","_ref2","arguments[0]","_ref4","SBreadcrumbsItem","active","disabled","href","tabIndex","_props$ellipsis","ellipsis","SListItem","Fragment","_assignProps2","undefined","defaultProps"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/breadcrumbs.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nclass Breadcrumbs extends Component {\n static displayName = 'Breadcrumbs';\n static style = style;\n static enhance = [i18nEnhance(localizedMessages)];\n static defaultProps = {\n separator: <SSeparator />,\n tag: 'nav',\n i18n: localizedMessages,\n locale: 'en',\n };\n\n getItemProps() {\n const { separator, locale } = this.asProps;\n return {\n separator,\n locale,\n };\n }\n\n render() {\n const SBreadcrumbs = Root;\n const SListContainer = 'ol';\n const { styles, getI18nText, Children } = this.asProps;\n return sstyled(styles)(\n <SBreadcrumbs render={Box} aria-label={getI18nText('breadcrumbs')}>\n <SListContainer>\n <Children />\n </SListContainer>\n </SBreadcrumbs>,\n );\n }\n}\n\nfunction Item(props) {\n const SBreadcrumbsItem = Root;\n const { styles, separator, active, disabled, href, tabIndex, tag, ellipsis = true } = props;\n const SSeparator = 'div';\n const SListItem = 'li';\n\n return sstyled(styles)(\n <>\n <SListItem>\n <SBreadcrumbsItem\n render={Text}\n use:tabIndex={active || disabled ? -1 : tabIndex}\n use:href={!active && !disabled ? href : undefined}\n aria-current={active ? 'page' : undefined}\n use:tag={active ? 'span' : tag}\n ellipsis={ellipsis}\n />\n </SListItem>\n <SSeparator aria-hidden='true'>{separator}</SSeparator>\n </>,\n );\n}\nItem.defaultProps = {\n tag: 'a',\n locale: 'en',\n tabIndex: 0,\n};\n\nexport default createComponent(Breadcrumbs, {\n Item,\n});\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { EllipsisSettings, SimpleHintPopperProps, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\nexport type BreadcrumbsProps = BoxProps & {\n /**\n * Links divider\n * */\n separator?: React.ReactNode;\n /** Specifies the locale for i18n support */\n locale?: string;\n};\n\nexport type BreadcrumbsItemProps = BoxProps & {\n /** The property is responsible for the activity of the element */\n active?: boolean;\n /** Specifies the locale for i18n support */\n locale?: string;\n /**\n * Ellipsis settings. You shouldn't use `cropPosition: middle` for breadcrumbs.\n * If you're sure you need `cropPosition: middle`, set `w` to Breadcrumbs.Item manually, for correct Ellipsis calculations.\n * @default false\n */\n} & NSText.HintProps & NSText.EllipsisProps;\n\nexport type BreadcrumbsContext = BreadcrumbsProps & {\n getItemProps: PropGetterFn;\n};\n\ndeclare const Breadcrumbs: Intergalactic.Component<'div', BreadcrumbsProps, BreadcrumbsContext> & {\n Item: Intergalactic.Component<'a', BreadcrumbsItemProps>;\n};\n\nexport default Breadcrumbs;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -7,13 +7,10 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
10
|
|
|
14
11
|
SSeparator {
|
|
15
12
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
16
|
-
color: var(--intergalactic-icon-secondary-neutral,
|
|
13
|
+
color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
|
|
17
14
|
display: flex;
|
|
18
15
|
|
|
19
16
|
&:last-child {
|
|
@@ -34,21 +31,18 @@ SBreadcrumbs {
|
|
|
34
31
|
position: relative;
|
|
35
32
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
36
33
|
line-height: var(--intergalactic-lh-200, 142%);
|
|
37
|
-
color: var(--intergalactic-text-secondary,
|
|
34
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
38
35
|
text-decoration: none;
|
|
39
36
|
cursor: pointer;
|
|
40
|
-
text-overflow: ellipsis;
|
|
41
|
-
white-space: nowrap;
|
|
42
|
-
overflow: hidden;
|
|
43
37
|
|
|
44
38
|
&:hover {
|
|
45
39
|
text-decoration: underline;
|
|
46
|
-
color: var(--intergalactic-text-primary,
|
|
40
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
|
|
50
44
|
SBreadcrumbsItem[active] {
|
|
51
|
-
color: var(--intergalactic-text-primary,
|
|
45
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
52
46
|
cursor: default;
|
|
53
47
|
&:hover {
|
|
54
48
|
text-decoration: none;
|
package/lib/esm/Breadcrumbs.mjs
CHANGED
|
@@ -4,10 +4,11 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
|
4
4
|
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import {
|
|
7
|
+
import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
|
|
8
|
+
import { Box } from "@semcore/base-components";
|
|
8
9
|
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
9
|
-
import { Box } from "@semcore/flex-box";
|
|
10
10
|
import SSeparator from "@semcore/icon/ChevronRight/m";
|
|
11
|
+
import { Text } from "@semcore/typography";
|
|
11
12
|
import React from "react";
|
|
12
13
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
13
14
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
@@ -15,17 +16,17 @@ var style = (
|
|
|
15
16
|
/*__reshadow_css_start__*/
|
|
16
17
|
(sstyled.insert(
|
|
17
18
|
/*__inner_css_start__*/
|
|
18
|
-
".
|
|
19
|
+
".___SBreadcrumbs_lllrq_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_{display:contents;list-style:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{margin:0 var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));display:flex}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SSeparator_lllrq_gg_:last-child{display:none}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{width:100%;display:block;position:relative;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));-webkit-text-decoration:none;text-decoration:none;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_lllrq_gg_ .___SListContainer_lllrq_gg_ .___SListItem_lllrq_gg_ .___SBreadcrumbsItem_lllrq_gg_.__active_lllrq_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}",
|
|
19
20
|
/*__inner_css_end__*/
|
|
20
|
-
"
|
|
21
|
+
"lllrq_gg_"
|
|
21
22
|
), /*__reshadow_css_end__*/
|
|
22
23
|
{
|
|
23
|
-
"__SBreadcrumbs": "
|
|
24
|
-
"__SListContainer": "
|
|
25
|
-
"__SSeparator": "
|
|
26
|
-
"__SListItem": "
|
|
27
|
-
"__SBreadcrumbsItem": "
|
|
28
|
-
"_active": "
|
|
24
|
+
"__SBreadcrumbs": "___SBreadcrumbs_lllrq_gg_",
|
|
25
|
+
"__SListContainer": "___SListContainer_lllrq_gg_",
|
|
26
|
+
"__SSeparator": "___SSeparator_lllrq_gg_",
|
|
27
|
+
"__SListItem": "___SListItem_lllrq_gg_",
|
|
28
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_lllrq_gg_",
|
|
29
|
+
"_active": "__active_lllrq_gg_"
|
|
29
30
|
})
|
|
30
31
|
);
|
|
31
32
|
var Breadcrumbs = /* @__PURE__ */ (function(_Component) {
|
|
@@ -65,39 +66,30 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
65
66
|
i18n: localizedMessages,
|
|
66
67
|
locale: "en"
|
|
67
68
|
});
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
"aria-current": active ? "page" : void 0,
|
|
86
|
-
"use:tag": active ? "span" : tag
|
|
87
|
-
}, _ref2))))), /* @__PURE__ */ React.createElement(SSeparator2, _ref4.cn("SSeparator", {
|
|
88
|
-
"aria-hidden": "true"
|
|
89
|
-
}), separator));
|
|
90
|
-
}
|
|
91
|
-
}]);
|
|
92
|
-
})(Component);
|
|
93
|
-
_defineProperty(Item, "defaultProps", {
|
|
69
|
+
function Item(props) {
|
|
70
|
+
var _ref2 = arguments[0], _ref4;
|
|
71
|
+
var SBreadcrumbsItem = Text;
|
|
72
|
+
var styles = props.styles, separator = props.separator, active = props.active, disabled = props.disabled, href = props.href, tabIndex = props.tabIndex, tag = props.tag, _props$ellipsis = props.ellipsis, ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis;
|
|
73
|
+
var SSeparator2 = "div";
|
|
74
|
+
var SListItem = "li";
|
|
75
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SListItem, _ref4.cn("SListItem", {}), /* @__PURE__ */ React.createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", _objectSpread({}, assignProps({
|
|
76
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
77
|
+
"use:href": !active && !disabled ? href : void 0,
|
|
78
|
+
"aria-current": active ? "page" : void 0,
|
|
79
|
+
"use:tag": active ? "span" : tag,
|
|
80
|
+
"ellipsis": ellipsis
|
|
81
|
+
}, _ref2))))), /* @__PURE__ */ React.createElement(SSeparator2, _ref4.cn("SSeparator", {
|
|
82
|
+
"aria-hidden": "true"
|
|
83
|
+
}), separator));
|
|
84
|
+
}
|
|
85
|
+
Item.defaultProps = {
|
|
94
86
|
tag: "a",
|
|
95
87
|
locale: "en",
|
|
96
88
|
tabIndex: 0
|
|
97
|
-
}
|
|
98
|
-
const
|
|
89
|
+
};
|
|
90
|
+
const Breadcrumbs_default = createComponent(Breadcrumbs, {
|
|
99
91
|
Item
|
|
100
92
|
});
|
|
101
93
|
export {
|
|
102
|
-
|
|
94
|
+
Breadcrumbs_default as default
|
|
103
95
|
};
|
|
@@ -7,13 +7,10 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
10
|
|
|
14
11
|
SSeparator {
|
|
15
12
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
16
|
-
color: var(--intergalactic-icon-secondary-neutral,
|
|
13
|
+
color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
|
|
17
14
|
display: flex;
|
|
18
15
|
|
|
19
16
|
&:last-child {
|
|
@@ -34,21 +31,18 @@ SBreadcrumbs {
|
|
|
34
31
|
position: relative;
|
|
35
32
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
36
33
|
line-height: var(--intergalactic-lh-200, 142%);
|
|
37
|
-
color: var(--intergalactic-text-secondary,
|
|
34
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
38
35
|
text-decoration: none;
|
|
39
36
|
cursor: pointer;
|
|
40
|
-
text-overflow: ellipsis;
|
|
41
|
-
white-space: nowrap;
|
|
42
|
-
overflow: hidden;
|
|
43
37
|
|
|
44
38
|
&:hover {
|
|
45
39
|
text-decoration: underline;
|
|
46
|
-
color: var(--intergalactic-text-primary,
|
|
40
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
|
|
50
44
|
SBreadcrumbsItem[active] {
|
|
51
|
-
color: var(--intergalactic-text-primary,
|
|
45
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
52
46
|
cursor: default;
|
|
53
47
|
&:hover {
|
|
54
48
|
text-decoration: none;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { EllipsisSettings, SimpleHintPopperProps, BoxProps } from '@semcore/base-components';
|
|
2
|
+
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
|
+
import type { NSText } from '@semcore/typography';
|
|
3
4
|
|
|
4
|
-
/** @deprecated */
|
|
5
|
-
export interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}
|
|
6
5
|
export type BreadcrumbsProps = BoxProps & {
|
|
7
6
|
/**
|
|
8
7
|
* Links divider
|
|
@@ -12,17 +11,18 @@ export type BreadcrumbsProps = BoxProps & {
|
|
|
12
11
|
locale?: string;
|
|
13
12
|
};
|
|
14
13
|
|
|
15
|
-
/** @deprecated */
|
|
16
|
-
export interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}
|
|
17
14
|
export type BreadcrumbsItemProps = BoxProps & {
|
|
18
15
|
/** The property is responsible for the activity of the element */
|
|
19
16
|
active?: boolean;
|
|
20
17
|
/** Specifies the locale for i18n support */
|
|
21
18
|
locale?: string;
|
|
22
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Ellipsis settings. You shouldn't use `cropPosition: middle` for breadcrumbs.
|
|
21
|
+
* If you're sure you need `cropPosition: middle`, set `w` to Breadcrumbs.Item manually, for correct Ellipsis calculations.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
} & NSText.HintProps & NSText.EllipsisProps;
|
|
23
25
|
|
|
24
|
-
/** @deprecated */
|
|
25
|
-
export interface IBreadcrumbsContext extends BreadcrumbsContext, UnknownProperties {}
|
|
26
26
|
export type BreadcrumbsContext = BreadcrumbsProps & {
|
|
27
27
|
getItemProps: PropGetterFn;
|
|
28
28
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/breadcrumbs",
|
|
3
3
|
"description": "Semrush Breadcrumbs Component",
|
|
4
|
-
"version": "16.6.0
|
|
4
|
+
"version": "16.6.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/icon": "16.
|
|
18
|
-
"@semcore/flex-box": "16.0
|
|
17
|
+
"@semcore/icon": "16.8.0",
|
|
18
|
+
"@semcore/flex-box": "16.1.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/base-components": "^16.
|
|
21
|
+
"@semcore/base-components": "^16.6.0"
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@semcore/testing-utils": "1.0.0",
|
|
30
|
-
"@semcore/core": "16.
|
|
30
|
+
"@semcore/core": "16.6.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|