@semcore/breadcrumbs 5.50.0-prerelease.0 → 5.50.0-prerelease.1
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/lib/cjs/Breadcrumbs.js +64 -48
- package/lib/cjs/Breadcrumbs.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/breadcrumbs.shadow.css +14 -3
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +5 -4
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/Breadcrumbs.js +60 -47
- package/lib/es6/Breadcrumbs.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/breadcrumbs.shadow.css +14 -3
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/Breadcrumbs.mjs +57 -42
- package/lib/esm/style/breadcrumbs.shadow.css +14 -3
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/index.d.ts +15 -15
- package/package.json +5 -5
package/lib/cjs/Breadcrumbs.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
@@ -8,34 +9,37 @@ exports["default"] = void 0;
|
|
|
8
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
13
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
|
|
17
|
-
var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
|
|
18
|
-
var _typography = require("@semcore/typography");
|
|
15
|
+
var _index = require("@semcore/utils/lib/core/index");
|
|
16
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
19
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
var _flexBox = require("@semcore/flex-box");
|
|
19
|
+
var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
|
|
20
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
20
21
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
22
|
+
var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
|
|
21
23
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
22
|
-
var style = (/*__reshadow_css_start__*/
|
|
24
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_ngkei_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_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_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_:last-child{display:none}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_{overflow:hidden;padding:3px;margin:-3px}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (color:color(display-p3 0 0 0)){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__keyboardFocused_ngkei_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"ngkei_gg_"),
|
|
23
25
|
/*__reshadow_css_end__*/
|
|
24
26
|
{
|
|
25
|
-
"__SBreadcrumbs": "
|
|
26
|
-
"__SListContainer": "
|
|
27
|
-
"__SSeparator": "
|
|
28
|
-
"__SListItem": "
|
|
29
|
-
"__SBreadcrumbsItem": "
|
|
30
|
-
"
|
|
27
|
+
"__SBreadcrumbs": "___SBreadcrumbs_ngkei_gg_",
|
|
28
|
+
"__SListContainer": "___SListContainer_ngkei_gg_",
|
|
29
|
+
"__SSeparator": "___SSeparator_ngkei_gg_",
|
|
30
|
+
"__SListItem": "___SListItem_ngkei_gg_",
|
|
31
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_ngkei_gg_",
|
|
32
|
+
"_keyboardFocused": "__keyboardFocused_ngkei_gg_",
|
|
33
|
+
"_active": "__active_ngkei_gg_"
|
|
31
34
|
});
|
|
32
35
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
36
|
+
(0, _inherits2["default"])(Breadcrumbs, _Component);
|
|
37
|
+
var _super = (0, _createSuper2["default"])(Breadcrumbs);
|
|
33
38
|
function Breadcrumbs() {
|
|
34
39
|
(0, _classCallCheck2["default"])(this, Breadcrumbs);
|
|
35
|
-
return (
|
|
40
|
+
return _super.apply(this, arguments);
|
|
36
41
|
}
|
|
37
|
-
(0,
|
|
38
|
-
return (0, _createClass2["default"])(Breadcrumbs, [{
|
|
42
|
+
(0, _createClass2["default"])(Breadcrumbs, [{
|
|
39
43
|
key: "getItemProps",
|
|
40
44
|
value: function getItemProps() {
|
|
41
45
|
var _this$asProps = this.asProps,
|
|
@@ -51,7 +55,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
51
55
|
value: function render() {
|
|
52
56
|
var _ref = this.asProps,
|
|
53
57
|
_ref3;
|
|
54
|
-
var SBreadcrumbs =
|
|
58
|
+
var SBreadcrumbs = _flexBox.Box;
|
|
55
59
|
var SListContainer = 'ol';
|
|
56
60
|
var _this$asProps2 = this.asProps,
|
|
57
61
|
styles = _this$asProps2.styles,
|
|
@@ -62,6 +66,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
62
66
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(SListContainer, _ref3.cn("SListContainer", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))));
|
|
63
67
|
}
|
|
64
68
|
}]);
|
|
69
|
+
return Breadcrumbs;
|
|
65
70
|
}(_core.Component);
|
|
66
71
|
(0, _defineProperty2["default"])(Breadcrumbs, "displayName", 'Breadcrumbs');
|
|
67
72
|
(0, _defineProperty2["default"])(Breadcrumbs, "style", style);
|
|
@@ -72,37 +77,48 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
72
77
|
i18n: _intergalacticDynamicLocales.localizedMessages,
|
|
73
78
|
locale: 'en'
|
|
74
79
|
});
|
|
75
|
-
function
|
|
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
|
-
|
|
80
|
+
var Item = /*#__PURE__*/function (_Component2) {
|
|
81
|
+
(0, _inherits2["default"])(Item, _Component2);
|
|
82
|
+
var _super2 = (0, _createSuper2["default"])(Item);
|
|
83
|
+
function Item() {
|
|
84
|
+
(0, _classCallCheck2["default"])(this, Item);
|
|
85
|
+
return _super2.apply(this, arguments);
|
|
86
|
+
}
|
|
87
|
+
(0, _createClass2["default"])(Item, [{
|
|
88
|
+
key: "render",
|
|
89
|
+
value: function render() {
|
|
90
|
+
var _ref2 = this.asProps,
|
|
91
|
+
_ref4;
|
|
92
|
+
var SBreadcrumbsItem = _flexBox.Box;
|
|
93
|
+
var _this$asProps3 = this.asProps,
|
|
94
|
+
styles = _this$asProps3.styles,
|
|
95
|
+
separator = _this$asProps3.separator,
|
|
96
|
+
active = _this$asProps3.active,
|
|
97
|
+
disabled = _this$asProps3.disabled,
|
|
98
|
+
href = _this$asProps3.href,
|
|
99
|
+
tabIndex = _this$asProps3.tabIndex,
|
|
100
|
+
tag = _this$asProps3.tag;
|
|
101
|
+
var SSeparator = 'div';
|
|
102
|
+
var SListItem = 'li';
|
|
103
|
+
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)({
|
|
104
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
105
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
106
|
+
"aria-current": active ? 'page' : undefined,
|
|
107
|
+
"use:tag": active ? 'span' : tag
|
|
108
|
+
}, _ref2))))), /*#__PURE__*/_react["default"].createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
109
|
+
"aria-hidden": 'true'
|
|
110
|
+
}), separator));
|
|
111
|
+
}
|
|
112
|
+
}]);
|
|
113
|
+
return Item;
|
|
114
|
+
}(_core.Component);
|
|
115
|
+
(0, _defineProperty2["default"])(Item, "defaultProps", {
|
|
101
116
|
tag: 'a',
|
|
102
|
-
locale: 'en'
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var _default =
|
|
117
|
+
locale: 'en'
|
|
118
|
+
});
|
|
119
|
+
(0, _defineProperty2["default"])(Item, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
|
|
120
|
+
var _default = (0, _core["default"])(Breadcrumbs, {
|
|
106
121
|
Item: Item
|
|
107
122
|
});
|
|
123
|
+
exports["default"] = _default;
|
|
108
124
|
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_m","_keyboardFocusEnhance","_intergalacticDynamicLocales","_i18nEnhance","style","_index","sstyled","insert","Breadcrumbs","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_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","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","tabIndex","SSeparator","SListItem","Fragment","undefined","keyboardFocusEnhance","_default","createComponent","exports"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\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\nclass Item extends Component {\n static defaultProps = {\n tag: 'a',\n locale: 'en',\n };\n\n static enhance = [keyboardFocusEnhance()];\n\n render() {\n const SBreadcrumbsItem = Root;\n const { styles, separator, active, disabled, href, tabIndex, tag } = this.asProps;\n const SSeparator = 'div';\n const SListItem = 'li';\n\n return sstyled(styles)(\n <>\n <SListItem>\n <SBreadcrumbsItem\n render={Box}\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 />\n </SListItem>\n <SSeparator aria-hidden='true'>{separator}</SSeparator>\n </>,\n );\n }\n}\n\nexport default createComponent(Breadcrumbs, {\n Item,\n});\n"],"mappings":"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"}
|
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
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}\nexport type BreadcrumbsProps = BoxProps & {\n /**\n * Links divider\n * */\n separator?: React.ReactNode;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}\nexport type BreadcrumbsItemProps = BoxProps &\n KeyboardFocusProps & {\n /** The property is responsible for the activity of the element */\n active?: boolean;\n locale?: string;\n };\n\n/** @deprecated */\nexport interface IBreadcrumbsContext extends BreadcrumbsContext, UnknownProperties {}\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":""}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Breadcrumbs","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Breadcrumbs';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Breadcrumbs","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Breadcrumbs';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA"}
|
|
@@ -7,6 +7,9 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
10
13
|
|
|
11
14
|
SSeparator {
|
|
12
15
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
@@ -21,9 +24,9 @@ SBreadcrumbs {
|
|
|
21
24
|
SListItem {
|
|
22
25
|
overflow: hidden;
|
|
23
26
|
|
|
24
|
-
/* we need this hack to show
|
|
25
|
-
padding:
|
|
26
|
-
margin: -
|
|
27
|
+
/* we need this hack to show box-shadow over `overflow: hidden` element */
|
|
28
|
+
padding: 3px;
|
|
29
|
+
margin: -3px;
|
|
27
30
|
|
|
28
31
|
SBreadcrumbsItem {
|
|
29
32
|
width: 100%;
|
|
@@ -34,6 +37,9 @@ SBreadcrumbs {
|
|
|
34
37
|
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
35
38
|
text-decoration: none;
|
|
36
39
|
cursor: pointer;
|
|
40
|
+
text-overflow: ellipsis;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
overflow: hidden;
|
|
37
43
|
|
|
38
44
|
&:hover {
|
|
39
45
|
text-decoration: underline;
|
|
@@ -41,6 +47,11 @@ SBreadcrumbs {
|
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
|
|
50
|
+
SBreadcrumbsItem[keyboardFocused] {
|
|
51
|
+
outline: none;
|
|
52
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
|
|
53
|
+
}
|
|
54
|
+
|
|
44
55
|
SBreadcrumbsItem[active] {
|
|
45
56
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
46
57
|
cursor: default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -13,13 +13,13 @@ var _it = _interopRequireDefault(require("./it.json"));
|
|
|
13
13
|
var _ja = _interopRequireDefault(require("./ja.json"));
|
|
14
14
|
var _ko = _interopRequireDefault(require("./ko.json"));
|
|
15
15
|
var _nl = _interopRequireDefault(require("./nl.json"));
|
|
16
|
-
var _pl = _interopRequireDefault(require("./pl.json"));
|
|
17
16
|
var _pt = _interopRequireDefault(require("./pt.json"));
|
|
18
|
-
var _sv = _interopRequireDefault(require("./sv.json"));
|
|
19
17
|
var _tr = _interopRequireDefault(require("./tr.json"));
|
|
20
18
|
var _vi = _interopRequireDefault(require("./vi.json"));
|
|
21
19
|
var _zh = _interopRequireDefault(require("./zh.json"));
|
|
22
|
-
var
|
|
20
|
+
var _pl = _interopRequireDefault(require("./pl.json"));
|
|
21
|
+
var _sv = _interopRequireDefault(require("./sv.json"));
|
|
22
|
+
var localizedMessages = {
|
|
23
23
|
de: _de["default"],
|
|
24
24
|
en: _en["default"],
|
|
25
25
|
es: _es["default"],
|
|
@@ -35,4 +35,5 @@ var localizedMessages = exports.localizedMessages = {
|
|
|
35
35
|
pl: _pl["default"],
|
|
36
36
|
sv: _sv["default"]
|
|
37
37
|
};
|
|
38
|
+
exports.localizedMessages = localizedMessages;
|
|
38
39
|
//# sourceMappingURL=__intergalactic-dynamic-locales.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["_de","_interopRequireDefault","require","_en","_es","_fr","_it","_ja","_ko","_nl","
|
|
1
|
+
{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["_de","_interopRequireDefault","require","_en","_es","_fr","_it","_ja","_ko","_nl","_pt","_tr","_vi","_zh","_pl","_sv","localizedMessages","de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","exports"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n nl,\n pt,\n tr,\n vi,\n zh,\n pl,\n sv,\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,GAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,GAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,GAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,GAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,GAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,GAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,GAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,GAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,GAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,GAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,GAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,GAAA,GAAAd,sBAAA,CAAAC,OAAA;AAEO,IAAMc,iBAAiB,GAAG;EAC/BC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA;AACF,CAAC;AAACC,OAAA,CAAAf,iBAAA,GAAAA,iBAAA"}
|
package/lib/es6/Breadcrumbs.js
CHANGED
|
@@ -1,37 +1,39 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
-
import { sstyled as _sstyled } from "@semcore/core";
|
|
7
|
+
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
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';
|
|
11
|
-
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
12
|
-
import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
|
|
13
|
-
import SSeparator from '@semcore/icon/ChevronRight/m';
|
|
14
|
-
import { Text } from '@semcore/typography';
|
|
15
10
|
import React from 'react';
|
|
11
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
12
|
+
import { Box } from '@semcore/flex-box';
|
|
13
|
+
import SSeparator from '@semcore/icon/ChevronRight/m';
|
|
14
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
15
|
+
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
16
|
+
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
16
17
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
17
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
18
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SBreadcrumbs_ngkei_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_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_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_:last-child{display:none}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_{overflow:hidden;padding:3px;margin:-3px}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (color:color(display-p3 0 0 0)){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__keyboardFocused_ngkei_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"ngkei_gg_"),
|
|
18
19
|
/*__reshadow_css_end__*/
|
|
19
20
|
{
|
|
20
|
-
"__SBreadcrumbs": "
|
|
21
|
-
"__SListContainer": "
|
|
22
|
-
"__SSeparator": "
|
|
23
|
-
"__SListItem": "
|
|
24
|
-
"__SBreadcrumbsItem": "
|
|
25
|
-
"
|
|
21
|
+
"__SBreadcrumbs": "___SBreadcrumbs_ngkei_gg_",
|
|
22
|
+
"__SListContainer": "___SListContainer_ngkei_gg_",
|
|
23
|
+
"__SSeparator": "___SSeparator_ngkei_gg_",
|
|
24
|
+
"__SListItem": "___SListItem_ngkei_gg_",
|
|
25
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_ngkei_gg_",
|
|
26
|
+
"_keyboardFocused": "__keyboardFocused_ngkei_gg_",
|
|
27
|
+
"_active": "__active_ngkei_gg_"
|
|
26
28
|
});
|
|
27
|
-
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
28
29
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
30
|
+
_inherits(Breadcrumbs, _Component);
|
|
31
|
+
var _super = _createSuper(Breadcrumbs);
|
|
29
32
|
function Breadcrumbs() {
|
|
30
33
|
_classCallCheck(this, Breadcrumbs);
|
|
31
|
-
return
|
|
34
|
+
return _super.apply(this, arguments);
|
|
32
35
|
}
|
|
33
|
-
|
|
34
|
-
return _createClass(Breadcrumbs, [{
|
|
36
|
+
_createClass(Breadcrumbs, [{
|
|
35
37
|
key: "getItemProps",
|
|
36
38
|
value: function getItemProps() {
|
|
37
39
|
var _this$asProps = this.asProps,
|
|
@@ -58,6 +60,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
58
60
|
}, _ref))), /*#__PURE__*/React.createElement(SListContainer, _ref3.cn("SListContainer", {}), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))));
|
|
59
61
|
}
|
|
60
62
|
}]);
|
|
63
|
+
return Breadcrumbs;
|
|
61
64
|
}(Component);
|
|
62
65
|
_defineProperty(Breadcrumbs, "displayName", 'Breadcrumbs');
|
|
63
66
|
_defineProperty(Breadcrumbs, "style", style);
|
|
@@ -68,36 +71,46 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
68
71
|
i18n: localizedMessages,
|
|
69
72
|
locale: 'en'
|
|
70
73
|
});
|
|
71
|
-
function
|
|
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
|
-
|
|
74
|
+
var Item = /*#__PURE__*/function (_Component2) {
|
|
75
|
+
_inherits(Item, _Component2);
|
|
76
|
+
var _super2 = _createSuper(Item);
|
|
77
|
+
function Item() {
|
|
78
|
+
_classCallCheck(this, Item);
|
|
79
|
+
return _super2.apply(this, arguments);
|
|
80
|
+
}
|
|
81
|
+
_createClass(Item, [{
|
|
82
|
+
key: "render",
|
|
83
|
+
value: function render() {
|
|
84
|
+
var _ref2 = this.asProps,
|
|
85
|
+
_ref4;
|
|
86
|
+
var SBreadcrumbsItem = Box;
|
|
87
|
+
var _this$asProps3 = this.asProps,
|
|
88
|
+
styles = _this$asProps3.styles,
|
|
89
|
+
separator = _this$asProps3.separator,
|
|
90
|
+
active = _this$asProps3.active,
|
|
91
|
+
disabled = _this$asProps3.disabled,
|
|
92
|
+
href = _this$asProps3.href,
|
|
93
|
+
tabIndex = _this$asProps3.tabIndex,
|
|
94
|
+
tag = _this$asProps3.tag;
|
|
95
|
+
var SSeparator = 'div';
|
|
96
|
+
var SListItem = 'li';
|
|
97
|
+
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({
|
|
98
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
99
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
100
|
+
"aria-current": active ? 'page' : undefined,
|
|
101
|
+
"use:tag": active ? 'span' : tag
|
|
102
|
+
}, _ref2))))), /*#__PURE__*/React.createElement(SSeparator, _ref4.cn("SSeparator", {
|
|
103
|
+
"aria-hidden": 'true'
|
|
104
|
+
}), separator));
|
|
105
|
+
}
|
|
106
|
+
}]);
|
|
107
|
+
return Item;
|
|
108
|
+
}(Component);
|
|
109
|
+
_defineProperty(Item, "defaultProps", {
|
|
97
110
|
tag: 'a',
|
|
98
|
-
locale: 'en'
|
|
99
|
-
|
|
100
|
-
|
|
111
|
+
locale: 'en'
|
|
112
|
+
});
|
|
113
|
+
_defineProperty(Item, "enhance", [keyboardFocusEnhance()]);
|
|
101
114
|
export default createComponent(Breadcrumbs, {
|
|
102
115
|
Item: Item
|
|
103
116
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["React","createComponent","Component","sstyled","Root","Box","SSeparator","keyboardFocusEnhance","localizedMessages","i18nEnhance","style","_sstyled","insert","Breadcrumbs","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_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","_Component2","_super2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","tabIndex","SListItem","Fragment","_assignProps2","undefined"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/breadcrumbs.shadow.css';\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\nclass Item extends Component {\n static defaultProps = {\n tag: 'a',\n locale: 'en',\n };\n\n static enhance = [keyboardFocusEnhance()];\n\n render() {\n const SBreadcrumbsItem = Root;\n const { styles, separator, active, disabled, href, tabIndex, tag } = this.asProps;\n const SSeparator = 'div';\n const SListItem = 'li';\n\n return sstyled(styles)(\n <>\n <SListItem>\n <SBreadcrumbsItem\n render={Box}\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 />\n </SListItem>\n <SSeparator aria-hidden='true'>{separator}</SSeparator>\n </>,\n );\n }\n}\n\nexport default createComponent(Breadcrumbs, {\n Item,\n});\n"],"mappings":"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"}
|
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
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}\nexport type BreadcrumbsProps = BoxProps & {\n /**\n * Links divider\n * */\n separator?: React.ReactNode;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}\nexport type BreadcrumbsItemProps = BoxProps &\n KeyboardFocusProps & {\n /** The property is responsible for the activity of the element */\n active?: boolean;\n locale?: string;\n };\n\n/** @deprecated */\nexport interface IBreadcrumbsContext extends BreadcrumbsContext, UnknownProperties {}\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":""}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Breadcrumbs';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Breadcrumbs';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe"}
|
|
@@ -7,6 +7,9 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
10
13
|
|
|
11
14
|
SSeparator {
|
|
12
15
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
@@ -21,9 +24,9 @@ SBreadcrumbs {
|
|
|
21
24
|
SListItem {
|
|
22
25
|
overflow: hidden;
|
|
23
26
|
|
|
24
|
-
/* we need this hack to show
|
|
25
|
-
padding:
|
|
26
|
-
margin: -
|
|
27
|
+
/* we need this hack to show box-shadow over `overflow: hidden` element */
|
|
28
|
+
padding: 3px;
|
|
29
|
+
margin: -3px;
|
|
27
30
|
|
|
28
31
|
SBreadcrumbsItem {
|
|
29
32
|
width: 100%;
|
|
@@ -34,6 +37,9 @@ SBreadcrumbs {
|
|
|
34
37
|
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
35
38
|
text-decoration: none;
|
|
36
39
|
cursor: pointer;
|
|
40
|
+
text-overflow: ellipsis;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
overflow: hidden;
|
|
37
43
|
|
|
38
44
|
&:hover {
|
|
39
45
|
text-decoration: underline;
|
|
@@ -41,6 +47,11 @@ SBreadcrumbs {
|
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
|
|
50
|
+
SBreadcrumbsItem[keyboardFocused] {
|
|
51
|
+
outline: none;
|
|
52
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
|
|
53
|
+
}
|
|
54
|
+
|
|
44
55
|
SBreadcrumbsItem[active] {
|
|
45
56
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
46
57
|
cursor: default;
|
|
@@ -6,12 +6,12 @@ import it from './it.json';
|
|
|
6
6
|
import ja from './ja.json';
|
|
7
7
|
import ko from './ko.json';
|
|
8
8
|
import nl from './nl.json';
|
|
9
|
-
import pl from './pl.json';
|
|
10
9
|
import pt from './pt.json';
|
|
11
|
-
import sv from './sv.json';
|
|
12
10
|
import tr from './tr.json';
|
|
13
11
|
import vi from './vi.json';
|
|
14
12
|
import zh from './zh.json';
|
|
13
|
+
import pl from './pl.json';
|
|
14
|
+
import sv from './sv.json';
|
|
15
15
|
export var localizedMessages = {
|
|
16
16
|
de: de,
|
|
17
17
|
en: en,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","
|
|
1
|
+
{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n nl,\n pt,\n tr,\n vi,\n zh,\n pl,\n sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA;AACF,CAAC"}
|
package/lib/esm/Breadcrumbs.mjs
CHANGED
|
@@ -1,41 +1,44 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
9
|
-
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
10
|
-
import SSeparator from "@semcore/icon/ChevronRight/m";
|
|
11
|
-
import { Text } from "@semcore/typography";
|
|
7
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
9
|
import React from "react";
|
|
10
|
+
import { Box } from "@semcore/flex-box";
|
|
11
|
+
import SSeparator from "@semcore/icon/ChevronRight/m";
|
|
12
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
13
13
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
14
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
14
15
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
15
16
|
var style = (
|
|
16
17
|
/*__reshadow_css_start__*/
|
|
17
18
|
(sstyled.insert(
|
|
18
19
|
/*__inner_css_start__*/
|
|
19
|
-
".
|
|
20
|
+
".___SBreadcrumbs_ngkei_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_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_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SSeparator_ngkei_gg_:last-child{display:none}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_{overflow:hidden;padding:3px;margin:-3px}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (color:color(display-p3 0 0 0)){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__keyboardFocused_ngkei_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_ngkei_gg_ .___SListContainer_ngkei_gg_ .___SListItem_ngkei_gg_ .___SBreadcrumbsItem_ngkei_gg_.__active_ngkei_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}",
|
|
20
21
|
/*__inner_css_end__*/
|
|
21
|
-
"
|
|
22
|
+
"ngkei_gg_"
|
|
22
23
|
), /*__reshadow_css_end__*/
|
|
23
24
|
{
|
|
24
|
-
"__SBreadcrumbs": "
|
|
25
|
-
"__SListContainer": "
|
|
26
|
-
"__SSeparator": "
|
|
27
|
-
"__SListItem": "
|
|
28
|
-
"__SBreadcrumbsItem": "
|
|
29
|
-
"
|
|
25
|
+
"__SBreadcrumbs": "___SBreadcrumbs_ngkei_gg_",
|
|
26
|
+
"__SListContainer": "___SListContainer_ngkei_gg_",
|
|
27
|
+
"__SSeparator": "___SSeparator_ngkei_gg_",
|
|
28
|
+
"__SListItem": "___SListItem_ngkei_gg_",
|
|
29
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_ngkei_gg_",
|
|
30
|
+
"_keyboardFocused": "__keyboardFocused_ngkei_gg_",
|
|
31
|
+
"_active": "__active_ngkei_gg_"
|
|
30
32
|
})
|
|
31
33
|
);
|
|
32
|
-
var Breadcrumbs = /* @__PURE__ */
|
|
34
|
+
var Breadcrumbs = /* @__PURE__ */ function(_Component) {
|
|
35
|
+
_inherits(Breadcrumbs2, _Component);
|
|
36
|
+
var _super = _createSuper(Breadcrumbs2);
|
|
33
37
|
function Breadcrumbs2() {
|
|
34
38
|
_classCallCheck(this, Breadcrumbs2);
|
|
35
|
-
return
|
|
39
|
+
return _super.apply(this, arguments);
|
|
36
40
|
}
|
|
37
|
-
|
|
38
|
-
return _createClass(Breadcrumbs2, [{
|
|
41
|
+
_createClass(Breadcrumbs2, [{
|
|
39
42
|
key: "getItemProps",
|
|
40
43
|
value: function getItemProps() {
|
|
41
44
|
var _this$asProps = this.asProps, separator = _this$asProps.separator, locale = _this$asProps.locale;
|
|
@@ -51,12 +54,13 @@ var Breadcrumbs = /* @__PURE__ */ (function(_Component) {
|
|
|
51
54
|
var SBreadcrumbs = Box;
|
|
52
55
|
var SListContainer = "ol";
|
|
53
56
|
var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, getI18nText = _this$asProps2.getI18nText, Children = _this$asProps2.Children;
|
|
54
|
-
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SBreadcrumbs, _ref3.cn("SBreadcrumbs", _objectSpread({}, assignProps({
|
|
57
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBreadcrumbs, _ref3.cn("SBreadcrumbs", _objectSpread({}, assignProps({
|
|
55
58
|
"aria-label": getI18nText("breadcrumbs")
|
|
56
59
|
}, _ref))), /* @__PURE__ */ React.createElement(SListContainer, _ref3.cn("SListContainer", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
|
|
57
60
|
}
|
|
58
61
|
}]);
|
|
59
|
-
|
|
62
|
+
return Breadcrumbs2;
|
|
63
|
+
}(Component);
|
|
60
64
|
_defineProperty(Breadcrumbs, "displayName", "Breadcrumbs");
|
|
61
65
|
_defineProperty(Breadcrumbs, "style", style);
|
|
62
66
|
_defineProperty(Breadcrumbs, "enhance", [i18nEnhance(localizedMessages)]);
|
|
@@ -66,30 +70,41 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
66
70
|
i18n: localizedMessages,
|
|
67
71
|
locale: "en"
|
|
68
72
|
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
|
|
73
|
+
var Item = /* @__PURE__ */ function(_Component2) {
|
|
74
|
+
_inherits(Item2, _Component2);
|
|
75
|
+
var _super2 = _createSuper(Item2);
|
|
76
|
+
function Item2() {
|
|
77
|
+
_classCallCheck(this, Item2);
|
|
78
|
+
return _super2.apply(this, arguments);
|
|
79
|
+
}
|
|
80
|
+
_createClass(Item2, [{
|
|
81
|
+
key: "render",
|
|
82
|
+
value: function render() {
|
|
83
|
+
var _ref2 = this.asProps, _ref4;
|
|
84
|
+
var SBreadcrumbsItem = Box;
|
|
85
|
+
var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, separator = _this$asProps3.separator, active = _this$asProps3.active, disabled = _this$asProps3.disabled, href = _this$asProps3.href, tabIndex = _this$asProps3.tabIndex, tag = _this$asProps3.tag;
|
|
86
|
+
var SSeparator2 = "div";
|
|
87
|
+
var SListItem = "li";
|
|
88
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SListItem, _ref4.cn("SListItem", {}), /* @__PURE__ */ React.createElement(SBreadcrumbsItem, _ref4.cn("SBreadcrumbsItem", _objectSpread({}, assignProps({
|
|
89
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
90
|
+
"use:href": !active && !disabled ? href : void 0,
|
|
91
|
+
"aria-current": active ? "page" : void 0,
|
|
92
|
+
"use:tag": active ? "span" : tag
|
|
93
|
+
}, _ref2))))), /* @__PURE__ */ React.createElement(SSeparator2, _ref4.cn("SSeparator", {
|
|
94
|
+
"aria-hidden": "true"
|
|
95
|
+
}), separator));
|
|
96
|
+
}
|
|
97
|
+
}]);
|
|
98
|
+
return Item2;
|
|
99
|
+
}(Component);
|
|
100
|
+
_defineProperty(Item, "defaultProps", {
|
|
86
101
|
tag: "a",
|
|
87
|
-
locale: "en"
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
const
|
|
102
|
+
locale: "en"
|
|
103
|
+
});
|
|
104
|
+
_defineProperty(Item, "enhance", [keyboardFocusEnhance()]);
|
|
105
|
+
const Breadcrumbs$1 = createComponent(Breadcrumbs, {
|
|
91
106
|
Item
|
|
92
107
|
});
|
|
93
108
|
export {
|
|
94
|
-
|
|
109
|
+
Breadcrumbs$1 as default
|
|
95
110
|
};
|
|
@@ -7,6 +7,9 @@ SBreadcrumbs {
|
|
|
7
7
|
SListContainer {
|
|
8
8
|
display: contents;
|
|
9
9
|
list-style: none;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
10
13
|
|
|
11
14
|
SSeparator {
|
|
12
15
|
margin: 0 var(--intergalactic-spacing-2x, 8px);
|
|
@@ -21,9 +24,9 @@ SBreadcrumbs {
|
|
|
21
24
|
SListItem {
|
|
22
25
|
overflow: hidden;
|
|
23
26
|
|
|
24
|
-
/* we need this hack to show
|
|
25
|
-
padding:
|
|
26
|
-
margin: -
|
|
27
|
+
/* we need this hack to show box-shadow over `overflow: hidden` element */
|
|
28
|
+
padding: 3px;
|
|
29
|
+
margin: -3px;
|
|
27
30
|
|
|
28
31
|
SBreadcrumbsItem {
|
|
29
32
|
width: 100%;
|
|
@@ -34,6 +37,9 @@ SBreadcrumbs {
|
|
|
34
37
|
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
35
38
|
text-decoration: none;
|
|
36
39
|
cursor: pointer;
|
|
40
|
+
text-overflow: ellipsis;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
overflow: hidden;
|
|
37
43
|
|
|
38
44
|
&:hover {
|
|
39
45
|
text-decoration: underline;
|
|
@@ -41,6 +47,11 @@ SBreadcrumbs {
|
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
|
|
50
|
+
SBreadcrumbsItem[keyboardFocused] {
|
|
51
|
+
outline: none;
|
|
52
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
|
|
53
|
+
}
|
|
54
|
+
|
|
44
55
|
SBreadcrumbsItem[active] {
|
|
45
56
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
46
57
|
cursor: default;
|
|
@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
|
|
|
6
6
|
import ja from "./ja.json.mjs";
|
|
7
7
|
import ko from "./ko.json.mjs";
|
|
8
8
|
import nl from "./nl.json.mjs";
|
|
9
|
-
import pl from "./pl.json.mjs";
|
|
10
9
|
import pt from "./pt.json.mjs";
|
|
11
|
-
import sv from "./sv.json.mjs";
|
|
12
10
|
import tr from "./tr.json.mjs";
|
|
13
11
|
import vi from "./vi.json.mjs";
|
|
14
12
|
import zh from "./zh.json.mjs";
|
|
13
|
+
import pl from "./pl.json.mjs";
|
|
14
|
+
import sv from "./sv.json.mjs";
|
|
15
15
|
var localizedMessages = {
|
|
16
16
|
de,
|
|
17
17
|
en,
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import { BoxProps } from '@semcore/flex-box';
|
|
3
|
+
import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
4
|
|
|
5
|
+
/** @deprecated */
|
|
6
|
+
export interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}
|
|
5
7
|
export type BreadcrumbsProps = BoxProps & {
|
|
6
8
|
/**
|
|
7
9
|
* Links divider
|
|
8
10
|
* */
|
|
9
11
|
separator?: React.ReactNode;
|
|
10
|
-
/** Specifies the locale for i18n support */
|
|
11
12
|
locale?: string;
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
* @default false
|
|
23
|
-
*/
|
|
24
|
-
} & NSText.HintProps & NSText.EllipsisProps;
|
|
15
|
+
/** @deprecated */
|
|
16
|
+
export interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}
|
|
17
|
+
export type BreadcrumbsItemProps = BoxProps &
|
|
18
|
+
KeyboardFocusProps & {
|
|
19
|
+
/** The property is responsible for the activity of the element */
|
|
20
|
+
active?: boolean;
|
|
21
|
+
locale?: string;
|
|
22
|
+
};
|
|
25
23
|
|
|
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": "5.50.0-prerelease.
|
|
4
|
+
"version": "5.50.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
18
|
-
"@semcore/icon": "4.63.0-prerelease.
|
|
19
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
17
|
+
"@semcore/utils": "4.49.0-prerelease.1",
|
|
18
|
+
"@semcore/icon": "4.63.0-prerelease.1",
|
|
19
|
+
"@semcore/flex-box": "5.42.0-prerelease.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
22
|
+
"@semcore/core": "^2.40.0-prerelease.1",
|
|
23
23
|
"react": "16.8 - 18",
|
|
24
24
|
"react-dom": "16.8 - 18"
|
|
25
25
|
},
|