@semcore/breadcrumbs 16.6.0 → 16.6.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/CHANGELOG.md +1 -1
- package/lib/cjs/Breadcrumbs.js +44 -37
- package/lib/cjs/Breadcrumbs.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/breadcrumbs.shadow.css +6 -0
- package/lib/es6/Breadcrumbs.js +43 -36
- package/lib/es6/Breadcrumbs.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/breadcrumbs.shadow.css +6 -0
- package/lib/esm/Breadcrumbs.mjs +37 -29
- package/lib/esm/style/breadcrumbs.shadow.css +6 -0
- package/lib/types/index.d.ts +9 -9
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
package/lib/cjs/Breadcrumbs.js
CHANGED
|
@@ -12,22 +12,21 @@ 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");
|
|
16
15
|
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");
|
|
19
18
|
var _react = _interopRequireDefault(require("react"));
|
|
20
19
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
21
20
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
22
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
21
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBreadcrumbs_18pga_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_:last-child{display:none}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"18pga_gg_"),
|
|
23
22
|
/*__reshadow_css_end__*/
|
|
24
23
|
{
|
|
25
|
-
"__SBreadcrumbs": "
|
|
26
|
-
"__SListContainer": "
|
|
27
|
-
"__SSeparator": "
|
|
28
|
-
"__SListItem": "
|
|
29
|
-
"__SBreadcrumbsItem": "
|
|
30
|
-
"_active": "
|
|
24
|
+
"__SBreadcrumbs": "___SBreadcrumbs_18pga_gg_",
|
|
25
|
+
"__SListContainer": "___SListContainer_18pga_gg_",
|
|
26
|
+
"__SSeparator": "___SSeparator_18pga_gg_",
|
|
27
|
+
"__SListItem": "___SListItem_18pga_gg_",
|
|
28
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_18pga_gg_",
|
|
29
|
+
"_active": "__active_18pga_gg_"
|
|
31
30
|
});
|
|
32
31
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
33
32
|
function Breadcrumbs() {
|
|
@@ -51,7 +50,7 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
51
50
|
value: function render() {
|
|
52
51
|
var _ref = this.asProps,
|
|
53
52
|
_ref3;
|
|
54
|
-
var SBreadcrumbs =
|
|
53
|
+
var SBreadcrumbs = _flexBox.Box;
|
|
55
54
|
var SListContainer = 'ol';
|
|
56
55
|
var _this$asProps2 = this.asProps,
|
|
57
56
|
styles = _this$asProps2.styles,
|
|
@@ -72,36 +71,44 @@ var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
|
72
71
|
i18n: _intergalacticDynamicLocales.localizedMessages,
|
|
73
72
|
locale: 'en'
|
|
74
73
|
});
|
|
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
|
-
|
|
74
|
+
var Item = /*#__PURE__*/function (_Component2) {
|
|
75
|
+
function Item() {
|
|
76
|
+
(0, _classCallCheck2["default"])(this, Item);
|
|
77
|
+
return (0, _callSuper2["default"])(this, Item, arguments);
|
|
78
|
+
}
|
|
79
|
+
(0, _inherits2["default"])(Item, _Component2);
|
|
80
|
+
return (0, _createClass2["default"])(Item, [{
|
|
81
|
+
key: "render",
|
|
82
|
+
value: function render() {
|
|
83
|
+
var _ref2 = this.asProps,
|
|
84
|
+
_ref4;
|
|
85
|
+
var SBreadcrumbsItem = _flexBox.Box;
|
|
86
|
+
var _this$asProps3 = this.asProps,
|
|
87
|
+
styles = _this$asProps3.styles,
|
|
88
|
+
separator = _this$asProps3.separator,
|
|
89
|
+
active = _this$asProps3.active,
|
|
90
|
+
disabled = _this$asProps3.disabled,
|
|
91
|
+
href = _this$asProps3.href,
|
|
92
|
+
tabIndex = _this$asProps3.tabIndex,
|
|
93
|
+
tag = _this$asProps3.tag;
|
|
94
|
+
var SSeparator = 'div';
|
|
95
|
+
var SListItem = 'li';
|
|
96
|
+
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)({
|
|
97
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
98
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
99
|
+
"aria-current": active ? 'page' : undefined,
|
|
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", {
|
|
101
108
|
tag: 'a',
|
|
102
109
|
locale: 'en',
|
|
103
110
|
tabIndex: 0
|
|
104
|
-
};
|
|
111
|
+
});
|
|
105
112
|
var _default = exports["default"] = (0, _core.createComponent)(Breadcrumbs, {
|
|
106
113
|
Item: Item
|
|
107
114
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["_core","require","_i18nEnhance","_interopRequireDefault","_flexBox","_m","_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","_Component2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","tabIndex","SSeparator","SListItem","Fragment","undefined","_default","exports","createComponent"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\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\nclass Item extends Component {\n static defaultProps = {\n tag: 'a',\n locale: 'en',\n tabIndex: 0,\n };\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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","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 { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}\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\n/** @deprecated */\nexport interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}\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\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":"","ignoreList":[]}
|
|
@@ -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);
|
|
@@ -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;
|
package/lib/es6/Breadcrumbs.js
CHANGED
|
@@ -7,22 +7,21 @@ 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';
|
|
11
10
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
12
11
|
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';
|
|
15
14
|
import React from 'react';
|
|
16
15
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
17
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
16
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBreadcrumbs_18pga_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_:last-child{display:none}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}", /*__inner_css_end__*/"18pga_gg_"),
|
|
18
17
|
/*__reshadow_css_end__*/
|
|
19
18
|
{
|
|
20
|
-
"__SBreadcrumbs": "
|
|
21
|
-
"__SListContainer": "
|
|
22
|
-
"__SSeparator": "
|
|
23
|
-
"__SListItem": "
|
|
24
|
-
"__SBreadcrumbsItem": "
|
|
25
|
-
"_active": "
|
|
19
|
+
"__SBreadcrumbs": "___SBreadcrumbs_18pga_gg_",
|
|
20
|
+
"__SListContainer": "___SListContainer_18pga_gg_",
|
|
21
|
+
"__SSeparator": "___SSeparator_18pga_gg_",
|
|
22
|
+
"__SListItem": "___SListItem_18pga_gg_",
|
|
23
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_18pga_gg_",
|
|
24
|
+
"_active": "__active_18pga_gg_"
|
|
26
25
|
});
|
|
27
26
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
28
27
|
var Breadcrumbs = /*#__PURE__*/function (_Component) {
|
|
@@ -68,36 +67,44 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
68
67
|
i18n: localizedMessages,
|
|
69
68
|
locale: 'en'
|
|
70
69
|
});
|
|
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
|
-
|
|
70
|
+
var Item = /*#__PURE__*/function (_Component2) {
|
|
71
|
+
function Item() {
|
|
72
|
+
_classCallCheck(this, Item);
|
|
73
|
+
return _callSuper(this, Item, arguments);
|
|
74
|
+
}
|
|
75
|
+
_inherits(Item, _Component2);
|
|
76
|
+
return _createClass(Item, [{
|
|
77
|
+
key: "render",
|
|
78
|
+
value: function render() {
|
|
79
|
+
var _ref2 = this.asProps,
|
|
80
|
+
_ref4;
|
|
81
|
+
var SBreadcrumbsItem = Box;
|
|
82
|
+
var _this$asProps3 = this.asProps,
|
|
83
|
+
styles = _this$asProps3.styles,
|
|
84
|
+
separator = _this$asProps3.separator,
|
|
85
|
+
active = _this$asProps3.active,
|
|
86
|
+
disabled = _this$asProps3.disabled,
|
|
87
|
+
href = _this$asProps3.href,
|
|
88
|
+
tabIndex = _this$asProps3.tabIndex,
|
|
89
|
+
tag = _this$asProps3.tag;
|
|
90
|
+
var SSeparator = 'div';
|
|
91
|
+
var SListItem = 'li';
|
|
92
|
+
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({
|
|
93
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
94
|
+
"use:href": !active && !disabled ? href : undefined,
|
|
95
|
+
"aria-current": active ? 'page' : undefined,
|
|
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", {
|
|
97
104
|
tag: 'a',
|
|
98
105
|
locale: 'en',
|
|
99
106
|
tabIndex: 0
|
|
100
|
-
};
|
|
107
|
+
});
|
|
101
108
|
export default createComponent(Breadcrumbs, {
|
|
102
109
|
Item: Item
|
|
103
110
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","names":["
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","names":["createComponent","Component","sstyled","Root","i18nEnhance","Box","SSeparator","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","_Component2","_ref2","_ref4","SBreadcrumbsItem","_this$asProps3","active","disabled","href","tabIndex","SListItem","Fragment","_assignProps2","undefined"],"sources":["../../src/Breadcrumbs.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { Box } from '@semcore/flex-box';\nimport SSeparator from '@semcore/icon/ChevronRight/m';\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\nclass Item extends Component {\n static defaultProps = {\n tag: 'a',\n locale: 'en',\n tabIndex: 0,\n };\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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","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 { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}\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\n/** @deprecated */\nexport interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}\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\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":"","ignoreList":[]}
|
|
@@ -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);
|
|
@@ -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;
|
package/lib/esm/Breadcrumbs.mjs
CHANGED
|
@@ -4,11 +4,10 @@ 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 { sstyled, assignProps, Component
|
|
8
|
-
import { Box } from "@semcore/base-components";
|
|
7
|
+
import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
|
|
9
8
|
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";
|
|
12
11
|
import React from "react";
|
|
13
12
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
14
13
|
/*!__reshadow-styles__:"./style/breadcrumbs.shadow.css"*/
|
|
@@ -16,17 +15,17 @@ var style = (
|
|
|
16
15
|
/*__reshadow_css_start__*/
|
|
17
16
|
(sstyled.insert(
|
|
18
17
|
/*__inner_css_start__*/
|
|
19
|
-
".
|
|
18
|
+
".___SBreadcrumbs_18pga_gg_{display:flex;align-items:center;padding:0;margin:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_{display:contents;list-style:none;overflow:hidden;margin:0;padding:0}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SSeparator_18pga_gg_:last-child{display:none}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_{overflow:hidden;padding:4px;margin:-4px}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_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_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));cursor:default}@media (hover:hover){.___SBreadcrumbs_18pga_gg_ .___SListContainer_18pga_gg_ .___SListItem_18pga_gg_ .___SBreadcrumbsItem_18pga_gg_.__active_18pga_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}",
|
|
20
19
|
/*__inner_css_end__*/
|
|
21
|
-
"
|
|
20
|
+
"18pga_gg_"
|
|
22
21
|
), /*__reshadow_css_end__*/
|
|
23
22
|
{
|
|
24
|
-
"__SBreadcrumbs": "
|
|
25
|
-
"__SListContainer": "
|
|
26
|
-
"__SSeparator": "
|
|
27
|
-
"__SListItem": "
|
|
28
|
-
"__SBreadcrumbsItem": "
|
|
29
|
-
"_active": "
|
|
23
|
+
"__SBreadcrumbs": "___SBreadcrumbs_18pga_gg_",
|
|
24
|
+
"__SListContainer": "___SListContainer_18pga_gg_",
|
|
25
|
+
"__SSeparator": "___SSeparator_18pga_gg_",
|
|
26
|
+
"__SListItem": "___SListItem_18pga_gg_",
|
|
27
|
+
"__SBreadcrumbsItem": "___SBreadcrumbsItem_18pga_gg_",
|
|
28
|
+
"_active": "__active_18pga_gg_"
|
|
30
29
|
})
|
|
31
30
|
);
|
|
32
31
|
var Breadcrumbs = /* @__PURE__ */ (function(_Component) {
|
|
@@ -66,27 +65,36 @@ _defineProperty(Breadcrumbs, "defaultProps", {
|
|
|
66
65
|
i18n: localizedMessages,
|
|
67
66
|
locale: "en"
|
|
68
67
|
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
68
|
+
var Item = /* @__PURE__ */ (function(_Component2) {
|
|
69
|
+
function Item2() {
|
|
70
|
+
_classCallCheck(this, Item2);
|
|
71
|
+
return _callSuper(this, Item2, arguments);
|
|
72
|
+
}
|
|
73
|
+
_inherits(Item2, _Component2);
|
|
74
|
+
return _createClass(Item2, [{
|
|
75
|
+
key: "render",
|
|
76
|
+
value: function render() {
|
|
77
|
+
var _ref2 = this.asProps, _ref4;
|
|
78
|
+
var SBreadcrumbsItem = Box;
|
|
79
|
+
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;
|
|
80
|
+
var SSeparator2 = "div";
|
|
81
|
+
var SListItem = "li";
|
|
82
|
+
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({
|
|
83
|
+
"use:tabIndex": active || disabled ? -1 : tabIndex,
|
|
84
|
+
"use:href": !active && !disabled ? href : void 0,
|
|
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", {
|
|
86
94
|
tag: "a",
|
|
87
95
|
locale: "en",
|
|
88
96
|
tabIndex: 0
|
|
89
|
-
};
|
|
97
|
+
});
|
|
90
98
|
const Breadcrumbs_default = createComponent(Breadcrumbs, {
|
|
91
99
|
Item
|
|
92
100
|
});
|
|
@@ -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);
|
|
@@ -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;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type { NSText } from '@semcore/typography';
|
|
1
|
+
import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import type { BoxProps } from '@semcore/flex-box';
|
|
4
3
|
|
|
4
|
+
/** @deprecated */
|
|
5
|
+
export interface IBreadcrumbsProps extends BreadcrumbsProps, UnknownProperties {}
|
|
5
6
|
export type BreadcrumbsProps = BoxProps & {
|
|
6
7
|
/**
|
|
7
8
|
* Links divider
|
|
@@ -11,18 +12,17 @@ export type BreadcrumbsProps = BoxProps & {
|
|
|
11
12
|
locale?: string;
|
|
12
13
|
};
|
|
13
14
|
|
|
15
|
+
/** @deprecated */
|
|
16
|
+
export interface IBreadcrumbsItemProps extends BreadcrumbsItemProps, UnknownProperties {}
|
|
14
17
|
export type BreadcrumbsItemProps = BoxProps & {
|
|
15
18
|
/** The property is responsible for the activity of the element */
|
|
16
19
|
active?: boolean;
|
|
17
20
|
/** Specifies the locale for i18n support */
|
|
18
21
|
locale?: string;
|
|
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;
|
|
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": "16.6.
|
|
4
|
+
"version": "16.6.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/icon": "16.8.
|
|
18
|
-
"@semcore/flex-box": "16.1.
|
|
17
|
+
"@semcore/icon": "16.8.1",
|
|
18
|
+
"@semcore/flex-box": "16.1.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@semcore/base-components": "^16.6.0"
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"directory": "semcore/breadcrumbs"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@semcore/
|
|
30
|
-
"@semcore/
|
|
29
|
+
"@semcore/core": "16.6.0",
|
|
30
|
+
"@semcore/testing-utils": "1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|